designlang 2.0.0 → 3.0.0

package/bin/design-extract.js

@@ -15,6 +15,10 @@ 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 { nameFromUrl } from '../src/utils.js';
 
 const program = new Command();
@@ -22,7 +26,7 @@ const program = new Command();
 program
   .name('designlang')
   .description('Extract the complete design language from any website')
-  .version('2.0.0');
+  .version('3.0.0');
 
 // ── Main command: extract ──────────────────────────────────────
 program
@@ -36,6 +40,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 +65,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 +144,17 @@ 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`);
+      }
 
       // Accessibility summary
       if (design.accessibility) {
@@ -216,4 +246,96 @@ 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);
+    }
+  });
+
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "2.0.0",
+  "version": "3.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/skills/extract-design/SKILL.md

@@ -1,27 +1,38 @@
 ---
 name: extract-design
-description: "Extract the full design language from any website URL. Produces AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors does this site use', 'what font does this site use', or '/extract-design'."
-argument-hint: "<url> [--dark] [--out <dir>]"
+description: "Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site use', or '/extract-design'."
 allowed-tools: Bash, Read, Write, Glob
 ---
 
 # Extract Design Language
 
-Extract the complete design language from any website URL.
+Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.
 
-## Process
+## Prerequisites
+
+Ensure `designlang` is available. Install if needed:
+
+```bash
+npm install -g designlang
+```
 
-1. **Run the extraction CLI** on the provided URL:
+Or use npx (no install required):
 
 ```bash
-cd "${CLAUDE_SKILL_DIR}/../.." && node bin/design-extract.js $ARGUMENTS
+npx designlang <url>
 ```
 
-If dependencies are not installed, run first:
+## Process
+
+1. **Run the extraction** on the provided URL:
+
 ```bash
-cd "${CLAUDE_SKILL_DIR}/../.." && npm install
+npx designlang <url> --screenshots
 ```
 
+For multi-page crawling: `npx designlang <url> --depth 3 --screenshots`
+For dark mode: `npx designlang <url> --dark --screenshots`
+
 2. **Read the generated markdown file** to understand the design:
 
 ```bash
@@ -29,31 +40,47 @@ cat design-extract-output/*-design-language.md
 ```
 
 3. **Present key findings** to the user:
-   - Primary color palette (with hex codes)
+   - Primary color palette with hex codes
    - Font families in use
    - Spacing system (base unit if detected)
-   - Number of component patterns found
-   - Any notable design decisions (shadows, border-radius scale, etc.)
+   - WCAG accessibility score
+   - Component patterns found
+   - Notable design decisions (shadows, radii, etc.)
 
 4. **Offer next steps:**
-   - Copy `tailwind.config.js` into the user's project
-   - Import `variables.css` into their stylesheet
-   - Use `design-tokens.json` for tooling integration
-   - Use the markdown file as a reference for AI-assisted development
+   - Copy `*-tailwind.config.js` into their project
+   - Import `*-variables.css` into their stylesheet
+   - Paste `*-shadcn-theme.css` into globals.css for shadcn/ui users
+   - Import `*-theme.js` for React/CSS-in-JS projects
+   - Import `*-figma-variables.json` into Figma for designer handoff
+   - Open `*-preview.html` in a browser for a visual overview
+   - Use the markdown file as context for AI-assisted development
 
-## Output Files
-
-The tool generates 4 files in the output directory:
+## Output Files (8)
 
 | File | Purpose |
 |------|---------|
-| `*-design-language.md` | AI-optimized markdown describing the full design system |
-| `*-design-tokens.json` | W3C Design Tokens format for tooling |
-| `*-tailwind.config.js` | Ready-to-use Tailwind CSS theme extension |
-| `*-variables.css` | CSS custom properties for direct use |
+| `*-design-language.md` | AI-optimized markdown — the full design system for LLMs |
+| `*-preview.html` | Visual HTML report with swatches, type scale, shadows, a11y |
+| `*-design-tokens.json` | W3C Design Tokens format |
+| `*-tailwind.config.js` | Ready-to-use Tailwind CSS theme |
+| `*-variables.css` | CSS custom properties |
+| `*-figma-variables.json` | Figma Variables import format |
+| `*-theme.js` | React/CSS-in-JS theme object |
+| `*-shadcn-theme.css` | shadcn/ui theme CSS variables |
+
+## Additional Commands
+
+- **Compare two sites:** `npx designlang diff <urlA> <urlB>`
+- **View history:** `npx designlang history <url>`
 
 ## Options
 
-- `--out <dir>` — Output directory (default: `./design-extract-output`)
-- `--dark` — Also extract dark mode color scheme
-- `--wait <ms>` — Wait time after page load for SPAs
+| Flag | Description |
+|------|-------------|
+| `--out <dir>` | Output directory (default: `./design-extract-output`) |
+| `--dark` | Also extract dark mode color scheme |
+| `--depth <n>` | Crawl N internal pages for site-wide extraction |
+| `--screenshots` | Capture component screenshots (buttons, cards, nav) |
+| `--wait <ms>` | Wait time after page load for SPAs |
+| `--framework <type>` | Generate only specific theme (`react` or `shadcn`) |

package/src/crawler.js

@@ -203,6 +203,13 @@ async function extractPageData(page) {
         animation: cs.animation,
         display: cs.display,
         position: cs.position,
+        flexDirection: cs.flexDirection,
+        flexWrap: cs.flexWrap,
+        justifyContent: cs.justifyContent,
+        alignItems: cs.alignItems,
+        gridTemplateColumns: cs.gridTemplateColumns,
+        gridTemplateRows: cs.gridTemplateRows,
+        maxWidth: cs.maxWidth,
       });
     }
 

package/src/extractors/interactions.js

@@ -0,0 +1,128 @@
+// Interaction state extraction — hover, focus, active styles
+
+import { chromium } from 'playwright';
+
+export async function captureInteractions(url, options = {}) {
+  const { width = 1280, height = 800, wait = 0 } = options;
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width, height } });
+  const page = await context.newPage();
+
+  await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+  if (wait > 0) await page.waitForTimeout(wait);
+  await page.evaluate(() => document.fonts.ready);
+
+  const results = { buttons: [], links: [], inputs: [] };
+
+  // Extract button states
+  const buttons = await page.$$('button, [role="button"], a[class*="btn"]');
+  for (const btn of buttons.slice(0, 10)) {
+    try {
+      const base = await getStyles(page, btn);
+      if (!base || base.display === 'none') continue;
+
+      // Hover
+      await btn.hover();
+      await page.waitForTimeout(100);
+      const hover = await getStyles(page, btn);
+
+      // Focus
+      await btn.focus();
+      await page.waitForTimeout(100);
+      const focus = await getStyles(page, btn);
+
+      const diffs = diffStates(base, hover, focus);
+      if (diffs.hasChanges) {
+        results.buttons.push({ text: base.text, base: base.styles, ...diffs });
+      }
+    } catch { /* skip */ }
+  }
+
+  // Extract link states
+  const links = await page.$$('a:not([role="button"]):not([class*="btn"])');
+  for (const link of links.slice(0, 10)) {
+    try {
+      const base = await getStyles(page, link);
+      if (!base || base.display === 'none') continue;
+
+      await link.hover();
+      await page.waitForTimeout(100);
+      const hover = await getStyles(page, link);
+
+      const diffs = diffStates(base, hover, null);
+      if (diffs.hasChanges) {
+        results.links.push({ text: base.text, base: base.styles, ...diffs });
+        break; // One link pattern is enough
+      }
+    } catch { /* skip */ }
+  }
+
+  // Extract input states
+  const inputs = await page.$$('input[type="text"], input[type="email"], input[type="search"], textarea');
+  for (const input of inputs.slice(0, 5)) {
+    try {
+      const base = await getStyles(page, input);
+      if (!base || base.display === 'none') continue;
+
+      await input.focus();
+      await page.waitForTimeout(100);
+      const focus = await getStyles(page, input);
+
+      const diffs = diffStates(base, null, focus);
+      if (diffs.hasChanges) {
+        results.inputs.push({ base: base.styles, ...diffs });
+        break; // One input pattern is enough
+      }
+    } catch { /* skip */ }
+  }
+
+  await browser.close();
+
+  return results;
+}
+
+async function getStyles(page, element) {
+  return element.evaluate(el => {
+    const cs = getComputedStyle(el);
+    if (cs.display === 'none' || cs.visibility === 'hidden') return null;
+    return {
+      text: el.textContent?.trim().slice(0, 30) || '',
+      display: cs.display,
+      styles: {
+        color: cs.color,
+        backgroundColor: cs.backgroundColor,
+        borderColor: cs.borderColor,
+        boxShadow: cs.boxShadow,
+        transform: cs.transform,
+        opacity: cs.opacity,
+        outline: cs.outline,
+        textDecoration: cs.textDecoration,
+        scale: cs.scale,
+      },
+    };
+  });
+}
+
+function diffStates(base, hover, focus) {
+  const result = { hasChanges: false, hover: {}, focus: {} };
+
+  if (hover) {
+    for (const [prop, val] of Object.entries(hover.styles)) {
+      if (val !== base.styles[prop] && val !== 'none' && val !== 'auto') {
+        result.hover[prop] = { from: base.styles[prop], to: val };
+        result.hasChanges = true;
+      }
+    }
+  }
+
+  if (focus) {
+    for (const [prop, val] of Object.entries(focus.styles)) {
+      if (val !== base.styles[prop] && val !== 'none' && val !== 'auto') {
+        result.focus[prop] = { from: base.styles[prop], to: val };
+        result.hasChanges = true;
+      }
+    }
+  }
+
+  return result;
+}

package/src/extractors/layout.js

@@ -0,0 +1,114 @@
+// Layout extraction — grid, flexbox, container patterns, structural design language
+
+export function extractLayout(computedStyles) {
+  const containers = [];
+  const gridPatterns = [];
+  const flexPatterns = [];
+  const columnCounts = new Map();
+
+  for (const el of computedStyles) {
+    const isGrid = el.display === 'grid' || el.display === 'inline-grid';
+    const isFlex = el.display === 'flex' || el.display === 'inline-flex';
+
+    if (isGrid) {
+      gridPatterns.push({
+        tag: el.tag,
+        classList: el.classList,
+        gridTemplateColumns: el.gridTemplateColumns || 'none',
+        gridTemplateRows: el.gridTemplateRows || 'none',
+        gap: el.gap,
+        area: el.area,
+      });
+
+      // Count column patterns
+      const cols = el.gridTemplateColumns;
+      if (cols && cols !== 'none') {
+        const colCount = cols.split(/\s+/).filter(v => v && v !== 'none').length;
+        if (colCount > 0) columnCounts.set(colCount, (columnCounts.get(colCount) || 0) + 1);
+      }
+    }
+
+    if (isFlex) {
+      flexPatterns.push({
+        tag: el.tag,
+        classList: el.classList,
+        flexDirection: el.flexDirection || 'row',
+        flexWrap: el.flexWrap || 'nowrap',
+        justifyContent: el.justifyContent || 'normal',
+        alignItems: el.alignItems || 'normal',
+        gap: el.gap,
+        area: el.area,
+      });
+    }
+
+    // Detect containers (large centered elements)
+    if (el.area > 100000 && el.maxWidth && el.maxWidth !== 'none') {
+      containers.push({
+        tag: el.tag,
+        classList: el.classList,
+        maxWidth: el.maxWidth,
+        paddingLeft: el.paddingLeft,
+        paddingRight: el.paddingRight,
+      });
+    }
+  }
+
+  // Summarize flex direction usage
+  const flexDirections = {};
+  for (const f of flexPatterns) {
+    const key = `${f.flexDirection}/${f.flexWrap}`;
+    flexDirections[key] = (flexDirections[key] || 0) + 1;
+  }
+
+  // Summarize justify/align patterns
+  const justifyPatterns = {};
+  const alignPatterns = {};
+  for (const f of flexPatterns) {
+    justifyPatterns[f.justifyContent] = (justifyPatterns[f.justifyContent] || 0) + 1;
+    alignPatterns[f.alignItems] = (alignPatterns[f.alignItems] || 0) + 1;
+  }
+
+  // Grid column summary
+  const gridColumns = [...columnCounts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([cols, count]) => ({ columns: cols, count }));
+
+  // Container widths
+  const containerWidths = [];
+  const widthSet = new Set();
+  for (const c of containers) {
+    if (!widthSet.has(c.maxWidth)) {
+      widthSet.add(c.maxWidth);
+      containerWidths.push({ maxWidth: c.maxWidth, padding: c.paddingLeft });
+    }
+  }
+
+  // Gap values
+  const gaps = new Set();
+  for (const el of [...gridPatterns, ...flexPatterns]) {
+    if (el.gap && el.gap !== 'normal' && el.gap !== '0px') {
+      gaps.add(el.gap);
+    }
+  }
+
+  return {
+    gridCount: gridPatterns.length,
+    flexCount: flexPatterns.length,
+    gridColumns,
+    flexDirections,
+    justifyPatterns,
+    alignPatterns,
+    containerWidths,
+    gaps: [...gaps].sort(),
+    // Sample grid patterns (top 5 by area)
+    topGrids: gridPatterns
+      .sort((a, b) => b.area - a.area)
+      .slice(0, 5)
+      .map(g => ({ columns: g.gridTemplateColumns, rows: g.gridTemplateRows, gap: g.gap })),
+    // Sample flex patterns (top 5 by area)
+    topFlex: flexPatterns
+      .sort((a, b) => b.area - a.area)
+      .slice(0, 5)
+      .map(f => ({ direction: f.flexDirection, wrap: f.flexWrap, justify: f.justifyContent, align: f.alignItems, gap: f.gap })),
+  };
+}

package/src/extractors/responsive.js

@@ -0,0 +1,132 @@
+// Responsive multi-breakpoint capture — extract at multiple viewports and diff
+
+import { chromium } from 'playwright';
+
+const VIEWPORTS = [
+  { name: 'mobile', width: 375, height: 812 },
+  { name: 'tablet', width: 768, height: 1024 },
+  { name: 'desktop', width: 1280, height: 800 },
+  { name: 'wide', width: 1920, height: 1080 },
+];
+
+export async function captureResponsive(url, options = {}) {
+  const { wait = 0 } = options;
+  const browser = await chromium.launch({ headless: true });
+
+  const snapshots = [];
+
+  for (const vp of VIEWPORTS) {
+    const context = await browser.newContext({ viewport: { width: vp.width, height: vp.height } });
+    const page = await context.newPage();
+
+    try {
+      await page.goto(url, { waitUntil: 'networkidle', timeout: 20000 });
+      if (wait > 0) await page.waitForTimeout(wait);
+      await page.evaluate(() => document.fonts.ready);
+
+      const data = await page.evaluate(() => {
+        const body = document.body;
+        const cs = getComputedStyle(body);
+        const html = document.documentElement;
+        const htmlCs = getComputedStyle(html);
+
+        // Collect key metrics at this viewport
+        const headings = {};
+        for (let i = 1; i <= 3; i++) {
+          const h = document.querySelector(`h1, h2, h3`.split(',')[i - 1]);
+          if (h) {
+            const hcs = getComputedStyle(h);
+            headings[`h${i}`] = { fontSize: hcs.fontSize, lineHeight: hcs.lineHeight };
+          }
+        }
+
+        // Body font size
+        const bodyFontSize = cs.fontSize;
+
+        // Navigation visibility
+        const nav = document.querySelector('nav, [role="navigation"]');
+        const navVisible = nav ? getComputedStyle(nav).display !== 'none' : false;
+        const navHeight = nav ? nav.getBoundingClientRect().height : 0;
+
+        // Count visible grid/flex containers
+        let gridCount = 0, flexCount = 0;
+        const allEls = document.querySelectorAll('*');
+        const sample = Array.from(allEls).slice(0, 2000);
+        for (const el of sample) {
+          const d = getComputedStyle(el).display;
+          if (d === 'grid' || d === 'inline-grid') gridCount++;
+          if (d === 'flex' || d === 'inline-flex') flexCount++;
+        }
+
+        // Count columns in grids
+        const grids = document.querySelectorAll('*');
+        let maxColumns = 0;
+        for (const el of Array.from(grids).slice(0, 1000)) {
+          const gcs = getComputedStyle(el);
+          if (gcs.display === 'grid' && gcs.gridTemplateColumns && gcs.gridTemplateColumns !== 'none') {
+            const cols = gcs.gridTemplateColumns.split(/\s+/).length;
+            if (cols > maxColumns) maxColumns = cols;
+          }
+        }
+
+        // Check for hamburger menu
+        const hamburger = document.querySelector('[class*="hamburger"], [class*="menu-toggle"], [aria-label*="menu"], button[class*="mobile"]');
+        const hasHamburger = hamburger ? getComputedStyle(hamburger).display !== 'none' : false;
+
+        return {
+          bodyFontSize,
+          headings,
+          navVisible,
+          navHeight,
+          gridCount,
+          flexCount,
+          maxColumns,
+          hasHamburger,
+          scrollHeight: document.documentElement.scrollHeight,
+        };
+      });
+
+      snapshots.push({ ...vp, ...data });
+    } catch {
+      snapshots.push({ ...vp, error: true });
+    }
+
+    await context.close();
+  }
+
+  await browser.close();
+
+  // Build responsive map — what changes between breakpoints
+  const changes = [];
+  for (let i = 1; i < snapshots.length; i++) {
+    const prev = snapshots[i - 1];
+    const curr = snapshots[i];
+    if (prev.error || curr.error) continue;
+
+    const diffs = [];
+    if (prev.bodyFontSize !== curr.bodyFontSize) {
+      diffs.push({ property: 'Body font size', from: prev.bodyFontSize, to: curr.bodyFontSize });
+    }
+    if (prev.headings?.h1?.fontSize !== curr.headings?.h1?.fontSize) {
+      diffs.push({ property: 'H1 size', from: prev.headings?.h1?.fontSize || 'n/a', to: curr.headings?.h1?.fontSize || 'n/a' });
+    }
+    if (prev.navVisible !== curr.navVisible) {
+      diffs.push({ property: 'Nav visibility', from: prev.navVisible ? 'visible' : 'hidden', to: curr.navVisible ? 'visible' : 'hidden' });
+    }
+    if (prev.hasHamburger !== curr.hasHamburger) {
+      diffs.push({ property: 'Hamburger menu', from: prev.hasHamburger ? 'shown' : 'hidden', to: curr.hasHamburger ? 'shown' : 'hidden' });
+    }
+    if (prev.maxColumns !== curr.maxColumns) {
+      diffs.push({ property: 'Max grid columns', from: String(prev.maxColumns), to: String(curr.maxColumns) });
+    }
+    if (Math.abs(prev.scrollHeight - curr.scrollHeight) > 200) {
+      diffs.push({ property: 'Page height', from: `${prev.scrollHeight}px`, to: `${curr.scrollHeight}px` });
+    }
+
+    if (diffs.length > 0) {
+      changes.push({ from: prev.name, to: curr.name, breakpoint: `${prev.width}px → ${curr.width}px`, diffs });
+    }
+  }
+
+  return { viewports: snapshots.filter(s => !s.error), changes };
+}

package/src/formatters/markdown.js

@@ -259,6 +259,153 @@ export function formatMarkdown(design) {
     }
   }
 
+  // ── Layout ──
+  if (design.layout) {
+    const l = design.layout;
+    lines.push('## Layout System');
+    lines.push('');
+    lines.push(`**${l.gridCount} grid containers** and **${l.flexCount} flex containers** detected.`);
+    lines.push('');
+
+    if (l.containerWidths.length > 0) {
+      lines.push('### Container Widths');
+      lines.push('');
+      lines.push('| Max Width | Padding |');
+      lines.push('|-----------|---------|');
+      for (const c of l.containerWidths) {
+        lines.push(`| ${c.maxWidth} | ${c.padding} |`);
+      }
+      lines.push('');
+    }
+
+    if (l.gridColumns.length > 0) {
+      lines.push('### Grid Column Patterns');
+      lines.push('');
+      lines.push('| Columns | Usage Count |');
+      lines.push('|---------|-------------|');
+      for (const g of l.gridColumns) {
+        lines.push(`| ${g.columns}-column | ${g.count}x |`);
+      }
+      lines.push('');
+    }
+
+    if (l.topGrids.length > 0) {
+      lines.push('### Grid Templates');
+      lines.push('');
+      lines.push('```css');
+      for (const g of l.topGrids) {
+        lines.push(`grid-template-columns: ${g.columns};`);
+        if (g.gap !== 'normal' && g.gap !== '0px') lines.push(`gap: ${g.gap};`);
+      }
+      lines.push('```');
+      lines.push('');
+    }
+
+    if (Object.keys(l.flexDirections).length > 0) {
+      lines.push('### Flex Patterns');
+      lines.push('');
+      lines.push('| Direction/Wrap | Count |');
+      lines.push('|----------------|-------|');
+      for (const [pattern, count] of Object.entries(l.flexDirections)) {
+        lines.push(`| ${pattern} | ${count}x |`);
+      }
+      lines.push('');
+    }
+
+    if (l.gaps.length > 0) {
+      lines.push(`**Gap values:** ${l.gaps.map(g => `\`${g}\``).join(', ')}`);
+      lines.push('');
+    }
+  }
+
+  // ── Responsive ──
+  if (design.responsive) {
+    const r = design.responsive;
+    lines.push('## Responsive Design');
+    lines.push('');
+
+    if (r.viewports.length > 0) {
+      lines.push('### Viewport Snapshots');
+      lines.push('');
+      lines.push('| Viewport | Body Font | Nav Visible | Max Columns | Hamburger | Page Height |');
+      lines.push('|----------|-----------|-------------|-------------|-----------|-------------|');
+      for (const vp of r.viewports) {
+        lines.push(`| ${vp.name} (${vp.width}px) | ${vp.bodyFontSize} | ${vp.navVisible ? 'Yes' : 'No'} | ${vp.maxColumns} | ${vp.hasHamburger ? 'Yes' : 'No'} | ${vp.scrollHeight}px |`);
+      }
+      lines.push('');
+    }
+
+    if (r.changes.length > 0) {
+      lines.push('### Breakpoint Changes');
+      lines.push('');
+      for (const change of r.changes) {
+        lines.push(`**${change.breakpoint}** (${change.from} → ${change.to}):`);
+        for (const d of change.diffs) {
+          lines.push(`- ${d.property}: \`${d.from}\` → \`${d.to}\``);
+        }
+        lines.push('');
+      }
+    }
+  }
+
+  // ── Interaction States ──
+  if (design.interactions) {
+    const hasContent = design.interactions.buttons.length > 0 || design.interactions.links.length > 0 || design.interactions.inputs.length > 0;
+    if (hasContent) {
+      lines.push('## Interaction States');
+      lines.push('');
+
+      if (design.interactions.buttons.length > 0) {
+        lines.push('### Button States');
+        lines.push('');
+        for (const btn of design.interactions.buttons.slice(0, 3)) {
+          lines.push(`**"${btn.text}"**`);
+          if (Object.keys(btn.hover).length > 0) {
+            lines.push('```css');
+            lines.push('/* Hover */');
+            for (const [prop, val] of Object.entries(btn.hover)) {
+              lines.push(`${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${val.from} → ${val.to};`);
+            }
+            lines.push('```');
+          }
+          if (Object.keys(btn.focus).length > 0) {
+            lines.push('```css');
+            lines.push('/* Focus */');
+            for (const [prop, val] of Object.entries(btn.focus)) {
+              lines.push(`${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${val.from} → ${val.to};`);
+            }
+            lines.push('```');
+          }
+          lines.push('');
+        }
+      }
+
+      if (design.interactions.links.length > 0) {
+        lines.push('### Link Hover');
+        lines.push('');
+        const link = design.interactions.links[0];
+        lines.push('```css');
+        for (const [prop, val] of Object.entries(link.hover)) {
+          lines.push(`${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${val.from} → ${val.to};`);
+        }
+        lines.push('```');
+        lines.push('');
+      }
+
+      if (design.interactions.inputs.length > 0) {
+        lines.push('### Input Focus');
+        lines.push('');
+        const input = design.interactions.inputs[0];
+        lines.push('```css');
+        for (const [prop, val] of Object.entries(input.focus)) {
+          lines.push(`${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${val.from} → ${val.to};`);
+        }
+        lines.push('```');
+        lines.push('');
+      }
+    }
+  }
+
   // ── Accessibility ──
   if (design.accessibility) {
     const a = design.accessibility;

package/src/index.js

@@ -9,6 +9,7 @@ import { extractBreakpoints } from './extractors/breakpoints.js';
 import { extractAnimations } from './extractors/animations.js';
 import { extractComponents } from './extractors/components.js';
 import { extractAccessibility } from './extractors/accessibility.js';
+import { extractLayout } from './extractors/layout.js';
 
 export async function extractDesignLanguage(url, options = {}) {
   const rawData = await crawlPage(url, options);
@@ -32,6 +33,7 @@ export async function extractDesignLanguage(url, options = {}) {
     animations: extractAnimations(styles, rawData.light.keyframes),
     components: extractComponents(styles),
     accessibility: extractAccessibility(styles),
+    layout: extractLayout(styles),
     componentScreenshots: rawData.componentScreenshots || {},
   };
 
@@ -55,3 +57,7 @@ export { formatFigma } from './formatters/figma.js';
 export { formatReactTheme, formatShadcnTheme } from './formatters/theme.js';
 export { diffDesigns, formatDiffMarkdown, formatDiffHtml } from './diff.js';
 export { saveSnapshot, getHistory, formatHistoryMarkdown } from './history.js';
+export { captureResponsive } from './extractors/responsive.js';
+export { captureInteractions } from './extractors/interactions.js';
+export { syncDesign } from './sync.js';
+export { compareBrands, formatBrandMatrix, formatBrandMatrixHtml } from './multibrand.js';

package/src/multibrand.js

@@ -0,0 +1,151 @@
+// Multi-brand N-site comparison matrix
+
+import { extractDesignLanguage } from './index.js';
+
+export async function compareBrands(urls, options = {}) {
+  const brands = [];
+
+  for (const url of urls) {
+    const normalized = url.startsWith('http') ? url : `https://${url}`;
+    try {
+      const design = await extractDesignLanguage(normalized, options);
+      const hostname = new URL(normalized).hostname.replace(/^www\./, '');
+      brands.push({ url: normalized, hostname, design });
+    } catch (err) {
+      brands.push({ url: normalized, hostname: url, error: err.message });
+    }
+  }
+
+  return brands;
+}
+
+export function formatBrandMatrix(brands) {
+  const lines = [];
+  const valid = brands.filter(b => !b.error);
+
+  lines.push('# Multi-Brand Design Comparison');
+  lines.push('');
+  lines.push(`Comparing ${valid.length} brands.`);
+  lines.push('');
+
+  // Overview table
+  const headers = ['Property', ...valid.map(b => b.hostname)];
+  lines.push(`| ${headers.join(' | ')} |`);
+  lines.push(`| ${headers.map(() => '---').join(' | ')} |`);
+
+  // Primary color
+  lines.push(`| Primary Color | ${valid.map(b => `\`${b.design.colors.primary?.hex || 'none'}\``).join(' | ')} |`);
+  // Secondary color
+  lines.push(`| Secondary Color | ${valid.map(b => `\`${b.design.colors.secondary?.hex || 'none'}\``).join(' | ')} |`);
+  // Fonts
+  lines.push(`| Fonts | ${valid.map(b => b.design.typography.families.map(f => f.name).join(', ') || 'none').join(' | ')} |`);
+  // Color count
+  lines.push(`| Color Count | ${valid.map(b => b.design.colors.all.length).join(' | ')} |`);
+  // Spacing base
+  lines.push(`| Spacing Base | ${valid.map(b => b.design.spacing.base ? `${b.design.spacing.base}px` : 'none').join(' | ')} |`);
+  // A11y score
+  lines.push(`| A11y Score | ${valid.map(b => b.design.accessibility ? `${b.design.accessibility.score}%` : 'n/a').join(' | ')} |`);
+  // Shadows
+  lines.push(`| Shadows | ${valid.map(b => b.design.shadows.values.length).join(' | ')} |`);
+  // Radii
+  lines.push(`| Border Radii | ${valid.map(b => b.design.borders.radii.length).join(' | ')} |`);
+  // CSS vars
+  lines.push(`| CSS Variables | ${valid.map(b => Object.values(b.design.variables).reduce((s, v) => s + Object.keys(v).length, 0)).join(' | ')} |`);
+  // Components
+  lines.push(`| Components | ${valid.map(b => Object.keys(b.design.components).join(', ') || 'none').join(' | ')} |`);
+
+  lines.push('');
+
+  // Color overlap matrix
+  lines.push('## Color Overlap');
+  lines.push('');
+  if (valid.length >= 2) {
+    for (let i = 0; i < valid.length; i++) {
+      for (let j = i + 1; j < valid.length; j++) {
+        const colorsA = new Set(valid[i].design.colors.all.map(c => c.hex));
+        const colorsB = new Set(valid[j].design.colors.all.map(c => c.hex));
+        const shared = [...colorsA].filter(c => colorsB.has(c));
+        lines.push(`**${valid[i].hostname} vs ${valid[j].hostname}:** ${shared.length} shared colors${shared.length > 0 ? ` (${shared.slice(0, 5).map(c => `\`${c}\``).join(', ')})` : ''}`);
+      }
+    }
+    lines.push('');
+  }
+
+  // Font comparison
+  lines.push('## Typography Comparison');
+  lines.push('');
+  const allFonts = new Set();
+  for (const b of valid) {
+    for (const f of b.design.typography.families) allFonts.add(f.name);
+  }
+  lines.push(`| Font | ${valid.map(b => b.hostname).join(' | ')} |`);
+  lines.push(`| --- | ${valid.map(() => '---').join(' | ')} |`);
+  for (const font of allFonts) {
+    lines.push(`| ${font} | ${valid.map(b => b.design.typography.families.some(f => f.name === font) ? 'Yes' : '-').join(' | ')} |`);
+  }
+  lines.push('');
+
+  // Errors
+  const errored = brands.filter(b => b.error);
+  if (errored.length > 0) {
+    lines.push('## Errors');
+    lines.push('');
+    for (const b of errored) {
+      lines.push(`- **${b.url}**: ${b.error}`);
+    }
+    lines.push('');
+  }
+
+  return lines.join('\n');
+}
+
+export function formatBrandMatrixHtml(brands) {
+  const valid = brands.filter(b => !b.error);
+
+  const swatchCell = (hex) => hex
+    ? `<td><span style="display:inline-block;width:16px;height:16px;border-radius:4px;background:${hex};border:1px solid #333;vertical-align:middle;margin-right:6px"></span><code>${hex}</code></td>`
+    : `<td>-</td>`;
+
+  return `<!DOCTYPE html>
+<html><head><meta charset="UTF-8"><title>Multi-Brand Comparison</title>
+<style>
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { font-family:-apple-system,sans-serif; background:#0a0a0a; color:#e5e5e5; padding:40px; }
+  h1 { font-size:28px; color:#fff; margin-bottom:24px; }
+  h2 { font-size:18px; color:#fff; margin:32px 0 12px; }
+  table { width:100%; border-collapse:collapse; margin:12px 0; }
+  th { text-align:left; padding:10px 12px; background:#141414; color:#888; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid #222; }
+  td { padding:10px 12px; border-bottom:1px solid #1a1a1a; font-size:13px; }
+  tr:hover td { background:#111; }
+  code { background:#1e1e2e; padding:2px 6px; border-radius:4px; font-size:12px; color:#a78bfa; }
+  .score-good { color:#22c55e; } .score-warn { color:#eab308; } .score-bad { color:#ef4444; }
+</style></head><body>
+<h1>Multi-Brand Design Comparison</h1>
+<p style="color:#666;margin-bottom:24px">${valid.length} brands analyzed</p>
+
+<table>
+<tr><th>Property</th>${valid.map(b => `<th>${b.hostname}</th>`).join('')}</tr>
+<tr><td>Primary Color</td>${valid.map(b => swatchCell(b.design.colors.primary?.hex)).join('')}</tr>
+<tr><td>Secondary Color</td>${valid.map(b => swatchCell(b.design.colors.secondary?.hex)).join('')}</tr>
+<tr><td>Fonts</td>${valid.map(b => `<td>${b.design.typography.families.map(f => `<code>${f.name}</code>`).join(' ')}</td>`).join('')}</tr>
+<tr><td>Colors</td>${valid.map(b => `<td>${b.design.colors.all.length}</td>`).join('')}</tr>
+<tr><td>Spacing Base</td>${valid.map(b => `<td>${b.design.spacing.base ? b.design.spacing.base + 'px' : '-'}</td>`).join('')}</tr>
+<tr><td>A11y Score</td>${valid.map(b => {
+    const s = b.design.accessibility?.score;
+    const cls = s >= 80 ? 'score-good' : s >= 50 ? 'score-warn' : 'score-bad';
+    return `<td class="${cls}">${s ?? 'n/a'}%</td>`;
+  }).join('')}</tr>
+<tr><td>Shadows</td>${valid.map(b => `<td>${b.design.shadows.values.length}</td>`).join('')}</tr>
+<tr><td>Border Radii</td>${valid.map(b => `<td>${b.design.borders.radii.length}</td>`).join('')}</tr>
+<tr><td>CSS Variables</td>${valid.map(b => `<td>${Object.values(b.design.variables).reduce((s, v) => s + Object.keys(v).length, 0)}</td>`).join('')}</tr>
+</table>
+
+<h2>Full Color Palettes</h2>
+${valid.map(b => `
+<h3 style="color:#888;font-size:14px;margin:16px 0 8px">${b.hostname}</h3>
+<div style="display:flex;gap:4px;flex-wrap:wrap">
+${b.design.colors.all.slice(0, 15).map(c => `<div style="width:32px;height:32px;border-radius:6px;background:${c.hex};border:1px solid #333" title="${c.hex}"></div>`).join('')}
+</div>`).join('')}
+
+</body></html>`;
+}

package/src/sync.js

@@ -0,0 +1,69 @@
+// Sync command — watch a live site and auto-update local tokens when design changes
+
+import { extractDesignLanguage } from './index.js';
+import { formatTokens } from './formatters/tokens.js';
+import { formatTailwind } from './formatters/tailwind.js';
+import { formatCssVars } from './formatters/css-vars.js';
+import { saveSnapshot, getHistory } from './history.js';
+import { writeFileSync, readFileSync, existsSync } from 'fs';
+import { join } from 'path';
+
+export async function syncDesign(url, options = {}) {
+  const { out = '.', interval = 3600000 } = options; // default 1 hour
+
+  const current = await extractDesignLanguage(url, options);
+  const history = getHistory(url);
+  const previous = history.length > 1 ? history[history.length - 2] : null;
+
+  const changes = [];
+
+  if (previous) {
+    // Detect changes
+    if (previous.colors.primary !== current.colors.primary?.hex) {
+      changes.push({ type: 'color', property: 'primary', from: previous.colors.primary, to: current.colors.primary?.hex });
+    }
+    if (previous.colors.secondary !== current.colors.secondary?.hex) {
+      changes.push({ type: 'color', property: 'secondary', from: previous.colors.secondary, to: current.colors.secondary?.hex });
+    }
+    if (previous.typography.families.join(',') !== current.typography.families.map(f => f.name).join(',')) {
+      changes.push({ type: 'typography', property: 'fonts', from: previous.typography.families.join(', '), to: current.typography.families.map(f => f.name).join(', ') });
+    }
+    if (previous.colors.count !== current.colors.all.length) {
+      changes.push({ type: 'color', property: 'count', from: String(previous.colors.count), to: String(current.colors.all.length) });
+    }
+    if (previous.a11yScore !== current.accessibility?.score) {
+      changes.push({ type: 'accessibility', property: 'score', from: `${previous.a11yScore}%`, to: `${current.accessibility?.score}%` });
+    }
+  }
+
+  // Save snapshot
+  saveSnapshot(current);
+
+  // Update local files
+  const updates = [];
+
+  const tokensPath = join(out, 'design-tokens.json');
+  if (existsSync(tokensPath)) {
+    writeFileSync(tokensPath, formatTokens(current), 'utf-8');
+    updates.push('design-tokens.json');
+  }
+
+  const tailwindPath = join(out, 'tailwind.config.js');
+  if (existsSync(tailwindPath)) {
+    writeFileSync(tailwindPath, formatTailwind(current), 'utf-8');
+    updates.push('tailwind.config.js');
+  }
+
+  const cssPath = join(out, 'variables.css');
+  if (existsSync(cssPath)) {
+    writeFileSync(cssPath, formatCssVars(current), 'utf-8');
+    updates.push('variables.css');
+  }
+
+  return {
+    changes,
+    updatedFiles: updates,
+    isFirstRun: !previous,
+    design: current,
+  };
+}