designlang v11

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.

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.

01
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.

02
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.

03
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
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.

  1. 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)
  2. 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
  3. 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
  4. 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
  5. 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%
  6. 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
  7. 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
  8. 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 ...
  9. 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)

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.

  1. 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
  2. 02
    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;
    }
  3. 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)
  4. 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
  5. 05
    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
  6. 06
    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

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

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
§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>/.

§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
rule order →↑ specificityn=50
collapsed score: a×100 + b×10 + c. rising tail = accumulated !important wall.
-webkit-183-moz-41-ms-7-o-2duplicates9,041
§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.117.84AA-normal
#8B8778 on #0A09083.2815.92AA-normal
#FF4800 on #0A09083.5115.31AAA-normal

designlang only suggests colors that already exist in the extracted palette. No invented tokens.

§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
navherofeaturespricingtestimonialsfooter
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;

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.
94
a11y
91
score
8px
radius
Tight palette, disciplined spacing scale. The gradient hero is one of the few remaining brand indulgences.
vercel.com2026Next.js
#0A0A0A
#FAFAFA
#EAEAEA
#A1A1A1
#0070F3
Vercel. Design as a system.
92
a11y
88
score
6px
radius
A monochrome system with a single blue for links. Geist carries almost the entire identity.
linear.app2026Next.js
#5E6AD2
#08090A
#1C1D1F
#D2D4E6
#F7F8F8
Linear. Design as a system.
90
a11y
89
score
8px
radius
Dark-first marketing with a precise purple. Every surface has been rounded to exactly 8px.
github.com2026Rails
#0969DA
#0D1117
#F6F8FA
#1F2328
#D0D7DE
GitHub. Design as a system.
96
a11y
82
score
6px
radius
Primer is the reason. Densely informational and accessible — but the marketing pages drift.
figma.com2026Ember
#F24E1E
#0D0D0D
#FFFFFF
#A259FF
#1ABCFE
Figma. Design as a system.
88
a11y
85
score
5px
radius
The only site where the brand colors from the logo are still visible across the whole product.
apple.com2026Custom
#0071E3
#1D1D1F
#F5F5F7
#86868B
#FBFBFD
Apple. Design as a system.
93
a11y
94
score
12px
radius
Four grays, one blue, SF Pro. The spacing and type ramp is the most imitated system on the web.

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.

Featuredesignlangv0Builder.io Visual CopilotStyle DictionarySubframeProject 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.
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.

  1. clone the repo
  2. open chrome://extensions
  3. toggle developer mode
  4. load unpacked → chrome-extension/

Manifest v3. Only permission: activeTab.

source →