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 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:
Install
npm i -g designlang # global
npx skills add Manavarya09/design-extract # as an agent skill (40+ agents)
What you get
Each run writes 17+ files to ./design-extract-output/. The headline outputs:
| File | What it is |
|---|---|
| *-design-language.md | 19-section markdown — feed any LLM to recreate the design |
| *-design-tokens.json | W3C DTCG tokens (primitive + semantic + composite layers) |
| *-tailwind.config.js | Drop-in Tailwind theme |
| *-shadcn-theme.css | shadcn/ui globals.css variables |
| *-figma-variables.json | Figma Variables import (light + dark) |
| *-variables.css | CSS custom properties |
| *-anatomy.tsx | Typed React stubs for every detected component + variants |
| *-motion-tokens.json | Durations, easings, springs, scroll-linked flag |
| *-voice.json | Brand voice — tone, pronoun posture, CTA verbs |
| *-prompts/ | Paste-ready prompts for v0, Lovable, Cursor, Claude Artifacts |
| *-mcp.json | Disk-backed MCP server payload |
| *-grade.html | v12.1 Shareable Design Report Card (letter grade + evidence) |
| *-grade.svg | v12.2 Shields.io-style design-score badge (drop into any README) |
| *-battle.html | v12.2 Head-to-head graded battle card from designlang battle |
| *-remix.<vocab>.html | v12.3 Site restyled in another vocabulary — brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial |
Multi-platform (--platforms web,ios,android,flutter,wordpress,all) adds ios/, android/, flutter/, and a WordPress block theme. --emit-agent-rules adds Cursor / Claude Code / generic agent rule files.
Why designlang vs anything else
Other tools give you the paint. designlang reads the architecture:
- Layout system — grids, flex containers, container widths, gaps — not just tokens.
- Responsive — crawls 4 breakpoints and reports what changes (
--responsive). - Interaction states — programmatically hovers and focuses, captures the deltas (
--interactions,--deep-interact). - Motion language — durations, easing families, spring detection, scroll-linked flag,
feelfingerprint (springy / smooth / mechanical / mixed). - Component anatomy — slot trees with variant × size × state matrices, emitted as typed
.tsx. - Brand voice — tone, pronoun posture, heading style, CTA verb inventory.
- Page intent + section roles —
landing/pricing/docsetc., with semantic regions (hero,feature-grid,pricing-table,cta…). - Multi-page consistency — auto-discovers canonical pages, reconciles shared vs per-route tokens.
- WCAG — every fg/bg pair scored, with a remediation palette suggesting nearest passing colors.
- Drift + lint + visual-diff —
designlang drift,lint,visual-diffall CI-ready, exit non-zero on failure. - Live-site sync — treat the deployed site as source of truth (
designlang sync). - MCP server —
designlang mcpexposes tokens, regions, components, and contrast pairs to any MCP-aware agent.
designlang grade https://stripe.com # ← v12.1: shareable report card
designlang clone https://stripe.com # → working Next.js app
designlang apply https://stripe.com -d ./app # auto-detect framework, write tokens
designlang brands stripe.com vercel.com linear.app # N-brand matrix
designlang drift https://yourapp.com --tokens ./src/tokens.json
designlang lint ./src/tokens/design-tokens.json # CI-ready linter
designlang visual-diff https://staging.app https://app # single-file HTML diff
designlang mcp # stdio MCP server for Cursor / Claude Code
All features
| Feature | Flag / Command | Description |
|---------|---------------|-------------|
| Base extraction | designlang <url> | Colors, typography, spacing, shadows, radii, CSS vars, breakpoints, animations, components |
| Layout system | automatic | Grid patterns, flex usage, container widths, gap values |
| Accessibility | automatic | WCAG 2.1 contrast ratios for all fg/bg pairs |
| Design scoring | automatic | 7-category quality rating (A-F) with actionable issues |
| Gradients | automatic | Gradient type, direction, stops, classification |
| Z-index map | automatic | Layer hierarchy, z-index wars detection |
| SVG icons | automatic | Deduplicated icons, size/style classification, color palette |
| Font files | automatic | Source detection (Google/self-hosted/CDN/system), @font-face CSS |
| Image styles | automatic | Aspect ratios, shapes, filters, pattern classification |
| Dark mode | --dark | Extracts dark color scheme + light/dark diff |
| Auth pages | --cookie, --cookie-file, --header | Extract from authenticated/protected pages; cookie files in JSON / Playwright storageState / Netscape formats |
| Self-signed / dev TLS | --insecure | Ignore HTTPS/SSL certificate errors |
| User-Agent override | --user-agent <ua> | Set a custom User-Agent string |
| Chrome extension | chrome-extension/ | One-click handoff from any tab, MV3, activeTab only |
| Multi-page | --depth <n> | Crawl N internal pages; emits shared-vs-per-route token reconciliation (*-tokens-shared.json, *-tokens-routes/<slug>.json, *-routes-report.md) |
| Screenshots | --screenshots | Capture buttons, cards, inputs, nav, hero, full page |
| Responsive | --responsive | Crawl at 4 viewports, map breakpoint changes |
| Interactions | --interactions | Capture hover/focus/active state transitions |
| Auto-interact | --deep-interact | Scroll, open menus/modals/accordions, hover CTAs before extraction |
| Everything | --full | Enable screenshots + responsive + interactions + deep-interact |
| Apply | designlang apply <url> | Auto-detect framework and write tokens to your project |
| Clone | designlang clone <url> | Generate a working Next.js starter with extracted design |
| Score | designlang score <url> | Rate design quality with visual bar chart breakdown |
| Grade (v12.1) | designlang grade <url> | Shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence, strengths + fixes |
| Battle (v12.2) | designlang battle <A> <B> | Head-to-head graded battle card with verdict, dimension table, palette comparison |
| Badge (v12.2) | designlang grade --badge | Shields.io-style SVG badge — design · B · 87 — drop into any README. Live endpoint: designlang.app/badge/<host>.svg |
| Remix (v12.3) | designlang remix <url> --as <vocab> | Restyle the audited page in another vocabulary (brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial). --all emits all 6 |
| Pack (v12.4) | designlang pack <url> | Bundle every output (tokens / components / Storybook / starter / prompts) into one polished design-system directory |
| Theme-swap (v12.6) | designlang theme-swap <url> --primary <hex> | Recolour the e