Design,
extracted.
Paste a URL. Get the site's colors, type, spacing, and shadows back as four files you can actually use.
Four files, mined from the site's real CSS.
Colors, type scale, spacing, radii, shadows, and breakpoints come from the page and its stylesheets, ranked by how often they appear. Not a screenshot guess.
DESIGN.md
A readable design doc: palette, type, spacing, radii, shadows, breakpoints.
tailwind.css
A Tailwind v4 @theme block. Drop it into a project, tokens become utilities.
variables.css
Plain :root custom properties. Works with any framework or none.
tokens.json
W3C Design Tokens format, for Figma plugins and Style Dictionary.
Or skip the wait.
Browse the Live Library: real websites in categories, each one click from its design system. Pre-extracted entries open instantly.
ChatGPT
chatgpt
Vercel
vercel
Supabase
supabase
Perplexity
perplexity
Hugging Face
huggingface
Midjourney
midjourney
Also an MCP server.
Every tool on this site — extract, propose, and the ready-designs library — is callable from Claude, Cursor, or any MCP client.
MCP URL
https://source--design.vercel.app/api/mcp
{
"mcpServers": {
"source-design": {
"url": "https://source--design.vercel.app/api/mcp"
}
}
}tools: extract_design · propose_design · list_ready_designs · get_ready_design
No sign-up. No storage.
The extraction runs, you take the files, nothing is kept.
Common questions
Answers in plain language — for humans, search engines, and the models reading this page.
What formats does Source Design export?+
Source Design exports four files from every extraction: DESIGN.md (a human-readable design document covering palette, type scale, spacing, radii, shadows, and breakpoints), a Tailwind CSS v4 @theme block you can drop straight into a stylesheet, CSS custom properties declared inside :root for vanilla CSS or any framework, and W3C design tokens in JSON compatible with Style Dictionary and Figma token plugins.
Is Source Design free?+
Yes. The extraction tool, the MCP server, the CLI, the Claude skill, and all 22 pre-extracted design systems are free to use with no sign-up required.
What is the MCP server?+
The MCP (Model Context Protocol) server at https://source--design.vercel.app/api/mcp lets AI coding assistants call four tools directly: extract_design (extract a live site's tokens), propose_design (suggest component upgrades matching the brand), list_ready_designs (browse the 22 pre-extracted systems), and get_ready_design (fetch one by slug). It works with Claude, ChatGPT, Cursor, and Claude Code via SSE or HTTP transport.
How long does an extraction take?+
A full design system extraction completes in under 8 seconds for a typical production website. The pipeline fetches live stylesheets, parses every CSS rule, clusters values into semantic roles, and compiles all four export files.
What is Token-First Design?+
Token-First Design is Source Design's methodology. Instead of writing a design spec and hoping production matches, it starts from the live CSS of a deployed product. Tokens are extracted from what actually shipped — colors ranked by usage frequency, fonts mapped to a type scale, spacing normalized into a progression — and compiled into a single source of truth. If the spec says blue but the site renders teal, the design system is teal.
Does Source Design store my data?+
No. The extraction runs, you take the files, nothing is kept. There is no sign-up and no storage. Source Design does not retain any submitted URLs, extracted CSS, or generated token files after the response is delivered.