#635BFF
#0A2540
#F7FAFC
#1A1F36
#F6F9FC
94
a11y
91
score
8px
radius
designlangv7.0§00 — Entry
A website
reads as a
design system.
designlang crawls any URL and returns its complete design language — tokens, typography, spacing, shadows, components, regions, health, remediations — in W3C DTCG format, with native emitters for iOS, Android, Flutter and WordPress, and a live MCP server your editor can read.
Free, rate-limited to 3 extractions per day. Private IPs rejected. No accounts.
§01DTCG 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
§02MCP 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
▍▍▍▍§03Multi-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
1
:root {2
--color-action-primary: #533afd;
3
--radius-control: 8px;
4
}
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
14
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
§05A11y remediation
§05 A11y remediation
From score to fix.
Most tools hand you a failing contrast ratio. designlang hands you the next color in your own palette that passes AA. Drag to see the difference.
Aa
failing pair#B8B199 on #F3F1EAFAIL 1.90:1
Aa
remediated#B8B199 on #F3F1EAFAIL 1.90:1
#B8B199#B8B199#403C34
remediateFailingPairs() output
originalsuggestedratiorule
#B8B199 on → #403C342.11 → 7.84AA-normal
#8B8778 on → #0A09083.28 → 15.92AA-normal
#FF4800 on → #0A09083.51 → 15.31AAA-normal
designlang only suggests colors that already exist in the extracted palette. No invented tokens.
§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;
§07Specimens
§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.
§08Compared
§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 | designlang | 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.
§09Install
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> --tokens-legacy 5 $ npx designlang <url> --dark
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