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.

vs design-extractor.com

They sell the spec. We ship the system.

design-extractor.com ships a one-file DESIGN.md for AI coding agents: clever positioning, single artifact. designlang ships DESIGN.md too, plus everything you actually need to build the design.

Feature comparison

Checked 2026-04-25. Open a PR if anything here is wrong.

17 capabilities

Capability	designlang	design-extractor	Note
DESIGN.md (single-file, 8-section, YAML front matter)	Yes	Yes	They invented this format. We emit it too.
Account / email signup required	No	Yes	They gate behind email.
Public pricing	Yes	No	$0 vs. undisclosed.
CLI	Yes	No	npx designlang <url> — no signup, scriptable.
MCP server (Claude Code / Cursor / Windsurf)	Yes	No	Editor reads the extraction as a live resource.
DTCG W3C tokens	Yes	No	Industry-standard token spec.
Tailwind + CSS vars + React/Vue/Svelte themes	Yes	No	Generated alongside the markdown.
iOS / Android / Flutter / WordPress	Yes	No	Multi-platform emitters.
Figma variables + Figma plugin	Yes	No	Figma-side import takes one click.
Component anatomy (typed React stubs)	Yes	No	Variant × size × state matrices, typed.
Voice extraction (tone, CTA verbs, heading style)	Yes	No	The words that match the paint.
Motion tokens + scripted WebM replay	Yes	No	Transitions and keyframes captured.
Brand-book PDF (chapter breaks, footers, attached tokens)	Yes	No	New in v12.11.
CI drift bot (PR comment + scored tokens)	Yes	No	designlang ci. Works in any CI.
Clone — runnable Next.js repo from a URL	Yes	No	designlang clone. One command, real project.
Local studio (clickable swatches, zero account)	Yes	No	designlang studio → localhost:4837.
Open source	Yes	No	github.com/Manavarya09/design-extract.

Run them both. Decide for yourself.

No signup, no API key. The whole CLI lives behind npx.

Try it live