[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-664":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":47,"readmeContent":48,"aiSummary":49,"trendingCount":16,"starSnapshotCount":16,"syncStatus":50,"lastSyncTime":51,"discoverSource":52},664,"design-extract","Manavarya09\u002Fdesign-extract","Manavarya09","Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code\u002FCursor\u002FWindsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn\u002Fui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.","https:\u002F\u002Fwww.designlang.app",null,"JavaScript",3146,291,9,22,0,74,153,666,222,109.4,"MIT License",false,"main",true,[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46],"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","2026-06-12 04:00:05","\u003Cp align=\"center\">\n  \u003Cimg src=\"website\u002Fpublic\u002Flogo-specimen.svg\" alt=\"designlang — reads a website the way a developer reads a stylesheet\" width=\"900\">\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fdesignlang\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fdesignlang?color=0A0908&labelColor=F3F1EA&label=npm\" alt=\"npm version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FManavarya09\u002Fdesign-extract\u002Fblob\u002Fmain\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002FManavarya09\u002Fdesign-extract?color=0A0908&labelColor=F3F1EA\" alt=\"license\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fnodejs.org\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnode\u002Fv\u002Fdesignlang?color=0A0908&labelColor=F3F1EA\" alt=\"node version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdesignlang.manavaryasingh.com\u002F\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fwebsite-live-FF4800?labelColor=F3F1EA\" alt=\"website\">\u003C\u002Fa>\n\n\u003C\u002Fp>\n\n---\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"designlang.png\" alt=\"designlang in action\" width=\"100%\">\n\u003C\u002Fp>\n\n[![designlang on npm](https:\u002F\u002Fpkgfolio.vercel.app\u002Fembed\u002Fpkg\u002Fdesignlang?v=2)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fdesignlang)\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 \u002F Lovable \u002F Cursor \u002F Claude Artifacts.\n\nIt also goes where extractors don't: **layout patterns**, **responsive behavior across 4 breakpoints**, **hover \u002F focus \u002F 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:\u002F\u002Fstripe.com                      # extract everything\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:\u002F\u002Fstripe.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:\u002F\u002Fstripe.com                # working Next.js starter\nnpx designlang --full https:\u002F\u002Fstripe.com               # screenshots + responsive + interactions\n```\n\nDrop a live design-score badge in any README:\n\n```markdown\n![Design Score](https:\u002F\u002Fdesignlang.app\u002Fbadge\u002Fstripe.com.svg)\n```\n\n## Install\n\n```bash\nnpm i -g designlang                         # global\nnpx skills add Manavarya09\u002Fdesign-extract   # as an agent skill (40+ agents)\n```\n\n## What you get\n\nEach run writes 17+ files to `.\u002Fdesign-extract-output\u002F`. 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\u002Fui `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 |\n| `*-voice.json` | Brand voice — tone, pronoun posture, CTA verbs |\n| `*-prompts\u002F` | 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>.html` | **v12.3** Site restyled in another vocabulary — brutalist \u002F swiss \u002F art-deco \u002F cyberpunk \u002F soft-ui \u002F editorial |\n\nMulti-platform (`--platforms web,ios,android,flutter,wordpress,all`) adds `ios\u002F`, `android\u002F`, `flutter\u002F`, and a WordPress block theme. `--emit-agent-rules` adds Cursor \u002F Claude Code \u002F 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 \u002F smooth \u002F mechanical \u002F mixed).\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` \u002F `pricing` \u002F `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\u002Fbg 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:\u002F\u002Fstripe.com         # ← v12.1: shareable report card\ndesignlang clone https:\u002F\u002Fstripe.com         # → working Next.js app\ndesignlang apply https:\u002F\u002Fstripe.com -d .\u002Fapp   # auto-detect framework, write tokens\ndesignlang brands stripe.com vercel.com linear.app   # N-brand matrix\ndesignlang drift https:\u002F\u002Fyourapp.com --tokens .\u002Fsrc\u002Ftokens.json\ndesignlang lint .\u002Fsrc\u002Ftokens\u002Fdesign-tokens.json     # CI-ready linter\ndesignlang visual-diff https:\u002F\u002Fstaging.app https:\u002F\u002Fapp   # single-file HTML diff\ndesignlang mcp                              # stdio MCP server for Cursor \u002F Claude Code\n```\n\n## All features\n\n| Feature | Flag \u002F Command | Description |\n|---------|---------------|-------------|\n| Base extraction | `designlang \u003Curl>` | 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\u002Fbg 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\u002Fstyle classification, color palette |\n| Font files | automatic | Source detection (Google\u002Fself-hosted\u002FCDN\u002Fsystem), @font-face CSS |\n| Image styles | automatic | Aspect ratios, shapes, filters, pattern classification |\n| Dark mode | `--dark` | Extracts dark color scheme + light\u002Fdark diff |\n| Auth pages | `--cookie`, `--cookie-file`, `--header` | Extract from authenticated\u002Fprotected pages; cookie files in JSON \u002F Playwright storageState \u002F Netscape formats |\n| Self-signed \u002F dev TLS | `--insecure` | Ignore HTTPS\u002FSSL certificate errors |\n| User-Agent override | `--user-agent \u003Cua>` | Set a custom User-Agent string |\n| Chrome extension | `chrome-extension\u002F` | One-click handoff from any tab, MV3, `activeTab` only |\n| Multi-page | `--depth \u003Cn>` | Crawl N internal pages; emits shared-vs-per-route token reconciliation (`*-tokens-shared.json`, `*-tokens-routes\u002F\u003Cslug>.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\u002Ffocus\u002Factive state transitions |\n| Auto-interact | `--deep-interact` | Scroll, open menus\u002Fmodals\u002Faccordions, hover CTAs before extraction |\n| Everything | `--full` | Enable screenshots + responsive + interactions + deep-interact |\n| Apply | `designlang apply \u003Curl>` | Auto-detect framework and write tokens to your project |\n| Clone | `designlang clone \u003Curl>` | Generate a working Next.js starter with extracted design |\n| Score | `designlang score \u003Curl>` | Rate design quality with visual bar chart breakdown |\n| Grade (v12.1) | `designlang grade \u003Curl>` | Shareable HTML \"Design Report Card\" — letter grade, 8 dimensions, evidence, strengths + fixes |\n| Battle (v12.2) | `designlang battle \u003CA> \u003CB>` | 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\u002Fbadge\u002F\u003Chost>.svg` |\n| Remix (v12.3) | `designlang remix \u003Curl> --as \u003Cvocab>` | Restyle the audited page in another vocabulary (brutalist \u002F swiss \u002F art-deco \u002F cyberpunk \u002F soft-ui \u002F editorial). `--all` emits all 6 |\n| Pack (NEW v12.4) | `designlang pack \u003Curl>` | Bundle every output (tokens \u002F components \u002F Storybook \u002F starter \u002F prompts) into one polished design-system directory |\n| Watch | `designlang watch \u003Curl>` | Monitor for design changes on interval |\n| Diff | `designlang diff \u003CA> \u003CB>` | Compare two sites (MD + HTML) |\n| Multi-brand | `designlang brands \u003Curls...>` | N-site comparison matrix |\n| Sync | `designlang sync \u003Curl>` | Update local tokens from live site |\n| History | `designlang history \u003Curl>` | Track design changes over time |\n| MCP server | `designlang mcp` | Expose extraction as MCP resources + tools |\n| Multi-platform | `--platforms \u003Ccsv>` | Emit iOS \u002F Android \u002F Flutter \u002F 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 \u002F AAA for every failing pair |\n| Semantic regions | automatic | nav \u002F hero \u002F pricing \u002F testimonials \u002F cta \u002F 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> [options]\n\nOptions:\n  -o, --out \u003Cdir>         Output directory (default: .\u002Fdesign-extract-output)\n  -n, --name \u003Cname>       Output file prefix (default: derived from URL)\n  -w, --width \u003Cpx>        Viewport width (default: 1280)\n  --height \u003Cpx>           Viewport height (default: 800)\n  --wait \u003Cms>             Wait after page load for SPAs (default: 0)\n  --dark                  Also extract dark mode styles\n  --depth \u003Cn>             Internal pages to crawl (default: 0)\n  --screenshots           Capture component screenshots\n  --responsive            Capture at multiple breakpoints\n  --interactions          Capture hover\u002Ffocus\u002Factive states\n  --deep-interact         Auto-interact pass (scroll, menus, modals, accordions, hover CTAs)\n  --full                  Enable all captures (implies --deep-interact)\n  --cookie \u003Ccookies...>   Cookies for authenticated pages (name=value)\n  --cookie-file \u003Cpath>    Load cookies from JSON \u002F storageState \u002F Netscape cookies.txt\n  --header \u003Cheaders...>   Custom headers (name:value)\n  --user-agent \u003Cua>       Override the browser User-Agent string\n  --insecure              Ignore HTTPS\u002FSSL certificate errors (self-signed, dev, proxies)\n  --selector \u003Ccss>        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>      Only generate specific theme (react, shadcn)\n  --platforms \u003Ccsv>       Additional platforms: web,ios,android,flutter,wordpress,all (additive)\n  --emit-agent-rules      Emit Cursor \u002F Claude Code \u002F CLAUDE.md \u002F 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>                       Extract and apply design directly to your project\n  clone \u003Curl>                       Generate a working Next.js starter from extracted design\n  score \u003Curl>                       Rate design quality (7 categories, A-F, bar chart)\n  grade \u003Curl>                       Generate a shareable HTML Design Report Card (--format html|md|json|svg|all, --badge, --open)\n  battle \u003CurlA> \u003CurlB>              Head-to-head graded battle card (--format html|md|json|all, --open)\n  remix \u003Curl>                       Restyle in another vocabulary (--as brutalist|swiss|art-deco|cyberpunk|soft-ui|editorial, --all, --list, --open)\n  pack \u003Curl>                        Bundle every output into one design-system directory (--with-clone, --open)\n  watch \u003Curl>                       Monitor for design changes on interval\n  diff \u003CurlA> \u003CurlB>                Compare two sites' design languages\n  brands \u003Curls...>                  Multi-brand comparison matrix\n  sync \u003Curl>                        Sync local tokens with live site\n  history \u003Curl>                     View design change history\n  mcp                               Launch stdio MCP server (--output-dir \u003Cdir>)\n  lint \u003Cfile>                       (v9) Audit a local token file (.json\u002F.css) — CI-ready\n  drift \u003Curl> --tokens \u003Cfile>       (v9) Check local tokens for drift against a live site\n  visual-diff \u003Cbefore> \u003Cafter>      (v9) Side-by-side HTML diff of two URLs\n```\n\n## Example output\n\n`designlang https:\u002F\u002Fvercel.com --full` →\n\n```\nColors: 27 · Fonts: Geist + Geist Mono · Spacing: 18 (base 2px)\nShadows: 11 · Radii: 10 · CSS vars: 407 · Layout: 55 grids \u002F 492 flex\nResponsive: 4 viewports, 3 breakpoint changes · Interactions: 8 transitions\nA11y: 94% WCAG · Score: 68\u002F100 (D) · 4 issues\n\n→ 17 files written to .\u002Fdesign-extract-output\u002F\n→ Run `designlang grade https:\u002F\u002Fvercel.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>` | Main entry point. |\n| **VS Code extension** | [`vscode-extension\u002F`](vscode-extension\u002F) | \"Extract design from URL\" command + auto-inject into workspace. |\n| **Raycast extension** | [`raycast-extension\u002F`](raycast-extension\u002F) | Extract, score, and \"copy CLI command\" from Raycast. |\n| **Figma plugin** | [`figma-plugin\u002F`](figma-plugin\u002F) | Paste a URL inside Figma, get a full Variables collection. |\n| **GitHub Action** | [`github-action\u002F`](github-action\u002F) | \"Design regression guard\" — diffs tokens on every PR and comments. |\n| **Chrome extension** | [`chrome-extension\u002F`](chrome-extension\u002F) | One-click handoff from any tab (MV3, `activeTab` only). |\n| **MCP server** | `npx designlang mcp` | Exposes the extracted design as MCP resources + tools for Cursor, Claude Code, Windsurf, etc. See [`docs\u002FMCP-REGISTRY.md`](docs\u002FMCP-REGISTRY.md). |\n| **Claude Code plugin** | [`.claude-plugin\u002F`](.claude-plugin\u002F) | Five slash commands inside Claude Code — `\u002Fextract`, `\u002Fgrade`, `\u002Fbattle`, `\u002Fremix`, `\u002Fpack`. |\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\u002Fplugin install Manavarya09\u002Fdesign-extract\n```\n\nThen inside any Claude Code session:\n\n| Slash command | What it does |\n|---|---|\n| `\u002Fextract \u003Curl>` | Full extraction → DTCG tokens, Tailwind, Figma vars, motion, voice |\n| `\u002Fgrade \u003Curl>` | Shareable HTML \"Design Report Card\" (+ `--badge` for an SVG) |\n| `\u002Fbattle \u003CurlA> \u003CurlB>` | Head-to-head graded battle card |\n| `\u002Fremix \u003Curl> --as \u003Cvocab>` | Restyle in brutalist \u002F swiss \u002F art-deco \u002F cyberpunk \u002F soft-ui \u002F editorial |\n| `\u002Fpack \u003Curl>` | Bundle every output into one design-system directory |\n\nManifest: [`.claude-plugin\u002Fplugin.json`](.claude-plugin\u002Fplugin.json) · marketplace: [`.claude-plugin\u002Fmarketplace.json`](.claude-plugin\u002Fmarketplace.json) · commands: [`commands\u002F`](commands\u002F) · skills: [`skills\u002F`](skills\u002F).\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\u002Fdesign-extract\n```\n\nIn Cursor \u002F Codex \u002F etc., use `\u002Fextract-design \u003Curl>`.\n\n## Website\n\n**[https:\u002F\u002Fdesignlang.manavaryasingh.com](https:\u002F\u002Fdesignlang.manavaryasingh.com\u002F)** — the brutalist product page.\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md). PRs welcome!\n\n## License\n\n[MIT](LICENSE) - Manav Arya Singh\n\n\n","design-extract 是一个能够通过一条命令提取任何网站完整设计系统的工具。它基于 Playwright 和 Node.js 构建，支持从网页中抽取 DTCG 令牌、语义+原始+复合组件，并提供 MCP 服务器支持 Claude Code\u002FCursor\u002FWindsurf 等应用。此外，它还具备多平台生成器（如 iOS SwiftUI、Android Compose、Flutter、WordPress）、Tailwind v4 支持、Figma 变量管理、shadcn\u002Fui 集成、CSS 健康审计及 WCAG 合规性修复等功能。该工具特别适合需要快速将现有网站的设计系统转换为代码的开发者，以及关注无障碍访问和前端质量保证的专业人士使用。",2,"2026-06-11 02:38:30","CREATED_QUERY"]