TypeUI vs Design Extractor
TypeUI's DESIGN.md Style Extractor is a free Chrome extension that reads the styles of the page in your tab and fills TypeUI's own DESIGN.md template. Design Extractor's file follows Google's DESIGN.md spec and ships each component it picks from the page as an HTML and CSS recipe your coding agent can rebuild. Each recipe is checked against the live site or flagged with the reason. It also works on sites that only answer visitors from certain countries.
New to the format? Read what a DESIGN.md is first.
Checked on against the extension's README and source code, its Chrome Web Store listing and TypeUI's README. Offers and prices change, so check their site before you decide.
Why Design Extractor
Follows Google's DESIGN.md spec
The YAML front matter uses only the properties the spec defines, with no custom top-level keys. The canonical sections come in the spec's order, from Overview to Do's and Don'ts. Component entries in the front matter use only the spec's eight properties, with literal values. Check any file with the free DESIGN.md Validator.
A recipe for each component it picks from the page
The header, footer, buttons, inputs, cards and other components picked from the page each ship as a recipe: distilled HTML and CSS with literal values, inside the Components section of the DESIGN.md. Each recipe lists its parts and the hover and focus states seen on the site, so your coding agent can rebuild the component instead of guessing it.
Verified against the live site
Each recipe is rendered on its own and checked against the live site: a structural match of the rendered parts against what was measured on the page, and a pixel comparison with a fresh capture of the real element. A recipe that fails is rebuilt and checked again. One that still does not pass is flagged with the reason, never shipped as verified. The result page shows how closely the components match and how many of the site's colors and text styles are covered: see Stripe in the gallery.
Works on region-restricted sites
Some sites only answer visitors from certain countries. When a run fails that way, the result page offers a country picker, with the countries the page was found to load from first, and runs the same extraction through a browser in the country you choose. A country run costs the Pro price plus a 6-credit surcharge (16 credits). If the extraction fails, we refund your credits.
Side by side
| TypeUI | Design Extractor | |
|---|---|---|
| Spec compliance | Its README says the file is based on the open-source TypeUI DESIGN.md format. We found no statement that it follows Google's DESIGN.md spec. | Follows Google's DESIGN.md spec: front matter with only the spec's properties and no custom top-level keys, the canonical sections in the spec's order, and component entries limited to the spec's eight properties with literal values. |
| Component recipes | Components appear as a count per type (buttons, links, inputs, cards, navigation, lists, tables) under general component guidance. | Each component it picks from the page, such as the header, footer, buttons, inputs and cards, ships as a recipe: distilled HTML and CSS in the Components section, so your coding agent can rebuild it. |
| Verified against the live site | Its code checks that the generated file has the template's sections. We found no comparison of the output with the rendered page. | Yes. Each recipe is rendered on its own and checked against the live site: a structural match of its parts and a pixel comparison. A component that does not pass is flagged with the reason, never shipped as verified. |
| Region-restricted sites | Reads the page as your browser loads it. We found no option to load a page from another country. | Yes. When a site blocks visitors from some countries, the failed run offers a country picker, with the countries the page loads from first, and runs the same extraction through a browser there. A country run costs the Pro price plus a 6-credit surcharge (16 credits). |
| What it is | DESIGN.md Style Extractor, a free Chrome extension by Bergside SRL, the maker of TypeUI. Version 0.4.0, about 40,000 users on the Chrome Web Store, open source under the MIT license. | A generator: give it a public URL on the site, over MCP or from the Chrome extension, and get that site's DESIGN.md. |
| What the output follows | TypeUI's own DESIGN.md template: Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules and more, with no YAML front matter. It can also write a SKILL.md. | Google's DESIGN.md spec: tokens in the YAML front matter and the canonical sections in the spec's order. |
| How it reads the site | Reads the computed styles of up to 280 visible elements on the page in your tab, inside your browser, with no network requests. | Our servers open the URL in a browser and analyze the rendered page. Pro also samples the site's key pages. |
| Pages it can read | The page open in your tab, including pages you are signed in to. | Public pages only. Pages behind a login, on localhost or on a private network are not supported yet. |
| Where the result goes | Shown in the popup, where you copy it or download it. A Quick install button writes the SKILL.md into the Claude Code, Codex or Cursor skills folder of a project you pick. | Saved to My extractions in your account, where you edit, copy or download it. Your agent can read it over MCP. |
| Price | Free. No account or payment. | Prepaid credits, no subscription. Packs start at $5 for 50 credits; a Pro extraction costs 10 credits. The gallery and the free tools cost nothing. |
| Agent access | The extension runs from its popup. TypeUI's separate CLI and hosted MCP server serve its curated design skills and UI prompts. | A remote MCP server whose extract tool takes any URL, from Claude Code, claude.ai, ChatGPT, Codex, Cursor and other clients. |
What TypeUI offers
- A free, open source (MIT) Chrome extension with about 40,000 users on the Chrome Web Store, with no account or payment.
- Runs entirely in your browser on the page in your tab, including pages you are signed in to.
- Typography, colors, spacing, radius, shadows and motion values in a DESIGN.md in TypeUI's own format, or a SKILL.md.
- Copy or download the file from the popup, or Quick install the SKILL.md into a Claude Code, Codex or Cursor project.
- Beyond the extension, TypeUI offers curated design skills, UI prompts, an open source CLI and a hosted MCP server, plus a paid Pro version that its README says adds enhanced design skill files, UI prompts for layouts and a private Discord community.
Where they differ
TypeUI's extension summarizes the style values it finds on one page and adds general guidance from its template. Design Extractor renders the site, picks its components and writes a recipe for each one, then checks every recipe against the live site, so your agent knows which components it can rebuild as written and which were flagged, with the reason. See it on Stripe in the gallery.
Prefer starting from the tab you are on? The Design Extractor Chrome extension sends it through the same extraction, with the same account and credits. Your agent can also start a run and read the result over the MCP server. See more finished files in the gallery.
How to switch from TypeUI
- Paste the site's URL on the Design Extractor home page, or click Extract this page in the Chrome extension, and run a Pro extraction.
- Save the result as DESIGN.md in your repository root, replacing the old file. Your pointer in AGENTS.md or CLAUDE.md keeps working.
- If you used Quick install, delete the design-system skill folder TypeUI wrote and keep your DESIGN.md pointer.
- To let your agent run extractions itself, connect the MCP server.
Verdict
Choose Design Extractor if you need a DESIGN.md that follows Google's spec, with a recipe for each component it picks from the page, each checked against the live site or flagged with the reason, saved to your account. It reaches region-restricted sites.Your agent can run it over MCP. TypeUI's extension is free and reads pages you are signed in to, as the table shows.
Other comparisons
getdesign.md vs Design Extractor
A curated collection of ready-made DESIGN.md files compared with a spec-compliant DESIGN.md, with component recipes checked against the live site, from any URL.
designmd.me vs Design Extractor
Two URL-to-DESIGN.md generators compared on spec compliance, component recipes, checks against the live site and price.
Refero Styles vs Design Extractor
A large free library of website styles compared with a spec-compliant DESIGN.md, with component recipes checked against the live site, from any URL.
FAQ
TypeUI vs Design Extractor: questions
Short answers about TypeUI and Design Extractor, checked on 2026-10-14.
Yes. On 2026-10-14 the extension was free and open source under the MIT license, with no account or payment. Design Extractor is not free: extractions spend prepaid credits, with packs from $5 for 50 credits and 10 credits for a Pro extraction. The gallery and the free tools cost nothing.
Its README says the file is based on the open-source TypeUI DESIGN.md format, with sections such as Mission, Brand, Style Foundations and Rules, and version 0.4.0 writes no YAML front matter. We found no statement that it follows Google's spec. Design Extractor follows Google's spec, and the free DESIGN.md Validator checks any file against it.
A DESIGN.md that follows Google's spec, with tokens in the front matter and each component it picks from the page, such as the header, footer, buttons, inputs and cards, as a recipe of distilled HTML and CSS. Each recipe is checked against the live site with a structural match and a pixel comparison, and one that does not pass is flagged with the reason.
Yes. It reads the page in your tab inside your browser, so it works on pages you are signed in to. Design Extractor reads public pages only: pages behind a login, on localhost or on a private network are not supported yet.
Design Extractor can run the extraction from another country. After a run fails that way, the result page offers a country picker, with the countries the page loads from first, and runs the same extraction through a browser there. A country run costs the Pro price plus a 6-credit surcharge (16 credits). If the extraction fails, we refund your credits.
Yes. Both produce a DESIGN.md that sits in your repository, so your agent setup stays the same. Run the site through Design Extractor, on the site or with its Chrome extension, and replace the file. If you used Quick install, delete the design-system skill folder TypeUI wrote and keep your DESIGN.md pointer.
Get a DESIGN.md for the site you need
Paste any public URL. Pro samples the site's key pages and returns a spec-compliant DESIGN.md with component recipes checked against the live site.