designlang 3.0.0 → 4.0.0

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <h1 align="center">designlang</h1>
-  <p align="center">Extract the complete design language from any website in seconds.</p>
+  <p align="center">Reverse-engineer any website's complete design system in one command.</p>
 </p>
 
 <p align="center">
@@ -11,11 +11,13 @@
 
 ---
 
-**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, Figma variables, React theme, shadcn/ui theme, W3C design tokens, and CSS custom properties.
+<p align="center">
+  <img src="designlang.png" alt="designlang in action" width="100%">
+</p>
 
-It also does **WCAG accessibility scoring**, **component screenshot capture**, **multi-page crawling**, **design comparison** between two sites, and **historical tracking** of how a site's design evolves over time.
+**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.
 
-**No other tool does all of this from a single command.**
+But 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**.
 
 ## Quick Start
 
@@ -23,18 +25,26 @@ It also does **WCAG accessibility scoring**, **component screenshot capture**, *
 npx designlang https://stripe.com
 ```
 
+Get everything at once:
+
+```bash
+npx designlang https://stripe.com --full
+```
+
 ## What You Get (8 Files)
 
 | File | What it is |
 |------|------------|
-| `*-design-language.md` | AI-optimized markdown — the full design system described for LLMs |
-| `*-preview.html` | Visual HTML report with swatches, type scale, shadows, a11y score |
-| `*-design-tokens.json` | [W3C Design Tokens](https://design-tokens.github.io/community-group/format/) for tooling |
-| `*-tailwind.config.js` | Drop-in Tailwind CSS theme extension |
-| `*-variables.css` | CSS custom properties ready to import |
+| `*-design-language.md` | AI-optimized markdown — feed it to any LLM to recreate the design |
+| `*-preview.html` | Visual report with swatches, type scale, shadows, a11y score |
+| `*-design-tokens.json` | [W3C Design Tokens](https://design-tokens.github.io/community-group/format/) format |
+| `*-tailwind.config.js` | Drop-in Tailwind CSS theme |
+| `*-variables.css` | CSS custom properties |
 | `*-figma-variables.json` | Figma Variables import (with dark mode support) |
-| `*-theme.js` | React/CSS-in-JS theme object (Chakra, Stitches, Vanilla Extract) |
-| `*-shadcn-theme.css` | shadcn/ui globals.css theme variables |
+| `*-theme.js` | React/CSS-in-JS theme (Chakra, Stitches, Vanilla Extract) |
+| `*-shadcn-theme.css` | shadcn/ui globals.css variables |
+
+The markdown output has **14 sections**: Color Palette, Typography, Spacing, Border Radii, Box Shadows, CSS Custom Properties, Breakpoints, Transitions & Animations, Component Patterns, Layout System, Responsive Design, Interaction States, Accessibility (WCAG 2.1), and Quick Start.
 
 ## Install
 
@@ -44,94 +54,96 @@ npx designlang https://example.com
 
 # Or install globally
 npm install -g designlang
-```
 
-## Features
-
-### Multi-Page Crawling
+# As an agent skill (Claude Code, Cursor, Codex, 40+ agents)
+npx skills add Manavarya09/design-extract
+```
 
-Crawl multiple pages for a site-wide design system:
+## What Makes This Different
 
-```bash
-designlang https://stripe.com --depth 5
-```
+Most design extraction tools give you colors and fonts. That's it. designlang fills 5 market gaps that no other tool addresses:
 
-### WCAG Accessibility Scoring
+### 1. Layout System Extraction
 
-Every extraction includes a WCAG 2.1 contrast analysis:
+Extracts the structural skeleton — grid column patterns, flex direction usage, container widths, gap values, and justify/align patterns.
 
 ```
-A11y: 94% WCAG score (7 failing pairs)
+Layout: 55 grids, 492 flex containers
 ```
 
-Failing color pairs are highlighted in both the markdown and HTML preview with exact contrast ratios.
+Every other tool gives you the paint. designlang gives you the architecture.
 
-### Component Screenshots
+### 2. Responsive Multi-Breakpoint Capture
 
-Capture PNG screenshots of detected UI components:
+Crawls the site at 4 viewports (mobile, tablet, desktop, wide) and maps exactly what changes:
 
 ```bash
-designlang https://vercel.com --screenshots
+designlang https://vercel.com --responsive
 ```
 
-Saves screenshots of buttons, cards, inputs, navigation, hero sections, and a full-page capture.
-
-### Visual HTML Preview
+```
+Responsive: 4 viewports, 3 breakpoint changes
+  375px → 768px: Nav visibility hidden → visible, Hamburger shown → hidden
+  768px → 1280px: Max grid columns 1 → 3, H1 size 32px → 48px
+```
 
-Every run generates a `*-preview.html` file — a gorgeous dark-themed report you can open in your browser with:
-- Color swatches for the full palette
-- Live type scale rendering
-- Spacing scale visualization
-- Shadow cards with actual CSS shadows
-- Accessibility score and failing pair analysis
-- Component screenshots (when `--screenshots` is used)
+No other tool captures how the design *adapts*, just how it looks at one size.
 
-### Design Comparison
+### 3. Interaction State Capture
 
-Compare two sites side-by-side:
+Programmatically hovers and focuses interactive elements, capturing the actual style transitions:
 
 ```bash
-designlang diff https://vercel.com https://stripe.com
+designlang https://stripe.com --interactions
 ```
 
-Generates `diff.md` and `diff.html` showing color, typography, spacing, and accessibility differences.
+```css
+/* Button Hover */
+background-color: rgb(83, 58, 253) → rgb(67, 47, 202);
+box-shadow: none → 0 4px 12px rgba(83, 58, 253, 0.4);
 
-### Historical Tracking
+/* Input Focus */
+border-color: rgb(200, 200, 200) → rgb(83, 58, 253);
+outline: none → 2px solid rgb(83, 58, 253);
+```
 
-Track how a site's design evolves over time:
+### 4. Live Site Sync
 
-```bash
-# Each extraction auto-saves a snapshot
-designlang https://stripe.com
+Treat the deployed site as your source of truth, not Figma:
 
-# View history
-designlang history https://stripe.com
+```bash
+designlang sync https://stripe.com --out ./src/tokens
 ```
 
-Shows color changes, font swaps, accessibility score trends, and CSS variable count over time.
-
-### Framework Themes
+Detects design changes and auto-updates your local `design-tokens.json`, `tailwind.config.js`, and `variables.css`.
 
-Generates ready-to-use theme files for:
+### 5. Multi-Brand Comparison
 
-- **React/CSS-in-JS** — theme object compatible with Chakra UI, Stitches, Vanilla Extract
-- **shadcn/ui** — CSS variables in the exact format shadcn expects (paste into globals.css)
-- **Tailwind** — full theme extension with colors, fonts, spacing, radii, shadows, screens
+Compare N brands side-by-side:
 
-## What It Extracts
+```bash
+designlang brands stripe.com vercel.com github.com linear.app
+```
 
-| Category | Details |
-|----------|---------|
-| **Colors** | Full palette with primary/secondary/accent/neutral classification, gradients |
-| **Typography** | Font families, type scale, heading/body styles, weight distribution |
-| **Spacing** | All unique values with automatic base-unit detection (4px/8px grid) |
-| **Border Radii** | Unique values labeled xs through full |
-| **Box Shadows** | Parsed and classified by visual weight |
-| **CSS Variables** | All `:root` custom properties, categorized |
-| **Breakpoints** | Media query breakpoints with standard labels |
-| **Animations** | Transitions, easing functions, durations, `@keyframes` |
-| **Components** | Buttons, cards, inputs, links — with base styles |
-| **Accessibility** | WCAG 2.1 contrast ratios for all fg/bg color pairs |
+Generates a matrix with color overlap analysis, typography comparison, spacing systems, and accessibility scores. Outputs both `brands.md` and `brands.html`.
+
+## All Features
+
+| Feature | Flag / Command | Description |
+|---------|---------------|-------------|
+| Base extraction | `designlang <url>` | Colors, typography, spacing, shadows, radii, CSS vars, breakpoints, animations, components |
+| Layout system | automatic | Grid patterns, flex usage, container widths, gap values |
+| Accessibility | automatic | WCAG 2.1 contrast ratios for all fg/bg pairs |
+| Dark mode | `--dark` | Extracts dark color scheme |
+| Multi-page | `--depth <n>` | Crawl N internal pages for site-wide tokens |
+| Screenshots | `--screenshots` | Capture buttons, cards, inputs, nav, hero, full page |
+| Responsive | `--responsive` | Crawl at 4 viewports, map breakpoint changes |
+| Interactions | `--interactions` | Capture hover/focus/active state transitions |
+| Everything | `--full` | Enable screenshots + responsive + interactions |
+| Diff | `designlang diff <A> <B>` | Compare two sites (MD + HTML) |
+| Multi-brand | `designlang brands <urls...>` | N-site comparison matrix |
+| Sync | `designlang sync <url>` | Update local tokens from live site |
+| History | `designlang history <url>` | Track design changes over time |
 
 ## Full CLI Reference
 
@@ -145,29 +157,78 @@ Options:
   --height <px>           Viewport height (default: 800)
   --wait <ms>             Wait after page load for SPAs (default: 0)
   --dark                  Also extract dark mode styles
-  --depth <n>             Pages to crawl (default: 0, just the URL)
+  --depth <n>             Internal pages to crawl (default: 0)
   --screenshots           Capture component screenshots
+  --responsive            Capture at multiple breakpoints
+  --interactions          Capture hover/focus/active states
+  --full                  Enable all captures
   --framework <type>      Only generate specific theme (react, shadcn)
   --no-history            Skip saving to history
   --verbose               Detailed progress output
 
 Commands:
   diff <urlA> <urlB>      Compare two sites' design languages
-  history <url>           View design history for a site
+  brands <urls...>        Multi-brand comparison matrix
+  sync <url>              Sync local tokens with live site
+  history <url>           View design change history
+```
+
+## Example Output
+
+Running `designlang https://vercel.com --full`:
+
+```
+  designlang
+  https://vercel.com
+
+  Output files:
+  ✓ vercel-com-design-language.md (32.6KB)
+  ✓ vercel-com-design-tokens.json (5.6KB)
+  ✓ vercel-com-tailwind.config.js (3.4KB)
+  ✓ vercel-com-variables.css (18.6KB)
+  ✓ vercel-com-preview.html (31.8KB)
+  ✓ vercel-com-figma-variables.json (12.4KB)
+  ✓ vercel-com-theme.js (1.4KB)
+  ✓ vercel-com-shadcn-theme.css (477B)
+  ✓ screenshots/button.png
+  ✓ screenshots/card.png
+  ✓ screenshots/nav.png
+  ✓ screenshots/hero.png
+  ✓ screenshots/full-page.png
+
+  Summary:
+  Colors: 27 unique colors
+  Fonts: Geist, Geist Mono
+  Spacing: 18 values (base: 2px)
+  Shadows: 11 unique shadows
+  Radii: 10 unique values
+  Breakpoints: 45 breakpoints
+  Components: 4 patterns detected
+  CSS Vars: 407 custom properties
+  Layout: 55 grids, 492 flex containers
+  Responsive: 4 viewports, 3 breakpoint changes
+  Interactions: 8 state changes captured
+  A11y: 94% WCAG score (7 failing pairs)
 ```
 
 ## How It Works
 
-1. **Crawl** — Launches headless Chromium via Playwright
-2. **Extract** — `page.evaluate()` walks up to 5,000 DOM elements collecting computed styles
-3. **Process** — 10 extractor modules parse, deduplicate, cluster, and classify the raw data
-4. **Format** — 8 formatter modules generate the output files
-5. **Score** — Accessibility extractor calculates WCAG contrast ratios
-6. **Capture** — Optional Playwright screenshots of detected components
+1. **Crawl** — Launches headless Chromium via Playwright, waits for network idle and fonts
+2. **Extract** — Single `page.evaluate()` walks up to 5,000 DOM elements collecting 25+ computed style properties including layout (grid, flex, container) data
+3. **Process** — 12 extractor modules parse, deduplicate, cluster, and classify the raw data
+4. **Format** — 8 formatter modules generate output files
+5. **Score** — Accessibility extractor calculates WCAG contrast ratios for all color pairs
+6. **Capture** — Optional: screenshots, responsive viewport crawling, interaction state recording
+
+## Agent Skill
 
-## Claude Code Plugin
+Works with **Claude Code, Cursor, Codex, and 40+ AI coding agents** via the skills ecosystem:
+
+```bash
+npx skills add Manavarya09/design-extract
+```
 
-**designlang** also works as a [Claude Code](https://claude.ai/claude-code) plugin. Use `/extract-design <url>` in your coding session.
+In Claude Code, use `/extract-design <url>`.
 
 ## Contributing
 

package/bin/design-extract.js

@@ -19,6 +19,8 @@ import { captureResponsive } from '../src/extractors/responsive.js';
 import { captureInteractions } from '../src/extractors/interactions.js';
 import { syncDesign } from '../src/sync.js';
 import { compareBrands, formatBrandMatrix, formatBrandMatrixHtml } from '../src/multibrand.js';
+import { generateClone } from '../src/clone.js';
+import { watchSite } from '../src/watch.js';
 import { nameFromUrl } from '../src/utils.js';
 
 const program = new Command();
@@ -26,7 +28,7 @@ const program = new Command();
 program
   .name('designlang')
   .description('Extract the complete design language from any website')
-  .version('3.0.0');
+  .version('4.0.0');
 
 // ── Main command: extract ──────────────────────────────────────
 program
@@ -155,6 +157,11 @@ program
         const total = ic.buttons.length + ic.links.length + ic.inputs.length;
         console.log(`  ${chalk.gray('Interactions:')} ${total} state changes captured`);
       }
+      if (design.score) {
+        const s = design.score;
+        const gradeColor = s.grade === 'A' ? chalk.green : s.grade === 'B' ? chalk.cyan : s.grade === 'C' ? chalk.yellow : chalk.red;
+        console.log(`  ${chalk.gray('Design Score:')} ${gradeColor(`${s.overall}/100 (${s.grade})`)}${s.issues.length > 0 ? ` — ${s.issues.length} issues` : ''}`);
+      }
 
       // Accessibility summary
       if (design.accessibility) {
@@ -338,4 +345,145 @@ program
     }
   });
 
+// ── Clone command ───────────────────────────────────────────
+program
+  .command('clone <url>')
+  .description('Generate a working Next.js starter from a site\'s design')
+  .option('-o, --out <dir>', 'output directory', './cloned-design')
+  .action(async (url, opts) => {
+    if (!url.startsWith('http')) url = `https://${url}`;
+
+    console.log('');
+    console.log(chalk.bold('  designlang clone'));
+    console.log(chalk.gray(`  ${url}`));
+    console.log('');
+
+    const spinner = ora('Extracting design...').start();
+
+    try {
+      const design = await extractDesignLanguage(url);
+      spinner.text = 'Generating Next.js project...';
+
+      const result = generateClone(design, resolve(opts.out));
+
+      spinner.succeed('Clone generated!');
+      console.log('');
+      for (const f of result.files) {
+        console.log(`  ${chalk.green('✓')} ${chalk.cyan(f)}`);
+      }
+      console.log('');
+      console.log(chalk.bold('  To run:'));
+      console.log(chalk.gray(`  cd ${opts.out} && npm install && npm run dev`));
+      console.log('');
+
+    } catch (err) {
+      spinner.fail('Clone failed');
+      console.error(chalk.red(`\n  ${err.message}\n`));
+      process.exit(1);
+    }
+  });
+
+// ── Watch command ───────────────────────────────────────────
+program
+  .command('watch <url>')
+  .description('Monitor a site for design changes')
+  .option('--interval <minutes>', 'check interval in minutes', parseInt, 60)
+  .action(async (url, opts) => {
+    if (!url.startsWith('http')) url = `https://${url}`;
+    const intervalMs = (opts.interval || 60) * 60 * 1000;
+
+    console.log('');
+    console.log(chalk.bold('  designlang watch'));
+    console.log(chalk.gray(`  ${url} (every ${opts.interval || 60}min)`));
+    console.log('');
+
+    const check = async () => {
+      const spinner = ora('Checking for design changes...').start();
+      try {
+        const result = await watchSite(url);
+
+        if (result.isFirstRun) {
+          spinner.succeed('Baseline captured. Watching for changes...');
+        } else if (result.changes.length === 0) {
+          spinner.succeed(`No changes — ${new Date().toLocaleTimeString()}`);
+        } else {
+          spinner.warn(`${result.changes.length} changes detected!`);
+          for (const c of result.changes) {
+            console.log(`  ${chalk.yellow('≠')} ${c.what}: ${c.from} → ${c.to}`);
+          }
+        }
+      } catch (err) {
+        spinner.fail(`Check failed: ${err.message}`);
+      }
+    };
+
+    await check();
+    console.log(chalk.gray(`\n  Next check in ${opts.interval || 60} minutes. Press Ctrl+C to stop.\n`));
+    setInterval(check, intervalMs);
+  });
+
+// ── Score command ───────────────────────────────────────────
+program
+  .command('score <url>')
+  .description('Score a website\'s design system quality')
+  .action(async (url) => {
+    if (!url.startsWith('http')) url = `https://${url}`;
+
+    const spinner = ora('Analyzing design...').start();
+
+    try {
+      const design = await extractDesignLanguage(url);
+      const s = design.score;
+
+      spinner.stop();
+      console.log('');
+      console.log(chalk.bold('  Design System Score'));
+      console.log(chalk.gray(`  ${url}`));
+      console.log('');
+
+      const gradeColor = s.grade === 'A' ? chalk.green : s.grade === 'B' ? chalk.cyan : s.grade === 'C' ? chalk.yellow : chalk.red;
+      console.log(`  ${gradeColor.bold(`  ${s.overall}/100  Grade: ${s.grade}`)}`);
+      console.log('');
+
+      // Category breakdown
+      const cats = [
+        ['Color Discipline', s.scores.colorDiscipline],
+        ['Typography', s.scores.typographyConsistency],
+        ['Spacing System', s.scores.spacingSystem],
+        ['Shadows', s.scores.shadowConsistency],
+        ['Border Radii', s.scores.radiusConsistency],
+        ['Accessibility', s.scores.accessibility],
+        ['Tokenization', s.scores.tokenization],
+      ];
+
+      for (const [name, score] of cats) {
+        const bar = '█'.repeat(Math.round(score / 5)) + '░'.repeat(20 - Math.round(score / 5));
+        const color = score >= 80 ? chalk.green : score >= 60 ? chalk.yellow : chalk.red;
+        console.log(`  ${chalk.gray(name.padEnd(20))} ${color(bar)} ${score}`);
+      }
+
+      if (s.strengths.length > 0) {
+        console.log('');
+        console.log(chalk.bold('  Strengths:'));
+        for (const str of s.strengths) {
+          console.log(`  ${chalk.green('✓')} ${str}`);
+        }
+      }
+
+      if (s.issues.length > 0) {
+        console.log('');
+        console.log(chalk.bold('  Issues:'));
+        for (const issue of s.issues) {
+          console.log(`  ${chalk.yellow('!')} ${issue}`);
+        }
+      }
+      console.log('');
+
+    } catch (err) {
+      spinner.fail('Scoring failed');
+      console.error(chalk.red(`\n  ${err.message}\n`));
+      process.exit(1);
+    }
+  });
+
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "3.0.0",
+  "version": "4.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": {

package/src/clone.js

@@ -0,0 +1,218 @@
+// Clone command — generate a working Next.js starter from extracted design
+
+import { mkdirSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+export function generateClone(design, outDir) {
+  const projectDir = outDir;
+  mkdirSync(join(projectDir, 'src/app'), { recursive: true });
+  mkdirSync(join(projectDir, 'public'), { recursive: true });
+
+  const { colors, typography, spacing, borders, shadows } = design;
+
+  // Package.json
+  writeFileSync(join(projectDir, 'package.json'), JSON.stringify({
+    name: `${design.meta.title?.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').slice(0, 40) || 'cloned-design'}-clone`,
+    version: '0.1.0',
+    private: true,
+    scripts: {
+      dev: 'next dev',
+      build: 'next build',
+      start: 'next start',
+    },
+    dependencies: {
+      next: '^15.0.0',
+      react: '^19.0.0',
+      'react-dom': '^19.0.0',
+    },
+    devDependencies: {
+      tailwindcss: '^4.0.0',
+      '@tailwindcss/postcss': '^4.0.0',
+    },
+  }, null, 2), 'utf-8');
+
+  // Globals CSS with extracted design tokens
+  const primaryHex = colors.primary?.hex || '#3b82f6';
+  const secondaryHex = colors.secondary?.hex || '#8b5cf6';
+  const accentHex = colors.accent?.hex || '#f59e0b';
+  const bgColor = colors.backgrounds[0] || '#ffffff';
+  const textColor = colors.text[0] || '#171717';
+  const fontFamily = typography.families[0]?.name || 'Inter';
+  const monoFont = typography.families.find(f => f.name.toLowerCase().includes('mono'))?.name || 'monospace';
+  const radiusMd = borders.radii.find(r => r.label === 'md')?.value || 8;
+  const shadowMd = shadows.values.find(s => s.label === 'md')?.raw || '0 4px 6px rgba(0,0,0,0.1)';
+
+  const neutrals = colors.neutrals.slice(0, 5);
+
+  writeFileSync(join(projectDir, 'src/app/globals.css'), `@import "tailwindcss";
+
+:root {
+  --color-primary: ${primaryHex};
+  --color-secondary: ${secondaryHex};
+  --color-accent: ${accentHex};
+  --color-background: ${bgColor};
+  --color-foreground: ${textColor};
+${neutrals.map((n, i) => `  --color-neutral-${i + 1}: ${n.hex};`).join('\n')}
+  --font-sans: '${fontFamily}', system-ui, sans-serif;
+  --font-mono: '${monoFont}', monospace;
+  --radius: ${radiusMd}px;
+  --shadow: ${shadowMd};
+}
+
+body {
+  background: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-sans);
+}
+`, 'utf-8');
+
+  // Layout
+  writeFileSync(join(projectDir, 'src/app/layout.js'), `export const metadata = {
+  title: '${(design.meta.title || 'Cloned Design').replace(/'/g, "\\'")}',
+  description: 'Design cloned from ${design.meta.url}',
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+        <link href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@400;500;600;700&display=swap" rel="stylesheet" />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+`, 'utf-8');
+
+  // Demo page showcasing the design system
+  const headingScale = typography.headings.slice(0, 3);
+  const bodySize = typography.body?.size || 16;
+  const spacingVals = spacing.scale.slice(0, 8);
+
+  writeFileSync(join(projectDir, 'src/app/page.js'), `import './globals.css';
+
+export default function Home() {
+  return (
+    <main style={{ maxWidth: '1200px', margin: '0 auto', padding: '48px 24px' }}>
+      {/* Hero */}
+      <section style={{ textAlign: 'center', padding: '80px 0' }}>
+        <h1 style={{
+          fontSize: '${headingScale[0]?.size || 48}px',
+          fontWeight: ${headingScale[0]?.weight || 700},
+          lineHeight: '${headingScale[0]?.lineHeight || '1.1'}',
+          color: 'var(--color-foreground)',
+          marginBottom: '16px',
+        }}>
+          Design System Clone
+        </h1>
+        <p style={{
+          fontSize: '${bodySize + 4}px',
+          color: 'var(--color-neutral-1)',
+          maxWidth: '600px',
+          margin: '0 auto 32px',
+        }}>
+          Extracted from <a href="${design.meta.url}" style={{ color: 'var(--color-primary)' }}>${design.meta.url}</a>
+        </p>
+        <div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
+          <button style={{
+            background: 'var(--color-primary)',
+            color: '#fff',
+            border: 'none',
+            padding: '12px 24px',
+            borderRadius: 'var(--radius)',
+            fontSize: '${bodySize}px',
+            fontWeight: 500,
+            cursor: 'pointer',
+          }}>
+            Primary Button
+          </button>
+          <button style={{
+            background: 'transparent',
+            color: 'var(--color-foreground)',
+            border: '1px solid var(--color-neutral-${Math.min(neutrals.length, 3)})',
+            padding: '12px 24px',
+            borderRadius: 'var(--radius)',
+            fontSize: '${bodySize}px',
+            fontWeight: 500,
+            cursor: 'pointer',
+          }}>
+            Secondary Button
+          </button>
+        </div>
+      </section>
+
+      {/* Color Palette */}
+      <section style={{ padding: '48px 0' }}>
+        <h2 style={{ fontSize: '${headingScale[1]?.size || 24}px', fontWeight: 600, marginBottom: '24px' }}>Color Palette</h2>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: '12px' }}>
+          <div style={{ background: 'var(--color-primary)', borderRadius: 'var(--radius)', padding: '40px 16px 12px', color: '#fff', fontSize: '12px' }}>Primary<br/>${primaryHex}</div>
+          <div style={{ background: 'var(--color-secondary)', borderRadius: 'var(--radius)', padding: '40px 16px 12px', color: '#fff', fontSize: '12px' }}>Secondary<br/>${secondaryHex}</div>
+          <div style={{ background: 'var(--color-accent)', borderRadius: 'var(--radius)', padding: '40px 16px 12px', color: '#fff', fontSize: '12px' }}>Accent<br/>${accentHex}</div>
+${neutrals.map((n, i) => `          <div style={{ background: '${n.hex}', borderRadius: 'var(--radius)', padding: '40px 16px 12px', color: '${n.hsl.l > 50 ? '#000' : '#fff'}', fontSize: '12px' }}>Neutral ${i + 1}<br/>${n.hex}</div>`).join('\n')}
+        </div>
+      </section>
+
+      {/* Typography */}
+      <section style={{ padding: '48px 0' }}>
+        <h2 style={{ fontSize: '${headingScale[1]?.size || 24}px', fontWeight: 600, marginBottom: '24px' }}>Typography</h2>
+${headingScale.map((h, i) => `        <p style={{ fontSize: '${h.size}px', fontWeight: ${h.weight}, lineHeight: '${h.lineHeight}', marginBottom: '16px' }}>Heading ${i + 1} — ${h.size}px / ${h.weight}</p>`).join('\n')}
+        <p style={{ fontSize: '${bodySize}px', lineHeight: '1.6', color: 'var(--color-neutral-1)', marginTop: '24px' }}>
+          Body text at ${bodySize}px. This is what most content on the site looks like.
+          The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
+        </p>
+      </section>
+
+      {/* Cards */}
+      <section style={{ padding: '48px 0' }}>
+        <h2 style={{ fontSize: '${headingScale[1]?.size || 24}px', fontWeight: 600, marginBottom: '24px' }}>Cards</h2>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '24px' }}>
+          {[1, 2, 3].map(i => (
+            <div key={i} style={{
+              background: 'var(--color-background)',
+              border: '1px solid var(--color-neutral-${Math.min(neutrals.length, 3)})',
+              borderRadius: 'var(--radius)',
+              padding: '24px',
+              boxShadow: 'var(--shadow)',
+            }}>
+              <h3 style={{ fontSize: '${(headingScale[2]?.size || 18)}px', fontWeight: 600, marginBottom: '8px' }}>Card Title {i}</h3>
+              <p style={{ fontSize: '${bodySize}px', color: 'var(--color-neutral-1)', lineHeight: '1.5' }}>
+                This card uses the extracted border radius, shadow, and spacing values from the original site.
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer style={{ padding: '48px 0', borderTop: '1px solid var(--color-neutral-${Math.min(neutrals.length, 3)})', marginTop: '48px', textAlign: 'center' }}>
+        <p style={{ fontSize: '${bodySize - 2}px', color: 'var(--color-neutral-1)' }}>
+          Design extracted from ${design.meta.url} with <a href="https://github.com/Manavarya09/design-extract" style={{ color: 'var(--color-primary)' }}>designlang</a>
+        </p>
+      </footer>
+    </main>
+  );
+}
+`, 'utf-8');
+
+  // Next config
+  writeFileSync(join(projectDir, 'next.config.mjs'), `/** @type {import('next').NextConfig} */
+const nextConfig = {};
+export default nextConfig;
+`, 'utf-8');
+
+  // PostCSS config for Tailwind v4
+  writeFileSync(join(projectDir, 'postcss.config.mjs'), `const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+export default config;
+`, 'utf-8');
+
+  return {
+    dir: projectDir,
+    files: ['package.json', 'src/app/globals.css', 'src/app/layout.js', 'src/app/page.js', 'next.config.mjs', 'postcss.config.mjs'],
+  };
+}

package/src/extractors/components.js

@@ -45,6 +45,92 @@ export function extractComponents(computedStyles) {
     };
   }
 
+  // Navigation
+  const navs = computedStyles.filter(el =>
+    el.tag === 'nav' || el.role === 'navigation' ||
+    /nav|navbar|header/i.test(el.classList)
+  );
+  if (navs.length > 0) {
+    components.navigation = {
+      count: navs.length,
+      baseStyle: mostCommonStyle(navs, ['backgroundColor', 'color', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'position', 'boxShadow']),
+    };
+  }
+
+  // Footer
+  const footers = computedStyles.filter(el =>
+    el.tag === 'footer' || el.role === 'contentinfo' ||
+    /footer/i.test(el.classList)
+  );
+  if (footers.length > 0) {
+    components.footer = {
+      count: footers.length,
+      baseStyle: mostCommonStyle(footers, ['backgroundColor', 'color', 'paddingTop', 'paddingBottom', 'fontSize']),
+    };
+  }
+
+  // Modals / Dialogs
+  const modals = computedStyles.filter(el =>
+    el.tag === 'dialog' || el.role === 'dialog' || el.role === 'alertdialog' ||
+    /modal|dialog|overlay|popup/i.test(el.classList)
+  );
+  if (modals.length > 0) {
+    components.modals = {
+      count: modals.length,
+      baseStyle: mostCommonStyle(modals, ['backgroundColor', 'borderRadius', 'boxShadow', 'paddingTop', 'paddingRight', 'maxWidth']),
+    };
+  }
+
+  // Dropdowns / Menus
+  const dropdowns = computedStyles.filter(el =>
+    el.role === 'menu' || el.role === 'listbox' ||
+    /dropdown|menu|popover|combobox/i.test(el.classList)
+  );
+  if (dropdowns.length > 0) {
+    components.dropdowns = {
+      count: dropdowns.length,
+      baseStyle: mostCommonStyle(dropdowns, ['backgroundColor', 'borderRadius', 'boxShadow', 'borderColor', 'paddingTop']),
+    };
+  }
+
+  // Tables
+  const tables = computedStyles.filter(el => el.tag === 'table' || el.role === 'table');
+  const tableCells = computedStyles.filter(el => ['td', 'th'].includes(el.tag));
+  if (tables.length > 0 || tableCells.length > 10) {
+    components.tables = {
+      count: tables.length,
+      cellCount: tableCells.length,
+      baseStyle: {
+        ...mostCommonStyle(tables, ['borderColor', 'backgroundColor']),
+        cellStyle: mostCommonStyle(tableCells, ['paddingTop', 'paddingRight', 'borderColor', 'fontSize']),
+      },
+    };
+  }
+
+  // Badges / Tags / Pills
+  const badges = computedStyles.filter(el =>
+    /badge|tag|pill|chip|label/i.test(el.classList) &&
+    el.area < 5000 && el.area > 100
+  );
+  if (badges.length > 0) {
+    components.badges = {
+      count: badges.length,
+      baseStyle: mostCommonStyle(badges, ['backgroundColor', 'color', 'fontSize', 'fontWeight', 'paddingTop', 'paddingRight', 'borderRadius']),
+    };
+  }
+
+  // Avatars
+  const avatars = computedStyles.filter(el =>
+    /avatar/i.test(el.classList) ||
+    (el.tag === 'img' && el.borderRadius === '9999px' && el.area < 10000 && el.area > 400)
+  );
+  if (avatars.length > 0) {
+    components.avatars = {
+      count: avatars.length,
+      baseStyle: mostCommonStyle(avatars, ['borderRadius', 'backgroundColor']),
+    };
+  }
+
   return components;
 }
 

package/src/extractors/scoring.js

@@ -0,0 +1,132 @@
+// Design system scoring — rate consistency and quality
+
+export function scoreDesignSystem(design) {
+  const scores = {};
+  const issues = [];
+
+  // 1. Color discipline (0-100)
+  // Fewer unique colors = more disciplined
+  const colorCount = design.colors.all.length;
+  if (colorCount <= 8) scores.colorDiscipline = 100;
+  else if (colorCount <= 15) scores.colorDiscipline = 85;
+  else if (colorCount <= 25) scores.colorDiscipline = 70;
+  else if (colorCount <= 40) scores.colorDiscipline = 50;
+  else { scores.colorDiscipline = 30; issues.push(`${colorCount} unique colors detected — consider consolidating to a tighter palette`); }
+
+  if (!design.colors.primary) {
+    scores.colorDiscipline -= 15;
+    issues.push('No clear primary brand color detected');
+  }
+
+  // 2. Typography consistency (0-100)
+  const fontCount = design.typography.families.length;
+  if (fontCount <= 2) scores.typographyConsistency = 100;
+  else if (fontCount <= 3) scores.typographyConsistency = 80;
+  else { scores.typographyConsistency = 50; issues.push(`${fontCount} font families — consider limiting to 2 (heading + body)`); }
+
+  const weightCount = design.typography.weights.length;
+  if (weightCount <= 3) scores.typographyConsistency = Math.min(scores.typographyConsistency, 100);
+  else if (weightCount <= 5) scores.typographyConsistency = Math.min(scores.typographyConsistency, 80);
+  else { scores.typographyConsistency -= 15; issues.push(`${weightCount} font weights in use — consider standardizing to 3 (regular, medium, bold)`); }
+
+  const scaleSize = design.typography.scale.length;
+  if (scaleSize <= 6) scores.typographyConsistency = Math.min(scores.typographyConsistency, 100);
+  else if (scaleSize <= 10) scores.typographyConsistency = Math.min(scores.typographyConsistency, 85);
+  else { scores.typographyConsistency -= 10; issues.push(`${scaleSize} distinct font sizes — consider a tighter type scale`); }
+
+  // 3. Spacing system (0-100)
+  if (design.spacing.base) {
+    scores.spacingSystem = 90;
+    // Check how many values fit the base
+    const fittingValues = design.spacing.scale.filter(v => v % design.spacing.base === 0).length;
+    const fitRatio = fittingValues / design.spacing.scale.length;
+    if (fitRatio >= 0.8) scores.spacingSystem = 100;
+    else if (fitRatio >= 0.6) scores.spacingSystem = 80;
+    else scores.spacingSystem = 65;
+  } else {
+    scores.spacingSystem = 40;
+    issues.push('No consistent spacing base unit detected — values appear arbitrary');
+  }
+
+  if (design.spacing.scale.length > 20) {
+    scores.spacingSystem -= 15;
+    issues.push(`${design.spacing.scale.length} unique spacing values — too many one-off values`);
+  }
+
+  // 4. Shadow consistency (0-100)
+  const shadowCount = design.shadows.values.length;
+  if (shadowCount === 0) scores.shadowConsistency = 80; // no shadows is fine
+  else if (shadowCount <= 4) scores.shadowConsistency = 100;
+  else if (shadowCount <= 8) scores.shadowConsistency = 75;
+  else { scores.shadowConsistency = 50; issues.push(`${shadowCount} unique shadows — consider a 3-level elevation scale (sm/md/lg)`); }
+
+  // 5. Border radius consistency (0-100)
+  const radiiCount = design.borders.radii.length;
+  if (radiiCount <= 3) scores.radiusConsistency = 100;
+  else if (radiiCount <= 5) scores.radiusConsistency = 85;
+  else if (radiiCount <= 8) scores.radiusConsistency = 65;
+  else { scores.radiusConsistency = 40; issues.push(`${radiiCount} unique border radii — standardize to 3-4 values`); }
+
+  // 6. Accessibility (from existing extractor)
+  scores.accessibility = design.accessibility?.score || 0;
+  if (design.accessibility?.failCount > 0) {
+    issues.push(`${design.accessibility.failCount} WCAG contrast failures`);
+  }
+
+  // 7. CSS variable usage (0-100)
+  const varCount = Object.values(design.variables).reduce((s, v) => s + Object.keys(v).length, 0);
+  if (varCount >= 20) scores.tokenization = 100;
+  else if (varCount >= 10) scores.tokenization = 75;
+  else if (varCount >= 1) scores.tokenization = 50;
+  else { scores.tokenization = 20; issues.push('No CSS custom properties found — design is not tokenized'); }
+
+  // Overall score (weighted average)
+  const weights = {
+    colorDiscipline: 20,
+    typographyConsistency: 20,
+    spacingSystem: 20,
+    shadowConsistency: 10,
+    radiusConsistency: 10,
+    accessibility: 15,
+    tokenization: 5,
+  };
+
+  let totalWeight = 0;
+  let weightedSum = 0;
+  for (const [key, weight] of Object.entries(weights)) {
+    if (scores[key] !== undefined) {
+      weightedSum += Math.max(0, scores[key]) * weight;
+      totalWeight += weight;
+    }
+  }
+
+  const overall = totalWeight > 0 ? Math.round(weightedSum / totalWeight) : 0;
+
+  // Grade
+  let grade;
+  if (overall >= 90) grade = 'A';
+  else if (overall >= 80) grade = 'B';
+  else if (overall >= 70) grade = 'C';
+  else if (overall >= 60) grade = 'D';
+  else grade = 'F';
+
+  return {
+    overall,
+    grade,
+    scores,
+    issues,
+    strengths: getStrengths(scores),
+  };
+}
+
+function getStrengths(scores) {
+  const strengths = [];
+  if (scores.colorDiscipline >= 85) strengths.push('Tight, disciplined color palette');
+  if (scores.typographyConsistency >= 85) strengths.push('Consistent typography system');
+  if (scores.spacingSystem >= 85) strengths.push('Well-defined spacing scale');
+  if (scores.shadowConsistency >= 85) strengths.push('Clean elevation system');
+  if (scores.radiusConsistency >= 85) strengths.push('Consistent border radii');
+  if (scores.accessibility >= 90) strengths.push('Strong accessibility compliance');
+  if (scores.tokenization >= 75) strengths.push('Good CSS variable tokenization');
+  return strengths;
+}

package/src/formatters/markdown.js

@@ -469,6 +469,37 @@ export function formatMarkdown(design) {
     }
   }
 
+  // ── Design Score ──
+  if (design.score) {
+    const s = design.score;
+    lines.push('## Design System Score');
+    lines.push('');
+    lines.push(`**Overall: ${s.overall}/100 (Grade: ${s.grade})**`);
+    lines.push('');
+    lines.push('| Category | Score |');
+    lines.push('|----------|-------|');
+    if (s.scores.colorDiscipline !== undefined) lines.push(`| Color Discipline | ${s.scores.colorDiscipline}/100 |`);
+    if (s.scores.typographyConsistency !== undefined) lines.push(`| Typography Consistency | ${s.scores.typographyConsistency}/100 |`);
+    if (s.scores.spacingSystem !== undefined) lines.push(`| Spacing System | ${s.scores.spacingSystem}/100 |`);
+    if (s.scores.shadowConsistency !== undefined) lines.push(`| Shadow Consistency | ${s.scores.shadowConsistency}/100 |`);
+    if (s.scores.radiusConsistency !== undefined) lines.push(`| Border Radius Consistency | ${s.scores.radiusConsistency}/100 |`);
+    if (s.scores.accessibility !== undefined) lines.push(`| Accessibility | ${s.scores.accessibility}/100 |`);
+    if (s.scores.tokenization !== undefined) lines.push(`| CSS Tokenization | ${s.scores.tokenization}/100 |`);
+    lines.push('');
+
+    if (s.strengths.length > 0) {
+      lines.push('**Strengths:** ' + s.strengths.join(', '));
+      lines.push('');
+    }
+    if (s.issues.length > 0) {
+      lines.push('**Issues:**');
+      for (const issue of s.issues) {
+        lines.push(`- ${issue}`);
+      }
+      lines.push('');
+    }
+  }
+
   // ── Quick Start ──
   lines.push('## Quick Start');
   lines.push('');

package/src/index.js

@@ -10,6 +10,7 @@ import { extractAnimations } from './extractors/animations.js';
 import { extractComponents } from './extractors/components.js';
 import { extractAccessibility } from './extractors/accessibility.js';
 import { extractLayout } from './extractors/layout.js';
+import { scoreDesignSystem } from './extractors/scoring.js';
 
 export async function extractDesignLanguage(url, options = {}) {
   const rawData = await crawlPage(url, options);
@@ -35,6 +36,7 @@ export async function extractDesignLanguage(url, options = {}) {
     accessibility: extractAccessibility(styles),
     layout: extractLayout(styles),
     componentScreenshots: rawData.componentScreenshots || {},
+    score: null, // populated below
   };
 
   if (rawData.dark) {
@@ -44,6 +46,8 @@ export async function extractDesignLanguage(url, options = {}) {
     };
   }
 
+  design.score = scoreDesignSystem(design);
+
   return design;
 }
 
@@ -61,3 +65,6 @@ export { captureResponsive } from './extractors/responsive.js';
 export { captureInteractions } from './extractors/interactions.js';
 export { syncDesign } from './sync.js';
 export { compareBrands, formatBrandMatrix, formatBrandMatrixHtml } from './multibrand.js';
+export { generateClone } from './clone.js';
+export { scoreDesignSystem } from './extractors/scoring.js';
+export { watchSite } from './watch.js';

package/src/watch.js

@@ -0,0 +1,47 @@
+// Watch command — monitor a site for design changes on a schedule
+
+import { extractDesignLanguage } from './index.js';
+import { saveSnapshot, getHistory } from './history.js';
+
+export async function watchSite(url, options = {}) {
+  const { intervalMs = 3600000 } = options; // default 1 hour
+
+  const design = await extractDesignLanguage(url);
+  const history = getHistory(url);
+  const previous = history.length > 0 ? history[history.length - 1] : null;
+
+  const snapshot = saveSnapshot(design);
+  const changes = [];
+
+  if (previous) {
+    if (previous.colors.primary !== design.colors.primary?.hex) {
+      changes.push({ type: 'color', what: 'Primary color', from: previous.colors.primary, to: design.colors.primary?.hex });
+    }
+    if (previous.colors.secondary !== design.colors.secondary?.hex) {
+      changes.push({ type: 'color', what: 'Secondary color', from: previous.colors.secondary, to: design.colors.secondary?.hex });
+    }
+    if (previous.colors.count !== design.colors.all.length) {
+      changes.push({ type: 'color', what: 'Color count', from: String(previous.colors.count), to: String(design.colors.all.length) });
+    }
+    if (previous.typography.families.join(',') !== design.typography.families.map(f => f.name).join(',')) {
+      changes.push({ type: 'typography', what: 'Font families', from: previous.typography.families.join(', '), to: design.typography.families.map(f => f.name).join(', ') });
+    }
+    if (previous.a11yScore !== design.accessibility?.score) {
+      changes.push({ type: 'accessibility', what: 'A11y score', from: `${previous.a11yScore}%`, to: `${design.accessibility?.score}%` });
+    }
+    if (previous.spacing.base !== design.spacing.base) {
+      changes.push({ type: 'spacing', what: 'Spacing base', from: `${previous.spacing.base}px`, to: `${design.spacing.base}px` });
+    }
+    if (Math.abs(previous.cssVarCount - Object.values(design.variables).reduce((s, v) => s + Object.keys(v).length, 0)) > 10) {
+      const newCount = Object.values(design.variables).reduce((s, v) => s + Object.keys(v).length, 0);
+      changes.push({ type: 'tokens', what: 'CSS var count', from: String(previous.cssVarCount), to: String(newCount) });
+    }
+  }
+
+  return {
+    changes,
+    isFirstRun: !previous,
+    snapshot,
+    design,
+  };
+}