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.

Getting started

Read your first site from the command line or the browser in about a minute.

designlang reads a live website with a headless browser and writes out its design system: colours, type, spacing, shadows, motion and components, as W3C DTCG tokens, a Tailwind config, CSS variables, a DESIGN.md and more. There are two ways to run it.

Option 1: the CLI (free)

You need Node.js 20 or later. There is no account and no API key.

npx designlang stripe.com

Everything lands in ./design-extract-output. The first run downloads a Chromium build; if you would rather reuse the Chrome you have, add --system-chrome. Run npx designlang install-browser to fetch the bundled one ahead of time.

Useful first flags

--dark also reads the dark mode.
--pages 5 reads five more canonical pages (pricing, docs, blog and so on).
--platforms all adds iOS, Android, Flutter and WordPress output.
--pdf renders a brand-book PDF.
--json prints the raw result for scripts and CI.

The full list is in the CLI reference.

Option 2: designlang.app

Paste an address on the watch page and the site is read for you. Signed-in accounts get 3 free runs. After that, Pro is $9 a month with 200 credits. A saved result becomes a project in the Vault, which unlocks comparing, monitoring and sharing.

The CLI and the website run the same engine. The CLI is MIT licensed and unlimited. The website adds hosting: history, scheduled checks, alerts, teams and an API.

What next

Save a result and compare two versions: Vault and diff.
Get told when a site changes: Monitoring.
Give your AI editor the real brand rules: MCP setup.
Catch drift on pull requests: GitHub Action.