npm - prism-design - Versions diffs - 2.13.0 - Mend

prism-design 2.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/CHANGELOG.md +292 -0
package/LICENSE +21 -0
package/README.md +203 -0
package/bin/clone-architect.mjs +476 -0
package/bin/prism.mjs +467 -0
package/catalog/index.json +1155 -0
package/extractions/airbnb.com/DESIGN.md +1068 -0
package/extractions/airbnb.com/tokens.json +507 -0
package/extractions/attio.com/DESIGN.md +1295 -0
package/extractions/attio.com/tokens.json +438 -0
package/extractions/auroxdashboard.com/DESIGN.md +724 -0
package/extractions/auroxdashboard.com/tokens.json +195 -0
package/extractions/careerexplorer.com/DESIGN.md +1178 -0
package/extractions/careerexplorer.com/tokens.json +141 -0
package/extractions/chance.co/DESIGN.md +1209 -0
package/extractions/chance.co/tokens.json +160 -0
package/extractions/choisis-ton-avenir.com/DESIGN.md +1265 -0
package/extractions/choisis-ton-avenir.com/tokens.json +227 -0
package/extractions/example.com/DESIGN.md +436 -0
package/extractions/example.com/tokens.json +91 -0
package/extractions/getdesign.md/DESIGN.md +1009 -0
package/extractions/getdesign.md/tokens.json +219 -0
package/extractions/github.com/DESIGN.md +1130 -0
package/extractions/github.com/tokens.json +2092 -0
package/extractions/hello-charly.com/DESIGN.md +1146 -0
package/extractions/hello-charly.com/tokens.json +322 -0
package/extractions/hyperliquid.xyz/DESIGN.md +779 -0
package/extractions/hyperliquid.xyz/tokens.json +598 -0
package/extractions/instagram.com/DESIGN.md +996 -0
package/extractions/instagram.com/tokens.json +1240 -0
package/extractions/jobirl.com/DESIGN.md +1160 -0
package/extractions/jobirl.com/tokens.json +139 -0
package/extractions/life360.com/DESIGN.md +1133 -0
package/extractions/life360.com/tokens.json +491 -0
package/extractions/lifesum.com/DESIGN.md +965 -0
package/extractions/lifesum.com/tokens.json +170 -0
package/extractions/linear.app/DESIGN.md +1301 -0
package/extractions/linear.app/tokens.json +732 -0
package/extractions/mavoie.org/DESIGN.md +1148 -0
package/extractions/mavoie.org/tokens.json +128 -0
package/extractions/miro.com/DESIGN.md +1237 -0
package/extractions/miro.com/tokens.json +401 -0
package/extractions/notion.so/DESIGN.md +1319 -0
package/extractions/notion.so/tokens.json +906 -0
package/extractions/onetonline.org/DESIGN.md +909 -0
package/extractions/onetonline.org/tokens.json +280 -0
package/extractions/posthog.com/DESIGN.md +1024 -0
package/extractions/posthog.com/tokens.json +197 -0
package/extractions/revolut.com/DESIGN.md +1080 -0
package/extractions/revolut.com/tokens.json +401 -0
package/extractions/stripe.com/DESIGN.md +1272 -0
package/extractions/stripe.com/tokens.json +794 -0
package/extractions/switchcollective.com/DESIGN.md +1040 -0
package/extractions/switchcollective.com/tokens.json +98 -0
package/extractions/truity.com/DESIGN.md +970 -0
package/extractions/truity.com/tokens.json +166 -0
package/extractions/uniquekicks.be/DESIGN.md +1171 -0
package/extractions/uniquekicks.be/tokens.json +237 -0
package/package.json +122 -0
package/scripts/analyze.ts +281 -0
package/scripts/bank-register.ts +379 -0
package/scripts/bank.ts +374 -0
package/scripts/browser-stealth.ts +189 -0
package/scripts/clone.ts +198 -0
package/scripts/compare-vs-gd-final.ts +273 -0
package/scripts/compare-vs-gd.ts +269 -0
package/scripts/compare.ts +405 -0
package/scripts/deploy-site.ts +181 -0
package/scripts/diff-snapshots.ts +340 -0
package/scripts/enrich-catalog.ts +212 -0
package/scripts/extract.ts +2038 -0
package/scripts/extractors/advanced.ts +524 -0
package/scripts/extractors/widgets.ts +711 -0
package/scripts/generate-design-md.ts +5775 -0
package/scripts/generate-final-pdf.ts +274 -0
package/scripts/generate-og-image.ts +87 -0
package/scripts/generate-showcase.ts +1588 -0
package/scripts/generate-site.ts +847 -0
package/scripts/mass-extract.sh +91 -0
package/scripts/post-process-all.sh +55 -0
package/scripts/regen-catalog.ts +203 -0
package/scripts/shared/cache.ts +149 -0
package/scripts/shared/css-helpers.ts +263 -0
package/scripts/shared/logger.ts +57 -0
package/scripts/shared/named-colors.ts +355 -0
package/scripts/shared/types.ts +220 -0
package/scripts/sync-catalog.ts +105 -0
package/scripts/tokenize.ts +988 -0
package/templates/layout-template.md +52 -0
package/templates/tokens-template.json +34 -0

package/scripts/generate-site.ts ADDED Viewed

@@ -0,0 +1,847 @@
+/**
+ * Prism — Static Site Generator
+ *
+ * Reads catalog/index.json → generates public/index.html
+ * Full site: hero + stats + brands directory with search/filter + compare + how it works
+ *
+ * Usage: npx tsx scripts/generate-site.ts
+ */
+import { readFile, writeFile, mkdir } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join } from 'path';
+const ROOT = process.cwd();
+const CATALOG_PATH = join(ROOT, 'catalog', 'index.json');
+const PUBLIC_DIR = join(ROOT, 'public');
+const OUT_PATH = join(PUBLIC_DIR, 'index.html');
+interface CatalogBrand {
+  domain: string;
+  hasDesignMd: boolean;
+  hasTokens: boolean;
+  hasScreenshots: boolean;
+  hasFrontmatter: boolean;
+  accent: string;
+  description: string;
+  sizeKb: number;
+  category: string;
+  dark: boolean;
+  font: string;
+  completeness: number;
+  extractedAt: string;
+}
+interface Catalog {
+  version: string;
+  count: number;
+  brands: CatalogBrand[];
+}
+function gradeColor(score: number): string {
+  if (score >= 90) return '#4ade80'; // green
+  if (score >= 75) return '#a3e635'; // lime
+  if (score >= 60) return '#facc15'; // yellow
+  return '#f87171';                   // red
+}
+function gradeLabel(score: number): string {
+  if (score >= 90) return 'A';
+  if (score >= 75) return 'B';
+  if (score >= 60) return 'C';
+  return 'D';
+}
+function domainName(domain: string): string {
+  return domain
+    .replace(/^www\./, '')
+    .replace(/\.(com|app|io|dev|net|org|ai|co|xyz|so|design|new)$/, '')
+    .replace(/^(.)/, c => c.toUpperCase());
+}
+function accentHex(accent: string): string {
+  if (!accent) return '#5e6ad2';
+  if (accent.startsWith('#')) return accent;
+  // parse rgb()
+  const m = accent.match(/\d+/g);
+  if (m && m.length >= 3) {
+    return '#' + m.slice(0, 3).map(v => parseInt(v).toString(16).padStart(2, '0')).join('');
+  }
+  return '#5e6ad2';
+}
+function showcaseUrl(domain: string): string {
+  // On the public site, showcases are served from /brands/{domain}/
+  return `brands/${domain}/`;
+}
+async function main() {
+  if (!existsSync(CATALOG_PATH)) {
+    console.error('catalog/index.json not found — run: npx tsx scripts/enrich-catalog.ts');
+    process.exit(1);
+  }
+  const catalogRaw = await readFile(CATALOG_PATH, 'utf-8');
+  const catalog: Catalog = JSON.parse(catalogRaw);
+  // Read npm package version (not catalog version) for eyebrow
+  const pkgRaw = await readFile(join(ROOT, 'package.json'), 'utf-8');
+  const pkgVersion: string = JSON.parse(pkgRaw).version;
+  // Sort by completeness desc
+  const brands = [...catalog.brands].sort((a, b) => (b.completeness || 0) - (a.completeness || 0));
+  const avgScore = Math.round(brands.reduce((s, b) => s + (b.completeness || 0), 0) / brands.length);
+  const darkCount = brands.filter(b => b.dark).length;
+  const categories = [...new Set(brands.map(b => b.category).filter(Boolean))].sort();
+  // Inline catalog as JSON for client-side filtering
+  const catalogJson = JSON.stringify(brands);
+  await mkdir(PUBLIC_DIR, { recursive: true });
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Prism — Extract real design from any URL</title>
+<meta name="description" content="Playwright + getComputedStyle() → DESIGN.md. ${brands.length} brands extracted. Verifiable, dated, diffable. MIT local-first.">
+<link rel="canonical" href="https://prism.ps-tools.dev/">
+<meta name="theme-color" content="#5e6ad2">
+<!-- Open Graph -->
+<meta property="og:title" content="Prism — Extract real design from any URL">
+<meta property="og:description" content="${brands.length} brands · avg ${avgScore}/100 completeness · MIT · no catalog lock-in">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://prism.ps-tools.dev/">
+<meta property="og:image" content="https://prism.ps-tools.dev/og-image.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<!-- Twitter Card -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="Prism — Extract real design from any URL">
+<meta name="twitter:description" content="${brands.length} brands · ${avgScore}/100 avg · Playwright + getComputedStyle() = verifiable DESIGN.md">
+<meta name="twitter:image" content="https://prism.ps-tools.dev/og-image.png">
+<!-- Favicon (inline SVG) -->
+<link rel="icon" type="image/svg+xml" href='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="22" fill="%2308090a"/><path d="M46 22 L72 70 H30 Z" fill="none" stroke="%23f7f8f8" stroke-width="6" stroke-linejoin="round"/><line x1="58" y1="46" x2="86" y2="40" stroke="%23ff5470" stroke-width="4"/><line x1="58" y1="46" x2="88" y2="48" stroke="%23ffd166" stroke-width="4"/><line x1="58" y1="46" x2="86" y2="56" stroke="%235e6ad2" stroke-width="4"/></svg>'>
+<!-- Schema.org -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "SoftwareApplication",
+  "name": "Prism",
+  "applicationCategory": "DeveloperApplication",
+  "operatingSystem": "Linux, macOS, Windows",
+  "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
+  "softwareVersion": "${pkgVersion}",
+  "url": "https://prism.ps-tools.dev",
+  "description": "Extract real design from any URL using Playwright + getComputedStyle"
+}
+</script>
+<link rel="preconnect" href="https://rsms.me/">
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+<style>
+:root {
+  --bg-marketing: #010102;
+  --bg-primary: #08090a;
+  --bg-panel: #0f1011;
+  --bg-level-2: #141516;
+  --bg-level-3: #191a1b;
+  --bg-tertiary: #232326;
+  --text-primary: #f7f8f8;
+  --text-secondary: #d0d6e0;
+  --text-tertiary: #8a8f98;
+  --text-quaternary: #62666d;
+  --accent: #5e6ad2;
+  --accent-hover: #828fff;
+  --accent-tint: #18182f;
+  --border-t: rgba(255,255,255,0.05);
+  --border-ts: rgba(255,255,255,0.08);
+  --border-primary: #23252a;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-pill: 9999px;
+  --max-w: 1200px;
+  --tx: 0.16s cubic-bezier(0.25,0.46,0.45,0.94);
+  font-feature-settings: "cv11","ss03","cv02";
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body {
+  font-family: 'Inter var','Inter',-apple-system,sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 16px; line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
+/* Nav */
+.nav {
+  position: sticky; top: 0; z-index: 50;
+  backdrop-filter: blur(12px);
+  background: rgba(8,9,10,0.8);
+  border-bottom: 1px solid var(--border-t);
+}
+.nav-inner {
+  display: flex; align-items: center; justify-content: space-between;
+  height: 60px;
+}
+.brand-logo {
+  font-size: 15px; font-weight: 510; letter-spacing: -0.24px;
+  color: var(--text-primary); text-decoration: none;
+  display: flex; align-items: center; gap: 8px;
+}
+.brand-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 2px; }
+.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }
+.nav-links a {
+  font-size: 13px; font-weight: 510; color: var(--text-tertiary);
+  text-decoration: none; transition: color var(--tx);
+}
+.nav-links a:hover { color: var(--text-primary); }
+.nav-github {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 32px; padding: 0 12px;
+  background: var(--bg-panel); border: 1px solid var(--border-ts);
+  border-radius: var(--radius-md); font-size: 13px; font-weight: 510;
+  color: var(--text-secondary); text-decoration: none;
+  transition: border-color var(--tx);
+}
+.nav-github:hover { border-color: rgba(255,255,255,0.15); }
+/* Hamburger (mobile only, hidden by default) */
+.nav-hamburger-cb { display: none; }
+.nav-hamburger-btn {
+  display: none; cursor: pointer; padding: 8px; margin: -8px;
+  border: 0; background: transparent;
+}
+.nav-hamburger-btn svg { display: block; width: 24px; height: 24px; }
+/* Hero */
+.hero {
+  padding: 112px 0 80px; text-align: center; position: relative; overflow: hidden;
+}
+.hero::before {
+  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
+  width: 800px; height: 600px;
+  background: radial-gradient(ellipse, rgba(94,106,210,0.09) 0%, transparent 60%);
+  pointer-events: none; z-index: 0;
+}
+.hero-inner { position: relative; z-index: 1; }
+.eyebrow {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 10px; background: var(--bg-panel);
+  border: 1px solid var(--border-ts); border-radius: var(--radius-pill);
+  font-size: 12px; font-weight: 510; color: var(--text-secondary);
+  margin-bottom: 24px; letter-spacing: -0.13px;
+}
+.eyebrow-dot {
+  width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
+  box-shadow: 0 0 8px var(--accent);
+}
+h1 {
+  font-size: 60px; font-weight: 510; line-height: 1.0;
+  letter-spacing: -1.32px; color: var(--text-primary);
+  margin-bottom: 20px; max-width: 860px; margin-left: auto; margin-right: auto;
+}
+.h1-accent { color: var(--accent); }
+.lede {
+  font-size: 18px; line-height: 1.55; color: var(--text-tertiary);
+  max-width: 620px; margin: 0 auto 36px; letter-spacing: -0.27px;
+}
+.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
+.btn-primary {
+  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px;
+  background: var(--accent); color: #fff; border: none; border-radius: var(--radius-md);
+  font-family: inherit; font-size: 14px; font-weight: 510; letter-spacing: -0.13px;
+  text-decoration: none; cursor: pointer; transition: background var(--tx);
+}
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-ghost {
+  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
+  background: transparent; color: var(--text-primary);
+  border: 1px solid var(--border-ts); border-radius: var(--radius-md);
+  font-family: inherit; font-size: 14px; font-weight: 510; letter-spacing: -0.13px;
+  text-decoration: none; cursor: pointer; transition: border-color var(--tx), background var(--tx);
+}
+.btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
+.cmd-block {
+  display: inline-flex; align-items: center; gap: 12px;
+  background: var(--bg-panel); border: 1px solid var(--border-ts);
+  border-radius: var(--radius-md); padding: 12px 16px;
+  font-family: 'SF Mono',Menlo,Monaco,Consolas,monospace; font-size: 13px;
+  color: var(--text-secondary);
+}
+.cmd-prompt { color: var(--text-quaternary); user-select: none; }
+.cmd-text { color: var(--text-primary); }
+.cmd-copy {
+  background: transparent; border: 1px solid var(--border-ts);
+  color: var(--text-tertiary); border-radius: var(--radius-sm);
+  padding: 2px 6px; font-size: 11px; font-family: inherit;
+  cursor: pointer; transition: color var(--tx);
+}
+.cmd-copy:hover { color: var(--text-primary); }
+/* Stats bar */
+.stats-bar {
+  display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
+  padding: 20px 0 16px;
+  border-top: 1px solid var(--border-t); border-bottom: 1px solid var(--border-t);
+}
+.stat { text-align: center; }
+.stat-num { font-size: 32px; font-weight: 510; letter-spacing: -0.64px; }
+.stat-label { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
+/* Section */
+.section { padding: 80px 0; border-top: 1px solid var(--border-t); }
+.section-eyebrow {
+  font-size: 12px; font-weight: 510; color: var(--accent);
+  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;
+}
+.section h2 {
+  font-size: 36px; font-weight: 510; line-height: 1.1;
+  letter-spacing: -0.88px; color: var(--text-primary);
+  margin-bottom: 12px; max-width: 700px;
+}
+.section-lede {
+  font-size: 16px; color: var(--text-tertiary); max-width: 600px;
+  margin-bottom: 40px; line-height: 1.55;
+}
+/* Directory toolbar */
+.dir-toolbar {
+  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 24px;
+}
+.dir-search {
+  flex: 1; min-width: 200px; max-width: 280px;
+  background: var(--bg-panel); border: 1px solid var(--border-ts);
+  border-radius: var(--radius-md); padding: 8px 12px;
+  font-family: inherit; font-size: 13px; font-weight: 510; color: var(--text-primary);
+  outline: none; transition: border-color var(--tx);
+}
+.dir-search::placeholder { color: var(--text-quaternary); }
+.dir-search:focus { border-color: rgba(255,255,255,0.18); }
+.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
+.chip {
+  padding: 4px 10px; border-radius: var(--radius-pill);
+  font-size: 12px; font-weight: 510; cursor: pointer;
+  background: var(--bg-panel); border: 1px solid var(--border-ts);
+  color: var(--text-tertiary); transition: all var(--tx); white-space: nowrap;
+}
+.chip:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.15); }
+.chip.active {
+  background: var(--accent-tint); border-color: var(--accent);
+  color: var(--accent-hover);
+}
+.dir-count { font-size: 12px; color: var(--text-quaternary); margin-left: auto; white-space: nowrap; }
+/* Brand grid */
+.brand-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+}
+.brand-card {
+  background: var(--bg-panel); border: 1px solid var(--border-t);
+  border-radius: var(--radius-lg); padding: 16px;
+  display: flex; flex-direction: column; gap: 10px;
+  text-decoration: none; transition: background var(--tx), border-color var(--tx);
+  cursor: pointer;
+}
+.brand-card:hover { background: var(--bg-level-2); border-color: var(--border-ts); }
+.brand-card-header { display: flex; align-items: center; gap: 8px; }
+.brand-accent {
+  width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
+  border: 1px solid rgba(255,255,255,0.12);
+}
+.brand-domain {
+  font-size: 14px; font-weight: 510; color: var(--text-primary); letter-spacing: -0.13px;
+  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.brand-badges { display: flex; gap: 4px; align-items: center; }
+.badge-dark, .badge-light {
+  font-size: 10px; font-weight: 510; padding: 1px 6px; border-radius: 3px;
+}
+.badge-dark { background: rgba(255,255,255,0.06); color: var(--text-tertiary); }
+.badge-light { background: rgba(255,255,255,0.04); color: var(--text-quaternary); }
+.brand-font {
+  font-size: 11px; color: var(--text-quaternary);
+  font-family: 'SF Mono',Menlo,monospace;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.brand-score-row { display: flex; align-items: center; gap: 8px; }
+.score-bar-wrap {
+  flex: 1; height: 3px; background: var(--bg-tertiary);
+  border-radius: 2px; overflow: hidden;
+}
+.score-bar { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
+.score-num { font-size: 11px; font-weight: 510; min-width: 28px; text-align: right; }
+.brand-cat {
+  font-size: 10px; color: var(--text-quaternary); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap;
+}
+.empty-state {
+  grid-column: 1/-1; text-align: center;
+  padding: 48px; color: var(--text-quaternary); font-size: 14px;
+}
+/* Compare table */
+.compare-wrap {
+  background: var(--bg-panel); border: 1px solid var(--border-ts);
+  border-radius: var(--radius-lg); overflow: hidden;
+}
+table.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
+.compare th, .compare td {
+  text-align: left; padding: 12px 20px;
+  border-bottom: 1px solid var(--border-t);
+}
+.compare th {
+  font-size: 11px; font-weight: 510; text-transform: uppercase;
+  letter-spacing: 0.5px; color: var(--text-tertiary);
+  background: var(--bg-level-2);
+}
+.compare tr:last-child td { border-bottom: none; }
+.compare td:first-child { color: var(--text-secondary); }
+.yes { color: #4ade80; font-weight: 510; }
+.no { color: var(--text-quaternary); }
+.ca-col { background: rgba(94,106,210,0.04); }
+/* Steps */
+.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
+.step {
+  background: var(--bg-panel); border: 1px solid var(--border-t);
+  border-radius: var(--radius-lg); padding: 24px;
+}
+.step-num {
+  display: inline-flex; width: 26px; height: 26px;
+  background: var(--accent-tint); color: var(--accent-hover);
+  border-radius: var(--radius-md); align-items: center; justify-content: center;
+  font-size: 12px; font-weight: 590; margin-bottom: 14px;
+}
+.step h3 { font-size: 16px; font-weight: 510; margin-bottom: 8px; letter-spacing: -0.27px; }
+.step p { font-size: 13px; color: var(--text-tertiary); line-height: 1.55; }
+.step p code {
+  font-size: 0.9em; color: var(--text-secondary);
+  background: var(--bg-level-3); padding: 1px 4px; border-radius: 3px;
+}
+/* Footer */
+footer { padding: 40px 0 56px; border-top: 1px solid var(--border-t); }
+.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
+.footer-meta { font-size: 12px; color: var(--text-quaternary); }
+.footer-links { display: flex; gap: 20px; list-style: none; }
+.footer-links a { font-size: 13px; color: var(--text-tertiary); text-decoration: none; }
+.footer-links a:hover { color: var(--text-primary); }
+/* Responsive */
+@media (max-width: 768px) {
+  h1 { font-size: 38px; letter-spacing: -0.84px; }
+  .section h2 { font-size: 26px; }
+  .hero { padding: 72px 0 48px; }
+  .section { padding: 56px 0; }
+  .steps { grid-template-columns: 1fr; }
+  .cmd-block { font-size: 12px; }
+  .stats-bar { gap: 24px; }
+  /* Mobile nav — hamburger drawer */
+  .nav-hamburger-btn { display: inline-flex; color: var(--text-primary); }
+  .nav-github { display: none; }
+  .nav-links {
+    position: absolute; top: 100%; left: 0; right: 0;
+    flex-direction: column; align-items: stretch; gap: 0;
+    background: var(--bg-primary); border-bottom: 1px solid var(--border-ts);
+    padding: 16px 20px; transform: translateY(-12px);
+    opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
+  }
+  .nav-links li { width: 100%; }
+  .nav-links a {
+    display: block; padding: 12px 0; font-size: 15px;
+    color: var(--text-primary); border-bottom: 1px solid var(--border-tertiary, rgba(255,255,255,0.04));
+  }
+  .nav-hamburger-cb:checked ~ .container .nav-links {
+    transform: translateY(0); opacity: 1; pointer-events: auto;
+  }
+  .nav { position: relative; }
+}
+</style>
+</head>
+<body>
+<nav class="nav">
+  <input type="checkbox" id="nav-toggle" class="nav-hamburger-cb">
+  <div class="container nav-inner">
+    <a href="/" class="brand-logo">
+      <span class="brand-dot"></span>
+      Prism
+    </a>
+    <ul class="nav-links">
+      <li><a href="#directory">Brands</a></li>
+      <li><a href="#compare">vs getdesign</a></li>
+      <li><a href="#fidelity">Fidelity</a></li>
+      <li><a href="#how">How it works</a></li>
+      <li><a href="https://github.com/paulsainton/clone-architect" target="_blank" rel="noopener">GitHub ↗</a></li>
+    </ul>
+    <a href="https://github.com/paulsainton/clone-architect" target="_blank" rel="noopener" class="nav-github">
+      GitHub ↗
+    </a>
+    <label for="nav-toggle" class="nav-hamburger-btn" aria-label="Menu">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+    </label>
+  </div>
+</nav>
+<section class="hero">
+  <div class="container hero-inner">
+    <div class="eyebrow">
+      <span class="eyebrow-dot"></span>
+      v${pkgVersion} · MIT · local-first · Playwright
+    </div>
+    <h1>Extract real design from<br><span class="h1-accent">any URL. Automatically.</span></h1>
+    <p class="lede">
+      Playwright + <code style="font-size:0.85em;color:var(--text-secondary)">getComputedStyle()</code>
+      → a <a href="https://github.com/google-labs-code/design.md" target="_blank" rel="noopener" style="color:var(--text-secondary)">Google&nbsp;DESIGN.md</a> + tokens.json + screenshots.
+      The only extractor that <strong style="color:var(--text-secondary);font-weight:510">publishes its fidelity score — including where it falls short</strong>. No catalog. No $39/brand. MIT.
+    </p>
+    <div class="cta-row" style="flex-direction:column;gap:8px;align-items:flex-start">
+      <div style="font-size:11px;color:var(--text-tertiary);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:2px">Install from source · npm package coming soon</div>
+      <div class="cmd-block">
+        <span class="cmd-prompt">$</span>
+        <span class="cmd-text">git clone github.com/paulsainton/clone-architect &amp;&amp; npm i</span>
+        <button class="cmd-copy" onclick="navigator.clipboard.writeText('git clone https://github.com/paulsainton/clone-architect && cd clone-architect && npm i && npx playwright install chromium').then(()=>{this.textContent='✓';setTimeout(()=>{this.textContent='copy'},1500)})">copy</button>
+      </div>
+      <div style="font-size:11px;color:var(--text-tertiary);letter-spacing:0.08em;text-transform:uppercase;margin-top:8px;margin-bottom:2px">Extract any URL → DESIGN.md + tokens + screenshots + fidelity</div>
+      <div class="cmd-block">
+        <span class="cmd-prompt">$</span>
+        <span class="cmd-text">npx tsx scripts/clone.ts https://yoursite.com</span>
+        <button class="cmd-copy" onclick="navigator.clipboard.writeText('npx tsx scripts/clone.ts https://yoursite.com').then(()=>{this.textContent='✓';setTimeout(()=>{this.textContent='copy'},1500)})">copy</button>
+      </div>
+    </div>
+    <div class="cta-row">
+      <a href="https://github.com/paulsainton/clone-architect" class="btn-primary" target="_blank" rel="noopener">
+        View on GitHub ↗
+      </a>
+      <a href="#directory" class="btn-ghost">Browse ${brands.length} extractions ↓</a>
+    </div>
+  </div>
+</section>
+<div class="container">
+  <div class="stats-bar">
+    <div class="stat">
+      <div class="stat-num" style="color:var(--accent)">${brands.length}</div>
+      <div class="stat-label">brands extracted</div>
+    </div>
+    <div class="stat">
+      <div class="stat-num">${avgScore}<span style="font-size:0.55em;color:var(--text-tertiary)">/100</span></div>
+      <div class="stat-label">avg completeness</div>
+    </div>
+    <div class="stat">
+      <div class="stat-num">${darkCount}</div>
+      <div class="stat-label">dark-mode sites</div>
+    </div>
+    <div class="stat">
+      <div class="stat-num" style="color:#4ade80">MIT</div>
+      <div class="stat-label">license · local-first</div>
+    </div>
+  </div>
+</div>
+<!-- DIRECTORY -->
+<section class="section" id="directory">
+  <div class="container">
+    <div class="section-eyebrow">Directory</div>
+    <h2>${brands.length} design systems extracted</h2>
+    <p class="section-lede">
+      Each extraction ships with: raw-css.json (ground truth), desktop + mobile screenshots,
+      tokens.json, layout analysis, and a 24-section narrative DESIGN.md (Google DESIGN.md format).
+    </p>
+    <div class="dir-toolbar">
+      <input class="dir-search" type="search" placeholder="Search brands..." id="search" oninput="filterBrands()">
+      <div class="filter-chips" id="chips">
+        <button class="chip active" data-cat="all" onclick="setFilter(this,'all')">All</button>
+        ${categories.map(c => `<button class="chip" data-cat="${c}" onclick="setFilter(this,'${c.replace(/'/g, "\\'")}')">${c}</button>`).join('\n        ')}
+      </div>
+      <span class="dir-count" id="count">${brands.length} brands</span>
+    </div>
+    <div class="brand-grid" id="grid">
+      <!-- Rendered by JS -->
+    </div>
+  </div>
+</section>
+<!-- COMPARE -->
+<section class="section" id="compare">
+  <div class="container">
+    <div class="section-eyebrow">Comparison</div>
+    <h2>Why not just use getdesign.md?</h2>
+    <p class="section-lede">
+      Respect to the VoltAgent team — getdesign.md proved the format (now a <a href="https://github.com/google-labs-code/design.md" target="_blank" rel="noopener" style="color:var(--text-secondary)">Google open standard</a>). It's a hand-curated catalog of 73 brands; Prism extracts any URL automatically and ships the proof. <strong style="color:var(--text-secondary);font-weight:510">Where getdesign still wins: hand-tuned editorial nuance — and we say so.</strong>
+    </p>
+    <div class="compare-wrap">
+      <table class="compare">
+        <thead>
+          <tr>
+            <th>Feature</th>
+            <th>getdesign.md</th>
+            <th class="ca-col">Prism</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Extract any URL</td>
+            <td class="no">73 pre-written brands</td>
+            <td class="yes ca-col">Unlimited · any URL</td>
+          </tr>
+          <tr>
+            <td>Source of truth</td>
+            <td class="no">Manually written</td>
+            <td class="yes ca-col">getComputedStyle() — the rendered truth</td>
+          </tr>
+          <tr>
+            <td>Raw CSS audit</td>
+            <td class="no">Not shipped</td>
+            <td class="yes ca-col">raw-css.json (360 KB for mistral.ai)</td>
+          </tr>
+          <tr>
+            <td>Visual proof</td>
+            <td class="no">None</td>
+            <td class="yes ca-col">Desktop 1440px + Mobile 390px screenshots</td>
+          </tr>
+          <tr>
+            <td>Structured tokens</td>
+            <td class="no">Markdown prose only</td>
+            <td class="yes ca-col">tokens.json — import directly in code</td>
+          </tr>
+          <tr>
+            <td>Component states</td>
+            <td class="no">Not captured</td>
+            <td class="yes ca-col">Hover / focus / pressed via Playwright interaction</td>
+          </tr>
+          <tr>
+            <td>Page structure skeleton</td>
+            <td class="no">Not included</td>
+            <td class="yes ca-col">§13 — section order + height + layout type</td>
+          </tr>
+          <tr>
+            <td>Real copy / CTAs</td>
+            <td class="no">Not included</td>
+            <td class="yes ca-col">§14 — h1/h2/h3/nav/CTAs extracted verbatim</td>
+          </tr>
+          <tr>
+            <td>Re-extract on demand</td>
+            <td class="no">Static — gets stale</td>
+            <td class="yes ca-col"><code>clone-architect update &lt;domain&gt;</code></td>
+          </tr>
+          <tr>
+            <td>Completeness score</td>
+            <td class="no">No confidence signal</td>
+            <td class="yes ca-col">0-100 grade (A/B/C/D) per extraction</td>
+          </tr>
+          <tr>
+            <td>Fidelity score published</td>
+            <td class="no">Trust the author</td>
+            <td class="yes ca-col">Structure (SSIM) + flat-area vs original — incl. low scores</td>
+          </tr>
+          <tr>
+            <td>Editorial narrative</td>
+            <td style="color:#a3e635;font-weight:510">Hand-tuned by humans ✓</td>
+            <td class="no ca-col">Automated — honest, not hand-polished</td>
+          </tr>
+          <tr>
+            <td>DESIGN.md (Google standard)</td>
+            <td style="color:#4ade80;font-weight:510">Compatible</td>
+            <td class="yes ca-col">Compatible</td>
+          </tr>
+          <tr>
+            <td>Price per brand</td>
+            <td class="no">$39 custom + 2-day wait</td>
+            <td class="yes ca-col">Free · MIT · 90 seconds</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>
+<!-- MEASURED FIDELITY -->
+<section class="section" id="fidelity">
+  <div class="container">
+    <div class="section-eyebrow">Measured fidelity</div>
+    <h2>We publish our scores — including the bad ones.</h2>
+    <p class="section-lede">
+      Prism rebuilds each page's real above-the-fold structure and scores it against the original screenshot with <strong style="color:var(--text-secondary);font-weight:510">two reproducible numbers</strong>: <em>structure</em> (SSIM — layout match) and <em>flat-area</em> (pixelmatch — fill match). Most tools never tell you whether the output is accurate. We do — even when it's low. That honesty <em>is</em> the moat.
+    </p>
+    <div class="compare-wrap">
+      <table class="compare">
+        <thead><tr><th>Site</th><th>Type</th><th class="ca-col">Structure (SSIM)</th><th>Flat-area</th></tr></thead>
+        <tbody>
+          <tr><td>linear.app</td><td class="no">CSS-in-JS (styled-components)</td><td class="yes ca-col">60</td><td>93</td></tr>
+          <tr><td>stripe.com</td><td class="no">marketing, mostly static</td><td class="yes ca-col">67</td><td>77</td></tr>
+          <tr><td>airbnb.com</td><td class="no">app shell / search UI</td><td class="ca-col" style="color:#facc15;font-weight:510">52</td><td>78</td></tr>
+          <tr><td>getdesign.md</td><td class="no">dark, image-heavy hero</td><td class="ca-col" style="color:#facc15;font-weight:510">31</td><td>82</td></tr>
+        </tbody>
+      </table>
+    </div>
+    <p style="font-size:13px;color:var(--text-tertiary);margin-top:16px;line-height:1.6;max-width:760px">
+      The structural rebuild scores <strong style="color:var(--text-secondary);font-weight:510">+4 to +9 on structure</strong> vs a palette-only re-skin of the same tokens — that delta is the real layout we reconstruct, and it's the number SSIM is built to see. Flat-area stays high but is background-dominated, so it can't tell a clone from a re-skin on its own. SSIM is a strict floor: we render neutral placeholders for product imagery we don't fetch, which caps it honestly. Every DESIGN.md also ends with a
+      <strong style="color:var(--text-secondary);font-weight:510">Known Gaps</strong> section listing exactly what we couldn't capture — no tool in this space does that.
+    </p>
+  </div>
+</section>
+<!-- HOW IT WORKS -->
+<section class="section" id="how">
+  <div class="container">
+    <div class="section-eyebrow">How it works</div>
+    <h2>One command. ${brands.length > 1 ? 'Four' : 'Three'} artifacts.</h2>
+    <p class="section-lede">
+      No accounts, no API keys, no waiting.
+      Playwright loads the URL, scrapes computed styles, generates everything locally.
+    </p>
+    <div class="steps">
+      <div class="step">
+        <div class="step-num">1</div>
+        <h3>Playwright extraction</h3>
+        <p>Real browser headlessly loads the URL. <code>getComputedStyle()</code> captures every rendered value — not class names, actual pixels. Screenshots at 1440px and 390px.</p>
+      </div>
+      <div class="step">
+        <div class="step-num">2</div>
+        <h3>Semantic tokenization</h3>
+        <p>CSS custom properties (<code>--color-text-*</code>, <code>--color-bg-*</code>) map to semantic roles. OpenType features, variable font axes, translucent borders all surfaced automatically.</p>
+      </div>
+      <div class="step">
+        <div class="step-num">3</div>
+        <h3>DESIGN.md generation</h3>
+        <p>24 sections in the Google DESIGN.md format: Visual Theme, Colors, Typography, Components + state matrix, Layout, Motion, Depth, Do/Don'ts, Responsive, Agent Guide, Page Skeleton, Copy Library, Asset Inventory, CSS Raw Export, and a <strong style="color:var(--text-secondary);font-weight:510">Known Gaps</strong> section listing what couldn't be captured.</p>
+      </div>
+    </div>
+  </div>
+</section>
+<footer>
+  <div class="container footer-row">
+    <div class="footer-meta">
+      Prism · MIT · Built by Paul Sainton ·
+      This site's design tokens were extracted by Prism from linear.app.
+    </div>
+    <ul class="footer-links">
+      <li><a href="https://github.com/paulsainton/clone-architect" target="_blank" rel="noopener">GitHub</a></li>
+      <li><a href="https://www.npmjs.com/package/clone-architect" target="_blank" rel="noopener">npm</a></li>
+    </ul>
+  </div>
+</footer>
+<script>
+// Inline catalog data (baked at build time)
+const BRANDS = ${catalogJson};
+let currentFilter = 'all';
+let currentSearch = '';
+function gradeColor(s) {
+  if (s >= 90) return '#4ade80';
+  if (s >= 75) return '#a3e635';
+  if (s >= 60) return '#facc15';
+  return '#f87171';
+}
+function gradeLabel(s) {
+  if (s >= 90) return 'A';
+  if (s >= 75) return 'B';
+  if (s >= 60) return 'C';
+  return 'D';
+}
+function accentHex(accent) {
+  if (!accent) return '#5e6ad2';
+  if (accent.startsWith('#')) return accent;
+  const m = accent.match(/\\d+/g);
+  if (m && m.length >= 3) {
+    return '#' + m.slice(0,3).map(v => parseInt(v).toString(16).padStart(2,'0')).join('');
+  }
+  return '#5e6ad2';
+}
+function renderGrid() {
+  const q = currentSearch.toLowerCase();
+  const filtered = BRANDS.filter(b => {
+    const matchCat = currentFilter === 'all' || b.category === currentFilter;
+    const matchQ = !q || b.domain.toLowerCase().includes(q) ||
+      (b.font||'').toLowerCase().includes(q) ||
+      (b.category||'').toLowerCase().includes(q);
+    return matchCat && matchQ;
+  });
+  const grid = document.getElementById('grid');
+  const count = document.getElementById('count');
+  count.textContent = filtered.length + ' brand' + (filtered.length !== 1 ? 's' : '');
+  if (filtered.length === 0) {
+    grid.innerHTML = '<div class="empty-state">No brands match your search.</div>';
+    return;
+  }
+  grid.innerHTML = filtered.map(b => {
+    const hex = accentHex(b.accent);
+    const score = b.completeness || 0;
+    const grade = gradeLabel(score);
+    const scoreColor = gradeColor(score);
+    const showcaseHref = 'brands/' + b.domain + '/';
+    const hasShowcase = b.hasDesignMd;
+    const fontStr = b.font ? b.font.split(',')[0].replace(/['"]/g,'').trim() : '';
+    return \`<a class="brand-card" href="\${hasShowcase ? showcaseHref : '#'}" \${hasShowcase ? 'target="_blank" rel="noopener"' : 'onclick="return false"'} title="\${b.domain}">
+      <div class="brand-card-header">
+        <span class="brand-accent" style="background:\${hex}"></span>
+        <span class="brand-domain">\${b.domain}</span>
+        <div class="brand-badges">
+          <span class="\${b.dark ? 'badge-dark' : 'badge-light'}">\${b.dark ? 'dark' : 'light'}</span>
+        </div>
+      </div>
+      \${fontStr ? \`<div class="brand-font">\${fontStr}</div>\` : ''}
+      <div class="brand-score-row">
+        <div class="score-bar-wrap">
+          <div class="score-bar" style="width:\${score}%;background:\${scoreColor}"></div>
+        </div>
+        <span class="score-num" style="color:\${scoreColor}">\${grade}</span>
+      </div>
+      <div class="brand-cat">\${b.category || ''}</div>
+    </a>\`;
+  }).join('');
+}
+function setFilter(el, cat) {
+  currentFilter = cat;
+  document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
+  el.classList.add('active');
+  renderGrid();
+}
+function filterBrands() {
+  currentSearch = document.getElementById('search').value;
+  renderGrid();
+}
+// Initial render
+renderGrid();
+</script>
+</body>
+</html>`;
+  await writeFile(OUT_PATH, html);
+  console.log(`✅ Site generated → ${OUT_PATH}`);
+  console.log(`   ${brands.length} brands · avg ${avgScore}/100 · ${categories.length} categories`);
+  console.log(`\nDeploy: copy public/ to your web server root`);
+}
+main().catch(err => { console.error(err); process.exit(1); });