DesignScan — design-token specs for 12 real brands

How it works

From a live URL to a token spec, in one pass

No manual entry, no design-file export, no API key. DesignScan reads what the page actually renders and hands your agent a spec it can build with.

Render & observe

Headless Chromium loads the live page (hydration-aware) and reads the computed styles of every visible element — shadow DOM included. It even really hovers and presses the buttons to capture true :hover / :active states, and probes dark mode.

Normalize into tokens

Thousands of raw values cluster into a clean profile — color roles, type scale, spacing & radius grids, shadows, container width and responsive breakpoints — preferring the site's own declared system (--color-primary, --breakpoint-md) when the page paints it.

Emit a spec

Out comes a spec-valid DESIGN.md, W3C tokens JSON, or CSS variables — plus a self-contained HTML preview that renders every token and deterministic "notes for your coding agent."

Quick start

One command, any site

Point it at a URL and get a DESIGN.md your coding agent can build with — or pick another output format.

# one-time: install the headless browser
npx playwright install chromium

# any URL → DESIGN.md (Google Labs open format)
npx designscan stripe.com --md --out stripe.DESIGN.md

# other formats, themes, and a visual proof sheet
npx designscan vercel.com --format w3c --out vercel.tokens.json
npx designscan linear.app --theme both --md --preview --out linear.DESIGN.md

--md

DESIGN.md — YAML tokens + prose, passes the official linter.

--format w3c

W3C Design Tokens JSON for Style Dictionary & Tokens Studio.

--format css

Paste-ready CSS custom properties.

--format json

The raw token profile for your own pipeline.

For coding agents

Pull live tokens over MCP

DesignScan ships an MCP server (on the official registry as io.github.ms-zaman/designscan). One tool — get_design_tokens(url, format?, theme?) — lets an agent fetch tokens mid-task: "restyle this app like stripe.com."

// e.g. Claude Code: .mcp.json
{
  "mcpServers": {
    "designscan": { "command": "npx", "args": ["-y", "@designscan/extractor", "mcp"] }
  }
}

Brand corpus

12 real brands, auto-extracted

Each card links a spec-compliant DESIGN.md and a self-contained HTML preview, generated from the brand's live CSS — a working sample of exactly what DesignScan produces.

GitHub Primary

GitHubgithub.com

Mona Sans

#08872b#0d1117#ffffff

#7759c2#ffffff#171321

Open preview →

Linear Primary

Linearlinear.app