Extract a Website's Design System Into Tokens With designlang

Recreating a site's look by squinting at devtools gets you six hex codes and a guess at the type scale. designlang — the 4k-star repository is named design-extract — points a headless browser at any URL and reads the design system off the live DOM; the README says one command emits 17-plus files, among them DTCG tokens, a Tailwind config, a shadcn theme, Figma variables, motion tokens, typed component anatomy, brand voice, page-intent labels, and a paste-ready prompt pack for v0, Lovable, Cursor, and Claude Artifacts.

Why This Skill Matters

The README's pitch is that other tools give you the paint while designlang reads the architecture: layout patterns (grids, flex containers, container widths, gaps), responsive behavior across 4 breakpoints, hover/focus/active states captured by programmatically hovering and focusing, a motion language of durations and easing families, WCAG contrast scoring for every foreground/background pair with a remediation palette, multi-page consistency, and CI-ready drift, lint, and visual-diff commands that exit non-zero on failure. Its documented pipeline is Playwright-driven Chromium that waits for network idle and fonts, one page.evaluate() walking up to 5,000 DOM elements for 25-plus computed properties, 17 extractor modules, and 12-plus formatters.

The agent skill, extract-design, is the entry point this tutorial covers. Its SKILL.md triggers on requests like "extract design", "get design system", "design tokens", or "what colors/fonts does this site use", and its process is four steps: run the extraction, read the generated markdown, present the findings, offer next steps.

Installation

Install it as an agent skill through the skills ecosystem — the README says this path works with Cursor, Codex, and 40-plus AI coding agents:

npx skills add Manavarya09/design-extract

The skill shells out to the designlang CLI; SKILL.md lists npm install -g designlang as the prerequisite, or npx designlang <url> with no install. The browser is a separate one-time step: designlang install-browser fetches the Chromium matching the bundled Playwright (add --with-deps on bare Linux), and without it designlang falls back to an installed Google Chrome. npm install itself no longer downloads a browser, so it works in CI, Docker, and behind proxies. Claude Code users can alternatively install the plugin with /plugin marketplace add Manavarya09/design-extract followed by /plugin install designlang@designlang, which wraps the CLI in slash commands including /extract, /grade, /battle, /remix, and /pack.

Real Workflow: Turn a Reference Site Into a Tailwind Theme

In Cursor, Codex, or another skills-ecosystem agent:

/extract-design https://stripe.com

The SKILL.md process runs npx designlang <url> --screenshots, reads design-extract-output/*-design-language.md, and presents the findings — the primary palette with hex codes, font families, the spacing system and its base unit if detected, the WCAG accessibility score, component patterns found, and notable decisions like shadows and radii. It then offers next steps, among them: copy *-tailwind.config.js into your project, import *-variables.css, paste *-shadcn-theme.css into globals.css for shadcn/ui, import *-figma-variables.json for designer handoff, open *-preview.html for a visual overview, or feed the markdown to an LLM as context. For a multi-page read, SKILL.md documents --depth 3; for a dark scheme, --dark.

One disclosure: SKILL.md describes 8 output files, while the README says each run writes 17-plus to ./design-extract-output/ and its headline table also lists *-anatomy.tsx typed React stubs, *-motion-tokens.json, *-voice.json, a *-prompts/ directory, and *-mcp.json. The two surfaces have drifted; the README's example run against vercel.com reports "17 files written".

Tips

• --full bundles five captures at once — screenshots, responsive crawling at 4 viewports, interaction states, auto-interact (scrolling, opening menus and modals, hovering CTAs), and runtime motion captured through document.getAnimations(). Dark mode is a separate --dark flag.
• Most extractors read one URL; designlang site <url> crawls a site's canonical pages and synthesizes one de-duplicated system, tagging each token site-wide, section, or page-local by coverage and emitting a 0–100 consistency grade. The README calls it fully deterministic and free, with no API key.
• designlang fidelity <original> --clone <url> scores a clone against the live site on visual pixel-diff and motion, returns a 0–100 score with a letter grade and a ranked correction plan, and --min 90 turns it into a CI gate.
• Prefer MCP tools? claude mcp add designlang -- npx -y designlang mcp exposes extract_design(url) as a job plus get_tokens, get_colors, get_typography, get_components, get_findings, compute_drift, and export.
• designlang doctor is a one-screen health check of Node, Playwright, the Chromium binary, the output directory, and network; it exits 1 if anything fails. --system-chrome skips the bundled download.

When Not to Use This

SKILL.md draws its own line: do not use it to build a new UI from scratch unless you first want to extract an existing website's design language. If your design system already lives in a tokens file you own, there is nothing to read off a DOM — point designlang drift <url> --tokens <file> at it instead to check that file for drift against the live site. And for a single color value, devtools is still faster than a headless browser.

See the leaderboard for more skills.