design-extract

<p align="center"> <img src="https://raw.githubusercontent.com/Manavarya09/design-extract/main/website/public/logo-specimen.svg" alt="designlang — reads a website the way a developer reads a stylesheet" width="900"> </p> <p align="center"> <a href="https://www.npmjs.com/package/designlang"><img src="https://img.shields.io/npm/v/designlang?color=0A0908&labelColor=F3F1EA&label=npm" alt="npm version"></a> <a href="https://github.com/Manavarya09/design-extract/blob/main/LICENSE"><img src="https://img.shields.io/github/license/Manavarya09/design-extract?color=0A0908&labelColor=F3F1EA" alt="license"></a> <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/designlang?color=0A0908&labelColor=F3F1EA" alt="node version"></a> <a href="https://designlang.app/"><img src="https://img.shields.io/badge/website-live-FF4800?labelColor=F3F1EA" alt="website"></a> </p> <p align="center"> <a href="https://trendshift.io/repositories/26231?utm_source=trendshift-badge&amp;utm_medium=badge&amp;utm_campaign=badge-trendshift-26231" target="_blank" rel="noopener noreferrer"><img src="https://trendshift.io/api/badge/trendshift/repositories/26231/daily?language=JavaScript" alt="Manavarya09%2Fdesign-extract | Trendshift" width="250" height="55"/></a> <a href="https://trendshift.io/repositories/26231?utm_source=trendshift-badge&amp;utm_medium=badge&amp;utm_campaign=badge-trendshift-26231" target="_blank" rel="noopener noreferrer"><img src="https://trendshift.io/api/badge/trendshift/repositories/26231/weekly?language=JavaScript" alt="Manavarya09%2Fdesign-extract | Trendshift" width="250" height="55"/></a> </p> <p align="center"> Built by <a href="https://www.manavaryasingh.com">Manav Arya Singh</a> (<a href="https://github.com/Manavarya09">@Manavarya09</a>) </p> <p align="center"> <img src="https://raw.githubusercontent.com/Manavarya09/design-extract/main/designlang.png" alt="designlang in action — extracts DTCG tokens, Tailwind config, Figma variables, brand book PDF" width="100%"> </p>

Sponsors

<p align="center"> <a href="https://www.atlascloud.ai/?utm_source=github&utm_medium=referral&utm_campaign=design-extract"> <img src="./assets/atlas-cloud-logo.svg" alt="Atlas Cloud" width="220"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="https://bloome.im/agent/join/XP8NQwFj?ref=9ZZRRy82"> <img src="./assets/bloome.png" alt="Bloome" width="360"> </a> </p> <p align="center"> <strong><a href="https://www.atlascloud.ai/?utm_source=github&utm_medium=referral&utm_campaign=design-extract">Atlas Cloud</a></strong> — powers OpenAI-compatible <code>--smart</code> classification. For AI coding workflows, try the <a href="https://www.atlascloud.ai/console/coding-plan?utm_source=github&utm_medium=referral&utm_campaign=design-extract">Atlas Cloud coding plan</a>. <br> <strong><a href="https://bloome.im/agent/join/XP8NQwFj?ref=9ZZRRy82">Bloome</a></strong> — deploys your AI clone to handle every audience conversation, running in the cloud, 24/7. <br> Try designlang on <a href="https://bloome.im/agent/join/XP8NQwFj?ref=9ZZRRy82">Bloome</a>. </p>

---

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
npx designlang dna stripe.com                          # place it in the measured design space: neighbours + percentiles ← v13.1
npx designlang site stripe.com                         # whole-site: one canonical system + consistency grade ← v12.23
npx designlang fidelity stripe.com --clone localhost:3000  # score a clone vs the original (visual + motion) ← v12.24
npx designlang gallery                                 # static shareable gallery of measured clones      ← v12.24
npx designlang studio                                  # live token editor: edit, preview, export, share ← v12.19
npx designlang verify stripe.com                       # fidelity score: rebuild from tokens vs live ← v12.18
npx designlang pair stripe.com linear.app              # fuse two designs (visuals A × voice B)    ← v12.8
npx designlang brand stripe.com                        # full brand-guidelines book (13 chapters)  ← v12.7
npx designlang theme-swap stripe.com --primary "#ff4800"  # recolour around your brand        ← v12.6
npx designlang pack stripe.com                         # one polished design-system directory ← v12.4
npx designlang remix stripe.com --as cyberpunk         # restyle in another vocabulary       ← v12.3
npx designlang remix stripe.com --all                  # emit all 6 vocabs at once           ← v12.3
npx designlang grade https://stripe.com --badge        # report card + SVG badge             ← v12.2
npx designlang battle stripe.com vercel.com            # head-to-head graded fight           ← v12.2
npx designlang clone https://stripe.com                # working Next.js starter
npx designlang --full https://stripe.com               # screenshots + responsive + interactions

Drop a live design-score badge in any README:

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

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:

| File | What it is | |---|---| | *-site-system.json | canonical unified tokens + coverage + drift | | *-site-coverage.md | every token tagged 🟢 site-wide / 🟡 section / 🔴 page-local, with the pages using it | | *-site-consistency.md | a 0–100 consistency grade, per-category breakdown, and the off-system outliers to consolidate |

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 score that overclaims is worse than no score at all:

• A missing measurement stays missing. Features the page never exposed are null, never a substituted midpoint, and distance skips them instead of comparing against an invented value.
• Every number carries its evidence. Distances report how many features backed them, percentiles name the corpus and its size, and the report warns when coverage was partial.
• The space is versioned. Feature order and normalization are frozen per vector version, and a corpus built by different rules is rejected rather than silently compared against.

Install

npm i -g designlang                         # global
designlang install-browser                  # one-time: the Chromium designlang drives
npx skills add Manavarya09/design-extract   # as an agent skill (40+ agents)

npm install no longer downloads a browser, so it works in CI, Docker and behind proxies. install-browser fetches the Chromium matching the bundled Playwright (add --with-deps on bare Linux). Without it, designlang falls back to an installed Google Chrome.

Use in Claude Code (plugi