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.

Simple pricing

The CLI is free. On this site, designlang runs a real browser for you, so after your 3 free runs you need a plan. Work alone on Pro, or share a workspace on Team or Agency.

Free

CLI and 3 runs

$0forever

Every feature on your own machine, plus a taste of the website.

3 live runs on designlang.app
The CLI, with every feature, on your own machine
1 project in the Vault

npx designlang stripe.com

Pro

Just you

$9per month

Run it in the browser, with nothing to install.

200 credits a month: one credit per extraction, motion or studio run
10 projects and 10 monitors
Your run history, saved to your account
Cancel any time from your account page

Accounts are coming soon.

Team

5 seats

$29per month

A shared workspace for a small design or product team.

5 seats, with owner, admin, editor and viewer roles
1,000 credits a month, shared by the whole team
50 projects and 25 monitors, checked daily
Comments on snapshots, tokens and components, with @mentions

Accounts are coming soon.

Agency

15 seats

$79per month

For studios that watch many client sites.

15 seats and the same roles as Team
3,500 credits a month, shared
200 projects and 100 monitors, checked daily
Everything in Team

Accounts are coming soon.

Enterprise

Custom

Talk to us

When Agency is not enough.

More seats, credits and monitors than Agency
Invoicing and a signed agreement
Help setting it up

Email us

You get 3 free runs on the website once you sign in.

Before you pay

What counts as a run?: Each extraction, motion read or studio session you start on designlang.app costs one credit. Downloading or sharing a result you already have doesn’t. Pro has 200 credits a month, which reset on the 1st (UTC) and don’t roll over. A run that fails to deliver a result gives its credit back.
How do seats and shared credits work?: Team and Agency belong to a workspace, not a person. Everyone in it draws on one pool of credits (1,000 a month on Team, 3,500 on Agency), and an open invite holds a seat until it is accepted or revoked. The owner can hand the workspace to someone else, and anyone can leave.
What can each role do?: Viewers read projects, snapshots and comments. Editors also save snapshots, run sites, manage monitors, comment and set baselines. Admins also invite people, publish changelogs and manage Brand Context tokens. The owner also handles billing.
Is the CLI still free?: Yes, and it will stay free and open source under the MIT licence. npx designlang <site> runs every feature on your own machine, with no account.
Can I cancel?: Any time: Pro from your account page, Team and Agency from the workspace page. You keep the plan until the end of the period you paid for, a month or a year.
Who handles payment?: Dodo Payments, our merchant of record. They take the payment, handle sales tax and GST, and send the receipt. designlang never sees your card details.