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 two extractions 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.

Checked 3 November 2026

designlang vs Tokens Studio: read or author

Tokens Studio is where designers author, theme and sync tokens, mostly inside Figma. designlang goes the other way and reads what a site already uses. They are adjacent tools, not rivals, and this page says where they differ.

Pick designlang if

You have a live site and need its tokens, with no token file to start from.
You want drift alerts on production, or a read of a competitor.
You want agent rules and an MCP server from the same run.

Pick Tokens Studio if

You author tokens in Figma and need Git sync and multi-dimensional theming.
You need designers to edit tokens, with branches and viewer seats.
You want on-canvas documentation in Figma.

How to read this page

Tokens Studio plans and prices are from tokens.studio/pricing, read on 3 November 2026. Anything not on that page is marked as not verified.

Feature comparison

8 rows. Cells say what we could confirm and nothing more.

designlang compared with Tokens Studio
Capability	designlang	Tokens Studio
Direction	Reads tokens from a rendered website.	Authors and syncs tokens, mostly in the Figma plugin.
Free plan	CLI is free and MIT. 3 free live runs on designlang.app.	Free: €0, 1 editor seat, unlimited viewers, 1 project with 1 branch.
Entry paid plan	Pro $9 a month or $90 a year, 200 credits.	Team €39 a month, billed annually, with 1 editor. Extra editors €39 a month each, up to 150.
Higher plan	Team $29 for 5 seats. Agency $79 for 15 seats.	Organization €499 a month, billed annually, 5 editors, SSO and directory sync as add-ons.
Git sync	Not the product’s job. designlang writes files you commit yourself.	Direct Git sync, listed with the paid Figma plugin features.
Theming	Reads light and dark values from a live site and pairs them to roles.	Multi-dimensional theming in the Figma plugin on paid plans.
Token format	W3C DTCG JSON, plus Tailwind, CSS variables, Figma variables and others.	Token JSON. We did not verify its DTCG export or import behaviour.
Import of designlang output	Writes standard DTCG JSON.	We have not tested importing designlang output. Check their docs first.

Sources

Found something wrong? Open a pull request on the repository and we will fix it.

Questions, answered

Do designlang and Tokens Studio compete?

Only loosely. Tokens Studio helps you author and sync tokens you decided on. designlang tells you what a site actually paints. Many teams could use one to check the other.

Can I import designlang tokens into Tokens Studio?

designlang writes W3C DTCG JSON. We have not tested importing it into Tokens Studio, so verify with their documentation before relying on it.

Is designlang cheaper?

The CLI is free and Cloud Pro is $9 a month for one person. Tokens Studio Team is €39 a month billed annually per editor. They do different jobs, so that is not a like-for-like saving.

When was this checked?

On 3 November 2026. Check the linked pricing page for current numbers.

Run it on your site

The CLI is free and needs no account. See for yourself.

Try it live