designlang is an open-source CLI that crawls any live website with a headless browser and emits its complete design system: W3C DTCG tokens (primitive, semantic, composite), Tailwind config, CSS variables, Figma variables, shadcn/ui theme, plus native emitters for iOS SwiftUI, Android Jetpack Compose, Flutter and WordPress, and a print-ready brand-book PDF. It runs locally and ships an MCP server so Claude Code, Cursor and Windsurf can read live extractions as native tools.

How do I install designlang?

Run `npx designlang ` — no install, no account, no API key. The package is on npm as `designlang` and requires Node.js 20 or later. The full source is on GitHub at github.com/Manavarya09/design-extract under the MIT licence.

How is designlang different from Style Dictionary, Tokens Studio, Subframe, v0 and Builder.io?

Those tools take a Figma file or hand-authored tokens as input. designlang takes a live URL. It reads what your browser actually computes — colours, spacing, typography, motion, shadows, anatomy — directly from the rendered DOM. It outputs strict W3C DTCG with proper primitive / semantic / composite layering, runs a CSS health audit, performs WCAG remediation, and ships multi-platform emitters from one run.

Does designlang work with Claude Code, Cursor and Windsurf?

Yes. designlang ships a stdio MCP server (`designlang mcp`) that exposes extracted tokens, semantic regions, component clusters, CSS health and accessibility remediation as MCP resources and tools. The CLI also auto-generates `.cursor/rules/designlang.mdc`, `.claude/skills/designlang/SKILL.md`, `CLAUDE.md` fragments and `AGENTS.md` so any AI coding agent can read the system natively.

Is designlang free and open source?

Yes. designlang is MIT-licensed and fully open source on GitHub. The CLI is free with no signup. The hosted demo at designlang.app is rate-limited to one extraction per IP per day; the CLI is unlimited.

What output formats does designlang support?

W3C DTCG JSON, Tailwind CSS config, CSS custom properties, Figma Variables JSON, shadcn/ui theme, React / Vue / Svelte theme objects, iOS SwiftUI extensions, Android Compose Theme.kt + colors.xml, Flutter ThemeData, WordPress block theme (theme.json + style.css), agent rules (AGENTS.md, .cursorrules, Claude skills, MCP), motion tokens, typed component anatomy stubs, a brand voice/CTA pack, and a print-ready brand-book PDF with chapter bookmarks and an embedded tokens attachment.

Can I generate a brand-book PDF for any URL?

Yes. `npx designlang brand --pdf` produces a 13-chapter brand-guidelines PDF with chapter page breaks, a running footer, an extracted-primary cover band, and (with `--attach-tokens`) the DTCG tokens JSON embedded as a PDF file attachment.

Does designlang extract motion, hover states and interaction design?

Yes. With the `--interactions` flag designlang captures hover, focus and active states for buttons, links and inputs, and reads all CSS transitions, easing functions and `@keyframes` animations into a motion-tokens DTCG file.

build · early access

Generate UI in your brand. Not a guess.

Paste a URL. Pick a template. designlang extracts the real tokens, anatomy and voice, then scaffolds a runnable Next.js page that looks like you — not generic AI slop.

Pick a template CLI version

Templates.

pricing

Pricing page

3 tiers + comparison table + FAQ in the extracted brand.

landing

Landing page

Hero, features grid, testimonials, CTA — using the extracted voice.

docs

Docs site

Sidebar nav, prose layout, code blocks, all wired to the brand tokens.

dashboard

Dashboard skin

Sidebar + topbar + stat cards + table — themed to the brand.

auth

Auth flow

Sign-in / sign-up / magic-link in the brand colour and type.

blog

Blog index

Card list + featured post + author chips, using the brand serif.

Or run it from the CLI right now.

The hosted builder is in early access — the CLI version ships in v12.12.0 today.

npx designlang clone stripe.com --template pricing

Outputs a runnable ./stripe-com-clone/ directory: a Next.js 16 app with the Stripe palette wired into a Tailwind theme, the actual extracted type scale, the real CTA voice, and the picked template's layout.

Why this beats v0 / Subframe / Lovable for brand work

v0 / Lovable invent a palette. designlang reads the real one off the live site.
Subframe needs a designer in their canvas. designlang needs a URL.
Generic AI UI looks AI. UI built from real brand tokens looks like the brand.
Output is a vanilla Next.js repo you can git init in, not a hosted-only artefact.