designlang 2.0.0 → 4.0.0

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/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

@@ -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;
@@ -322,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

@@ -9,6 +9,8 @@ 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';
+import { scoreDesignSystem } from './extractors/scoring.js';
 
 export async function extractDesignLanguage(url, options = {}) {
   const rawData = await crawlPage(url, options);
@@ -32,7 +34,9 @@ export async function extractDesignLanguage(url, options = {}) {
     animations: extractAnimations(styles, rawData.light.keyframes),
     components: extractComponents(styles),
     accessibility: extractAccessibility(styles),
+    layout: extractLayout(styles),
     componentScreenshots: rawData.componentScreenshots || {},
+    score: null, // populated below
   };
 
   if (rawData.dark) {
@@ -42,6 +46,8 @@ export async function extractDesignLanguage(url, options = {}) {
     };
   }
 
+  design.score = scoreDesignSystem(design);
+
   return design;
 }
 
@@ -55,3 +61,10 @@ 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';
+export { generateClone } from './clone.js';
+export { scoreDesignSystem } from './extractors/scoring.js';
+export { watchSite } from './watch.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>`;
+}