# Design Extractor

> Paste any public website URL to get a DESIGN.md from any website. Design Extractor extracts the site's colors, typography, spacing, and components into a plain-text design system document that AI coding agents such as Claude Code, Cursor, GitHub Copilot, Windsurf, and Google Stitch read as a style reference.

Canonical site: https://www.design-extractor.com

## What it does

- Extracts a color palette with semantic roles (primary, secondary, tertiary, neutral)
- Extracts the typography scale: font families, weights, sizes, line heights, and letter spacing
- Extracts the spacing scale and rounded-corner shape tokens
- Extracts component patterns (buttons, chips, inputs) with token references
- Captures brand voice and design rationale as markdown prose
- Works on any publicly accessible website: static sites, SPAs, and server-rendered pages reachable over HTTP or HTTPS
- Two extraction tiers: Lite covers the page you submitted, Pro covers around five pages of the site

## The DESIGN.md output

- One output: a DESIGN.md file that follows Google's DESIGN.md specification (https://github.com/google-labs-code/design.md/blob/main/docs/spec.md). YAML front matter holds machine-readable design tokens (colors, typography, spacing); the markdown body explains the design rationale.
- Eight canonical sections in order: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components, Do's and Don'ts.
- The result page offers Source and Preview views of the file, a Visual system pane, and Copy and Download buttons.
- Signed-in users keep a "My extractions" history where a saved DESIGN.md can be edited, re-extracted, or deleted.
- Drop the DESIGN.md into your repo and your AI agent reads it as a style reference.

## Docs

- [What is DESIGN.md?](https://www.design-extractor.com/docs/design-md): what a DESIGN.md is and where it comes from (Google Stitch, with the open spec published by Google Labs), the two layers (YAML front matter with tokens, markdown body with rationale), the eight canonical sections in order, token types, typography properties and token references, how Claude Code, Cursor, GitHub Copilot and Stitch use the file, DESIGN.md vs AGENTS.md vs README.md, real examples from the gallery, and how to get one.
- [How it works](https://www.design-extractor.com/docs/how-it-works): what happens between pasting a URL and getting a DESIGN.md: capture, sampling, analysis, and the tiers and credits behind it.
- [Docs index](https://www.design-extractor.com/docs): all guides in one place.
- [Full text for LLMs](https://www.design-extractor.com/llms-full.txt): every docs guide and free tool page in one Markdown file, plus the pricing facts and the gallery list.
- [DESIGN.md specification](https://github.com/google-labs-code/design.md/blob/main/docs/spec.md): Google's upstream spec that the DESIGN.md produced by Design Extractor follows.
- [Chrome extension setup guide](https://www.design-extractor.com/docs/extension): install, sign-in reuse, credits and tiers, where results appear, and current limits.
- [MCP server](https://www.design-extractor.com/docs/mcp): connect Claude Code, claude.ai, Claude Desktop, ChatGPT, Codex, Cursor, n8n or the Claude Agent SDK to the MCP server, with the tools, scopes, prices and limits.

## Pages

- [Home](https://www.design-extractor.com/): paste a URL and get a DESIGN.md from any website.
- [DESIGN.md Generator](https://www.design-extractor.com/design-md-generator): create a DESIGN.md from a website URL, with a sample output from the gallery, the steps a run goes through, and answers on cost, limits and using the file with a coding agent.
- [Design Extractor Chrome extension](https://www.design-extractor.com/chrome-extension): what the extension does, how it works in three steps, screenshots, and what it adds over TypeUI's DESIGN.md Style Extractor (a DESIGN.md that follows Google's spec, with component recipes checked against the live site).
- [Gallery](https://www.design-extractor.com/gallery): pre-extracted design specs from sites like Stripe, Linear, and Notion, filterable by category and style. Copy any DESIGN.md instantly.
- Gallery brand pages at https://www.design-extractor.com/gallery/{slug}: one page per extracted brand with its design system, colors, typography, spacing, and component tokens.
- Gallery category pages at https://www.design-extractor.com/gallery/category/{category}: one page per site category with at least two gallery entries (for example /gallery/category/fintech or /gallery/category/saas), listing that category's DESIGN.md examples.
- [Pricing](https://www.design-extractor.com/pricing): prepaid credit packs, no subscription.
- [About](https://www.design-extractor.com/about): what Design Extractor is, who runs it (Magentix Studio, Mannheim, Germany), how extraction works, and how the gallery is made.
- [Contact](https://www.design-extractor.com/contact): email info@design-extractor.com about billing, refunds, bugs, failed extractions, or removing a site from the gallery.
- [Sign up](https://www.design-extractor.com/sign-up) and [Sign in](https://www.design-extractor.com/sign-in): account access for extractions and history.

## Comparisons

Dated comparisons with other DESIGN.md tools. Design Extractor's file follows Google's DESIGN.md spec, ships each component as an HTML and CSS recipe checked against the live site (a structural match and a pixel comparison), and can be extracted from another country when a site blocks some regions. Competitor features and prices are as checked.

- [getdesign.md vs Design Extractor](https://www.design-extractor.com/compare/getdesign-md): a curated collection of ready-made DESIGN.md files (free set, paid private requests, Catalog Pass) compared with a spec-compliant DESIGN.md with verified component recipes from any public URL on demand. Checked on 2026-10-14.
- [designmd.me vs Design Extractor](https://www.design-extractor.com/compare/designmd-me): two generators that turn a URL into a DESIGN.md, compared on spec compliance, component recipes verified against the live site, region-restricted sites, credits per run, extras and agent access. Checked on 2026-10-14.
- [Refero Styles vs Design Extractor](https://www.design-extractor.com/compare/refero-styles): a large free library of website styles (DESIGN.md plus code formats) compared with a spec-compliant DESIGN.md with verified component recipes from any public URL on demand. Checked on 2026-10-14.
- [TypeUI vs Design Extractor](https://www.design-extractor.com/compare/typeui): TypeUI's free, open source DESIGN.md Style Extractor for Chrome (reads computed styles in your tab and fills TypeUI's own template, or writes a SKILL.md) compared with a DESIGN.md that follows Google's spec, with component recipes verified against the live site. Checked on 2026-10-14.
- [All comparisons](https://www.design-extractor.com/compare): the hub that lists every comparison.

## Free tools

Free, no signup, results on the page. Each tool links into the full extraction when you want the whole DESIGN.md.

- [Free design tools](https://www.design-extractor.com/tools): the hub that lists every free tool below.
- [DESIGN.md Validator](https://www.design-extractor.com/tools/design-md-validator): paste a DESIGN.md to check its structure and tokens and preview it. Runs in the browser; the file is not uploaded.
- [Website Font Finder](https://www.design-extractor.com/tools/website-font-finder): enter a public URL to see the fonts one page of a website uses, up to 8 families.
- [Website Color Palette Extractor](https://www.design-extractor.com/tools/website-color-palette): enter a public URL to get up to 12 colors from one page of a website, ready to copy.

## Pricing

- Sign up, then buy a prepaid credit pack. No subscription. Buy a pack once and spend it whenever. Credits never expire.
- Starter: $5 for 50 credits. Plus: $10 for 110 credits (10% bonus). Max: $25 for 300 credits (20% bonus).
- Each extraction spends credits by tier (Lite or Pro); the current per-run cost is shown on the pricing page and in the product.
- Re-opening an extraction you already paid for costs nothing, nor does browsing the gallery and shared results. A re-extraction is a new, priced extraction. If an extraction fails on our side, the credits are refunded.

## Chrome extension

- One click sends the tab you are on through the same extraction as the form on the home page, in Lite or Pro, for the same credits.
- Reuses the session you signed in with on the site: no separate login. The popup shows your credit balance.
- The finished DESIGN.md opens on the site and appears in My extractions. Reading, editing, copying, and downloading happen on the site, not in the popup.
- Public pages only: pages behind a login, on localhost, or on a private network are not supported yet.
- Chrome Web Store listing: https://chromewebstore.google.com/detail/design-extractor-designmd/nabnjgklaghlhdidncoeajhapndacick
- Overview and screenshots: https://www.design-extractor.com/chrome-extension
- Setup guide (install, sign-in, credits, limits): https://www.design-extractor.com/docs/extension

## MCP server

- Design Extractor is a remote MCP server at https://www.design-extractor.com/api/mcp (streamable HTTP). Any MCP client can start an extraction and read the resulting DESIGN.md with the same account and credits as the site.
- Two ways to connect. Sign in: claude.ai, Claude Desktop, ChatGPT and Claude Code discover the server, open the site's consent page, and hold a short-lived token; no key to paste. API key: create a personal key on the account page and send it as `Authorization: Bearer dx_...`; this is the path for Codex, Cursor, n8n, the Claude Agent SDK and scripts.
- Tools: get_pricing (credit cost per tier), get_credits (your balance), extract_design (start a run for a URL, Lite or Pro, spends credits; an optional two-letter country retries a run that failed with a regional restriction through a browser in that country, at the tier price plus a surcharge), get_extraction (status while running, then the DESIGN.md text; takes the site name, so users never handle ids; a failed run after a regional block lists suggestedCountries), list_my_extractions (your library, newest first). Resource template designmd://{publicId} returns a document as text/markdown.
- A run takes at least a minute; agents wait about 60 seconds and then poll every 25 seconds. The same public-pages-only limit as the site applies.
- Plugin for Claude Code and Codex from the public marketplace repo Magentix-Studio/design-extractor-plugin, including a skill that applies a DESIGN.md to a codebase.
- Connect snippets for every client: https://www.design-extractor.com/docs/mcp
- Discovery: the MCP Server Card at https://www.design-extractor.com/api/mcp/server-card, linked from the AI Catalog at https://www.design-extractor.com/.well-known/ai-catalog.json; https://www.design-extractor.com/.well-known/mcp.json also lists the tools with their input schemas.

## Optional

- [Privacy](https://www.design-extractor.com/privacy): privacy policy.
- [Terms](https://www.design-extractor.com/terms): terms of service, including how credits are consumed.
- [Refunds](https://www.design-extractor.com/refunds): refund policy.
- [Imprint](https://www.design-extractor.com/imprint): legal notice.