Refero Styles vs Design Extractor
Design Extractor builds a DESIGN.md from any public URL you give it. The 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.
Refero Styles is a large, free library of website styles, each with its colors, typography, spacing and components in several formats. New to the format? Read what a DESIGN.md is.
Checked on against styles.refero.design, one of its style pages and its style sitemap. 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
| Refero Styles | Design Extractor | |
|---|---|---|
| Spec compliance | Offers DESIGN.md among its formats. We found no statement about which spec it follows. | 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 are described with roles and measurements. The style page says its HTML examples are reconstructions, not source components. | 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 | We found no description of checks against the live site. | 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 | Not described on the Styles site. You pick from the library. | 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 | A free library of website styles, in beta, from Refero, the UI reference product at refero.design. | A generator: you give it a public URL, it returns that site's DESIGN.md. |
| Any website on demand | No. You choose from the library, which adds new styles every week. | Yes. Paste any public URL and the run starts right away. |
| Coverage | Says 2,000+ design systems; its sitemap listed 1,342 style pages on the day we checked. | Any public website, plus a gallery of pre-extracted brands. |
| Formats per style | DESIGN.md (compact and extended), Tailwind v4, CSS variables and design tokens. | One DESIGN.md, with tokens in the front matter and component recipes in HTML and CSS. |
| Price | Free to browse and copy. We found no pricing on the Styles site. | Prepaid credits, no subscription. Packs start at $5 for 50 credits; a Pro extraction costs 10 credits. |
| Freshness | Snapshots. The Apple style we opened had been extracted on 2026-09-20. | Made from the live site at the moment you run it. |
| Agent access | Each style page links to Refero's MCP for Claude, ChatGPT, Cursor, Codex and more. | A remote MCP server whose extract tool takes any URL, from Claude Code, claude.ai, ChatGPT, Codex, Cursor and other clients. |
| Browser extension | None found on the Styles site. | A Chrome extension that extracts the tab you are on. |
What Refero Styles offers
- A free library of website styles, browsable by mood such as dark mode SaaS or editorial layouts.
- Several formats per style: DESIGN.md (compact and extended), Tailwind v4, CSS variables and design tokens.
- New styles added every week.
- Links to Refero's MCP for Claude, ChatGPT, Cursor, Codex and more.
A library vs any URL on demand
A library covers the sites someone already added to it. Design Extractor reads the live site you name, so it covers your own product, a client, a competitor or a niche brand, as it looks today.
Paste the URL on the home page, or let your agent do it over the MCP server. See finished files, with their recipes and check results, in the gallery.
How to switch from Refero Styles
- Paste the site's URL on the Design Extractor home page and run a Pro extraction.
- Save the result as DESIGN.md in your repository root and keep the pointer in AGENTS.md or CLAUDE.md. Check hand edits with the free DESIGN.md Validator.
- Or let your agent do it: connect the MCP server and ask it to extract the site.
Verdict
Choose Design Extractor if you need a DESIGN.md for any public site, not only the sites in a library, with component recipes checked against the live site. It reads the site as it looks now and follows Google's spec, with a recipe for each component it picks from the page, flagged with the reason when it does not pass. It reaches region-restricted sites. Your agent can run it over MCP.
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.
TypeUI vs Design Extractor
TypeUI's free Chrome extension, which fills its own template from the styles in your tab, compared with a spec-compliant DESIGN.md with component recipes checked against the live site.
FAQ
Refero Styles vs Design Extractor: questions
Short answers about Refero Styles and Design Extractor, checked on 2026-10-14.
On 2026-10-14 browsing and copying styles on styles.refero.design was free, and we found no pricing on the Styles site. Its pages promote Refero's MCP on refero.design.
Not on demand: we found no way to submit your own URL on 2026-10-14. You pick from the library, which adds new styles every week. Design Extractor makes a DESIGN.md from any public URL when you run it.
No. Design Extractor produces one file: a DESIGN.md that follows Google's spec, with tokens in the front matter and each component it picks from the page as a recipe of distilled HTML and CSS. Your coding agent reads it and writes the styles your project uses.
Each component recipe is rendered on its own and compared with the live site: a structural match of its parts against what was measured on the page, and a pixel comparison with a fresh capture of the real element. A recipe that does not pass is flagged with the reason, never shipped as verified.
The site says 2,000+ AI-readable design systems. Its style sitemap listed 1,342 style pages when we checked on 2026-10-14.
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.
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.