designlang — Extract any website's design system as DTCG tokens, MCP, iOS, Android, Flutter, WordPress

# designlang > Open-source CLI that reverse-engineers any website into a complete design system. Outputs DTCG W3C tokens, Tailwind config, CSS variables, Figma variables, motion tokens, typed component anatomy, brand voice, and a single agent-native DESIGN.md. Multi-platform emitters for iOS SwiftUI, Android Compose, Flutter, and WordPress. Ships a stdio MCP server, a CI drift bot, a clone command that generates a working Next.js repo, and a local studio. $0, MIT, no signup. ## Primary surfaces - [Homepage](https://designlang.app/): paste a URL, see the extraction live. - [Features](https://designlang.app/features): every capability on one page — v11 (clone · ci · studio), v10 (intent · sections · material · library), v9 (motion · anatomy · voice), DTCG token browser, MCP server, multi-platform emitters, CSS health audit, A11y remediation, region + component clustering, install tracks. - [vs design-extractor.com](https://designlang.app/vs/design-extractor): honest feature comparison — designlang ships their DESIGN.md format too, plus everything else, with no signup. ## Install in one command ``` npx designlang <url> # extract everything npx designlang clone <url> # generate a working Next.js repo npx designlang ci <url> --tokens ./tokens.json # PR-comment regression bot npx designlang studio # local web studio at localhost:4837 npx designlang replay <url> # WebM motion replay npx designlang mcp # stdio MCP server for Claude Code / Cursor npx designlang widgets # print the curated widget-ignore list ``` ## Output formats - `*-DESIGN.md` — single-file, 8-section, YAML front matter (Overview · Colors · Typography · Layout · Elevation and Depth · Shapes · Components · Do's and Don'ts) - `*-design-tokens.json` — W3C DTCG (primitive, semantic, composite) - `*-tailwind.config.js` — Tailwind v4 ready - `*-var