designlang is an open-source CLI tool that crawls any live website with Playwright and emits its complete design system in W3C DTCG token format, plus Tailwind, CSS variables, Figma variables, shadcn/ui theme, and native emitters for iOS SwiftUI, Android Compose, Flutter, and WordPress block themes.

Does designlang work with AI coding agents like Claude Code and Cursor?

Yes. designlang ships a stdio MCP server (designlang mcp) that exposes extracted tokens, regions, components, CSS health, and accessibility remediation as MCP resources and tools, plus an --emit-agent-rules flag that writes .cursor/rules/designlang.mdc, .claude/skills/designlang/SKILL.md, CLAUDE.md.fragment, and agents.md.

How is designlang different from Style Dictionary, Subframe, v0, Builder.io, and Project Wallace?

designlang extracts from a live rendered URL, not a Figma file or a manually-authored token source. It outputs strict DTCG with a semantic/primitive layering and composite tokens, ships multi-platform emitters (iOS, Android, Flutter, WordPress) from one extraction, runs a CSS health audit plus a11y remediation, classifies page regions, and detects reusable components automatically. It is open-source under MIT and runs locally as a CLI or MCP server.

Is designlang free and open source?

Yes. designlang is MIT-licensed, free, and fully open-source. The CLI installs with npx designlang and requires only Node.js 20 or later. The website at designlang.manavaryasingh.com offers a free rate-limited extraction for quick demos.

What output formats does designlang support?

W3C DTCG JSON (primitive, semantic, composite layers), Tailwind CSS config, CSS custom properties, Figma Variables JSON, shadcn/ui theme, React / Vue / Svelte theme objects, iOS SwiftUI Color + CGFloat extensions, Android Jetpack Compose Theme.kt and colors.xml, Flutter ThemeData, and a WordPress block theme skeleton (theme.json, style.css, templates).

designlang v11

§00 — features

Every capability,
one page.

Three commands at the top — clone, ci, studio — sit on a stack of nine semantic classifiers, six v9 tools, an editorial token browser, a live MCP server, multi-platform emitters, CSS health, A11y remediation, and four install tracks. Everything below this line is real, shipped, and free.

§01v11 — clone · ci · studio

The release that kills the competition

Stop shipping tokens.
Start shipping the outcome.

v11 is three commands that end three paid categories. A working clone. A regression bot. A local studio. One CLI, no account, no keys.

designlang clone

A working Next.js repo. From any URL. In one command.

v0, Lovable, Locofy, Builder — all hand you prompts or styled scaffolds. We hand you a project.

$ npx designlang clone stripe.com

Reading intent . . . . . . . . . pricing (0.87)
Reading sections . . . . hero → logo-wall
                         → feature-grid → pricing
                         → faq → cta → footer
Reading voice  . . . . . . . . . technical · we→you
Writing package.json, globals.css, layout.js,
        page.js (7 sections), README.md

cd cloned-design && npm install && npm run dev

Paid peers: $200+/mo · output = styled scaffold. designlang: $0 · output = the repo.

designlang ci

A design regression bot. On every pull request. Free.

Chromatic for a design system you don't own yet. Drift + score + markdown comment. Any CI — GitHub, GitLab, CircleCI, local.

$ npx designlang ci app.yoursite.com \
    --tokens ./tokens.json \
    --fail-on notable-drift

## designlang · regression guard

Overall  🟢 92/100  grade A
Drift    ≠ notable-drift (ratio 0.24)

| token          | local   | live    |
|----------------|---------|---------|
| color.primary  | #3b82f6 | #533afd |
| radius.md      | 6px     | 8px     |

→ wrote .designlang-ci/ci-report.md (exit 1)

No dashboard. No subscription. No account. The report is a file you can paste anywhere.

designlang studio

A local studio. For the extraction you just ran.

Click swatches to copy hex. Read your reading order. Inspect voice, motion, DNA. All on localhost, all from the last extraction on disk.

$ npx designlang studio

  designlang studio
  serving ./design-extract-output
  prefix: stripe-com

  → http://localhost:4837

  §01 DNA      pricing · brutalist · shadcn
  §02 Tokens   48 colors · 12 sizes · 7 radii
  §03 Voice    technical · we→you · start·ship
  §04 Motion   ease-out 61% · 220ms · springy

Figma Tokens Studio is $100+/seat. This is zero-dep Node + your browser.

Everyone else sells the inputs. designlang ships the outputs.

$0 · MIT · one CLI · no account

§02v10 — semantic intelligence

powers v11 from the inside

The semantic layer.

What clone, ci, and studio read under the hood: nine classifiers that label what a site is, not just how it looks.

A
intent
Page intent
A classifier that labels the URL landing / pricing / docs / blog / product / about / dashboard / auth / legal — with confidence and ranked alternates.
```
type: pricing (0.87)
signals: url /pricing, $19/mo grid,
  3 cards, 2 CTAs
alternates: landing (0.21)
```
B
sections
Section roles
Hero, feature-grid, logo-wall, stats, testimonial, pricing-table, faq, steps, comparison, gallery, bento, cta, footer. Plus extracted slot copy and reading order.
```
reading order:
  hero → logo-wall → feature-grid
  → testimonial → pricing-table
  → faq → cta → footer
```
C
material
Material language
Glassmorphism, neumorphism, flat, brutalist, skeuomorphic, material-you, soft-ui — inferred from shadow complexity, backdrop-filter, saturation, and geometry.
```
label: brutalist (0.78)
shadow profile: hard (blur 0)
avg radius: 2px
saturation: 0.91
```
D
imagery
Imagery style
Photography, 3d-render, isometric, flat-illustration, gradient-mesh, icon-only, screenshot — with dominant aspect ratio and image-radius profile.
```
label: flat-illustration
svg: 12/14 (86%)
aspect: square-ish
radius profile: rounded
```
E
library
Component library
Identifies shadcn/ui, Radix, Headless UI, MUI, Chakra, Mantine, Ant Design, Bootstrap, HeroUI/NextUI, Tailwind UI, Vuetify, or plain Tailwind.
```
library: shadcn/ui (0.82)
evidence:
  - shadcn css tokens
  - radix attributes x 4
tailwind utility density 71%
```
F
logo
Logo extraction
--full pulls the live SVG (or raster bytes) and samples clearspace. Writes *-logo.svg and *-logo.json.
```
kind: svg
dims: 112 x 28
aspect: 4.000
clearspace: 48/32/48/32 px
```
G
multipage
Multi-page crawl
--full or --pages N auto-discovers pricing / docs / blog / about / product from nav and emits a cross-page consistency report.
```
pages: 5 (+ homepage)
shared colors: 17
pairwise jaccard: 0.82 avg
per-page uniques flagged
```
H
prompts
Prompt pack
Ready-to-paste prompts for v0, Lovable, Cursor, Claude Artifacts. Tokens, section order, voice, and library all inlined so one paste is enough.
```
*-prompts/
  v0.txt
  lovable.txt
  cursor.md
  claude-artifacts.md
  recipe-button.md ...
```
I
smart
--smart classifier
When heuristic confidence dips below 0.6, optionally route through OpenAI or Anthropic. Zero-dep fetch; no key, no call.
```
$ designlang <url> --smart
provider: anthropic
model: claude-haiku-4-5
fallback: heuristic (still prints)
```

§03v9 — motion · anatomy · voice

§00.9 — v9 · supporting tools

The how it looks.
And how it moves, reads,
and drifts.

Six extractors that sit under v10 — motion, anatomy, drift, visual-diff, voice, lint. Each writes a single file. Each exits non-zero when it matters.

01
A · motion
Motion language
Easing families, springs, duration tokens, scroll-linked detection, keyframe classification. Emits *-motion-tokens.json.
```
feel: springy
durations: xs 150ms · sm 220ms · md 380ms
easings: ease-out 61% · spring 18%
scroll-linked: yes
```

B · anatomy

Component anatomy v2

Variant × size × state matrices with slot inference. Emits typed React stubs (*-anatomy.tsx).

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  leadingIcon?: ReactNode;
  badge?: ReactNode;
}

03
C · drift
designlang drift
Compare local tokens against a live site. Drifted, matched, unknown — verdict + ratio.
```
$ designlang drift \
  https://app.com \
  --tokens ./src/tokens.json
Verdict: notable-drift (0.24)
```
04
D · visual-diff
designlang visual-diff
Two URLs, one HTML file. Embedded screenshots, size deltas, changed tokens. No server.
```
$ designlang visual-diff \
  https://staging.app.com \
  https://app.com
```

E · voice

Brand voice

Tone, pronoun posture, heading style, CTA verbs. The words that match the paint.

tone: technical
pronoun: we → you
headings: Sentence case (tight)
cta: start 14 · ship 8 · deploy 5

F · lint

designlang lint

Audit your own tokens. Color sprawl, spacing variance, contrast. Exits non-zero. CI-ready.

$ designlang lint ./tokens.json
Score 74/100 · Grade C
ERROR [contrast-wcag-aa] 2 pairs fail
WARN  [color-sprawl] 3 near-dupes

§04DTCG token browser

Aliases, not values.

v7.0 writes tokens in W3C DTCG. Hover a semantic row on the left and watch the alias resolve through to its primitive on the right.

semantic

color.action.primary{primitive.color.brand.primary}

color.surface.default{primitive.color.background.bg0}

color.text.body{primitive.color.neutral.n900}

radius.control{primitive.radius.r1}

typography.bodysohne-var 16px/1.5 400

primitive

color.brand.primary#533afd

color.brand.secondary#0a2540

color.neutral.n100#f6f9fc

color.neutral.n500#8792a2

color.neutral.n900#0a2540

color.background.bg0#ffffff

radius.r04px

radius.r18px

spacing.s28px

spacing.s416px

§05MCP server

Your editor reads this.

The MCP server exposes five resources and five tools over stdio, speaking JSON-RPC to Claude Code, Cursor, and Windsurf. See §09 for install.

.cursor/rules/designlang.mdcalwaysApply: true

---
description: Design system extracted from https://stripe.com — use these tokens, do not invent new ones.
globs: **/*.{ts,tsx,jsx,js,css,scss,html,vue,svelte,swift,kt,dart,php}
alwaysApply: true
---

# Design system reference

Source: https://stripe.com
Extracted by designlang v7.0.0 on 2026-04-18T12:00:00Z

## Semantic tokens (use these)
- color.action.primary: #533afd
- color.surface.default: #ffffff
- color.text.body: #0a2540
- radius.control: 8px
- typography.body.fontFamily: sohne-var, Helvetica Neue, Arial, sans-serif

## How to use
- Prefer `semantic.*` tokens over `primitive.*`.
- Never invent new tokens or hex values; reuse the ones above.
- When a value is missing, pick the closest existing semantic token and flag the gap.
- Reference tokens by their dotted path (e.g. `semantic.color.action.primary`).

designlang-mcp · stdio

▍

▍

▍

▍

§06multi-platform emitters

§03 Multi-platform emitters

One token. Five languages.

The same semantic token, emitted in five native dialects. No style leaks, no translation layer.

tokens.css

:root {

  --color-action-primary: #533afd;

  --radius-control: 8px;

designlang <url> --platforms all writes these files under ./design-extract-output/<platform>/.

§04CSS health audit

§04 CSS health

The stylesheet is the problem.

Most sites ship 40–90% unused CSS, long walls of !important escalations, and a specificity graph that rises forever. v7.0 surfaces all of it — not as a vanity score, but as exact declaration-level evidence.

89%

unused css

764

!important rules

9,041

duplicate declarations

stylesheets analyzed

specificity distributionoutliers: specificity > 200

collapsed score: a×100 + b×10 + c. rising tail = accumulated !important wall.

-webkit-183-moz-41-ms-7-o-2duplicates9,041

§06Regions and components

§06 Regions + components

Structure, not just style.

designlang labels the page before measuring it. Nav, hero, pricing, footer — nine roles; landmarks first, heuristics second. Components are clustered by DOM signature and style vector, not by guessing at class names.

§06.a Region classifier

hover a region to match its role in the legend →

rolesignal

navtop-anchored navigation. landmark + top-anchored + link density > 0.5
heroprimary above-the-fold statement. large type + early viewport + CTA
featuresgrid of benefit/feature cells. 3+ siblings, similar structural hash
pricingprice tiers and plans. currency symbol + repeated card shape
testimonialssocial proof / quotes. blockquote or quote glyph + attribution
ctastandalone conversion band. single button + heading, full-width container
footerbottom landmark. landmark + bottom-anchored + link density high
sidebarlateral aside content. landmark=complementary or aside element
contentprose / article body. main landmark, paragraph density, reading width

§06.b Component clusters

button — 24 instances, 4 variants (primary, secondary, ghost, disabled)

primary · 14

Continue

background: var(--accent);
color: var(--paper);
border: 1px solid var(--accent);
padding: 10px 18px;

secondary · 6

Continue

background: transparent;
color: var(--ink);
border: 1px solid var(--ink);
padding: 10px 18px;

ghost · 3

Continue

background: transparent;
color: var(--ink);
border: 1px solid transparent;
padding: 10px 18px;
text-decoration: underline;
text-underline-offset: 3;

disabled · 1

Continue

background: var(--paper-2);
color: var(--ink-3);
border: 1px solid var(--ink-3);
padding: 10px 18px;

§10specimens

§07 — Specimens

Six design systems,
one format.

Each specimen was crawled once and written to DTCG. The page accent below is pulled from the specimen's own extracted primary — the same semantic.color.action.primary your agent would get over MCP.

stripe.com2026Next.js

#635BFF

#0A2540

#F7FAFC

#1A1F36

#F6F9FC

Stripe. Design as a system.

a11y

score

8px

radius

vercel.com2026Next.js

#0A0A0A

#FAFAFA

#EAEAEA

#A1A1A1

#0070F3

Vercel. Design as a system.

a11y

score

6px

radius

linear.app2026Next.js

#5E6AD2

#08090A

#1C1D1F

#D2D4E6

#F7F8F8

Linear. Design as a system.

a11y

score

8px

radius

github.com2026Rails

#0969DA

#0D1117

#F6F8FA

#1F2328

#D0D7DE

GitHub. Design as a system.

a11y

score

6px

radius

figma.com2026Ember

#F24E1E

#0D0D0D

#FFFFFF

#A259FF

#1ABCFE

Figma. Design as a system.

a11y

score

5px

radius

apple.com2026Custom

#0071E3

#1D1D1F

#F5F5F7

#86868B

#FBFBFD

Apple. Design as a system.

a11y

score

12px

radius

§11compared

§08 — Compared

Where designlang doesn't win,
it says so.

We picked five tools doing closely adjacent work. The matrix below is our honest assessment on 2026-04-18, written by someone who actually uses all six.

Feature	v0	Builder.io Visual Copilot	Style Dictionary	Subframe	Project Wallace
Extracts from a live URL	—		—	—
Emits W3C DTCG tokens	—	—		—	—
Semantic alias layer	—	—			—
Multi-platform output (iOS, Android, Flutter)	—	—		—	—
MCP server over stdio	—	—	—	—	—
CSS health audit	—	—	—	—
A11y remediation suggestions	—		—	—
Component cluster detection			—		—
Offline / local-only	—	—		—	—
Open source / MIT	—	—		—

What designlang is not

It is not a design-to-code generator. It extracts the system, not the components as JSX.
It is not a hosted cloud service. The free website extractor is rate-limited; production use should run the CLI or MCP server locally.
It is not a Figma plugin. designlang reads the rendered DOM, not the Figma file — the output is what your users actually see, not what a designer intended.

§12install

track 01

CLI

Zero install via npx. Node ≥ 20.

1  $ npx designlang <url>
2  $ npx designlang <url> --platforms all
3  $ npx designlang <url> --emit-agent-rules
4  $ npx designlang <url> --cookie-file ./cookies.txt
5  $ npx designlang <url> --insecure
6  $ npx designlang <url> --user-agent "custom-ua"
7  $ npx designlang <url> --tokens-legacy

track 02

MCP server

claude_desktop_config.json / ~/.cursor/mcp.json

{
  "mcpServers": {
    "designlang": {
      "command": "npx",
      "args": [
        "designlang",
        "mcp",
        "--output-dir",
        "./design-extract-output"
      ]
    }
  }
}

Once connected, every MCP-aware agent can query your last extraction.

track 03

Agent rules

One flag emits ready-to-commit rules for every popular agent.

$ npx designlang <url> --emit-agent-rules

.cursor/rules/designlang.mdc
.claude/skills/designlang/SKILL.md
CLAUDE.md.fragment
agents.md

track 04 · chrome ext

Chrome extension

One click from any tab. Opens this page with the URL prefilled.

clone the repo
open chrome://extensions
toggle developer mode
load unpacked → chrome-extension/

Manifest v3. Only permission: activeTab.

source →

Every capability,one page.

Stop shipping tokens.Start shipping the outcome.

A working Next.js repo. From any URL. In one command.

A design regression bot. On every pull request. Free.

A local studio. For the extraction you just ran.

The semantic layer.

Page intent

Section roles

Material language

Imagery style

Component library

Logo extraction

Multi-page crawl

Prompt pack

--smart classifier

The how it looks. And how it moves, reads, and drifts.

Motion language

Component anatomy v2

designlang drift

designlang visual-diff

Brand voice

designlang lint

Aliases, not values.

Your editor reads this.

One token. Five languages.

The stylesheet is the problem.

From score to fix.

Structure, not just style.

Six design systems,one format.

Where designlang doesn't win,it says so.

What designlang is not

CLI

MCP server

Agent rules

Chrome extension

Every capability,
one page.

Stop shipping tokens.
Start shipping the outcome.

The how it looks.
And how it moves, reads,
and drifts.

Six design systems,
one format.

Where designlang doesn't win,
it says so.