designlang

Built by Manav Arya Singh ( @Manavarya09 )

Sponsors

Atlas Cloud — powers OpenAI-compatible --smart classification. For AI coding workflows, try the Atlas Cloud coding plan .

Bloome — deploys your AI clone to handle every audience conversation, running in the cloud, 24/7.

Try designlang on Bloome .

designlang points a headless browser at any URL and reads the design system off the live DOM. One command emits 17+ files — DTCG tokens, Tailwind config, shadcn theme, Figma variables, motion tokens, typed component anatomy, brand voice, page-intent labels, and a paste-ready prompt pack for v0 / Lovable / Cursor / Claude Artifacts.

It also goes where extractors don't: layout patterns, responsive behavior across 4 breakpoints, hover / focus / active states, WCAG contrast scoring, multi-page consistency, drift checks against a live source-of-truth, visual-diffs, and a shareable graded report card.

Quick start

npx designlang https://stripe.com                      # extract everything: tokens, Tailwind, shadcn, Figma, DESIGN.md

npx designlang slop https://yoursite.com # how generic does it look? a score out of 100, with every tell npx designlang verify-ui localhost:3000 --brand DESIGN.md # check your UI against your brand at 390, 768 and 1280px npx designlang mcp # give Claude Code, Cursor and Windsurf your design system npx designlang dna stripe.com # place it in the measured design space: neighbours + percentiles npx designlang site stripe.com # whole-site: one canonical system + consistency grade npx designlang fidelity stripe.com --clone localhost:3000 # score a clone against the original (visual + motion) npx designlang studio # live token editor: edit, preview, export, share npx designlang brand stripe.com # full brand-guidelines book (13 chapters) npx designlang pair stripe.com linear.app # fuse two designs (visuals from A, voice from B) npx designlang theme-swap stripe.com --primary "#ff4800" # recolour around your brand npx designlang pack stripe.com # one polished design-system directory npx designlang remix stripe.com --as cyberpunk # restyle in another vocabulary (--all for all six) npx designlang grade https://stripe.com --badge # report card + SVG badge npx designlang battle stripe.com vercel.com # head-to-head graded fight npx designlang clone https://stripe.com # working Next.js starter npx designlang --full https://stripe.com # screenshots + responsive + interactions

Needs Node.js 20 or later. No account, no API key.

Drop a live design-score badge in any README:

![Design Score](https://designlang.app/badge/stripe.com.svg)

Is it generic? (slop) and is it on brand? (verify-ui)

designlang slop opens the page in a real browser and scores how generic it looks, from 0 (distinct) to 100 (generic), listing each known AI-design tell it found with what was measured and where. Add --brand DESIGN.md to also score how close the page is to your brand. Try it in the browser at designlang.app/slop.

designlang verify-ui --brand checks a screen, localhost included, at phone, tablet and desktop widths and in dark mode. It returns pass or fail, an on-brand score, and every drift with the expected and actual value. It exits 1 on drift, so it can gate CI. Your AI editor can run the same check itself through the MCP tool verify_ui.

Watch it read — live Extraction Theatre (v13)

Don't take the output on faith — watch it happen. On designlang.app/watch you paste a URL and a real headless Chromium opens the page and reads its entire design system in real time: a split stage with the live browser on the left and the design system — palette, type, spacing, motion — assembling itself on the right as each token lifts off the page.

It's driven by the *actual* extraction (the browser's CDP screencast streamed frame-by-frame alongside the real token events), recorded so a shared link replays the exact run. No install, no account. Every gallery card can be watched the same way, and the gallery now spans 37 real-graded design systems.

Whole-site design system (site)

Most extractors read a single URL. designlang site crawls a site's canonical pages (home, pricing, docs, blog, about, product…) and synthesizes one de-duplicated system. Every token is elected by *coverage* — the share of pages that use it — so what's genuinely site-wide is separated from one-off, page-local choices. Near-identical colours are merged in OKLab. It's fully deterministic and free; no API key.

npx designlang site stripe.com --max-pages 8

You get, alongside the standard pack emitted from the canonical system:

Measured clone fidelity (fidelity + gallery)

Cloning tools all *claim* "pixel-perfect" — none of them measure it. designlang fidelity does. Point it at the original and your clone (often a local dev server) and it returns one honest number, both halves of the clone:

• Visual — full-page screenshots of each, pixel-diffed.
• Motion — extractMotion() on both, compared across feel, durations, easings, springs, keyframe kinds, scroll-linked motion, and choreography/ stagger. (Most clones reproduce static pixels and drop the motion entirely; this is where they lose.)

The two blend into a 0–100 score + letter grade, and — the part competitors don't ship — a ranked correction plan: the exact next edits that will raise the score, hardest-hitting first. Measure → fix → re-run until it converges.

npx designlang fidelity https://stripe.com --clone http://localhost:3000

npx designlang fidelity https://stripe.com --clone http://localhost:3000 --min 90 # CI gate

Generating the clone with designlang clone? Add --fidelity and it grades the clone's token basis against the live site the moment it's built — writing FIDELITY.md + a correction plan straight into the project, no separate step:

npx designlang clone https://stripe.com --fidelity

You get fidelity.md (score + motion table + correction plan), fidelity.json, a shareable fidelity-card.svg (88% · B · stripe.com), and a fidelity-diff.png loss heatmap.

Then publish them. designlang gallery scans your reports and builds a deployable static site — an index of score cards plus a permalink page per clone (each with an OG card, so a shared link unfurls the number).

npx designlang gallery --title "Our clones" --base-url https://clones.example.com

A measured design space (dna)

Every extractor on the market answers *what* a design uses. None of them answers where it sits. designlang grade returns a letter — but a letter with no reference frame is a thermometer with no scale on it.

designlang dna reduces a design to 30 deterministic features across five axes — colour, type, space, shape, motion — and ranks it against a corpus of real design systems:

npx designlang dna raycast.com

  Design DNA · https://raycast.com

30 features, 100% measurable

vs 8 systems (default)

color 65th percentile type 56th percentile space 42th percentile shape 79th percentile motion 67th percentile

Nearest 0.14 https://railway.app 0.15 https://linear.app 0.19 https://notion.so

Distance is the mean absolute difference across the features both designs have, so 0.14 reads as "the average feature is 14% of its range apart" — a number you can reason about, unlike a Euclidean distance in 30 dimensions.

The report goes past similarity to what makes a design look the way it does: the features furthest from the middle of the corpus, in plain language (*"corner radius — 100th percentile, far above the corpus"*).

Bring your own reference frame — your products, your competitors, a target look:

npx designlang dna-corpus acme.com acme.com/pricing competitor.com

npx designlang dna acme.com/new-page --corpus ./corpus.json

Three things it refuses to do, because a design sco