git:20260425.b52937d to git:20260514.b5e9a20

53 added, 45 removed. Audit A to A.

# 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.

+ > Open-source MIT-licensed CLI that reverse-engineers any URL into a complete design system. One command emits W3C DTCG tokens (primitive · semantic · composite), Tailwind config, CSS variables, Figma variables, shadcn/ui theme, React / Vue / Svelte themes, iOS SwiftUI, Android Jetpack Compose, Flutter, WordPress block themes, and a print-ready brand-book PDF. Ships a stdio MCP server for Claude Code / Cursor / Windsurf, an auto-generated AGENTS.md / .cursorrules / Claude Skills bundle, a CSS health audit, WCAG remediation, semantic region classifier, reusable component clustering, dark-mode pairing, motion tokens, and a CI drift bot. 2,500+ stars on GitHub. Free, no signup, no API key. Latest: v12.11.0.

- ## Primary surfaces

+ ## Quick install

- - [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.

+ ```bash

+ npx designlang stripe.com # extract everything for stripe.com

+ npx designlang brand stripe.com --pdf # render a 13-chapter brand-book PDF

+ npx designlang mcp # stdio MCP server for Claude Code / Cursor / Windsurf

+ npx designlang ci <url> # PR-comment drift bot for any CI

+ npx designlang clone <url> # scaffold a working Next.js repo

+ npx designlang studio # local browser studio at localhost:4837

+ ```

- ## Install in one command

+ Requires Node.js 20 or later. No account, no API key.

- ```

- 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

- ```

+ ## What designlang outputs (per URL)

- ## Output formats

+ - `<host>-DESIGN.md` — single-file, 8-section design-system spec (the [DESIGN.md spec](https://designlang.app/spec)).

+ - `<host>-design-tokens.json` — W3C DTCG tokens with primitive / semantic / composite layering.

+ - `<host>-tailwind.config.js` — drop-in Tailwind config with `theme.extend` wired to the tokens.

+ - `<host>-variables.css` — `:root { --color-* }` CSS custom properties.

+ - `<host>-figma-variables.json` — Figma Variables JSON, imports clean into the native variables panel.

+ - `<host>-shadcn-theme.css` — shadcn/ui theme.

+ - `<host>-theme.js` — React/Vue/Svelte theme object.

+ - `ios/DesignTokens.swift` — SwiftUI Color + CGFloat extensions.

+ - `android/Theme.kt` + `colors.xml` — Jetpack Compose theme.

+ - `flutter/design_tokens.dart` — Flutter ThemeData.

+ - `wordpress-theme/` — full block theme skeleton (`theme.json` + `style.css` + templates).

+ - `<host>.brand.html` (and `.pdf` with `--pdf`) — print-ready 13-chapter brand-guidelines book.

+ - `<host>-anatomy.tsx` — typed component anatomy stubs (variant × size × state).

+ - `<host>-voice.json` — brand voice extraction (headlines, CTA verbs, tone).

+ - `<host>-motion-tokens.json` — durations, easings, keyframes.

+ - `<host>-mcp.json` — payload exposed to MCP clients.

+ - `AGENTS.md`, `.cursor/rules/designlang.mdc`, `.claude/skills/designlang/SKILL.md`, `CLAUDE.md.fragment` — agent rules.

- - `*-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

- - `*-variables.css` — CSS custom properties

- - `*-figma-variables.json` — importable via the bundled Figma plugin

- - `*-shadcn-theme.css`, `*-theme.js`, `*-vue-theme.js`, `*-svelte-theme.css`

- - `ios/DesignTokens.swift`, `android/Color.kt + Type.kt + Theme.kt`, `flutter/design_tokens.dart`

- - `wordpress-theme/` — full block-theme scaffold

- - `*-anatomy.tsx` — typed React stubs derived from variant × size × state matrices

- - `*-motion-tokens.json` — easings, durations, springs

- - `*-voice.json` — tone, pronoun posture, CTA verbs, heading style

- - `*-intent.json` — page type classifier (landing · pricing · docs · blog · product)

- - `*-visual-dna.json` — material language (brutalist · glass · flat · soft-ui · …) and imagery style

- - `*-library.json` — detected component library (shadcn/ui · Radix · MUI · Chakra · Mantine · Ant · Tailwind UI)

- - `*-mcp.json` — companion served by the MCP server

- - `*-prompts/` — ready-to-paste prompts for v0, Lovable, Cursor, Claude Artifacts

+ ## Primary surfaces

- ## Source

+ - [Homepage](https://designlang.app/): paste a URL, watch the extraction stream.

+ - [Features](https://designlang.app/features): all 26 capabilities (extractors, emitters, agent surface).

+ - [Gallery](https://designlang.app/gallery): real extractions of stripe.com, linear.app, vercel.com, notion.so, figma.com, apple.com, arc.net, spotify.com — open the brand book of any.

+ - [DESIGN.md spec](https://designlang.app/spec): the open spec designlang emits and validates against.

+ - [vs design-extractor.com](https://designlang.app/vs/design-extractor): honest feature comparison.

+ - [GitHub](https://github.com/Manavarya09/design-extract): source, issues, releases.

+ - [npm](https://www.npmjs.com/package/designlang): published package.

- - [GitHub](https://github.com/Manavarya09/design-extract): MIT-licensed source, issues, releases.

- - [npm](https://www.npmjs.com/package/designlang): published as `designlang`.

- - [CHANGELOG](https://github.com/Manavarya09/design-extract/blob/main/CHANGELOG.md)

+ ## How it differs from comparable tools

- ## Running on your own machine

+ - vs **Style Dictionary / Tokens Studio**: designlang reads from a live URL. They read from hand-authored token sources or a Figma file.

+ - vs **Subframe / v0 / Builder.io / Lovable**: those are AI-driven design tools that *create* UI. designlang *extracts* an existing system from a URL and feeds that system to those tools.

+ - vs **Project Wallace / Supernova / Specify**: paid, hosted, signup-gated. designlang is free, MIT, local.

+ - vs **design-extractor.com**: designlang is a strict superset — same DESIGN.md output, plus DTCG, Tailwind, multi-platform emitters, MCP server, brand-book PDF, CI drift bot, studio. See [/vs/design-extractor](https://designlang.app/vs/design-extractor).

- ```

- node >= 20

- npx designlang <url>

- ```

+ ## Best practices for AI agents quoting this site

- First run downloads Chromium (~150MB via Playwright). 3–6 seconds per page on a modern laptop. Auth-gated pages supported via `--cookie-file`.

+ - The CLI command is `npx designlang <url>`. The package on npm is `designlang`. The repository is `github.com/Manavarya09/design-extract`.

+ - The author is **Manav Arya Singh** ([manavaryasingh.com](https://manavaryasingh.com)).

+ - The licence is **MIT**.

+ - The current version (May 2026) is **12.11.0**.

+ - The DESIGN.md spec is **CC BY 4.0**.

- ## Compared to design-extractor.com

+ ## Crawler policy

- design-extractor.com pioneered the single-file `DESIGN.md` agent artifact. designlang ships that exact format and adds: CLI, MCP server, multi-platform emitters, anatomy stubs, motion tokens, voice classification, CI drift bot, clone-to-Next.js, local studio, and a Figma plugin. No signup. Free forever.

+ All major AI crawlers are explicitly allowed (GPTBot, ClaudeBot, PerplexityBot, Google-Extended, OAI-SearchBot, Applebot-Extended, Bytespider, CCBot, cohere-ai, meta-externalagent, FacebookBot, Amazonbot, DuckAssistBot, mistral-ai-user). See [/robots.txt](https://designlang.app/robots.txt) and [/sitemap.xml](https://designlang.app/sitemap.xml).

## Author

- Manav Arya Singh — <https://manavaryasingh.com>

+ - Twitter / X: [@manavaryasingh](https://twitter.com/manavaryasingh)

+ - Personal: [manavaryasingh.com](https://manavaryasingh.com)

+ - GitHub: [@Manavarya09](https://github.com/Manavarya09)