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 Dembrandt, side by side

Dembrandt is the closest tool to designlang: open source, MIT, reads a live URL, has an MCP server and a drift gate. We benchmarked both on eight sites. Here is what we found, and what each is better at.

Pick designlang if

You want the most accurate primary colour on the sites we tested, and a faster run.
You need native emitters (iOS, Android, Flutter, WordPress, Figma variables) or a brand-book PDF from the same run.
You want a priced hosted layer: Vault, monitoring, Brand Context MCP.

Pick Dembrandt if

You need interactive login or basic auth in the CLI today.
You want a standalone DTCG validator or a colour-notation flag (hex, rgb, oklch).
You need deeper logo extraction or framework version detection.

How to read this page

Dembrandt v0.39.2 was read from a fresh clone and dembrandt.com on 3 November 2026. No Dembrandt code was copied into designlang.

The benchmark

Eight sites, run on 3 November 2026: designlang 13.3.2 against Dembrandt 0.39.2.

Raw results

Benchmark results on 8 sites
Measure	designlang	Dembrandt
Primary colour correct	7/8	4/8
Body font correct	8/8	8/8
Failed runs	0	0
Median time	10.3 s	29.4 s

Read it carefully. The sites were stripe.com, linear.app, gov.uk, duolingo.com, hubspot.com, paypal.com, supabase.com, framer.com. A colour counts when it is within delta-E 10 (CIE76) of the brand colour on the site’s official brand page. A font counts when it names the body-text family. Default settings, darwin-arm64, Node 22, each run capped at 180 s. Both tools missed paypal.com. This is eight sites, run by the designlang author on one machine, so treat it as evidence about those sites and not as a general ranking. Re-run it with node bench/run.mjs.

Feature comparison

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

designlang compared with Dembrandt
Capability	designlang	Dembrandt	Ahead
Licence of the CLI	MIT	MIT	Even
Primary colour correct (8-site bench)	7/8	4/8	designlang
Body font correct (8-site bench)	8/8	8/8	Even
Failed runs (8-site bench)	0	0	Even
Median run time (8-site bench)	10.3 s	29.4 s	designlang
Primary colour evidence and per-token confidence	Yes. Evidence for the elected primary and a confidence level per colour.	Yes. Elected and refused candidates are recorded.	Even
Multi-page crawl	Yes. --pages, the site command, sitemap discovery, pooled extraction.	Yes. --crawl and --sitemap.	Even
Dark mode	Yes. --dark, with dark values paired to semantic roles.	Yes. --dark-mode.	Even
Authenticated pages in the CLI	--cookie, --cookie-file and --header. Basic auth and interactive login are not built.	--cookie, --cookie-file, --basic-auth and --login.	Dembrandt
Output formats	DTCG, DESIGN.md, Tailwind (v3 and v4), shadcn, HTML report, PDF brand book, plus iOS, Android, Flutter, Figma variables, Vue, Svelte, WordPress, Storybook and more.	DTCG, DESIGN.md, Tailwind v4, shadcn, HTML report, PDF brand guide.	designlang
Standalone DTCG validator	No. Not built.	Yes.	Dembrandt
Colour notation flag (hex, rgb, oklch, lch)	Partial.	Yes.	Dembrandt
Logo extraction	Partial. Candidates, saved SVG or image, clear-space.	Deeper. Zone scoring and instances.	Dembrandt
Framework and icon-library versions	Partial. Fingerprints, without versions.	Yes.	Dembrandt
Bot-wall handling	None, on purpose. designlang does not ship evasion.	A --stealth option and a headed fallback.	Dembrandt
Drift gate in CI	Yes. drift, ci, a GitHub Action and Preview Gate.	Yes. --compare exits 1 on drift, plus a GitHub Action.	Even
MCP server	Yes. Local server with extract and job tools, and a hosted Brand Context server.	Yes. About 21 tools including async jobs.	Even
Hosted app	designlang Cloud: Vault, diff, monitoring, Time Machine, teams. Public prices from $9 a month.	A hosted app in beta with snapshot history and drift tracking. We found no public pricing.	designlang

Sources

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

Questions, answered

Is designlang better than Dembrandt?

On our eight-site benchmark, designlang found the right primary colour on 7 sites against 4 and had a median run of 10.3 s against 29.4 s. Dembrandt is ahead on interactive login, a DTCG validator, logo depth and framework versions. Neither result is general: it is eight sites.

Who ran the benchmark?

The designlang author, on one machine, with default settings for both tools. The ground truth and the script are in the repo, so you can re-run it with node bench/run.mjs.

Why did both tools miss paypal.com?

The page serves variants, and the brand colour #002991 is hard to read from the live homepage. designlang returned #053782 and Dembrandt #60cdff. It remains our weakest row.

Are they both free?

Both CLIs are MIT licensed. designlang Cloud is a paid hosted layer from $9 a month. We found no public price for Dembrandt’s hosted app.

Run it on your site

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

Try it live