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.

Privacy policy

Last updated 3 November 2026. This covers designlang.app. The designlang CLI runs on your own machine and sends nothing to us.

What we collect

Your account. When you sign in with GitHub or Google we receive your email address and the account ID from that provider. We don't get your password.
Your runs. For each live run on the website we store the site URL you ran, which tool you used (extract, motion or studio) and when. This is your run history on the account page and how we count your free runs and your monthly credits.
Your plan. If you subscribe, we store your subscription status, renewal date and the customer ID from our payment provider. We never see or store your card details.
Extraction results. The design data read from a public site (colours, type, spacing) is cached for 24 hours so repeat reads are fast. It describes the public site, not you.

Why we use it

To sign you in, give you your free runs and credits, check whether you have an active plan, show your history, and keep the service from being overloaded. We don't sell your data, show ads based on it, or use it to train models.

Who processes it

Supabase stores accounts and run history (Mumbai region).
Dodo Payments is the merchant of record for subscriptions. It handles checkout, card details, invoices and tax under its own privacy policy.
Cloudflare serves the website.
Oracle Cloud hosts the server that runs live reads.
GitHub and Google handle sign-in under their own policies.

How long we keep it

Account data and run history stay while your account exists. Cached extraction results expire after 24 hours. Payment records are kept by Dodo Payments as the law requires.

Your choices

You can cancel your plan any time from your account page. To see, export or delete your account and run history, email us and we'll do it within 30 days. Deleting your account also removes your run history.

Contact

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