{"id":48934924,"url":"https://github.com/manavarya09/design-extract","last_synced_at":"2026-10-24T20:05:43.026Z","repository":{"id":378270018,"uuid":"1211361116","full_name":"Manavarya09/design-extract","owner":"Manavarya09","description":"Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.","archived":false,"fork":false,"pushed_at":"2026-10-21T16:36:14.000Z","size":14396,"stargazers_count":4316,"open_issues_count":24,"forks_count":362,"subscribers_count":13,"default_branch":"main","last_synced_at":"2026-10-22T20:16:20.801Z","etag":null,"topics":["accessibility","agent-skill","ai","chrome-extension","claude-code-plugin","cli","css","cursor","design-system","design-to-code","design-tokens","dtcg","figma","mcp-server","npx","playwright","shadcn-ui","skills-sh","tailwind","web-scraping"],"latest_commit_sha":null,"homepage":"https://www.designlang.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Manavarya09.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","accessibility":null,"support":"SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"claude":null,"gemini":null,"cursor":null,"copilot":null,"dco":null,"cla":null,"disclosure":null},"funding":{"github":["Manavarya09"]}},"created_at":"2026-04-15T10:11:22.000Z","updated_at":"2026-10-22T19:39:14.000Z","dependencies_parsed_at":"2026-10-22T20:26:24.805Z","dependency_job_id":null,"html_url":"https://github.com/Manavarya09/design-extract","commit_stats":null,"previous_names":["manavarya09/design-extract"],"tags_count":40,"template":false,"template_full_name":null,"purl":"pkg:github/Manavarya09/design-extract","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Manavarya09%2Fdesign-extract","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Manavarya09%2Fdesign-extract/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Manavarya09%2Fdesign-extract/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Manavarya09%2Fdesign-extract/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Manavarya09","download_url":"https://codeload.github.com/Manavarya09/design-extract/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Manavarya09%2Fdesign-extract/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":345237552,"owners_count":38493953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-24T02:00:07.043Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","agent-skill","ai","chrome-extension","claude-code-plugin","cli","css","cursor","design-system","design-to-code","design-tokens","dtcg","figma","mcp-server","npx","playwright","shadcn-ui","skills-sh","tailwind","web-scraping"],"created_at":"2026-04-17T11:05:10.883Z","updated_at":"2026-10-24T20:05:43.003Z","avatar_url":"https://github.com/Manavarya09.png","language":"HTML","funding_links":["https://github.com/sponsors/Manavarya09"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg 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\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/designlang\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/designlang?color=0A0908\u0026labelColor=F3F1EA\u0026label=npm\" alt=\"npm version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/Manavarya09/design-extract/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/Manavarya09/design-extract?color=0A0908\u0026labelColor=F3F1EA\" alt=\"license\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://nodejs.org\"\u003e\u003cimg src=\"https://img.shields.io/node/v/designlang?color=0A0908\u0026labelColor=F3F1EA\" alt=\"node version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://designlang.app/\"\u003e\u003cimg src=\"https://img.shields.io/badge/website-live-FF4800?labelColor=F3F1EA\" alt=\"website\"\u003e\u003c/a\u003e\n\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://trendshift.io/repositories/26231?utm_source=trendshift-badge\u0026amp;utm_medium=badge\u0026amp;utm_campaign=badge-trendshift-26231\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://trendshift.io/api/badge/trendshift/repositories/26231/daily?language=JavaScript\" alt=\"Manavarya09%2Fdesign-extract | Trendshift\" width=\"250\" height=\"55\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://trendshift.io/repositories/26231?utm_source=trendshift-badge\u0026amp;utm_medium=badge\u0026amp;utm_campaign=badge-trendshift-26231\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://trendshift.io/api/badge/trendshift/repositories/26231/weekly?language=JavaScript\" alt=\"Manavarya09%2Fdesign-extract | Trendshift\" width=\"250\" height=\"55\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Built by \u003ca href=\"https://www.manavaryasingh.com\"\u003eManav Arya Singh\u003c/a\u003e (\u003ca href=\"https://github.com/Manavarya09\"\u003e@Manavarya09\u003c/a\u003e)\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg 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%\"\u003e\n\u003c/p\u003e\n\n[![designlang on npm](https://pkgfolio.vercel.app/embed/pkg/designlang?v=2)](https://www.npmjs.com/package/designlang)\n\n## Sponsors\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.atlascloud.ai/?utm_source=github\u0026utm_medium=referral\u0026utm_campaign=design-extract\"\u003e\n    \u003cimg src=\"./assets/atlas-cloud-logo.svg\" alt=\"Atlas Cloud\" width=\"220\"\u003e\n  \u003c/a\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://bloome.im/agent/join/XP8NQwFj?ref=9ZZRRy82\"\u003e\n    \u003cimg src=\"./assets/bloome.png\" alt=\"Bloome\" width=\"360\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\u003ca href=\"https://www.atlascloud.ai/?utm_source=github\u0026utm_medium=referral\u0026utm_campaign=design-extract\"\u003eAtlas Cloud\u003c/a\u003e\u003c/strong\u003e — powers OpenAI-compatible \u003ccode\u003e--smart\u003c/code\u003e classification. For AI coding workflows, try the \u003ca href=\"https://www.atlascloud.ai/console/coding-plan?utm_source=github\u0026utm_medium=referral\u0026utm_campaign=design-extract\"\u003eAtlas Cloud coding plan\u003c/a\u003e.\n  \u003cbr\u003e\n  \u003cstrong\u003e\u003ca href=\"https://bloome.im/agent/join/XP8NQwFj?ref=9ZZRRy82\"\u003eBloome\u003c/a\u003e\u003c/strong\u003e — deploys your AI clone to handle every audience conversation, running in the cloud, 24/7.\n  \u003cbr\u003e\n  Try designlang on \u003ca href=\"https://bloome.im/agent/join/XP8NQwFj?ref=9ZZRRy82\"\u003eBloome\u003c/a\u003e.\n\u003c/p\u003e\n\n---\n\n**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.\n\nIt 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**.\n\n## Quick start\n\n```bash\nnpx designlang https://stripe.com                      # extract everything\nnpx designlang dna stripe.com                          # place it in the measured design space: neighbours + percentiles ← v13.1\nnpx designlang site stripe.com                         # whole-site: one canonical system + consistency grade ← v12.23\nnpx designlang fidelity stripe.com --clone localhost:3000  # score a clone vs the original (visual + motion) ← v12.24\nnpx designlang gallery                                 # static shareable gallery of measured clones      ← v12.24\nnpx designlang studio                                  # live token editor: edit, preview, export, share ← v12.19\nnpx designlang verify stripe.com                       # fidelity score: rebuild from tokens vs live ← v12.18\nnpx designlang pair stripe.com linear.app              # fuse two designs (visuals A × voice B)    ← v12.8\nnpx designlang brand stripe.com                        # full brand-guidelines book (13 chapters)  ← v12.7\nnpx designlang theme-swap stripe.com --primary \"#ff4800\"  # recolour around your brand        ← v12.6\nnpx designlang pack stripe.com                         # one polished design-system directory ← v12.4\nnpx designlang remix stripe.com --as cyberpunk         # restyle in another vocabulary       ← v12.3\nnpx designlang remix stripe.com --all                  # emit all 6 vocabs at once           ← v12.3\nnpx designlang grade https://stripe.com --badge        # report card + SVG badge             ← v12.2\nnpx designlang battle stripe.com vercel.com            # head-to-head graded fight           ← v12.2\nnpx designlang clone https://stripe.com                # working Next.js starter\nnpx designlang --full https://stripe.com               # screenshots + responsive + interactions\n```\n\nDrop a live design-score badge in any README:\n\n```markdown\n![Design Score](https://designlang.app/badge/stripe.com.svg)\n```\n\n## Watch it read — live Extraction Theatre (`v13`)\n\nDon't take the output on faith — **watch it happen.** On\n[designlang.app/watch](https://designlang.app/watch) you paste a URL and a real\nheadless Chromium opens the page and reads its entire design system in real\ntime: a split stage with the live browser on the left and the design system —\npalette, type, spacing, motion — assembling itself on the right as each token\nlifts off the page.\n\nIt's driven by the *actual* extraction (the browser's CDP screencast streamed\nframe-by-frame alongside the real token events), recorded so a shared link\nreplays the exact run. No install, no account. Every gallery card can be watched\nthe same way, and the [gallery](https://designlang.app/gallery) now spans **37\nreal-graded design systems**.\n\n## Whole-site design system (`site`)\n\nMost extractors read a single URL. `designlang site` crawls a site's canonical\npages (home, pricing, docs, blog, about, product…) and synthesizes **one**\nde-duplicated system. Every token is elected by *coverage* — the share of pages\nthat use it — so what's genuinely site-wide is separated from one-off,\npage-local choices. Near-identical colours are merged in OKLab. It's fully\ndeterministic and free; no API key.\n\n```bash\nnpx designlang site stripe.com --max-pages 8\n```\n\nYou get, alongside the standard pack emitted from the **canonical** system:\n\n| File | What it is |\n|---|---|\n| `*-site-system.json` | canonical unified tokens + coverage + drift |\n| `*-site-coverage.md` | every token tagged 🟢 site-wide / 🟡 section / 🔴 page-local, with the pages using it |\n| `*-site-consistency.md` | a 0–100 consistency grade, per-category breakdown, and the off-system outliers to consolidate |\n\n## Measured clone fidelity (`fidelity` + `gallery`)\n\nCloning tools all *claim* \"pixel-perfect\" — none of them **measure** it. `designlang\nfidelity` does. Point it at the original and your clone (often a local dev\nserver) and it returns one honest number, both halves of the clone:\n\n- **Visual** — full-page screenshots of each, pixel-diffed.\n- **Motion** — `extractMotion()` on both, compared across feel, durations,\n  easings, springs, keyframe kinds, scroll-linked motion, and choreography/\n  stagger. (Most clones reproduce static pixels and drop the motion entirely;\n  this is where they lose.)\n\nThe two blend into a 0–100 score + letter grade, and — the part competitors\ndon't ship — a **ranked correction plan**: the exact next edits that will raise\nthe score, hardest-hitting first. Measure → fix → re-run until it converges.\n\n```bash\nnpx designlang fidelity https://stripe.com --clone http://localhost:3000\nnpx designlang fidelity https://stripe.com --clone http://localhost:3000 --min 90   # CI gate\n```\n\nGenerating the clone with `designlang clone`? Add `--fidelity` and it grades the\nclone's token basis against the live site the moment it's built — writing\n`FIDELITY.md` + a correction plan straight into the project, no separate step:\n\n```bash\nnpx designlang clone https://stripe.com --fidelity\n```\n\nYou get `fidelity.md` (score + motion table + correction plan), `fidelity.json`,\na shareable `fidelity-card.svg` (`88% · B · stripe.com`), and a `fidelity-diff.png`\nloss heatmap.\n\nThen publish them. `designlang gallery` scans your reports and builds a\ndeployable static site — an index of score cards plus a permalink page per clone\n(each with an OG card, so a shared link unfurls the number).\n\n```bash\nnpx designlang gallery --title \"Our clones\" --base-url https://clones.example.com\n```\n\n## A measured design space (`dna`)\n\nEvery extractor on the market answers *what* a design uses. None of them answers\n**where it sits**. `designlang grade` returns a letter — but a letter with no\nreference frame is a thermometer with no scale on it.\n\n`designlang dna` reduces a design to **30 deterministic features** across five\naxes — colour, type, space, shape, motion — and ranks it against a corpus of\nreal design systems:\n\n```bash\nnpx designlang dna raycast.com\n```\n\n```\n  Design DNA · https://raycast.com\n  30 features, 100% measurable\n\n  vs 8 systems (default)\n\n  color    65th percentile\n  type     56th percentile\n  space    42th percentile\n  shape    79th percentile\n  motion   67th percentile\n\n  Nearest\n  0.14  https://railway.app\n  0.15  https://linear.app\n  0.19  https://notion.so\n```\n\nDistance is the mean absolute difference across the features both designs have,\nso `0.14` reads as \"the average feature is 14% of its range apart\" — a number you\ncan reason about, unlike a Euclidean distance in 30 dimensions.\n\nThe report goes past similarity to **what makes a design look the way it does**:\nthe features furthest from the middle of the corpus, in plain language\n(*\"corner radius — 100th percentile, far above the corpus\"*).\n\nBring your own reference frame — your products, your competitors, a target look:\n\n```bash\nnpx designlang dna-corpus acme.com acme.com/pricing competitor.com\nnpx designlang dna acme.com/new-page --corpus ./corpus.json\n```\n\nThree things it refuses to do, because a design score that overclaims is worse\nthan no score at all:\n\n- **A missing measurement stays missing.** Features the page never exposed are\n  `null`, never a substituted midpoint, and distance skips them instead of\n  comparing against an invented value.\n- **Every number carries its evidence.** Distances report how many features\n  backed them, percentiles name the corpus and its size, and the report warns\n  when coverage was partial.\n- **The space is versioned.** Feature order and normalization are frozen per\n  vector version, and a corpus built by different rules is rejected rather than\n  silently compared against.\n\n## Install\n\n```bash\nnpm i -g designlang                         # global\ndesignlang install-browser                  # one-time: the Chromium designlang drives\nnpx skills add Manavarya09/design-extract   # as an agent skill (40+ agents)\n```\n\n`npm install` no longer downloads a browser, so it works in CI, Docker and\nbehind proxies. `install-browser` fetches the Chromium matching the bundled\nPlaywright (add `--with-deps` on bare Linux). Without it, designlang falls back\nto an installed Google Chrome.\n\n## Use in Claude Code (plugin)\n\ndesignlang ships as a **Claude Code plugin** — eleven slash commands that wrap\nthe CLI. Install it from inside Claude Code:\n\n```text\n/plugin marketplace add Manavarya09/design-extract\n/plugin install designlang@designlang\n```\n\nThe first command registers this repo as a plugin marketplace; the second\ninstalls the `designlang` plugin from it. Restart Claude Code if prompted, then\nthe commands are available:\n\n| Command | What it does |\n|---|---|\n| `/extract \u003curl\u003e` | full design language → DTCG, Tailwind, Figma, motion, voice |\n| `/site \u003curl\u003e` | crawl a whole site → one canonical design system + consistency grade |\n| `/grade \u003curl\u003e` | shareable HTML report card + SVG badge |\n| `/battle \u003ca\u003e \u003cb\u003e` | head-to-head graded comparison |\n| `/remix \u003curl\u003e --as \u003cvocab\u003e` | restyle in 6 vocabularies (brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial) |\n| `/pack \u003curl\u003e` | one downloadable design-system bundle |\n| `/theme-swap \u003curl\u003e` | OKLCH-correct recolour around a new brand primary |\n| `/brand \u003curl\u003e` | full editorial brand-guidelines book (13 chapters) |\n| `/pair \u003ca\u003e \u003cb\u003e` | fuse two designs across configurable axes |\n| `/studio` | live token editor — preview, dark mode, export, share |\n| `/verify \u003curl\u003e` | rebuild from tokens, pixel-diff vs live, fidelity score |\n| `/fidelity \u003curl\u003e --clone \u003curl\u003e` | score a clone vs the original (visual + motion) + correction plan |\n| `/gallery [dir]` | build a static shareable gallery of measured clones |\n| `/dna \u003curl\u003e` | place a design in the measured design space — nearest systems, per-axis percentiles, outliers |\n\n\u003e Prefer raw MCP tools? The CLI ships an MCP server that extracts live URLs:\n\u003e\n\u003e ```bash\n\u003e claude mcp add designlang -- npx -y designlang mcp\n\u003e ```\n\u003e\n\u003e `extract_design(url)` returns a job id; poll `get_job_status`, then pass the\n\u003e id to `get_tokens`, `get_colors`, `get_typography`, `get_components`,\n\u003e `get_findings`, `compute_drift` (against a baseline job) or `export`\n\u003e (dtcg, tailwind, shadcn, figma, css, design-md). Add `--output-dir \u003cdir\u003e` to\n\u003e also serve an extraction already on disk as resources.\n\n## Atlas Cloud for `--smart`\n\n`designlang --smart` can now use Atlas Cloud through its OpenAI-compatible chat API, so low-confidence classifiers can stay zero-dependency while routing to Atlas-hosted models.\n\n```bash\nexport ATLASCLOUD_API_KEY=\"\u003catlascloud-api-key\u003e\"\nexport ATLASCLOUD_MODEL=\"deepseek-ai/deepseek-v4-pro\"\n\nnpx designlang https://stripe.com --smart\n```\n\n- Atlas Cloud envs: `ATLASCLOUD_API_KEY`, `ATLASCLOUD_MODEL`, optional `ATLASCLOUD_API_BASE`\n- Alias envs also work: `ATLAS_CLOUD_API_KEY`, `ATLAS_CLOUD_MODEL`, `ATLAS_CLOUD_API_BASE`\n- Existing `OPENAI_API_KEY` and `ANTHROPIC_API_KEY` flows keep working unchanged\n\n## What you get\n\nEach run writes 17+ files to `./design-extract-output/`. The headline outputs:\n\n| File | What it is |\n|---|---|\n| `*-design-language.md` | 19-section markdown — feed any LLM to recreate the design |\n| `*-design-tokens.json` | W3C DTCG tokens (primitive + semantic + composite layers) |\n| `*-tailwind.config.js` | Drop-in Tailwind theme |\n| `*-shadcn-theme.css` | shadcn/ui `globals.css` variables |\n| `*-figma-variables.json` | Figma Variables import (light + dark) |\n| `*-variables.css` | CSS custom properties |\n| `*-anatomy.tsx` | Typed React stubs for every detected component + variants |\n| `*-motion-tokens.json` | Durations, easings, springs, scroll-linked flag; with `--motion-runtime` also choreography (stagger) + scroll recipes + observed durations |\n| `*-voice.json` | Brand voice — tone, pronoun posture, CTA verbs |\n| `*-prompts/` | Paste-ready prompts for v0, Lovable, Cursor, Claude Artifacts |\n| `*-mcp.json` | Disk-backed MCP server payload |\n| `*-grade.html` | **v12.1** Shareable Design Report Card (letter grade + evidence) |\n| `*-grade.svg` | **v12.2** Shields.io-style design-score badge (drop into any README) |\n| `*-battle.html` | **v12.2** Head-to-head graded battle card from `designlang battle` |\n| `*-remix.\u003cvocab\u003e.html` | **v12.3** Site restyled in another vocabulary — brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial |\n\nMulti-platform (`--platforms web,ios,android,flutter,wordpress,all`) adds `ios/`, `android/`, `flutter/`, and a WordPress block theme. `--emit-agent-rules` adds Cursor / Claude Code / generic agent rule files.\n\n## Why designlang vs anything else\n\nOther tools give you the paint. designlang reads the architecture:\n\n- **Layout system** — grids, flex containers, container widths, gaps — not just tokens.\n- **Responsive** — crawls 4 breakpoints and reports what changes (`--responsive`).\n- **Interaction states** — programmatically hovers and focuses, captures the deltas (`--interactions`, `--deep-interact`).\n- **Motion language** — durations, easing families, spring detection, scroll-linked flag, `feel` fingerprint (springy / smooth / mechanical / mixed).\n- **Runtime motion (`--motion-runtime`)** — drives the page (load / scroll / hover / focus) and reads `document.getAnimations()` to capture what *actually* animates: real durations, **choreography/stagger** sequences, and **scroll recipes** (parallax / reveal / pin). Folded into `*-motion-tokens.json` and previewable live in the studio's Motion tab.\n- **Component anatomy** — slot trees with variant × size × state matrices, emitted as typed `.tsx`.\n- **Brand voice** — tone, pronoun posture, heading style, CTA verb inventory.\n- **Page intent + section roles** — `landing` / `pricing` / `docs` etc., with semantic regions (`hero`, `feature-grid`, `pricing-table`, `cta`…).\n- **Multi-page consistency** — auto-discovers canonical pages, reconciles shared vs per-route tokens.\n- **WCAG** — every fg/bg pair scored, with a remediation palette suggesting nearest passing colors.\n- **Drift + lint + visual-diff** — `designlang drift`, `lint`, `visual-diff` all CI-ready, exit non-zero on failure.\n- **Live-site sync** — treat the deployed site as source of truth (`designlang sync`).\n- **MCP server** — `designlang mcp` exposes tokens, regions, components, and contrast pairs to any MCP-aware agent.\n\n```bash\ndesignlang grade https://stripe.com         # ← v12.1: shareable report card\ndesignlang clone https://stripe.com         # → working Next.js app\ndesignlang apply https://stripe.com -d ./app   # auto-detect framework, write tokens\ndesignlang brands stripe.com vercel.com linear.app   # N-brand matrix\ndesignlang drift https://yourapp.com --tokens ./src/tokens.json\ndesignlang lint ./src/tokens/design-tokens.json     # CI-ready linter\ndesignlang visual-diff https://staging.app https://app   # single-file HTML diff\ndesignlang mcp                              # stdio MCP server for Cursor / Claude Code\ndesignlang doctor                           # sanity-check the local install\n```\n\n## All features\n\n| Feature | Flag / Command | Description |\n|---------|---------------|-------------|\n| Base extraction | `designlang \u003curl\u003e` | Colors, typography, spacing, shadows, radii, CSS vars, breakpoints, animations, components |\n| Layout system | automatic | Grid patterns, flex usage, container widths, gap values |\n| Accessibility | automatic | WCAG 2.1 contrast ratios for all fg/bg pairs |\n| Design scoring | automatic | 7-category quality rating (A-F) with actionable issues |\n| Gradients | automatic | Gradient type, direction, stops, classification |\n| Z-index map | automatic | Layer hierarchy, z-index wars detection |\n| SVG icons | automatic | Deduplicated icons, size/style classification, color palette |\n| Font files | automatic | Source detection (Google/self-hosted/CDN/system), @font-face CSS |\n| Image styles | automatic | Aspect ratios, shapes, filters, pattern classification |\n| Dark mode | `--dark` | Extracts dark color scheme + light/dark diff |\n| Auth pages | `--cookie`, `--cookie-file`, `--header` | Extract from authenticated/protected pages; cookie files in JSON / Playwright storageState / Netscape formats |\n| Self-signed / dev TLS | `--insecure` | Ignore HTTPS/SSL certificate errors |\n| User-Agent override | `--user-agent \u003cua\u003e` | Set a custom User-Agent string |\n| Chrome extension | `chrome-extension/` | One-click handoff from any tab, MV3, `activeTab` only |\n| Multi-page | `--depth \u003cn\u003e` | Crawl N internal pages; emits shared-vs-per-route token reconciliation (`*-tokens-shared.json`, `*-tokens-routes/\u003cslug\u003e.json`, `*-routes-report.md`) |\n| Screenshots | `--screenshots` | Capture buttons, cards, inputs, nav, hero, full page |\n| Responsive | `--responsive` | Crawl at 4 viewports, map breakpoint changes |\n| Interactions | `--interactions` | Capture hover/focus/active state transitions |\n| Auto-interact | `--deep-interact` | Scroll, open menus/modals/accordions, hover CTAs before extraction |\n| Runtime motion | `--motion-runtime` | Capture real motion via `document.getAnimations()` — durations, stagger/choreography, scroll recipes |\n| Everything | `--full` | Enable screenshots + responsive + interactions + deep-interact + motion-runtime |\n| Apply | `designlang apply \u003curl\u003e` | Auto-detect framework and write tokens to your project |\n| Clone | `designlang clone \u003curl\u003e` | Generate a working Next.js starter with extracted design |\n| Score | `designlang score \u003curl\u003e` | Rate design quality with visual bar chart breakdown |\n| Grade (v12.1) | `designlang grade \u003curl\u003e` | Shareable HTML \"Design Report Card\" — letter grade, 8 dimensions, evidence, strengths + fixes |\n| Battle (v12.2) | `designlang battle \u003cA\u003e \u003cB\u003e` | Head-to-head graded battle card with verdict, dimension table, palette comparison |\n| Badge (v12.2) | `designlang grade --badge` | Shields.io-style SVG badge — `design · B · 87` — drop into any README. Live endpoint: `designlang.app/badge/\u003chost\u003e.svg` |\n| Remix (v12.3) | `designlang remix \u003curl\u003e --as \u003cvocab\u003e` | Restyle the audited page in another vocabulary (brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial). `--all` emits all 6 |\n| Pack (v12.4) | `designlang pack \u003curl\u003e` | Bundle every output (tokens / components / Storybook / starter / prompts) into one polished design-system directory |\n| Theme-swap (v12.6) | `designlang theme-swap \u003curl\u003e --primary \u003chex\u003e` | Recolour the extracted design around a new brand primary. OKLCH hue rotation, neutrals preserved, type/spacing/motion untouched |\n| Brand book (v12.7) | `designlang brand \u003curl\u003e` | Full editorial brand-guidelines document (13 chapters: cover, about, logo, colour, type, spacing, shape, iconography, motion, components, voice, a11y, tokens, how-to-use). Print-ready, dark-mode toggle, hand-off-ready |\n| Pair (NEW v12.8) | `designlang pair \u003curlA\u003e \u003curlB\u003e` | Fuse two designs across 7 axes (colours/type/spacing/shape/motion/voice/components). Defaults to \"visuals from A, voice + type from B\". `--brand` also emits a brand book of the fused identity |\n| Design DNA (NEW v13.1) | `designlang dna \u003curl\u003e` | Reduce a design to a 30-feature vector (colour / type / space / shape / motion) and rank it against a corpus of real design systems — nearest neighbours, per-axis percentiles, outlier features |\n| DNA corpus (NEW v13.1) | `designlang dna-corpus \u003curls...\u003e` | Build your own reference frame — your products, your competitors — for `dna` to measure against |\n| Watch | `designlang watch \u003curl\u003e` | Monitor for design changes on interval |\n| Diff | `designlang diff \u003cA\u003e \u003cB\u003e` | Compare two sites (MD + HTML) |\n| Multi-brand | `designlang brands \u003curls...\u003e` | N-site comparison matrix |\n| Sync | `designlang sync \u003curl\u003e` | Update local tokens from live site |\n| History | `designlang history \u003curl\u003e` | Track design changes over time |\n| MCP server | `designlang mcp` | Expose extraction as MCP resources + tools |\n| Multi-platform | `--platforms \u003ccsv\u003e` | Emit iOS / Android / Flutter / WordPress outputs |\n| Agent rules | `--emit-agent-rules` | Cursor, Claude Code, generic agent rule files |\n| Stack fingerprint | automatic | Framework + Tailwind + analytics detection |\n| CSS health | automatic | Specificity, !important, unused CSS, keyframes |\n| A11y remediation | automatic | Nearest palette color passing AA / AAA for every failing pair |\n| Semantic regions | automatic | nav / hero / pricing / testimonials / cta / footer classification |\n| Reusable components | automatic | DOM subtree + style-vector clustering with variants |\n| DTCG tokens | default | W3C Design Tokens v1 with semantic + composite layers (`--tokens-legacy` for pre-v7) |\n\n## Full CLI Reference\n\n```\ndesignlang \u003curl\u003e [options]\n\nOptions:\n  -o, --out \u003cdir\u003e         Output directory (default: ./design-extract-output)\n  -n, --name \u003cname\u003e       Output file prefix (default: derived from URL)\n  -w, --width \u003cpx\u003e        Viewport width (default: 1280)\n  --height \u003cpx\u003e           Viewport height (default: 800)\n  --wait \u003cms\u003e             Wait after page load for SPAs (default: 0)\n  --dark                  Also extract dark mode styles\n  --depth \u003cn\u003e             Internal pages to crawl (default: 0)\n  --screenshots           Capture component screenshots\n  --responsive            Capture at multiple breakpoints\n  --interactions          Capture hover/focus/active states\n  --deep-interact         Auto-interact pass (scroll, menus, modals, accordions, hover CTAs)\n  --motion-runtime        Capture runtime motion via getAnimations() (durations, choreography, scroll recipes)\n  --full                  Enable all captures (implies --deep-interact + --motion-runtime)\n  --cookie \u003ccookies...\u003e   Cookies for authenticated pages (name=value)\n  --cookie-file \u003cpath\u003e    Load cookies from JSON / storageState / Netscape cookies.txt\n  --header \u003cheaders...\u003e   Custom headers (name:value)\n  --user-agent \u003cua\u003e       Override the browser User-Agent string\n  --insecure              Ignore HTTPS/SSL certificate errors (self-signed, dev, proxies)\n  --selector \u003ccss\u003e        Only extract from elements matching this CSS selector (e.g. \".pricing-card\")\n  --system-chrome         Use the system Chrome install instead of the bundled Chromium (skips 150MB download)\n  --json                  Print full extraction as JSON to stdout (for piping into other tools)\n  --framework \u003ctype\u003e      Only generate specific theme (react, shadcn)\n  --platforms \u003ccsv\u003e       Additional platforms: web,ios,android,flutter,wordpress,all (additive)\n  --emit-agent-rules      Emit Cursor / Claude Code / CLAUDE.md / agents.md rule files\n  --tokens-legacy         Emit pre-v7 flat design-tokens.json shape (backward compat)\n  --no-history            Skip saving to history\n  --verbose               Detailed progress output\n\nCommands:\n  apply \u003curl\u003e                       Extract and apply design directly to your project\n  clone \u003curl\u003e                       Generate a working Next.js starter from extracted design\n  score \u003curl\u003e                       Rate design quality (7 categories, A-F, bar chart)\n  grade \u003curl\u003e                       Generate a shareable HTML Design Report Card (--format html|md|json|svg|all, --badge, --open)\n  battle \u003curlA\u003e \u003curlB\u003e              Head-to-head graded battle card (--format html|md|json|all, --open)\n  remix \u003curl\u003e                       Restyle in another vocabulary (--as brutalist|swiss|art-deco|cyberpunk|soft-ui|editorial, --all, --list, --open)\n  pack \u003curl\u003e                        Bundle every output into one design-system directory (--with-clone, --open)\n  theme-swap \u003curl\u003e --primary \u003chex\u003e  Recolour around a new brand primary (--from, --format html|md|json|tokens|all, --open)\n  brand \u003curl\u003e                       Generate a full editorial brand-guidelines book (--format html|md|json|all, --open)\n  pair \u003curlA\u003e \u003curlB\u003e                Fuse two designs across 7 axes (--colors-from, --typography-from, --spacing-from, --shape-from, --motion-from, --voice-from, --components-from, --brand)\n  watch \u003curl\u003e                       Monitor for design changes on interval\n  diff \u003curlA\u003e \u003curlB\u003e                Compare two sites' design languages\n  brands \u003curls...\u003e                  Multi-brand comparison matrix\n  sync \u003curl\u003e                        Sync local tokens with live site\n  history \u003curl\u003e                     View design change history\n  install-browser                   Download the Chromium designlang drives (--with-deps on bare Linux)\n  mcp                               Launch stdio MCP server: extract live URLs as jobs (--output-dir \u003cdir\u003e also serves one on disk)\n  lint \u003cfile\u003e                       (v9) Audit a local token file (.json/.css) — CI-ready\n  drift \u003curl\u003e --tokens \u003cfile\u003e       (v9) Check local tokens for drift against a live site\n  visual-diff \u003cbefore\u003e \u003cafter\u003e      (v9) Side-by-side HTML diff of two URLs\n  fidelity \u003coriginal\u003e --clone \u003curl\u003e Score a clone vs the original — visual pixel-diff + motion fidelity → one grade + ranked correction plan (--min, --motion-runtime)\n  gallery [dir]                     Build a shareable static gallery of measured clones (--title, --base-url)\n```\n\n## Example output\n\n`designlang https://vercel.com --full` →\n\n```\nColors: 27 · Fonts: Geist + Geist Mono · Spacing: 18 (base 2px)\nShadows: 11 · Radii: 10 · CSS vars: 407 · Layout: 55 grids / 492 flex\nResponsive: 4 viewports, 3 breakpoint changes · Interactions: 8 transitions\nA11y: 94% WCAG · Score: 68/100 (D) · 4 issues\n\n→ 17 files written to ./design-extract-output/\n→ Run `designlang grade https://vercel.com` for a shareable report card\n```\n\n## How it works\n\n1. **Crawl** — Headless Chromium via Playwright, waits for network idle and fonts\n2. **Extract** — One `page.evaluate()` walks up to 5,000 DOM elements, collecting 25+ computed properties, inline SVGs, font sources, and image metadata\n3. **Process** — 17 extractor modules parse, deduplicate, cluster, and classify the raw data\n4. **Format** — 12+ formatter modules emit the output files\n5. **Score** — Accessibility extractor calculates WCAG contrast ratios for all color pairs\n6. **Capture** — Optional: screenshots, responsive viewport crawling, interaction state recording\n\n## Install Everywhere\n\ndesignlang ships surfaces beyond the CLI:\n\n| Surface | Path | Description |\n|---------|------|-------------|\n| **CLI** | `npx designlang \u003curl\u003e` | Main entry point. |\n| **VS Code extension** | [`vscode-extension/`](vscode-extension/) | \"Extract design from URL\" command + auto-inject into workspace. |\n| **Raycast extension** | [`raycast-extension/`](raycast-extension/) | Extract, score, and \"copy CLI command\" from Raycast. |\n| **Figma plugin** | [`figma-plugin/`](figma-plugin/) | Paste a URL inside Figma, get a full Variables collection. |\n| **GitHub Action** | [`github-action/`](github-action/) | \"Design regression guard\" — diffs tokens on every PR and comments. |\n| **Chrome extension** | [`chrome-extension/`](chrome-extension/) | One-click handoff from any tab (MV3, `activeTab` only). |\n| **Doctor** | `designlang doctor` | One-screen health check of the local install — Node, playwright, Chromium binary, output dir, network. Exits `1` if anything fails. |\n| **MCP server** | `npx designlang mcp` | Exposes the extracted design as MCP resources + tools for Cursor, Claude Code, Windsurf, etc. See [`docs/MCP-REGISTRY.md`](docs/MCP-REGISTRY.md). |\n| **Claude Code plugin** | [`.claude-plugin/`](.claude-plugin/) | Five slash commands inside Claude Code — `/extract`, `/grade`, `/battle`, `/remix`, `/pack`. |\n\n## Claude Code plugin\n\nDrop designlang straight into Claude Code as a plugin. Every CLI command becomes a slash command:\n\n```bash\n/plugin install Manavarya09/design-extract\n```\n\nThen inside any Claude Code session:\n\n| Slash command | What it does |\n|---|---|\n| `/extract \u003curl\u003e` | Full extraction → DTCG tokens, Tailwind, Figma vars, motion, voice |\n| `/grade \u003curl\u003e` | Shareable HTML \"Design Report Card\" (+ `--badge` for an SVG) |\n| `/battle \u003curlA\u003e \u003curlB\u003e` | Head-to-head graded battle card |\n| `/remix \u003curl\u003e --as \u003cvocab\u003e` | Restyle in brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial |\n| `/pack \u003curl\u003e` | Bundle every output into one design-system directory |\n\nManifest: [`.claude-plugin/plugin.json`](.claude-plugin/plugin.json) · marketplace: [`.claude-plugin/marketplace.json`](.claude-plugin/marketplace.json) · commands: [`commands/`](commands/) · skills: [`skills/`](skills/).\n\n## Agent skill (other ecosystems)\n\nWorks with **Cursor, Codex, and 40+ AI coding agents** via the skills ecosystem:\n\n```bash\nnpx skills add Manavarya09/design-extract\n```\n\nIn Cursor / Codex / etc., use `/extract-design \u003curl\u003e`.\n\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md). PRs welcome!\n\n## License\n\n[MIT](LICENSE) - [Manav Arya Singh](https://www.manavaryasingh.com) !!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanavarya09%2Fdesign-extract","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanavarya09%2Fdesign-extract","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanavarya09%2Fdesign-extract/lists"}