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.

drift leaderboard

How much did your favourite design system drift this week?

Each row is the output of designlang cirun against the host’s current production CSS, compared with the previous week’s snapshot. The same bot ships in your CI on day one — fail the build when your design system silently moves.

Run it on your repo All features

This week.

snapshot · 2026-05-15 · 12 sites

01arc.net5.8%+3.4new gradient, two button radii changed
02cursor.sh4.2%+2.7added a third accent; component padding bumped
03figma.com3.6%+2.9new pink accent; mid-grey reshuffled
04openai.com3.1%+1.5border radii unified to 12px across cards
05github.com2.8%+1.2dark-theme greys flattened by 4%
06vercel.com2.1%+0.4primary blue shifted slightly warmer
07anthropic.com1.9%+0.3serif weight changed; type scale untouched
08linear.app1.4%+1.1added a new neutral; spacing scale extended
09spotify.com1.1%+0.6one foreground colour rotated 4° in hue
10stripe.com0.7%+0.2no token additions, 1 hue shift on accent
11notion.so0.4%+0.0stable week — no detectable drift
12apple.com0.2%+0.1effectively static — only sub-pixel anti-alias change

Drift % = weighted edit distance over the host’s DTCG tokens since the previous snapshot. The full method is in src/ci.js. This page is a static snapshot — the daily public cron is in flight.