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.

Terms of service

Last updated 3 November 2026. By using designlang.app you agree to these terms. The designlang CLI is separate open-source software under the MIT licence.

The service

designlang.app opens a public web page in a real browser and reports its design system: colours, type, spacing, motion and components. Signed-in users get 3 free live runs. After that, live runs on the website need the Pro plan.

The Pro plan

Pro costs $9 a month or $90 a year, billed in advance for the period you pick until you cancel. Prices may include tax added at checkout.
Payments are processed by Dodo Payments, our merchant of record, which also issues your invoices.
You can cancel any time from your account page. You keep Pro until the end of the period you paid for, and you won't be charged again.
If something went wrong with a charge, email us within 14 days and we'll make it right, including a refund where it's fair.
Pro includes 200 credits a month. One credit is one extraction, motion or studio run. Credits reset on the 1st of each month (UTC) and don't roll over. A run that fails to deliver a result gives its credit back. To keep the service working for everyone, we may slow or pause runs that look automated or abusive.

Your responsibilities

Only run sites you're allowed to access, and respect their terms and the law.
Don't use the service to attack, overload or scrape sites at scale, or to get around our limits.
Extracted tokens describe someone else's design. You're responsible for how you use them, including trademarks and copyright.

No warranty

The service is provided as is. Extraction reads what a page renders and can be incomplete or wrong. We aren't liable for indirect losses, and our total liability is limited to what you paid us in the last three months.

Changes and ending

We may update these terms and will note the date above. We may suspend accounts that break them. You can stop using the service and delete your account any time.

Contact

designlang is run by Manav Arya Singh, India. Email manavarya0178@gmail.com.