prism-design 2.13.0

package/extractions/uniquekicks.be/tokens.json

@@ -0,0 +1,237 @@
+{
+  "meta": {
+    "source": "https://uniquekicks.be",
+    "domain": "uniquekicks.be",
+    "extractedAt": "2026-05-31T04:14:13.647Z",
+    "tokenizedAt": "2026-05-31T04:14:34.479Z"
+  },
+  "colors": {
+    "background": {
+      "primary": "rgb(240, 240, 240)",
+      "secondary": "rgb(255, 255, 255)",
+      "tertiary": "rgba(255, 255, 255, 0.12)"
+    },
+    "text": {
+      "primary": "rgb(26, 26, 26)",
+      "secondary": "rgba(26, 26, 26, 0.65)",
+      "muted": "rgb(26, 26, 26)"
+    },
+    "accent": {
+      "primary": "rgb(0, 111, 207)",
+      "secondary": "rgb(30, 55, 100)"
+    },
+    "border": "rgb(228, 222, 222)",
+    "shadow": "rgba(0,0,0,0.1)"
+  },
+  "typography": {
+    "fontFamily": {
+      "primary": "Barlow",
+      "secondary": "GTStandard-M",
+      "mono": "monospace"
+    },
+    "fontSize": {
+      "xs": "9px",
+      "sm": "14px",
+      "base": "16px",
+      "lg": "20px",
+      "xl": "24px",
+      "2xl": "30px",
+      "3xl": "36px",
+      "4xl": "48px"
+    },
+    "fontWeight": {
+      "normal": "400",
+      "medium": "500",
+      "semibold": "700",
+      "bold": "700"
+    },
+    "lineHeight": {
+      "tight": "1.6",
+      "normal": "1.6",
+      "relaxed": "1.6"
+    },
+    "letterSpacing": {
+      "tight": "-0.020em",
+      "normal": "0em",
+      "wide": "-0.060em"
+    }
+  },
+  "spacing": {
+    "xxs": "2px",
+    "xs": "4px",
+    "sm": "8px",
+    "md": "12px",
+    "base": "16px",
+    "lg": "24px",
+    "xl": "32px",
+    "2xl": "48px",
+    "3xl": "64px"
+  },
+  "borderRadius": {
+    "none": "0px",
+    "xs": "4px",
+    "sm": "8px",
+    "md": "12px",
+    "lg": "12px",
+    "xl": "12px",
+    "full": "9999px"
+  },
+  "shadows": {
+    "shadow-1": "rgba(63, 63, 68, 0.4) 0px 4px 10px 0px",
+    "shadow-2": "rgba(0, 0, 0, 0.4) 0px 9999px 0px 9999px",
+    "shadow-3": "rgba(26, 26, 26, 0.1) 0px 5px 15px 0px, rgba(26, 26, 26, 0.12) 0px 0px 0px 1px",
+    "shadow-4": "rgba(26, 26, 26, 0.12) 0px 0px 0px 1px",
+    "shadow-5": "rgba(0, 0, 0, 0.15) 0px 0px 30px 0px"
+  },
+  "transitions": {
+    "transition-1": "all",
+    "transition-2": "background 0.25s",
+    "transition-3": "opacity 0.2s ease-in-out",
+    "transition-4": "transform 0.2s ease-in-out",
+    "transition-5": "background-size 0.3s ease-in-out"
+  },
+  "layout": {
+    "maxWidth": "1600px",
+    "headerHeight": "94px",
+    "sidebarWidth": "1440px",
+    "gap": "normal",
+    "containerPadding": "0px"
+  },
+  "cssCustomProperties": {
+    "--on-sale-text": "248 58 58",
+    "--sticky-header-enabled": "1",
+    "--heading-font-weight": "700",
+    "--header-height": "94px",
+    "--spacing-4": "1rem",
+    "--text-font-family": "Barlow, sans-serif",
+    "--spacing-1": "0.25rem",
+    "--spacing-9": "2.25rem",
+    "--sold-out-badge-background": "0 0 0",
+    "--spacing-36": "9rem",
+    "--shadow-block": "0px 18px 50px rgb(26 26 26 / 0.1)",
+    "--product-card-background": "255 255 255",
+    "--spacing-64": "16rem",
+    "--accent": "26 26 26",
+    "--cursor-close-svg-url": "url(//www.uniquekicks.be/cdn/shop/t/19/assets/cursor-close.svg?v=147174565022153725511740963773)",
+    "--shadow-md": "0 5px 30px rgb(26 26 26 / 0.1)",
+    "--text-h2": "3rem",
+    "--spacing-48": "12rem",
+    "--text-lg": "1.25rem",
+    "--background-primary": "240 240 240",
+    "--product-list-row-gap": "3rem",
+    "--spacing-52": "13rem",
+    "--rounded-sm": "0.375rem",
+    "--footer-text": "26 26 26",
+    "--spacing-4-5": "1.125rem",
+    "--text-h6": "1.25rem",
+    "--spacing-56": "14rem",
+    "--dialog-background": "255 255 255",
+    "--spacing-6": "1.5rem",
+    "--heading-font-family": "Barlow, sans-serif",
+    "--section-inner-max-spacing-block": "4.5rem",
+    "--button-text-secondary": "26 26 26",
+    "--success-text": "0 163 65",
+    "--cursor-zoom-out-svg-url": "url(//www.uniquekicks.be/cdn/shop/t/19/assets/cursor-zoom-out.svg?v=16155520337305705181740963761)",
+    "--spacing-1-5": "0.375rem",
+    "--spacing-14": "3.5rem",
+    "--rounded-xs": "0.25rem",
+    "--sticky-announcement-bar-enabled": "0",
+    "--spacing-12": "3rem",
+    "--product-list-column-gap": "1.5rem",
+    "--star-color": "255 183 74",
+    "--warning-text": "255 183 74",
+    "--text-font-weight": "500",
+    "--on-sale-badge-background": "248 58 58",
+    "--success-background": "224 244 232",
+    "--transform-logical-flip": "1",
+    "--input-height": "3.125rem",
+    "--spacing-80": "20rem",
+    "--spacing-72": "18rem",
+    "--text-h4": "2rem",
+    "--sold-out-badge-text": "255 255 255",
+    "--transform-origin-end": "right",
+    "--spacing-32": "8rem",
+    "--checkmark-svg-url": "url(//www.uniquekicks.be/cdn/shop/t/19/assets/checkmark.svg?v=77552481021870063511740963761)",
+    "--button-background-primary": "26 26 26",
+    "--text-letter-spacing": "0.0em",
+    "--border-color": "26 26 26 / 0.12",
+    "--shadow": "0 5px 15px rgb(26 26 26 / 0.1)",
+    "--kl-reviews-color-light-gray": "#e9e9eb",
+    "--transform-origin-start": "left",
+    "--button-background-secondary": "240 196 23",
+    "--error-text": "248 58 58",
+    "--spacing-8": "2rem",
+    "--heading-letter-spacing": "-0.02em",
+    "--text-sm": "0.875rem",
+    "--announcement-bar-height": "48px",
+    "--section-inner-spacing-inline": "4.5rem",
+    "--spacing-20": "5rem",
+    "--rounded": "0.75rem",
+    "--spacing-2": "0.5rem",
+    "--rounded-input": "0.5rem",
+    "--section-outer-spacing-block": "6rem",
+    "--primary-badge-text": "255 255 255",
+    "--spacing-7-5": "1.875rem",
+    "--spacing-44": "11rem",
+    "--rounded-lg": "1.5rem",
+    "--text-h5": "1.5rem",
+    "--input-gap": "1rem",
+    "--primary-badge-background": "128 60 238",
+    "--heading-text-transform": "normal",
+    "--container-narrow-max-width": "1350px",
+    "--section-stack-spacing-block": "3rem",
+    "--error-background": "254 231 231",
+    "--shadow-sm": "0 2px 8px rgb(26 26 26 / 0.1)",
+    "--spacing-3": "0.75rem",
+    "--spacing-96": "24rem",
+    "--warning-background": "255 246 233",
+    "--text-primary": "26 26 26",
+    "--rounded-button": "0.25rem",
+    "--spacing-11": "2.75rem",
+    "--spacing-6-5": "1.625rem",
+    "--spacing-28": "7rem",
+    "--cursor-zoom-in-svg-url": "url(//www.uniquekicks.be/cdn/shop/t/19/assets/cursor-zoom-in.svg?v=154953035094101115921740963763)",
+    "--text-font-style": "normal",
+    "--rounded-full": "9999px",
+    "--container-max-width": "1600px",
+    "--text-xs": "0.75rem",
+    "--on-sale-badge-text": "255 255 255",
+    "--spacing-5": "1.25rem",
+    "--spacing-8-5": "2.125rem",
+    "--spacing-5-5": "1.375rem",
+    "--spacing-24": "6rem",
+    "--spacing-3-5": "0.875rem",
+    "--text-h1": "3.75rem",
+    "--spacing-7": "1.75rem",
+    "--header-text": "26 26 26",
+    "--spacing-40": "10rem",
+    "--spacing-10": "2.5rem",
+    "--button-text-primary": "255 255 255",
+    "--sticky-area-height": "calc(0 * 48px + 1 * 94px)",
+    "--spacing-16": "4rem",
+    "--spacing-0-5": "0.125rem",
+    "--heading-font-style": "normal",
+    "--header-background": "240 240 240",
+    "--container-gutter": "3rem",
+    "--spacing-18": "4.5rem",
+    "--text-h0": "5rem",
+    "--text-h3": "2.25rem",
+    "--input-padding-inline": "1.25rem",
+    "--footer-background": "255 255 255",
+    "--product-card-text": "26 26 26",
+    "--spacing-2-5": "0.625rem",
+    "--text-base": "1.0rem",
+    "--spacing-60": "15rem",
+    "--grid-gutter": "1.5rem",
+    "--spacing-9-5": "2.375rem",
+    "--background": "240 240 240",
+    "--text-color": "26 26 26",
+    "--header-logo-width": "125px",
+    "--header-padding-block": "2.125rem",
+    "--header-transparent-text-color": "255 255 255",
+    "--header-background-blur-radius": "0px",
+    "--header-grid-template": "\"logo main-nav secondary-nav\" / minmax(0, 1fr) fit-content(55%) minmax(0, 1fr)",
+    "--header-background-opacity": "1.0",
+    "--header-logo-height": "21px"
+  }
+}

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "prism-design",
+  "version": "2.13.0",
+  "description": "Refract any website into its real design system — computed CSS, screenshots, narrative DESIGN.md — in 90 seconds. The verifiable alternative to manually-written design docs.",
+  "type": "module",
+  "bin": {
+    "prism": "bin/prism.mjs",
+    "clone-architect": "bin/prism.mjs"
+  },
+  "main": "./bin/clone-architect.mjs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/paulsainton/prism.git"
+  },
+  "bugs": {
+    "url": "https://github.com/paulsainton/prism/issues"
+  },
+  "author": "Paul Sainton",
+  "files": [
+    "bin/",
+    "catalog/",
+    "extractions/*/DESIGN.md",
+    "extractions/*/tokens.json",
+    "scripts/clone.ts",
+    "scripts/extract.ts",
+    "scripts/analyze.ts",
+    "scripts/tokenize.ts",
+    "scripts/generate-design-md.ts",
+    "scripts/generate-showcase.ts",
+    "scripts/compare.ts",
+    "scripts/bank.ts",
+    "scripts/bank-register.ts",
+    "scripts/enrich-catalog.ts",
+    "scripts/regen-catalog.ts",
+    "scripts/generate-site.ts",
+    "scripts/deploy-site.ts",
+    "scripts/generate-og-image.ts",
+    "scripts/diff-snapshots.ts",
+    "scripts/compare-vs-gd.ts",
+    "scripts/compare-vs-gd-final.ts",
+    "scripts/generate-final-pdf.ts",
+    "scripts/sync-catalog.ts",
+    "scripts/mass-extract.sh",
+    "scripts/post-process-all.sh",
+    "scripts/verify-checklist.ts",
+    "scripts/browser-stealth.ts",
+    "scripts/extractors/",
+    "scripts/shared/",
+    "templates/",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "design-md",
+    "css-extraction",
+    "computed-styles",
+    "playwright",
+    "design-extraction",
+    "clone-website",
+    "ai-coding",
+    "claude-code",
+    "cursor",
+    "design-dna",
+    "visual-design",
+    "frontend-tools",
+    "design-audit"
+  ],
+  "homepage": "https://prism.ps-tools.dev",  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "extract": "tsx scripts/extract.ts",
+    "analyze": "tsx scripts/analyze.ts",
+    "tokenize": "tsx scripts/tokenize.ts",
+    "compare": "tsx scripts/compare.ts",
+    "generate-design": "tsx scripts/generate-design-md.ts",
+    "showcase": "tsx scripts/generate-showcase.ts",
+    "clone": "tsx scripts/clone.ts",
+    "worktree-build": "tsx scripts/worktree-build.ts",
+    "section-build": "tsx scripts/section-builder.ts",
+    "extract-block": "tsx scripts/extract-block.ts",
+    "bank:inject": "tsx scripts/bank-inject.ts",
+    "test": "tsx tests/run-all.ts",
+    "bank": "tsx scripts/bank.ts",
+    "bank:register": "tsx scripts/bank.ts register --all",
+    "bank:stats": "tsx scripts/bank.ts stats",
+    "bank:query": "tsx scripts/bank.ts query",
+    "enrich-catalog": "tsx scripts/enrich-catalog.ts",
+    "regen-catalog": "tsx scripts/regen-catalog.ts",
+    "generate-site": "tsx scripts/generate-site.ts",
+    "deploy": "tsx scripts/deploy-site.ts",
+    "compare-vs-gd": "tsx scripts/compare-vs-gd.ts",
+    "compare-vs-gd-final": "tsx scripts/compare-vs-gd-final.ts",
+    "final-pdf": "tsx scripts/generate-final-pdf.ts",
+    "sync-catalog": "tsx scripts/sync-catalog.ts",
+    "mass-extract": "bash scripts/mass-extract.sh",
+    "post-process": "bash scripts/post-process-all.sh",
+    "verify-checklist": "tsx scripts/verify-checklist.ts",
+    "diff": "tsx scripts/diff-snapshots.ts",
+    "snapshot": "tsx scripts/diff-snapshots.ts --create",
+    "prepublishOnly": "tsc --noEmit && CI=true tsx tests/run-all.ts"
+  },
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.100.1",
+    "pixelmatch": "^6.0.0",
+    "playwright": "^1.52.0",
+    "playwright-extra": "^4.3.6",
+    "pngjs": "^7.0.0",
+    "puppeteer-extra-plugin-stealth": "^2.11.2",
+    "tsx": "^4.19.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/pngjs": "^6.0.5",
+    "typescript": "^5.7.0"
+  },
+  "postinstall": "echo '\\n🧬 Prism installed.\\n\\n   Path A — Browse catalog (no setup required):\\n   prism list\\n   prism add linear.app\\n\\n   Path B — Extract any URL (requires Playwright):\\n   npx playwright install chromium\\n   prism extract https://yoursite.com\\n'"
+}

package/scripts/analyze.ts

@@ -0,0 +1,281 @@
+/**
+ * Prism — Layout Analyzer
+ *
+ * Prend le raw-css.json d'une extraction et produit layout-analysis.md :
+ * - Type de layout (sidebar+main, top-nav, full-width, split)
+ * - Dimensions clés (sidebar width, header height, card sizes, gaps)
+ * - Navigation (type, items, active state)
+ * - Grille (columns, pattern, aspect-ratio)
+ * - Composants identifiés
+ * - Animations/transitions
+ */
+
+import { readFile, writeFile } from 'fs/promises';
+import { join } from 'path';
+import { parseRgb, luminanceSimple } from './shared/css-helpers.js';
+
+interface ExtractionResult {
+  url: string;
+  domain: string;
+  viewport: { width: number; height: number };
+  pageTitle: string;
+  cssCustomProperties: Record<string, string>;
+  elements: Record<string, { tag: string; classes: string[]; text: string; styles: Record<string, string>; children: number; rect: { x: number; y: number; width: number; height: number } } | null>;
+  sections: Array<{ index: number; tag: string; classes: string[]; role: string; estimatedPurpose: string; rect: { x: number; y: number; width: number; height: number }; styles: Record<string, string>; childCount: number }>;
+  allColors: string[];
+  allFontFamilies: string[];
+  allFontSizes: string[];
+  allBorderRadii: string[];
+  allShadows: string[];
+  allTransitions: string[];
+  images: { src: string; alt: string; width: number; height: number }[];
+  links: { href: string; text: string; isNav: boolean }[];
+}
+
+function detectLayoutType(data: ExtractionResult): string {
+  const sidebar = data.elements.sidebar;
+  const header = data.elements.header;
+  const nav = data.elements.nav;
+  const main = data.elements.main;
+
+  if (sidebar && sidebar.rect.height > 200) {
+    return 'sidebar + main content';
+  }
+  if (header && nav) {
+    if (main) return 'top-nav + main content';
+    return 'top-nav + full-width sections';
+  }
+  if (!header && !nav && !sidebar) {
+    return 'full-width (single column)';
+  }
+  return 'top-nav + content';
+}
+
+function parsePixels(val: string): number {
+  const match = val?.match(/^([\d.]+)px$/);
+  return match ? parseFloat(match[1]) : 0;
+}
+
+function formatColor(color: string): string {
+  return color.replace(/\s+/g, '');
+}
+
+function groupColors(colors: string[]): { backgrounds: string[]; text: string[]; accents: string[] } {
+  const backgrounds: string[] = [];
+  const text: string[] = [];
+  const accents: string[] = [];
+
+  for (const c of colors) {
+    const rgb = parseRgb(c);
+    if (!rgb) continue;
+    const lum = luminanceSimple(rgb);
+
+    if (lum > 0.85) backgrounds.push(c);
+    else if (lum < 0.2) text.push(c);
+    else accents.push(c);
+  }
+
+  return { backgrounds, text, accents };
+}
+
+function generateAnalysis(data: ExtractionResult): string {
+  const layoutType = detectLayoutType(data);
+  const colorGroups = groupColors(data.allColors);
+  const navLinks = data.links.filter(l => l.isNav);
+
+  const lines: string[] = [];
+
+  lines.push(`# Layout Analysis — ${data.domain}`);
+  lines.push(`> Extracted from ${data.url} on ${new Date().toISOString().split('T')[0]}`);
+  lines.push(`> Viewport: ${data.viewport.width}x${data.viewport.height}`);
+  lines.push('');
+
+  // ── Layout Type ──
+  lines.push('## Layout Type');
+  lines.push(`**${layoutType}**`);
+  lines.push('');
+
+  // ── Dimensions ──
+  lines.push('## Key Dimensions');
+
+  const dims: string[] = [];
+  const { sidebar, header, main, hero } = data.elements;
+  if (header) dims.push(`- Header height: ${header.rect.height}px`);
+  if (sidebar) dims.push(`- Sidebar width: ${sidebar.rect.width}px`);
+  if (main) dims.push(`- Main content width: ${main.rect.width}px (max-width: ${main.styles.maxWidth})`);
+  if (hero) dims.push(`- Hero height: ${hero.rect.height}px`);
+
+  const body = data.elements.body;
+  if (body) {
+    dims.push(`- Page background: ${formatColor(body.styles.backgroundColor)}`);
+    dims.push(`- Base font: ${body.styles.fontFamily.split(',')[0].trim()}`);
+    dims.push(`- Base font size: ${body.styles.fontSize}`);
+    dims.push(`- Base text color: ${formatColor(body.styles.color)}`);
+  }
+
+  lines.push(dims.length ? dims.join('\n') : '- No key dimensions detected');
+  lines.push('');
+
+  // ── Navigation ──
+  lines.push('## Navigation');
+  const navEl = data.elements.nav || data.elements.header;
+  if (navEl) {
+    lines.push(`- Type: ${navEl.tag} (${navEl.styles.display})`);
+    lines.push(`- Position: ${navEl.styles.position}`);
+    lines.push(`- Background: ${formatColor(navEl.styles.backgroundColor)}`);
+    lines.push(`- Height: ${navEl.rect.height}px`);
+    if (navLinks.length > 0) {
+      lines.push(`- Items (${navLinks.length}):`);
+      for (const link of navLinks.slice(0, 15)) {
+        lines.push(`  - "${link.text}" → ${link.href}`);
+      }
+    }
+  } else {
+    lines.push('- No navigation element detected');
+  }
+  lines.push('');
+
+  // ── Sections ──
+  lines.push('## Page Sections');
+  for (const section of data.sections.slice(0, 20)) {
+    lines.push(`### ${section.estimatedPurpose} (${section.tag}.${section.classes.slice(0, 2).join('.')})`);
+    lines.push(`- Position: y=${section.rect.y}px, height=${section.rect.height}px`);
+    lines.push(`- Layout: ${section.styles.display} ${section.styles.flexDirection || section.styles.gridTemplateColumns || ''}`);
+    lines.push(`- Background: ${formatColor(section.styles.backgroundColor)}`);
+    lines.push(`- Padding: ${section.styles.padding}`);
+    lines.push(`- Children: ${section.childCount}`);
+    lines.push('');
+  }
+
+  // ── Components ──
+  lines.push('## Components Detected');
+  const componentKeys = ['card', 'button', 'input', 'badge', 'avatar', 'logo', 'dropdown', 'modal'];
+  for (const key of componentKeys) {
+    const el = data.elements[key];
+    if (!el) continue;
+    lines.push(`### ${key}`);
+    lines.push(`- Tag: ${el.tag}`);
+    lines.push(`- Classes: ${el.classes.join(', ') || 'none'}`);
+    lines.push(`- Size: ${el.rect.width}x${el.rect.height}px`);
+    lines.push(`- Background: ${formatColor(el.styles.backgroundColor)}`);
+    lines.push(`- Border: ${el.styles.border}`);
+    lines.push(`- Border radius: ${el.styles.borderRadius}`);
+    lines.push(`- Shadow: ${el.styles.boxShadow}`);
+    lines.push(`- Font: ${el.styles.fontSize} ${el.styles.fontWeight}`);
+    lines.push(`- Text: "${el.text.slice(0, 80)}"`);
+    lines.push('');
+  }
+
+  // ── Colors ──
+  lines.push('## Color Palette');
+  lines.push(`Total unique colors: ${data.allColors.length}`);
+  lines.push('');
+  if (colorGroups.backgrounds.length) {
+    lines.push(`### Backgrounds (${colorGroups.backgrounds.length})`);
+    for (const c of colorGroups.backgrounds.slice(0, 10)) lines.push(`- ${formatColor(c)}`);
+    lines.push('');
+  }
+  if (colorGroups.text.length) {
+    lines.push(`### Text (${colorGroups.text.length})`);
+    for (const c of colorGroups.text.slice(0, 10)) lines.push(`- ${formatColor(c)}`);
+    lines.push('');
+  }
+  if (colorGroups.accents.length) {
+    lines.push(`### Accents (${colorGroups.accents.length})`);
+    for (const c of colorGroups.accents.slice(0, 10)) lines.push(`- ${formatColor(c)}`);
+    lines.push('');
+  }
+
+  // ── Typography ──
+  lines.push('## Typography');
+  lines.push(`### Font Families (${data.allFontFamilies.length})`);
+  for (const f of data.allFontFamilies.slice(0, 10)) {
+    lines.push(`- ${f.split(',')[0].trim()}`);
+  }
+  lines.push('');
+  lines.push(`### Font Sizes (${data.allFontSizes.length})`);
+  const sortedSizes = [...data.allFontSizes].sort((a, b) => parsePixels(a) - parsePixels(b));
+  for (const s of sortedSizes) lines.push(`- ${s}`);
+  lines.push('');
+
+  // ── Border Radii ──
+  lines.push('## Border Radii');
+  for (const r of data.allBorderRadii.slice(0, 10)) lines.push(`- ${r}`);
+  lines.push('');
+
+  // ── Shadows ──
+  lines.push('## Shadows');
+  for (const s of data.allShadows.slice(0, 10)) lines.push(`- ${s}`);
+  lines.push('');
+
+  // ── Transitions ──
+  lines.push('## Transitions & Animations');
+  for (const t of data.allTransitions.slice(0, 10)) lines.push(`- ${t}`);
+  lines.push('');
+
+  // ── CSS Custom Properties ──
+  const varsCount = Object.keys(data.cssCustomProperties).length;
+  if (varsCount > 0) {
+    lines.push(`## CSS Custom Properties (${varsCount})`);
+    const entries = Object.entries(data.cssCustomProperties).slice(0, 50);
+    for (const [prop, val] of entries) {
+      lines.push(`- \`${prop}\`: ${val}`);
+    }
+    lines.push('');
+  }
+
+  // ── Images ──
+  if (data.images.length > 0) {
+    lines.push(`## Images (${data.images.length})`);
+    for (const img of data.images.slice(0, 15)) {
+      lines.push(`- ${img.width}x${img.height} — ${img.alt || 'no alt'} — ${img.src.slice(0, 80)}`);
+    }
+    lines.push('');
+  }
+
+  return lines.join('\n');
+}
+
+// ── CLI ──────────────────────────────────────────────────────────────
+
+const domain = process.argv[2];
+
+if (!domain) {
+  console.error('Usage: npm run analyze -- <domain>');
+  console.error('Example: npm run analyze -- linear.app');
+  process.exit(1);
+}
+
+const baseDir = join(process.cwd(), 'extractions', domain);
+
+async function main() {
+  console.log(`\n📊 Analyzing layout for ${domain}...`);
+
+  const rawPath = join(baseDir, 'raw-css.json');
+  const raw = JSON.parse(await readFile(rawPath, 'utf-8'));
+
+  // Analyze desktop viewport
+  const desktopData = raw.desktop as ExtractionResult;
+  if (!desktopData) {
+    console.error('No desktop data found in raw-css.json');
+    process.exit(1);
+  }
+
+  const analysis = generateAnalysis(desktopData);
+
+  // Also generate mobile analysis if present
+  let mobileAnalysis = '';
+  if (raw.mobile) {
+    mobileAnalysis = '\n\n---\n\n' + generateAnalysis(raw.mobile as ExtractionResult);
+  }
+
+  const outputPath = join(baseDir, 'layout-analysis.md');
+  await writeFile(outputPath, analysis + mobileAnalysis);
+
+  console.log(`✅ Layout analysis saved to ${outputPath}`);
+}
+
+main().catch(err => {
+  console.error('Error:', err);
+  process.exit(1);
+});