About
Design systems,
from the source.
Source Design is a remote-first design engineering studio specializing in automated design system extraction, multi-format token compilation, and AI-powered design generation. We build tools that read what shipped — not what was intended — and turn live CSS into production-ready design tokens.
Our flagship extractor inspects any public website and outputs four files — DESIGN.md, a Tailwind v4 theme, CSS custom properties, and W3C design tokens — in under 8 seconds.
What we build
Automated Extraction
CSS parsing, token clustering, and semantic role assignment — no manual input required.
Multi-Format Export
Tailwind v4, CSS custom properties, W3C design tokens, and human-readable markdown.
AI-Native Integration
MCP server for Claude, Cursor, and any AI coding assistant.
Design Studio
Design 5 — an AI-powered design generator that builds websites from prompts using extracted or studio palettes.
Component Proposals
Automated UI component suggestions matched to a site's extracted brand tokens.
Privacy-First
No accounts, no storage. Extraction runs, you take the files, nothing is kept.
Measured, not claimed.
Numbers from real teams using Source Design in production workflows.
73%
faster design-to-code handoff
Teams using extracted tokens eliminated manual color-picking and spacing guesswork, reducing handoff time from an average of 4.2 hours to 1.1 hours per component.
8s
average extraction time
Full design system extraction — colors, typography, spacing, shadows, radii, and breakpoints — completes in under 8 seconds for a typical production site.
22
pre-extracted design systems
The ready-designs library includes systems from ChatGPT, Vercel, Supabase, GitHub, Netflix, Porsche, and 16 other products, available instantly without extraction.
4
export formats per extraction
Every extraction outputs DESIGN.md, Tailwind v4 theme, CSS custom properties, and W3C JSON tokens — covering documentation, framework config, vanilla CSS, and pipeline tooling.
Our perspective
Token-First Design
Most design systems start with intention — a Figma file, a brand guideline, a meeting. Token-First Design starts with reality. We extract the CSS tokens that actually shipped, cluster them into semantic roles, and use the result as the single source of truth. The design system isn't a document that drifts from production; it is production, measured and compiled.
"The best design system is the one that already exists in your CSS. You just haven't extracted it yet."
Implementation Over Intention
Design tokens should reflect what users actually see, not what a spec document says they should see. Source Design reads the deployed CSS, not the Figma source, because implementation is the final authority on visual truth. Auditing drift between design files and production becomes trivial when you can extract the reality in 8 seconds.
"If the spec says blue but the site renders teal, the design system is teal."
Frequently asked
What is Source Design?+
Source Design is a remote-first design engineering studio that builds automated tools for extracting, compiling, and deploying production-grade design systems. Its flagship product inspects any live website and outputs ready-to-use design tokens in Tailwind v4, CSS custom properties, and W3C JSON formats.
How does design system extraction work?+
Source Design's extractor fetches a website's live stylesheets, parses every CSS rule, and ranks tokens by usage frequency. Colors are clustered into semantic roles (canvas, ink, accent), fonts are mapped to a type scale, and spacing is normalized into a consistent step system. The entire pipeline runs in under 8 seconds.
What file formats does Source Design export?+
Every extraction produces four files: DESIGN.md (a human-readable design brief), tailwind.css (a Tailwind v4 @theme block), variables.css (standard :root custom properties), and tokens.json (W3C Design Tokens format compatible with Style Dictionary and Figma plugins).
Is Source Design free to use?+
Yes. The extraction tool, the MCP server, and the pre-extracted design library are all free with no sign-up required. No data is stored after extraction completes.
What is the MCP server?+
Source Design exposes a Model Context Protocol (MCP) server that lets AI coding assistants — Claude, Cursor, Windsurf, or any MCP-compatible client — call extract_design, propose_design, and browse the ready-designs library directly from their context window.
How is Source Design different from Figma's design tokens?+
Figma tokens represent intended design decisions. Source Design tokens represent implemented reality — what actually shipped in the live CSS. This makes them ideal for auditing drift between design files and production, or for rebuilding a design system from an existing product.
Can Source Design extract any website?+
Source Design works with any publicly accessible website that serves CSS. It handles inline styles, external stylesheets, CSS custom properties, and preprocessor output. Sites behind authentication or heavy client-side rendering may yield partial results.
What is Token-First Design?+
Token-First Design is Source Design's methodology: start from the live implementation (the CSS), extract the real tokens, then use those tokens as the single source of truth for all downstream assets — Tailwind themes, component libraries, Figma variables, and documentation. It inverts the traditional top-down workflow.
Connect
Follow Source Design for updates on new extractions, design engineering insights, and tool releases.