designlang 2.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

@@ -15,6 +15,12 @@ import { formatFigma } from '../src/formatters/figma.js';
 import { formatReactTheme, formatShadcnTheme } from '../src/formatters/theme.js';
 import { diffDesigns, formatDiffMarkdown, formatDiffHtml } from '../src/diff.js';
 import { saveSnapshot, getHistory, formatHistoryMarkdown } from '../src/history.js';
+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();
@@ -22,7 +28,7 @@ const program = new Command();
 program
   .name('designlang')
   .description('Extract the complete design language from any website')
-  .version('2.0.0');
+  .version('4.0.0');
 
 // ── Main command: extract ──────────────────────────────────────
 program
@@ -36,6 +42,9 @@ program
   .option('--depth <n>', 'number of internal pages to also crawl', parseInt, 0)
   .option('--screenshots', 'capture component screenshots')
   .option('--framework <type>', 'generate framework theme (react, shadcn)')
+  .option('--responsive', 'capture design at multiple breakpoints')
+  .option('--interactions', 'capture hover/focus/active states')
+  .option('--full', 'enable all extra captures (screenshots, responsive, interactions)')
   .option('--no-history', 'skip saving to history')
   .option('--verbose', 'show detailed progress')
   .action(async (url, opts) => {
@@ -58,10 +67,22 @@ program
         wait: opts.wait,
         dark: opts.dark,
         depth: opts.depth,
-        screenshots: opts.screenshots,
+        screenshots: opts.screenshots || opts.full,
         outDir,
       });
 
+      // Responsive capture
+      if (opts.responsive || opts.full) {
+        spinner.text = 'Capturing responsive breakpoints...';
+        design.responsive = await captureResponsive(url, { wait: opts.wait });
+      }
+
+      // Interaction state capture
+      if (opts.interactions || opts.full) {
+        spinner.text = 'Capturing interaction states...';
+        design.interactions = await captureInteractions(url, { width: opts.width, height: parseInt(opts.height) || 800, wait: opts.wait });
+      }
+
       spinner.text = 'Generating outputs...';
       mkdirSync(outDir, { recursive: true });
 
@@ -125,6 +146,22 @@ program
       console.log(`  ${chalk.gray('Breakpoints:')} ${design.breakpoints.length} breakpoints`);
       console.log(`  ${chalk.gray('Components:')} ${Object.keys(design.components).length} patterns detected`);
       console.log(`  ${chalk.gray('CSS Vars:')} ${Object.values(design.variables).reduce((s, v) => s + Object.keys(v).length, 0)} custom properties`);
+      if (design.layout) {
+        console.log(`  ${chalk.gray('Layout:')} ${design.layout.gridCount} grids, ${design.layout.flexCount} flex containers`);
+      }
+      if (design.responsive) {
+        console.log(`  ${chalk.gray('Responsive:')} ${design.responsive.viewports.length} viewports, ${design.responsive.changes.length} breakpoint changes`);
+      }
+      if (design.interactions) {
+        const ic = design.interactions;
+        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) {
@@ -216,4 +253,237 @@ program
     console.log(formatHistoryMarkdown(url, history));
   });
 
+// ── Brands command (multi-site comparison) ─────────────────
+program
+  .command('brands <urls...>')
+  .description('Compare design languages across multiple brands')
+  .option('-o, --out <dir>', 'output directory', './design-brands-output')
+  .action(async (urls, opts) => {
+    console.log('');
+    console.log(chalk.bold('  designlang brands'));
+    console.log(chalk.gray(`  Comparing ${urls.length} sites`));
+    console.log('');
+
+    const spinner = ora(`Extracting ${urls.length} sites...`).start();
+
+    try {
+      const brands = await compareBrands(urls);
+
+      const outDir = resolve(opts.out);
+      mkdirSync(outDir, { recursive: true });
+
+      const md = formatBrandMatrix(brands);
+      const html = formatBrandMatrixHtml(brands);
+
+      writeFileSync(join(outDir, 'brands.md'), md, 'utf-8');
+      writeFileSync(join(outDir, 'brands.html'), html, 'utf-8');
+
+      spinner.succeed('Brand comparison complete!');
+      console.log('');
+      console.log(`  ${chalk.green('✓')} ${chalk.cyan('brands.md')} — Markdown matrix`);
+      console.log(`  ${chalk.green('✓')} ${chalk.cyan('brands.html')} — Visual matrix`);
+      console.log('');
+      console.log(chalk.gray(`  Saved to ${outDir}`));
+
+      // Quick summary
+      const valid = brands.filter(b => !b.error);
+      for (const b of valid) {
+        console.log(`  ${chalk.cyan(b.hostname)}: ${b.design.colors.all.length} colors, ${b.design.typography.families.map(f => f.name).join(', ')}, ${b.design.accessibility?.score ?? '?'}% a11y`);
+      }
+      console.log('');
+
+    } catch (err) {
+      spinner.fail('Brand comparison failed');
+      console.error(chalk.red(`\n  ${err.message}\n`));
+      process.exit(1);
+    }
+  });
+
+// ── Sync command ────────────────────────────────────────────
+program
+  .command('sync <url>')
+  .description('Sync local design tokens with a live website')
+  .option('-o, --out <dir>', 'directory with token files to update', '.')
+  .action(async (url, opts) => {
+    if (!url.startsWith('http')) url = `https://${url}`;
+
+    console.log('');
+    console.log(chalk.bold('  designlang sync'));
+    console.log(chalk.gray(`  ${url}`));
+    console.log('');
+
+    const spinner = ora('Extracting current design...').start();
+
+    try {
+      const result = await syncDesign(url, { out: resolve(opts.out) });
+
+      if (result.isFirstRun) {
+        spinner.succeed('First sync — baseline saved.');
+      } else if (result.changes.length === 0) {
+        spinner.succeed('No design changes detected.');
+      } else {
+        spinner.succeed(`${result.changes.length} design changes detected!`);
+        console.log('');
+        for (const c of result.changes) {
+          console.log(`  ${chalk.yellow('≠')} ${c.property}: ${c.from} → ${c.to}`);
+        }
+      }
+
+      if (result.updatedFiles.length > 0) {
+        console.log('');
+        console.log(chalk.bold('  Updated files:'));
+        for (const f of result.updatedFiles) {
+          console.log(`  ${chalk.green('✓')} ${chalk.cyan(f)}`);
+        }
+      }
+      console.log('');
+
+    } catch (err) {
+      spinner.fail('Sync failed');
+      console.error(chalk.red(`\n  ${err.message}\n`));
+      process.exit(1);
+    }
+  });
+
+// ── 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": "2.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": {