{"_id":"designlang","_rev":"7-b2cb7f3d26285c9c4071994bd659e549","name":"designlang","dist-tags":{"latest":"6.0.0"},"versions":{"1.0.0":{"name":"designlang","version":"1.0.0","keywords":["design-system","design-tokens","design-language","css","tailwind","playwright","extraction","colors","typography","claude-code","plugin"],"author":{"name":"masyv"},"license":"MIT","_id":"designlang@1.0.0","maintainers":[{"name":"manavarya0909","email":"manavarya0178@gmail.com"}],"bin":{"designlang":"bin/design-extract.js"},"dist":{"shasum":"85f432fb0c8a10ed62e2d55a85127272c482bdc2","tarball":"https://registry.npmjs.org/designlang/-/designlang-1.0.0.tgz","fileCount":24,"integrity":"sha512-Vh0FFCRhlsRnG3HY+/NQP9ZZ2ZmNQnBPFHWsVkqe5Aq9ItN65rvhrUPXICoq1MYl1BoHpEVv5JEanBCIBuernQ==","signatures":[{"sig":"MEQCIFVo0/Lluly3cnzodSXnweOxKDeihtV0/gNb5uQzyHAXAiAh5ObvGNiSko9EKrLI3vKLgg7BQ0MJ4jIM0meMVoslrQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":64051},"main":"src/index.js","type":"module","engines":{"node":">=18"},"gitHead":"cce41b5dfe160f610da9005cef6956465bd91d74","scripts":{"test":"node --test tests/","start":"node bin/design-extract.js","postinstall":"npx playwright install chromium --with-deps 2>/dev/null || npx playwright install chromium"},"_npmUser":{"name":"manavarya0909","email":"manavarya0178@gmail.com"},"_npmVersion":"10.9.7","description":"Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"ora":"^8.0.0","chalk":"^5.3.0","commander":"^12.0.0","playwright":"^1.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/designlang_1.0.0_1776248059178_0.46316095701800086","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"designlang","version":"2.0.0","keywords":["design-system","design-tokens","design-language","css","tailwind","playwright","extraction","colors","typography","claude-code","plugin"],"author":{"name":"masyv"},"license":"MIT","_id":"designlang@2.0.0","maintainers":[{"name":"manavarya0909","email":"manavarya0178@gmail.com"}],"bin":{"designlang":"bin/design-extract.js"},"dist":{"shasum":"e98b0ee225018f0954069666c1e876b00abbbb63","tarball":"https://registry.npmjs.org/designlang/-/designlang-2.0.0.tgz","fileCount":30,"integrity":"sha512-z6MiDCLn922GTa+2UtShj0JalqnEWfxSc2C3a+LfwZ7GWg3ZXHFYZeNE1ttNHpKUMWrWAH4dV31rFCoxu2wBkw==","signatures":[{"sig":"MEQCIHTMwX6q/wa19fkra4jzAOppDI8p9lN8pKkKd8o2gqLfAiAsCS0NV135mCiHHgCNTRPKGa4jbp5FY9Jfx1bxKGj2/w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":107652},"main":"src/index.js","type":"module","engines":{"node":">=18"},"gitHead":"d71d2519a0ad672ed1219270c94c0b03df32b58c","scripts":{"test":"node --test tests/","start":"node bin/design-extract.js","postinstall":"npx playwright install chromium --with-deps 2>/dev/null || npx playwright install chromium"},"_npmUser":{"name":"manavarya0909","email":"manavarya0178@gmail.com"},"_npmVersion":"10.9.7","description":"Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"ora":"^8.0.0","chalk":"^5.3.0","commander":"^12.0.0","playwright":"^1.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/designlang_2.0.0_1776248647643_0.019094930035319813","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"designlang","version":"3.0.0","keywords":["design-system","design-tokens","design-language","css","tailwind","playwright","extraction","colors","typography","claude-code","plugin"],"author":{"name":"masyv"},"license":"MIT","_id":"designlang@3.0.0","maintainers":[{"name":"manavarya0909","email":"manavarya0178@gmail.com"}],"bin":{"designlang":"bin/design-extract.js"},"dist":{"shasum":"f20c3512888888f61d9e743e20a362c7f579bbe4","tarball":"https://registry.npmjs.org/designlang/-/designlang-3.0.0.tgz","fileCount":35,"integrity":"sha512-phCyRwkP95LoPmR1yGP0tXDR+mD06ihOarDVE0e77SwmLWoHpsOp0+3yl01/l8904xwK9rv1pz5IzvOUixIsyw==","signatures":[{"sig":"MEUCIH+Aq1J6lMwHeqTQPtvPLLOIhAh68mxUk/3+Jo+uz53NAiEAwEp/+gPmzkPs5t+tbYnlkvahoUwmlp4z7SreMo/Trgw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":141506},"main":"src/index.js","type":"module","engines":{"node":">=18"},"gitHead":"f153163c33c58caabbf3fa452be41f3cac839adb","scripts":{"test":"node --test tests/","start":"node bin/design-extract.js","postinstall":"npx playwright install chromium --with-deps 2>/dev/null || npx playwright install chromium"},"_npmUser":{"name":"manavarya0909","email":"manavarya0178@gmail.com"},"_npmVersion":"10.9.7","description":"Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"ora":"^8.0.0","chalk":"^5.3.0","commander":"^12.0.0","playwright":"^1.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/designlang_3.0.0_1776253410124_0.6205157820095799","host":"s3://npm-registry-packages-npm-production"}},"4.0.0":{"name":"designlang","version":"4.0.0","keywords":["design-system","design-tokens","design-language","css","tailwind","playwright","extraction","colors","typography","claude-code","plugin"],"author":{"name":"masyv"},"license":"MIT","_id":"designlang@4.0.0","maintainers":[{"name":"manavarya0909","email":"manavarya0178@gmail.com"}],"bin":{"designlang":"bin/design-extract.js"},"dist":{"shasum":"3535eb3ede257d8fb7e042e5ed6f96ada33d46a4","tarball":"https://registry.npmjs.org/designlang/-/designlang-4.0.0.tgz","fileCount":39,"integrity":"sha512-BJkKeH8qAuucAwysSKJSuhvLjdIDyoGJI5w7m6f6uXnMtHcdPCiS/D4RkTAtlGcXdqNrMNqmSEKu9jlUj6vPHg==","signatures":[{"sig":"MEQCIGb2TCOoySPlK4QEq1sSQjfLZTy/Gv8fsundP2hIVKukAiBNpI+9t9eV323BZfRGUMAygJ9EK4Bng10tasGwfGgH3g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8099606},"main":"src/index.js","type":"module","engines":{"node":">=18"},"gitHead":"bb79035e8461e03bbad45a5e3cef4903f0d58e35","scripts":{"test":"node --test tests/","start":"node bin/design-extract.js","postinstall":"npx playwright install chromium --with-deps 2>/dev/null || npx playwright install chromium"},"_npmUser":{"name":"manavarya0909","email":"manavarya0178@gmail.com"},"_npmVersion":"10.9.7","description":"Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"ora":"^8.0.0","chalk":"^5.3.0","commander":"^12.0.0","playwright":"^1.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/designlang_4.0.0_1776257455898_0.44772528326066907","host":"s3://npm-registry-packages-npm-production"}},"4.0.1":{"name":"designlang","version":"4.0.1","keywords":["design-system","design-tokens","design-language","css","tailwind","playwright","extraction","colors","typography","claude-code","plugin"],"author":{"name":"masyv"},"license":"MIT","_id":"designlang@4.0.1","maintainers":[{"name":"manavarya0909","email":"manavarya0178@gmail.com"}],"bin":{"designlang":"bin/design-extract.js"},"dist":{"shasum":"88e53341e4820fd99cd6ccedde99c07c06416410","tarball":"https://registry.npmjs.org/designlang/-/designlang-4.0.1.tgz","fileCount":55,"integrity":"sha512-U8scmCwLPn7ovJ32LTOF2AkxpGoNb7T7FyQs4srHbNUejpU+O5N52eQvDVLWdLZjD01G1aVNnXxy+ROlH4czzQ==","signatures":[{"sig":"MEYCIQCb2xGYD//Gz8JLRIsSMo0NUx0y3xSc24bLt3b5uJlb3QIhALMON4JuYhyCRtFik7V2fwi/znsvXgbFqcgDoAOg9MnP","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":254734},"main":"src/index.js","type":"module","engines":{"node":">=18"},"gitHead":"004120a22bbe6891b981502652217bcadbdc2d59","scripts":{"test":"node --test tests/","start":"node bin/design-extract.js","postinstall":"npx playwright install chromium --with-deps 2>/dev/null || npx playwright install chromium"},"_npmUser":{"name":"manavarya0909","email":"manavarya0178@gmail.com"},"_npmVersion":"10.9.7","description":"Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"ora":"^8.0.0","chalk":"^5.3.0","commander":"^12.0.0","playwright":"^1.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/designlang_4.0.1_1776266707514_0.9679045429392907","host":"s3://npm-registry-packages-npm-production"}},"5.0.0":{"name":"designlang","version":"5.0.0","keywords":["design-system","design-tokens","design-language","css","tailwind","playwright","extraction","colors","typography","claude-code","plugin"],"author":{"name":"masyv"},"license":"MIT","_id":"designlang@5.0.0","maintainers":[{"name":"manavarya0909","email":"manavarya0178@gmail.com"}],"bin":{"designlang":"bin/design-extract.js"},"dist":{"shasum":"965704ee8e7b031d43c27b6b0a23fcc4f3a0f47d","tarball":"https://registry.npmjs.org/designlang/-/designlang-5.0.0.tgz","fileCount":64,"integrity":"sha512-TyVA3LMAYh/RTym/6+CFEA5YMZ7Yy7UQ4kGXEOfGM6+2AUbhyJrYcFXL6jAHtkjXfOErUFJcSS0vTjLGNV2KdA==","signatures":[{"sig":"MEYCIQCRWvI9m4bOt+iU164cXnmUoCTMAk+yVpDc0rWLou7cdwIhAPI3Heyu+WHOKahdjzD/YJqPtFITSCsaSutLDsFfFha8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":314662},"main":"src/index.js","type":"module","engines":{"node":">=18"},"gitHead":"25023d4a300ccd9fd5ea291b133a4d5dc9a045d1","scripts":{"test":"node --test tests/","start":"node bin/design-extract.js","postinstall":"npx playwright install chromium --with-deps 2>/dev/null || npx playwright install chromium"},"_npmUser":{"name":"manavarya0909","email":"manavarya0178@gmail.com"},"_npmVersion":"10.9.7","description":"Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.","directories":{},"_nodeVersion":"22.22.2","dependencies":{"ora":"^8.0.0","chalk":"^5.3.0","commander":"^12.0.0","playwright":"^1.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/designlang_5.0.0_1776282805553_0.1931875223845574","host":"s3://npm-registry-packages-npm-production"}},"6.0.0":{"name":"designlang","version":"6.0.0","description":"Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.","type":"module","bin":{"designlang":"bin/design-extract.js"},"main":"src/index.js","scripts":{"postinstall":"npx playwright install chromium --with-deps 2>/dev/null || npx playwright install chromium","start":"node bin/design-extract.js","test":"node --test tests/*.test.js"},"dependencies":{"playwright":"^1.42.0","commander":"^12.0.0","chalk":"^5.3.0","ora":"^8.0.0"},"engines":{"node":">=20"},"keywords":["design-system","design-tokens","design-language","css","tailwind","playwright","extraction","colors","typography","claude-code","plugin","wordpress","vue","svelte","json","ci-cd"],"author":{"name":"masyv"},"license":"MIT","_id":"designlang@6.0.0","gitHead":"ed257b9a6557a21e781c0c7bf3ec1168b5b90a67","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-YXtrDQtirp/hyeIulwzeCZZsiQ0en6TUa5PWcmAVt1jJ1yOqT/+O//E8ci6DhPN+8mWvK/DToqQWP4wVU2odwA==","shasum":"70701e159591f0d451f4b4a2dff73d46aeb12d18","tarball":"https://registry.npmjs.org/designlang/-/designlang-6.0.0.tgz","fileCount":72,"unpackedSize":417120,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQChgqBhywUYFl27oqv8bgOqgsb3oswpfdEXZ9EmcZrSDwIgQeaeViHNLfOGZOv81S2kGts4ksGVOjyWgZr/5CmvuFc="}]},"_npmUser":{"name":"manavarya0909","email":"manavarya0178@gmail.com"},"directories":{},"maintainers":[{"name":"manavarya0909","email":"manavarya0178@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/designlang_6.0.0_1776327346781_0.42679380940000455"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-15T10:14:19.059Z","modified":"2026-04-16T08:15:47.042Z","1.0.0":"2026-04-15T10:14:19.309Z","2.0.0":"2026-04-15T10:24:07.777Z","3.0.0":"2026-04-15T11:43:30.288Z","4.0.0":"2026-04-15T12:50:56.310Z","4.0.1":"2026-04-15T15:25:07.657Z","5.0.0":"2026-04-15T19:53:25.687Z","6.0.0":"2026-04-16T08:15:46.924Z"},"author":{"name":"masyv"},"license":"MIT","keywords":["design-system","design-tokens","design-language","css","tailwind","playwright","extraction","colors","typography","claude-code","plugin","wordpress","vue","svelte","json","ci-cd"],"description":"Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.","maintainers":[{"name":"manavarya0909","email":"manavarya0178@gmail.com"}],"readme":"<p align=\"center\">\n  <h1 align=\"center\">DESIGNLANG</h1>\n  <p align=\"center\">Reverse-engineer any website's complete design system in one command.</p>\n</p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/designlang\"><img src=\"https://img.shields.io/npm/v/designlang?color=blue&label=npm\" alt=\"npm version\"></a>\n  <a href=\"https://github.com/Manavarya09/design-extract/blob/main/LICENSE\"><img src=\"https://img.shields.io/github/license/Manavarya09/design-extract\" alt=\"license\"></a>\n  <a href=\"https://nodejs.org\"><img src=\"https://img.shields.io/node/v/designlang\" alt=\"node version\"></a>\n  <a href=\"https://website-five-lime-65.vercel.app\"><img src=\"https://img.shields.io/badge/website-live-red\" alt=\"website\"></a>\n</p>\n\n---\n\n<p align=\"center\">\n  <img src=\"designlang.png\" alt=\"designlang in action\" width=\"100%\">\n</p>\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 & 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 && npm install && 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 (>9999).\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 <url>` | 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 <n>` | 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 <url>` | Auto-detect framework and write tokens to your project |\n| Clone | `designlang clone <url>` | Generate a working Next.js starter with extracted design |\n| Score | `designlang score <url>` | Rate design quality with visual bar chart breakdown |\n| Watch | `designlang watch <url>` | Monitor for design changes on interval |\n| Diff | `designlang diff <A> <B>` | Compare two sites (MD + HTML) |\n| Multi-brand | `designlang brands <urls...>` | N-site comparison matrix |\n| Sync | `designlang sync <url>` | Update local tokens from live site |\n| History | `designlang history <url>` | Track design changes over time |\n\n## Full CLI Reference\n\n```\ndesignlang <url> [options]\n\nOptions:\n  -o, --out <dir>         Output directory (default: ./design-extract-output)\n  -n, --name <name>       Output file prefix (default: derived from URL)\n  -w, --width <px>        Viewport width (default: 1280)\n  --height <px>           Viewport height (default: 800)\n  --wait <ms>             Wait after page load for SPAs (default: 0)\n  --dark                  Also extract dark mode styles\n  --depth <n>             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 <cookies...>   Cookies for authenticated pages (name=value)\n  --header <headers...>   Custom headers (name:value)\n  --framework <type>      Only generate specific theme (react, shadcn)\n  --no-history            Skip saving to history\n  --verbose               Detailed progress output\n\nCommands:\n  apply <url>             Extract and apply design directly to your project\n  clone <url>             Generate a working Next.js starter from extracted design\n  score <url>             Rate design quality (7 categories, A-F, bar chart)\n  watch <url>             Monitor for design changes on interval\n  diff <urlA> <urlB>      Compare two sites' design languages\n  brands <urls...>        Multi-brand comparison matrix\n  sync <url>              Sync local tokens with live site\n  history <url>           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 <url>`.\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) - Manavarya Singh\n","readmeFilename":"README.md"}