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 Supernova: two different jobs

Supernova is a platform for maintaining and distributing a design system you already have. designlang starts from a live URL. They overlap in MCP access and code output, and you could reasonably use both.

Pick designlang if

You are inheriting, auditing or tracking a site and have no Figma source of truth.
You want a CLI you can run for free, and a $9 hosted plan.
You want to know when a live site drifts, with alerts.

Pick Supernova if

You author your system in Figma or Storybook and need it distributed to code.
You want custom code exporters, many editors and workspace credits for an agent.
You are buying for a larger team and need Enterprise terms.

How to read this page

Supernova’s plans, prices and limits below are from supernova.io/pricing, read on 3 November 2026. We compare only what that page states. Where a feature is not on it, we say we did not verify.

Feature comparison

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

designlang compared with Supernova
Capability	designlang	Supernova
Where the system comes from	A live website URL, read by a headless browser.	Data sources. The pricing page lists Figma and Storybook sources and Figma variables import. A live-site reader is not on that page.
Free entry point	The CLI is free and MIT licensed. 3 free live runs on designlang.app.	Starter is free: 3 editors, 1,000 workspace credits a month.
Entry paid price	Pro $9 a month ($90 a year), 200 credits. Team $29 and Agency $79.	Pro $399 a month, 10 editors, 10,000 workspace credits. Annual prices are not shown.
MCP	Local MCP server in the CLI (free). Hosted Brand Context MCP per saved project, with revocable tokens.	MCP editing on all plans. Consumer MCP servers: 1 on Starter, 2 on Pro, unlimited on Enterprise.
Code output	Fixed emitters: DTCG, Tailwind, CSS variables, Figma variables, shadcn, iOS, Android, Flutter, WordPress and more.	Custom code exporters on Pro and Enterprise. SDK access on all plans.
Automation	GitHub Action, Preview Gate, drift CI, monitors and an API.	Automation pipelines: 1 on Starter, 5 on Pro, unlimited on Enterprise.
Alerts when a live site changes	Yes. Monitors with confirmed-change email and Slack.	Not on the pricing page. We did not verify.
Hosted documentation site for your system	No. designlang emits DESIGN.md and a brand book.	The pricing page mentions a custom documentation exporter on Enterprise. We did not verify further.

Sources

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

Questions, answered

Can I use designlang and Supernova together?

Yes. designlang can read a live site into W3C DTCG tokens and DESIGN.md, which you can use as a starting point or an audit input. We have not built or tested an import into Supernova.

Is Supernova more expensive?

Its Pro plan is listed at $399 a month for 10 editors and 10,000 workspace credits, against designlang Pro at $9 for 200 credits for one person. They are different products, so a price gap is not a like-for-like saving.

Does designlang replace a design system platform?

No. designlang reads and watches. It does not host your documentation or manage contributions to a system you author.

When was this checked?

On 3 November 2026. Prices and limits change, so check the linked pricing page.

Run it on your site

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

Try it live