How-To Guide

How to Extract a Design System from Any Website

Every site encodes its visual decisions in CSS — colors, type scales, spacing, and component patterns. Here are three methods to surface and document those decisions, from a manual 8–20 hour DevTools audit to an automated extraction that takes a few minutes.

Updated June 2026·12 min read

What "extracting a design system" actually means

Extracting a design system means reverse-engineering the visual specification from a live website. Specifically, you are looking for:

Color palette — every intentional hex or rgb value: brand colors, semantic colors (success, error, warning), surface colors, text colors
Typography scale — font families, sizes, weights, and line heights for each text role (display, heading, body, caption, label)
Spacing scale — the padding and gap values the site uses consistently, usually multiples of 4px or 8px
Border radius — how rounded buttons, cards, inputs, and modals are
Shadows and elevation — box-shadow values for different depth levels
Component patterns — how buttons, cards, nav, and forms are structured and styled

The goal is a structured, reusable document — not a screenshot. Screenshots are useful for visual reference but cannot be consumed by code, design tools, or AI coding agents. Structured tokens can.

Method 1: Manual extraction with Chrome DevTools

Free · 8–20 hours · Works on any site

DevTools gives you direct access to the computed styles of every element. It is the most thorough method and works even on authenticated or private pages — but it is slow.

Step 1: Surface CSS custom properties

Open DevTools (F12 or Cmd+Option+I), select the root <html> element in the Elements panel, and switch to the Computed tab. Filter for -- to list every CSS custom property defined at root scope. Well-maintained codebases publish their design tokens here directly.

/* Example: what you find at :root */
--color-primary: #0F172A;
--color-accent: #6366F1;
--font-size-base: 16px;
--spacing-unit: 4px;
--radius-md: 8px;

If the site uses CSS custom properties, you can copy this entire block and you have most of your tokens already.

Step 2: Run CSS Overview for color audit

Open More tools → CSS Overview and click Capture overview. This gives you every unique color used on the page, font usage by weight and size, and unused declarations. It surfaces colors that live outside custom properties: inline styles and hardcoded values in component stylesheets.

Step 3: Document the type scale

Inspect each heading level (h1–h4) and body text block. For each, record:

font-family (use the Computed tab, not Styles — computed shows the actual resolved value)
font-size in px
font-weight as a number (400, 500, 600, 700, 800)
line-height as a unitless ratio (1.2, 1.4, 1.6)
letter-spacing if non-zero

Step 4: Map the spacing scale

Select a card or section component. Open the Box Model panel (in the Computed tab) and record the padding values. Most design systems converge on a base unit. If you see values like 8, 16, 24, 32, 48, 64 — that is an 8px base. Values like 4, 8, 12, 16, 20, 24 are a 4px base.

Step 5: Capture border radius and shadows

Inspect buttons, cards, inputs, and modals. Record every unique border-radius and box-shadow value. Most sites use three to five radius values and two to three shadow tiers.

Step 6: Organize findings into a structured output

Compile everything into a DESIGN.md file or a design-tokens.json in DTCG format. A plain text file committed to your repo is immediately usable by every contributor and every AI coding agent — no design tool access required.

Time estimate

For a typical SaaS marketing site: color audit (30 min), type scale (1 hour), spacing (2–3 hours including verification across multiple components), components (3–6 hours), writing structured output (1–2 hours). Total: 8–12 hours for a competent developer moving at pace. Complex or inconsistent sites take longer.

When manual is the right choice: You need to extract from an authenticated page, an intranet, or a site that actively blocks crawlers. Manual DevTools is the only method that always works.

Method 2: Browser extensions, desktop tools, and CLI scrapers

Free–$49 · 1–3 hours · Partial automation

Several tools automate parts of the extraction without requiring you to write code. None produce a complete, machine-readable token set on their own.

Superposition

A native Mac desktop app that crawls a URL and extracts colors and typography. Produces a browsable visual inventory. Strong for visual auditing; export options are limited and the output is not in a format AI coding agents can consume directly. Best for designers doing manual audits.

CSS Stats

A free web tool (cssstats.com) that gives statistical analysis of a page's stylesheet — color counts, font stacks, specificity charts. Useful for understanding design complexity before extraction. Not exportable as structured tokens.

Stylify Me

A Chrome extension that shows a quick visual summary of a page's style choices. Good for fast competitive research. Does not produce files you can drop into a codebase.

Dembrandt (CLI)

An open-source Node.js CLI tool that scrapes a URL and outputs a basic color and typography summary as JSON. Useful as a starting point for teams comfortable in the terminal. Fair caveat: output is raw and unsorted — you'll need to manually curate the values into a design token schema. Spacing and component data are not extracted.

designlang.app

A web-based tool focused on extracting and visualizing design language from live websites — colors, fonts, and layout patterns surfaced in a shareable report. Good for design-team presentations and audit snapshots. Like Superposition, the output is visual rather than developer-consumable; you won't get a DTCG JSON file or CSS variables file to commit to your repo.

The gap these tools leave: They give you a visual inventory or partial raw data, not a structured token set. You still need to manually transcribe the output into a usable format. For developers building with AI coding agents, none of these tools produce DTCG JSON, CSS custom properties, or Tailwind config directly — and none generate a DESIGN.md file an agent can load as context.

Method 3: URL-based automated extraction

Free to try · A few minutes · Full token output

MYDESIGN.MD fetches the URL, runs CSS extraction, DOM inspection, screenshot analysis, and font detection in parallel, then assembles the results into a structured token package.

How it works

Paste a public URL into the extractor on the homepage
Extraction runs in parallel — CSS parsing, visual screenshot analysis, font detection, component pattern recognition, and audit
Eight output artifacts are generated — all structured, all ready to use without manual editing

What you get

DESIGN.md

Structured markdown with every design token — readable by humans and AI agents

design-tokens.json

Design Token Community Group (DTCG) format — compatible with Style Dictionary, Theo, and Token Transformer

variables.css

CSS custom properties file — drop into any project and use immediately

tailwind.config.v4.css

Tailwind v4 config with extracted tokens mapped to Tailwind's theme system

AUDIT.md

Design consistency report — inconsistencies flagged, improvement recommendations included

SKILL.md

AI agent skill file — pre-formatted instructions for Claude Code, Cursor, and Copilot

When this is the right choice: Any publicly accessible URL. Fast iteration on multiple sites. Feeding design context into AI coding agents. Documenting an existing product codebase before a rebrand or design system formalization.

What to do with extracted design tokens

Feed them into AI coding agents

This is where the tokens pay off immediately. AI coding agents (Claude Code, Cursor, GitHub Copilot, Windsurf) generate UI that matches a design system when you give them the token values as context. Without this, generated code uses generic defaults that need manual correction.

Add your DESIGN.md to your project root. In Claude Code, reference it in CLAUDE.md. In Cursor, add it to .cursorrules. The agent reads the structured values and applies them when writing or editing components.

Add to your project repository

Commit DESIGN.md, design-tokens.json, and variables.css to your repo. This makes the design specification version-controlled, searchable, and available to every contributor — without requiring access to Figma or a design tool.

Import into Tailwind

The extracted tailwind.config.v4.css file can be imported directly into your Tailwind v4 setup. Your extracted brand colors, type scale, and spacing values become first-class Tailwind utilities immediately.

Use as a design audit baseline

The AUDIT.md output flags inconsistencies in the source site — duplicate color values, type sizes that fall outside the scale, spacing values that break the grid. Use this as the starting point for a design cleanup sprint before building new components.

Frequently asked questions

What is a design system?

A design system is the set of reusable decisions that define how a product looks and behaves: its color palette, typography scale, spacing values, component patterns, and interaction behaviors. These decisions are typically encoded in CSS variables, design tokens (JSON), and component libraries. Extracting a design system means surfacing and documenting those decisions from a live site.

Why would I want to extract a design system from a website?

Common reasons:

You are rebuilding or cloning a site and need the exact visual specification
You are documenting an existing product that was built without a formal design system
You are feeding design context into AI coding agents so generated UI matches your brand
You are auditing a site for design consistency before a rebrand
You are building a component library and need a source-of-truth token set

How long does manual design system extraction take?

A thorough manual extraction using DevTools takes 8–20 hours for a typical marketing or SaaS site. This includes color audit, typography documentation, spacing scale mapping, component inventory, and writing the output into a shareable format. Automated tools reduce this to under a minute.

What tools can automatically extract a design system from a website?

MYDESIGN.MD extracts a full design system package from any public URL and outputs DESIGN.md, JSON design tokens (DTCG format), CSS custom properties, and a Tailwind v4 config. Superposition is a desktop app for Mac/Windows/Linux that captures colors and type. CSS Stats provides statistical analysis but no exportable token format. Browser extensions like Stylify Me give quick overviews but limited structured output.

What format should design tokens be in?

The Design Token Community Group (DTCG) format — a JSON structure with a $value and $type per token — is the closest thing to an industry standard. It is supported by Style Dictionary, Theo, Token Transformer, and most modern design tool integrations. For human-readable documentation and AI agent context, a structured DESIGN.md markdown file works alongside or instead of JSON — it covers the same token values but in plain prose that is easier to read and paste into agent context windows.

How do I use extracted design tokens with AI coding agents?

Place the DESIGN.md file in your project root. In Claude Code, add it to your CLAUDE.md context. In Cursor, reference it in .cursorrules or paste it into the chat at session start. In GitHub Copilot, include it in your workspace instructions. The agent reads the structured token values and applies them consistently when generating or editing UI code.

Can I extract a design system from any website?

You can extract from any publicly accessible website. Sites behind authentication, paywalls, or bot-blocking middleware may be partially or fully inaccessible to automated tools. Manual DevTools extraction works on any site you can view in a browser, including private or authenticated pages.

How do I share extracted design tokens with a design team?

Commit the token files to your project repository — DESIGN.md, design-tokens.json, and variables.css are all plain-text files that version control handles naturally. Designers can read DESIGN.md directly. Developers reference variables.css in code. Figma Token Studio and Tokens Studio for Figma can import DTCG JSON directly, so the same source file keeps design and code in sync without a separate handoff step.

Ready to skip the 8–20 hour manual audit?

Paste any public URL. Get DESIGN.md, design tokens, CSS variables, and a Tailwind config — no account required.

Extract a design system →