#635BFF
#0A2540
#F7FAFC
#1A1F36
#F6F9FC
94
a11y
91
score
8px
radius
designlangv10§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.
§00v10 — intent · visual DNA · prompt pack
The Intent release.
Everything else captures how a site looks. v10 captures what it is — the semantic layer an LLM needs to rebuild a site faithfully, not just restyle a generic scaffold.
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)
§00v9 — motion · anatomy · voice
A · motion
Motion language
Easing families, springs, duration tokens, scroll-linked animation 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;
}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
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)
D · visual-diff
designlang visual-diff
Two URLs, one HTML file. Embedded screenshots, size deltas, changed tokens. No server needed.
$ designlang visual-diff \ https://staging.app.com \ https://app.com
§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> --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.