Design Extractor Chrome Extension
Design Extractor’s Chrome extension turns the website in your current tab into a DESIGN.md: a design system file with the site’s colors, typography, spacing, shapes and component rules, written for coding agents like Claude Code, Cursor and Copilot. One click in the toolbar, no URL to paste.
Free to install. Each extraction spends credits from your prepaid balance, at the same price as on the site.
What it does
A DESIGN.md from the tab you are on
Extracts the page in your tab
One click sends the address of the tab you are on through the same extraction as the form on the home page. Pro also samples the site's key pages, so the result reflects the site, not one screen.
Writes a full design system
YAML tokens for colors, typography, spacing and shapes, plus the eight sections of the DESIGN.md format: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components, and Do's and Don'ts.
A recipe for each component
The components it picks from the page, such as the header, buttons, inputs and cards, each ship as distilled HTML and CSS, checked against the live site or flagged with the reason.
Same account, same credits
The extension reuses the session you have on design-extractor.com. No second login, and the popup shows your credit balance.
How it works
Three steps from tab to DESIGN.md
Add it to Chrome and pin it
Install it from the Chrome Web Store and pin it from the puzzle icon. It asks for access to design-extractor.com and the active tab, nothing else. Sign in on the site once; the popup uses that session.
Open a public page and click Extract this page
Pick a tier in the popup and start the run. Progress shows in the popup while it runs, and you can keep browsing.
Open the DESIGN.md
Open result takes you to the DESIGN.md on the site. It is also saved in My extractions, where you copy, download or edit it before you drop it into your repo.
Install details, sign-in, credits and current limits are in the extension setup guide. Prefer pasting a URL? The same extraction runs from the home page.
Compared
What it adds over TypeUI’s DESIGN.md Style Extractor
TypeUI’s DESIGN.md Style Extractor is a free, open source extension that fills TypeUI’s own template with the styles of the page in your tab. Design Extractor’s extension adds:
A DESIGN.md that follows Google's spec
Tokens in the YAML front matter and the canonical sections in the spec’s order. Check any file with the free DESIGN.md Validator.
A recipe for each component it picks
Distilled HTML and CSS for the header, buttons, inputs, cards and more, each checked against the live site with a structural match and a pixel comparison, or flagged with the reason.
Region-restricted sites
When a site blocks visitors from some countries, the run can go through a browser in another country. A country run costs the Pro price plus a 6-credit surcharge (16 credits).
The same account and credits as the site
Every run is saved in My extractions, where you edit, copy or download it, and your agent can read it over MCP.
Checked on against its version 0.4.0, its README and source code and its Chrome Web Store listing.
| Aspect | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| How it reads the site | Our servers open the page's address in a browser and analyze the rendered page. Pro also samples the site's key pages. | Reads the computed styles of up to 280 visible elements on the page open in your tab, inside your browser. |
| What the output follows | Google's DESIGN.md spec: tokens in the YAML front matter and the canonical sections in the spec's order. | TypeUI's own DESIGN.md template (Mission, Brand, Style Foundations, Rules and more), with no YAML front matter, or a SKILL.md. |
| Components | A recipe of distilled HTML and CSS for each component it picks from the page, checked against the live site with a structural match and a pixel comparison, or flagged with the reason. | A count per component type under general component guidance. We found no comparison of the output with the rendered page. |
| Where the result goes | Saved to My extractions on the site, where you can edit, copy or download it. | Shown in the popup, where you copy it or download it as a file. |
| Pages it can read | Public pages only. Pages behind a login, on localhost or on a private network are not supported yet. | The page open in your tab, including pages you are signed in to, since it reads that page directly. |
| Price | Free to install. Extractions spend prepaid credits. | Free and open source (MIT). |
Choose Design Extractor’s extension if you need a DESIGN.md that follows Google’s spec, with a recipe for each component checked against the live site, saved to your account. The full comparison is on TypeUI vs Design Extractor.
FAQ
Chrome extension questions
Short answers about installing the extension, what it sends and what it costs.
Installing it is free. Each extraction spends credits from your prepaid balance at the same price as on the site. Packs start at $5 for 50 credits, there is no subscription, and credits never expire. If an extraction fails on our side, the credits are refunded.
Only the address of the current tab and the tier you picked, when you click Extract this page. It never reads the content of the page, does not run in the background on the pages you visit, and contains no analytics.
Not yet. Our servers capture the page from its address, so the page has to be public. Pages behind a login, on localhost or on a private network are not supported. The extension is available for Chrome only.
No. The popup reuses the session you signed in with on design-extractor.com. Signed out, it shows a Sign in button that opens the site. Signing out in the popup signs you out of the site as well.
Any agent that reads files from your repo. Save the DESIGN.md next to your code and point Claude Code, Cursor, GitHub Copilot, Codex, Windsurf or Google Stitch at it as the style reference for new UI.
Extensions such as TypeUI's DESIGN.md Style Extractor read computed styles in your browser and fill their own template with the values. Design Extractor writes a DESIGN.md that follows Google's spec, with a recipe of HTML and CSS for each component it picks from the page, checked against the live site or flagged with the reason, and saves it to your account.
Get a DESIGN.md from the tab you are on
Free to install. Each extraction spends credits from your prepaid balance, at the same price as on the site.