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.

MCP setup

Connect Claude Code, Cursor or any MCP client to designlang, locally or hosted.

designlang speaks the Model Context Protocol in two ways. A local server comes with the free CLI. The hosted Brand Context server serves a saved project over HTTP.

Local (free)

The local server exposes your latest extraction as resources and tools over stdio. Run an extraction first, then add the server.

npx designlang stripe.com
claude mcp add designlang -- npx designlang mcp

For Cursor or another client, use a stdio entry that runs npx designlang mcp. The server reads the extraction from ./design-extract-output, or the folder you pass with --output-dir.

Hosted Brand Context (Pro)

Open a saved project and go to Connect.
Create a token. It starts with dlk_ and is shown once.
Copy the command for your client.

claude mcp add --transport http designlang https://designlang.app/api/mcp \
  --header "Authorization: Bearer dlk_YOUR_TOKEN"

The Connect tab shows the exact URL for your deployment, and ready snippets for Cursor and for a shared .mcp.json that reads the token from DESIGNLANG_KEY, so a committed file holds no secret.

Tools

Tool	What it does
`get_brand_rules`	Rules for writing UI with this system.
`get_design_md`	Colour, type, scales and motion as DESIGN.md.
`get_snapshot_info`	Which snapshot is being served.
`find_nearest_token`	The closest token to a value you give.
`check_code`	Lint a piece of code against the system.

Each key is limited to 60 requests a minute. Revoke a token from the project at any time.

Brand Check in CI

Lint files on your own machine against a saved project, without sending your code anywhere:

DESIGNLANG_KEY=dlk_YOUR_TOKEN npx designlang check src --context https://designlang.app