Source Design

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 pre-extracted design systems. Get standard variables, Tailwind configurations, or W3C tokens instantly.

ChatGPT

chatgpt

View tokens →

Vercel

vercel

View tokens →

Supabase

supabase

View tokens →

Perplexity

perplexity

View tokens →

Hugging Face

huggingface

View tokens →

Midjourney

midjourney

View tokens →
Browse all 22 ready designs↗

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.