design-extract

Sponsors

designlang points a headless browser at any URL and reads the design system off the live DOM. One command emits 17+ files — DTCG tokens, Tailwind config, shadcn theme, Figma variables, motion tokens, typed component anatomy, brand voice, page-intent labels, and a paste-ready prompt pack for v0 / Lovable / Cursor / Claude Artifacts.

It also goes where extractors don't: layout patterns, responsive behavior across 4 breakpoints, hover / focus / active states, WCAG contrast scoring, multi-page consistency, drift checks against a live source-of-truth, visual-diffs, and a shareable graded report card.

Quick start

npx designlang https://stripe.com                      # extract everything
npx designlang site stripe.com                         # whole-site: one canonical system + consistency grade ← v12.23
npx designlang fidelity stripe.com --clone localhost:3000  # score a clone vs the original (visual + motion) ← v12.24
npx designlang gallery                                 # static shareable gallery of measured clones      ← v12.24
npx designlang studio                                  # live token editor: edit, preview, export, share ← v12.19
npx designlang verify stripe.com                       # fidelity score: rebuild from tokens vs live ← v12.18
npx designlang pair stripe.com linear.app              # fuse two designs (visuals A × voice B)    ← v12.8
npx designlang brand stripe.com                        # full brand-guidelines book (13 chapters)  ← v12.7
npx designlang theme-swap stripe.com --primary "#ff4800"  # recolour around your brand        ← v12.6
npx designlang pack stripe.com                         # one polished design-system directory ← v12.4
npx designlang remix stripe.com --as cyberpunk         # restyle in another vocabulary       ← v12.3
npx designlang remix stripe.com --all                  # emit all 6 vocabs at once           ← v12.3
npx designlang grade https://stripe.com --badge        # report card + SVG badge             ← v12.2
npx designlang battle stripe.com vercel.com            # head-to-head graded fight           ← v12.2
npx designlang clone https://stripe.com                # working Next.js starter
npx designlang --full https://stripe.com               # screenshots + responsive + interactions

Drop a live design-score badge in any README:

![Design Score](https://designlang.app/badge/stripe.com.svg)

Whole-site design system (site)

Most extractors read a single URL. designlang site crawls a site's canonical pages (home, pricing, docs, blog, about, product…) and synthesizes one de-duplicated system. Every token is elected by coverage — the share of pages that use it — so what's genuinely site-wide is separated from one-off, page-local choices. Near-identical colours are merged in OKLab. It's fully deterministic and free; no API key.

npx designlang site stripe.com --max-pages 8

You get, alongside the standard pack emitted from the canonical system:

Measured clone fidelity (fidelity + gallery)

Cloning tools all claim "pixel-perfect" — none of them measure it. designlang fidelity does. Point it at the original and your clone (often a local dev server) and it returns one honest number, both halves of the clone:

• Visual — full-page screenshots of each, pixel-diffed.
• Motion — extractMotion() on both, compared across feel, durations, easings, springs, keyframe kinds, scroll-linked motion, and choreography/ stagger. (Most clones reproduce static pixels and drop the motion entirely; this is where they lose.)

The two blend into a 0–100 score + letter grade, and — the part competitors don't ship — a ranked correction plan: the exact next edits that will raise the score, hardest-hitting first. Measure → fix → re-run until it converges.

npx designlang fidelity https://stripe.com --clone http://localhost:3000
npx designlang fidelity https://stripe.com --clone http://localhost:3000 --min 90   # CI gate

Generating the clone with designlang clone? Add --fidelity and it grades the clone's token basis against the live site the moment it's built — writing FIDELITY.md + a correction plan straight into the project, no separate step:

npx designlang clone https://stripe.com --fidelity

You get fidelity.md (score + motion table + correction plan), fidelity.json, a shareable fidelity-card.svg (88% · B · stripe.com), and a fidelity-diff.png loss heatmap.

Then publish them. designlang gallery scans your reports and builds a deployable static site — an index of score cards plus a permalink page per clone (each with an OG card, so a shared link unfurls the number).

npx designlang gallery --title "Our clones" --base-url https://clones.example.com

Install

npm i -g designlang                         # global
npx skills add Manavarya09/design-extract   # as an agent skill (40+ agents)

Use in Claude Code (plugin)

designlang ships as a Claude Code plugin — eleven slash commands that wrap the CLI. Install it from inside Claude Code:

/plugin marketplace add Manavarya09/design-extract
/plugin install designlang@designlang

The first command registers this repo as a plugin marketplace; the second installs the designlang plugin from it. Restart Claude Code if prompted, then the commands are available:

Prefer the raw MCP tools? The CLI also ships an MCP server — run designlang mcp --output-dir ./design-extract-output to serve the latest extraction's tokens to any MCP client.

Atlas Cloud for --smart

designlang --smart can now use Atlas Cloud through its OpenAI-compatible chat API, so low-confidence classifiers can stay zero-dependency while routing to Atlas-hosted models.

export ATLASCLOUD_API_KEY="<atlascloud-api-key>"
export ATLASCLOUD_MODEL="deepseek-ai/deepseek-v4-pro"

npx designlang https://stripe.com --smart

• Atlas Cloud envs: ATLASCLOUD_API_KEY, ATLASCLOUD_MODEL, optional ATLASCLOUD_API_BASE
• Alias envs also work: ATLAS_CLOUD_API_KEY, ATLAS_CLOUD_MODEL, ATLAS_CLOUD_API_BASE
• Existing OPENAI_API_KEY and ANTHROPIC_API_KEY flows keep working unchanged

What you