{"id":48934924,"url":"https://github.com/manavarya09/design-extract","last_synced_at":"2026-04-24T23:03:08.362Z","repository":{"id":351525212,"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-04-20T12:30:01.000Z","size":8210,"stargazers_count":1121,"open_issues_count":6,"forks_count":86,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-04-20T14:03:27.412Z","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://designlang.manavaryasingh.com","language":"JavaScript","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":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["Manavarya09"]}},"created_at":"2026-04-15T10:11:22.000Z","updated_at":"2026-04-20T13:43:48.000Z","dependencies_parsed_at":"2026-04-20T14:02:06.861Z","dependency_job_id":null,"html_url":"https://github.com/Manavarya09/design-extract","commit_stats":null,"previous_names":["manavarya09/design-extract"],"tags_count":6,"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":286080680,"owners_count":32097173,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T11:25:29.218Z","status":"ssl_error","status_checked_at":"2026-04-21T11:25:28.499Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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-04-21T15:00:56.597Z","avatar_url":"https://github.com/Manavarya09.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003eDESIGNLANG\u003c/h1\u003e\n  \u003cp align=\"center\"\u003eReverse-engineer any website's complete design system in one command.\u003c/p\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=blue\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\" alt=\"license\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://nodejs.org\"\u003e\u003cimg src=\"https://img.shields.io/node/v/designlang\" alt=\"node version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://website-five-lime-65.vercel.app\"\u003e\u003cimg src=\"https://img.shields.io/badge/website-live-red\" alt=\"website\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"designlang.png\" alt=\"designlang in action\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n**designlang** crawls any website with a headless browser, extracts every computed style from the live DOM, and generates **8 output files** — including an AI-optimized markdown file, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS custom properties.\n\nBut unlike every other tool out there, it also extracts **layout patterns** (grids, flexbox, containers), captures **responsive behavior** across 4 breakpoints, records **interaction states** (hover, focus, active), scores **WCAG accessibility**, and lets you **compare multiple brands** or **sync live sites to local tokens**.\n\n## Quick Start\n\n```bash\nnpx designlang https://stripe.com\n```\n\nGet everything at once:\n\n```bash\nnpx designlang https://stripe.com --full\n```\n\n## What You Get (8 Files)\n\n| File | What it is |\n|------|------------|\n| `*-design-language.md` | AI-optimized markdown — feed it to any LLM to recreate the design |\n| `*-preview.html` | Visual report with swatches, type scale, shadows, a11y score |\n| `*-design-tokens.json` | [W3C Design Tokens](https://design-tokens.github.io/community-group/format/) format |\n| `*-tailwind.config.js` | Drop-in Tailwind CSS theme |\n| `*-variables.css` | CSS custom properties |\n| `*-figma-variables.json` | Figma Variables import (with dark mode support) |\n| `*-theme.js` | React/CSS-in-JS theme (Chakra, Stitches, Vanilla Extract) |\n| `*-shadcn-theme.css` | shadcn/ui globals.css variables |\n\nThe markdown output has **19 sections**: Color Palette, Typography, Spacing, Border Radii, Box Shadows, CSS Custom Properties, Breakpoints, Transitions \u0026 Animations, Component Patterns (with full CSS snippets), Layout System, Responsive Design, Interaction States, Accessibility (WCAG 2.1), Gradients, Z-Index Map, SVG Icons, Font Files, Image Style Patterns, and Quick Start.\n\n## Install\n\n```bash\n# Use directly (no install needed)\nnpx designlang https://example.com\n\n# Or install globally\nnpm install -g designlang\n\n# As an agent skill (Claude Code, Cursor, Codex, 40+ agents)\nnpx skills add Manavarya09/design-extract\n```\n\n## What Makes This Different\n\nMost design extraction tools give you colors and fonts. That's it. designlang fills 5 market gaps that no other tool addresses:\n\n### 1. Layout System Extraction\n\nExtracts the structural skeleton — grid column patterns, flex direction usage, container widths, gap values, and justify/align patterns.\n\n```\nLayout: 55 grids, 492 flex containers\n```\n\nEvery other tool gives you the paint. designlang gives you the architecture.\n\n### 2. Responsive Multi-Breakpoint Capture\n\nCrawls the site at 4 viewports (mobile, tablet, desktop, wide) and maps exactly what changes:\n\n```bash\ndesignlang https://vercel.com --responsive\n```\n\n```\nResponsive: 4 viewports, 3 breakpoint changes\n  375px → 768px: Nav visibility hidden → visible, Hamburger shown → hidden\n  768px → 1280px: Max grid columns 1 → 3, H1 size 32px → 48px\n```\n\nNo other tool captures how the design *adapts*, just how it looks at one size.\n\n### 3. Interaction State Capture\n\nProgrammatically hovers and focuses interactive elements, capturing the actual style transitions:\n\n```bash\ndesignlang https://stripe.com --interactions\n```\n\n```css\n/* Button Hover */\nbackground-color: rgb(83, 58, 253) → rgb(67, 47, 202);\nbox-shadow: none → 0 4px 12px rgba(83, 58, 253, 0.4);\n\n/* Input Focus */\nborder-color: rgb(200, 200, 200) → rgb(83, 58, 253);\noutline: none → 2px solid rgb(83, 58, 253);\n```\n\n### 4. Live Site Sync\n\nTreat the deployed site as your source of truth, not Figma:\n\n```bash\ndesignlang sync https://stripe.com --out ./src/tokens\n```\n\nDetects design changes and auto-updates your local `design-tokens.json`, `tailwind.config.js`, and `variables.css`.\n\n### 5. Multi-Brand Comparison\n\nCompare N brands side-by-side:\n\n```bash\ndesignlang brands stripe.com vercel.com github.com linear.app\n```\n\nGenerates a matrix with color overlap analysis, typography comparison, spacing systems, and accessibility scores. Outputs both `brands.md` and `brands.html`.\n\n### 6. Clone Command\n\nGenerate a working Next.js app with the extracted design applied:\n\n```bash\ndesignlang clone https://stripe.com\ncd cloned-design \u0026\u0026 npm install \u0026\u0026 npm run dev\n```\n\nOne command → a running app with the site's colors, fonts, spacing, and component patterns.\n\n### 7. Design System Scoring\n\nRate any site's design quality across 7 categories:\n\n```bash\ndesignlang score https://vercel.com\n```\n\n```\n  68/100  Grade: D\n\n  Color Discipline     ██████████░░░░░░░░░░ 50\n  Typography           ██████████████░░░░░░ 70\n  Spacing System       ████████████████░░░░ 80\n  Shadows              ██████████░░░░░░░░░░ 50\n  Border Radii         ████████░░░░░░░░░░░░ 40\n  Accessibility        ███████████████████░ 94\n  Tokenization         ████████████████████ 100\n```\n\n### 8. Watch Mode\n\nMonitor a site for design changes:\n\n```bash\ndesignlang watch https://stripe.com --interval 60\n```\n\nChecks hourly and alerts when colors, fonts, or accessibility scores change.\n\n### 9. Apply Command (NEW in v5)\n\nExtract a site's design and write tokens directly into your project — auto-detects your framework:\n\n```bash\ndesignlang apply https://stripe.com --dir ./my-app\n```\n\nDetects Tailwind, shadcn/ui, or plain CSS and writes to the right config files automatically.\n\n### 10. Auth Extraction (NEW in v5)\n\nExtract from authenticated or protected pages with cookies and custom headers:\n\n```bash\ndesignlang https://internal-app.com --cookie \"session=abc123\" --header \"Authorization:Bearer token\"\n```\n\n### 11. Gradient Extraction (NEW in v5)\n\nDetects all CSS gradients — type (linear/radial/conic), direction, color stops, and classifies them as subtle, brand, bold, or complex.\n\n### 12. Z-Index Map (NEW in v5)\n\nBuilds a layer hierarchy from all z-index values, groups them into layers (base, sticky, dropdown, modal, etc.), and flags z-index wars or excessive values (\u003e9999).\n\n### 13. SVG Icon Extraction (NEW in v5)\n\nFinds and deduplicates all inline SVGs, classifies them by size and style (outline/solid/duotone), and extracts the icon color palette.\n\n### 14. Font File Detection (NEW in v5)\n\nIdentifies every font source — Google Fonts, self-hosted, CDN, or system — and generates ready-to-use `@font-face` CSS.\n\n### 15. Image Style Patterns (NEW in v5)\n\nDetects image aspect ratios, border treatments, filters, and classifies patterns like avatar, hero, thumbnail, and gallery.\n\n### 16. Dark Mode Diffing (NEW in v5)\n\nCompare light and dark mode side-by-side — see exactly which colors change and which CSS variables are overridden:\n\n```bash\ndesignlang https://vercel.com --dark\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`, `--header` | Extract from authenticated/protected pages |\n| Multi-page | `--depth \u003cn\u003e` | Crawl N internal pages for site-wide tokens |\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| Everything | `--full` | Enable screenshots + responsive + interactions |\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| 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\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  --full                  Enable all captures\n  --cookie \u003ccookies...\u003e   Cookies for authenticated pages (name=value)\n  --header \u003cheaders...\u003e   Custom headers (name:value)\n  --framework \u003ctype\u003e      Only generate specific theme (react, shadcn)\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  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```\n\n## Example Output\n\nRunning `designlang https://vercel.com --full`:\n\n```\n  designlang\n  https://vercel.com\n\n  Output files:\n  ✓ vercel-com-design-language.md (32.6KB)\n  ✓ vercel-com-design-tokens.json (5.6KB)\n  ✓ vercel-com-tailwind.config.js (3.4KB)\n  ✓ vercel-com-variables.css (18.6KB)\n  ✓ vercel-com-preview.html (31.8KB)\n  ✓ vercel-com-figma-variables.json (12.4KB)\n  ✓ vercel-com-theme.js (1.4KB)\n  ✓ vercel-com-shadcn-theme.css (477B)\n  ✓ screenshots/button.png\n  ✓ screenshots/card.png\n  ✓ screenshots/nav.png\n  ✓ screenshots/hero.png\n  ✓ screenshots/full-page.png\n\n  Summary:\n  Colors: 27 unique colors\n  Fonts: Geist, Geist Mono\n  Spacing: 18 values (base: 2px)\n  Shadows: 11 unique shadows\n  Radii: 10 unique values\n  Breakpoints: 45 breakpoints\n  Components: 11 types detected (with CSS snippets)\n  CSS Vars: 407 custom properties\n  Layout: 55 grids, 492 flex containers\n  Gradients: 4 unique gradients\n  Z-Index: 8 layers mapped\n  Icons: 23 unique SVGs\n  Font Files: 4 font sources detected\n  Images: 6 style patterns\n  Responsive: 4 viewports, 3 breakpoint changes\n  Interactions: 8 state changes captured\n  A11y: 94% WCAG score (7 failing pairs)\n  Design Score: 68/100 (D) — 4 issues\n```\n\n## How It Works\n\n1. **Crawl** — Launches headless Chromium via Playwright, waits for network idle and fonts\n2. **Extract** — Single `page.evaluate()` walks up to 5,000 DOM elements collecting 25+ computed style properties, layout data, inline SVGs, font sources, and image metadata\n3. **Process** — 17 extractor modules parse, deduplicate, cluster, and classify the raw data (including gradients, z-index layers, icons, fonts, and image patterns)\n4. **Format** — 8 formatter modules generate 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## Agent Skill\n\nWorks with **Claude Code, Cursor, Codex, and 40+ AI coding agents** via the skills ecosystem:\n\n```bash\nnpx skills add Manavarya09/design-extract\n```\n\nIn Claude Code, use `/extract-design \u003curl\u003e`.\n\n## Website\n\n**[website-five-lime-65.vercel.app](https://website-five-lime-65.vercel.app)** — 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","funding_links":["https://github.com/sponsors/Manavarya09"],"categories":[],"sub_categories":[],"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"}