designlang 9.0.0 → 10.1.0

package/src/extractors/page-intent.js

@@ -0,0 +1,172 @@
+// Classify a crawled URL into a canonical page type. Heuristic-only by default
+// (zero deps, deterministic). Returns { type, confidence, signals, alternates }.
+// Consumers can fall back to the optional --smart LLM pass when confidence is low.
+
+const TYPES = [
+  'landing', 'pricing', 'docs', 'blog', 'blog-post',
+  'product', 'about', 'dashboard', 'auth', 'legal', 'unknown',
+];
+
+const URL_RULES = [
+  { re: /\/pricing(\/|$)/i, type: 'pricing', weight: 0.9 },
+  { re: /\/plans?(\/|$)/i, type: 'pricing', weight: 0.75 },
+  { re: /\/docs?(\/|$)|\/documentation|\/guide/i, type: 'docs', weight: 0.9 },
+  { re: /\/api-reference|\/reference(\/|$)/i, type: 'docs', weight: 0.85 },
+  { re: /\/blog(\/[\w-]+)+/i, type: 'blog-post', weight: 0.9 },
+  { re: /\/blog(\/|$)/i, type: 'blog', weight: 0.85 },
+  { re: /\/changelog(\/|$)/i, type: 'blog', weight: 0.6 },
+  { re: /\/about(\/|$)|\/company|\/team/i, type: 'about', weight: 0.85 },
+  { re: /\/product(\/|$)|\/products\//i, type: 'product', weight: 0.75 },
+  { re: /\/features?(\/|$)|\/solutions?(\/|$)/i, type: 'product', weight: 0.7 },
+  { re: /\/login|\/signin|\/sign-in|\/signup|\/sign-up|\/register/i, type: 'auth', weight: 0.95 },
+  { re: /\/terms|\/privacy|\/legal|\/cookie-policy/i, type: 'legal', weight: 0.95 },
+  { re: /\/app(\/|$)|\/dashboard|\/console|\/admin/i, type: 'dashboard', weight: 0.8 },
+];
+
+const PRICING_TEXT = /(\$\s?\d|€\s?\d|£\s?\d|₹\s?\d)|\b(per\s?(month|user|seat)|\/mo\b|\/month|\/year|\/yr|billed (annually|monthly)|free (forever|plan|tier)|start (free|trial))\b/i;
+const DOCS_TEXT = /\b(installation|getting started|api reference|parameters|return value|npm install|yarn add|pnpm add|`npx |import \{|quickstart)\b/i;
+const BLOG_POST_TEXT = /\b(by\s+[A-Z][a-z]+\s+[A-Z][a-z]+|posted on|published (on|in)|min read|\d+\s+min read)\b/i;
+const LEGAL_TEXT = /\b(privacy policy|terms of service|terms of use|cookie policy|data protection|gdpr|ccpa|effective date|last updated)\b/i;
+const AUTH_TEXT = /\b(sign in|log in|create (an )?account|forgot password|email address|password)\b/i;
+
+function rootPath(url) {
+  try {
+    const u = new URL(url);
+    return (u.pathname || '/').replace(/\/+$/, '') || '/';
+  } catch { return '/'; }
+}
+
+function countFormFields(sections) {
+  // sections text doesn't include input tags, so we approximate via headings + text.
+  return sections.reduce((n, s) => n + (s.buttonCount || 0), 0);
+}
+
+function detectDocsLayout(sections) {
+  // Docs pages often have a sidebar nav + long-form article.
+  const hasSidebar = sections.some(s =>
+    (s.tag === 'aside') || /sidebar|toc|nav-?docs|left-?nav/i.test(s.className || '')
+  );
+  const longArticle = sections.find(s => s.tag === 'main' || s.tag === 'section');
+  const articleLen = longArticle ? (longArticle.text || '').length : 0;
+  return { hasSidebar, articleLen };
+}
+
+function detectPricingLayout(sections) {
+  // 2-4 similarly-sized cards with currency signals = pricing table.
+  for (const s of sections) {
+    if (!PRICING_TEXT.test(s.text || '')) continue;
+    if ((s.cardCount || 0) >= 2 && (s.cardCount || 0) <= 6) return true;
+  }
+  return false;
+}
+
+export function extractPageIntent(rawData = {}, opts = {}) {
+  const url = opts.url || rawData.url || '';
+  const path = rootPath(url);
+  const title = (opts.title || rawData.title || '').toLowerCase();
+  const sections = (rawData.light && rawData.light.sections) || rawData.sections || [];
+  const metas = ((rawData.light && rawData.light.stack && rawData.light.stack.metas) || []).map(m => ({
+    name: (m.name || '').toLowerCase(),
+    content: (m.content || ''),
+  }));
+  const description = (metas.find(m => m.name === 'description') || {}).content || '';
+  const ogType = (metas.find(m => m.name === 'og:type') || {}).content || '';
+
+  const scores = Object.fromEntries(TYPES.map(t => [t, 0]));
+  const signals = [];
+
+  // 1) URL rules (strongest signal).
+  for (const rule of URL_RULES) {
+    if (rule.re.test(path)) {
+      scores[rule.type] += rule.weight;
+      signals.push({ kind: 'url', type: rule.type, weight: rule.weight });
+    }
+  }
+
+  // 2) og:type.
+  if (ogType === 'article') {
+    scores['blog-post'] += 0.6;
+    signals.push({ kind: 'meta', type: 'blog-post', weight: 0.6, detail: 'og:type=article' });
+  }
+
+  // 3) Title keywords.
+  if (/\bpricing\b|\bplans?\b/.test(title)) { scores.pricing += 0.4; signals.push({ kind: 'title', type: 'pricing', weight: 0.4 }); }
+  if (/\bdocs?\b|documentation|guide/.test(title)) { scores.docs += 0.4; signals.push({ kind: 'title', type: 'docs', weight: 0.4 }); }
+  if (/\bblog\b/.test(title)) { scores.blog += 0.3; signals.push({ kind: 'title', type: 'blog', weight: 0.3 }); }
+  if (/\bprivacy|\bterms\b/.test(title)) { scores.legal += 0.5; signals.push({ kind: 'title', type: 'legal', weight: 0.5 }); }
+  if (/\bsign.?in|\blog.?in|\bsign.?up\b/.test(title)) { scores.auth += 0.5; signals.push({ kind: 'title', type: 'auth', weight: 0.5 }); }
+
+  // 4) DOM text signals.
+  const bigText = sections.map(s => s.text || '').join('\n').slice(0, 8000);
+  if (PRICING_TEXT.test(bigText) && detectPricingLayout(sections)) {
+    scores.pricing += 0.6;
+    signals.push({ kind: 'dom', type: 'pricing', weight: 0.6, detail: 'currency+card-grid' });
+  }
+  if (DOCS_TEXT.test(bigText)) {
+    const { hasSidebar, articleLen } = detectDocsLayout(sections);
+    const w = 0.3 + (hasSidebar ? 0.25 : 0) + (articleLen > 1500 ? 0.15 : 0);
+    scores.docs += w;
+    signals.push({ kind: 'dom', type: 'docs', weight: w, detail: `sidebar=${hasSidebar} article=${articleLen}` });
+  }
+  if (BLOG_POST_TEXT.test(bigText)) {
+    scores['blog-post'] += 0.35;
+    signals.push({ kind: 'dom', type: 'blog-post', weight: 0.35, detail: 'byline|min-read' });
+  }
+  if (LEGAL_TEXT.test(bigText)) {
+    scores.legal += 0.4;
+    signals.push({ kind: 'dom', type: 'legal', weight: 0.4 });
+  }
+  if (AUTH_TEXT.test(bigText) && countFormFields(sections) < 8 && bigText.length < 3000) {
+    scores.auth += 0.35;
+    signals.push({ kind: 'dom', type: 'auth', weight: 0.35, detail: 'auth-form-shape' });
+  }
+
+  // 5) Path="/" fallback → landing (weak prior).
+  if (path === '/' || path === '') {
+    scores.landing += 0.45;
+    signals.push({ kind: 'url', type: 'landing', weight: 0.45, detail: 'root-path' });
+  }
+
+  // 6) Generic "has hero + features + cta" shape → landing.
+  const roles = new Set();
+  for (const s of sections) {
+    const blob = `${s.className || ''} ${s.id || ''}`.toLowerCase();
+    if (/hero/.test(blob)) roles.add('hero');
+    if ((s.cardCount || 0) >= 3) roles.add('features');
+    if (/cta|get-?started/.test(blob)) roles.add('cta');
+    if (s.tag === 'footer') roles.add('footer');
+  }
+  if (roles.has('hero') && (roles.has('features') || roles.has('cta'))) {
+    scores.landing += 0.3;
+    signals.push({ kind: 'shape', type: 'landing', weight: 0.3, detail: [...roles].join('+') });
+  }
+
+  // Pick winner.
+  const ranked = Object.entries(scores).sort((a, b) => b[1] - a[1]);
+  const [winType, winScore] = ranked[0];
+  const [, secondScore] = ranked[1] || ['unknown', 0];
+  const margin = winScore - secondScore;
+  let confidence = 0;
+  if (winScore > 0) {
+    confidence = Math.min(1, winScore * 0.6 + margin * 0.4);
+  }
+  const type = winScore === 0 ? 'unknown' : winType;
+
+  const alternates = ranked
+    .filter(([, s]) => s > 0 && s !== winScore)
+    .slice(0, 3)
+    .map(([t, s]) => ({ type: t, score: Number(s.toFixed(3)) }));
+
+  return {
+    type,
+    confidence: Number(confidence.toFixed(3)),
+    path,
+    title: opts.title || rawData.title || '',
+    description: description.slice(0, 200),
+    signals: signals.slice(0, 20),
+    alternates,
+    needsSmart: confidence < 0.6,
+  };
+}
+
+export const PAGE_TYPES = TYPES;

package/src/extractors/section-roles.js

@@ -0,0 +1,135 @@
+// Attach richer semantic roles to the sections that semantic-regions.js already
+// found. v9 labels were coarse (hero/features/pricing/testimonials/cta/footer/nav);
+// v10 adds logo-wall, stats, faq, comparison, steps, gallery, bento, blog-grid.
+// Input: enriched sections (from crawler) + existing `regions` array. Output: a
+// parallel array with { role, subrole, confidence, slots }.
+
+const CTA_RE = /\b(get started|sign ?up|try (free|it|now)|start (free|trial|now)|book a demo|request demo|contact sales|talk to sales|learn more|watch demo)\b/i;
+const STATS_RE = /\b(\d[\d,.]*[+%]|\d+x\b|\$\d+[MBK]\b)/i;
+const FAQ_RE = /\b(frequently asked|faq|common questions|questions & answers)\b/i;
+const STEPS_RE = /\b(step\s?\d|how it works|\d\s*\.\s+[A-Z])/i;
+const COMPARE_RE = /\b(vs\.?|compared to|free vs|basic vs|enterprise vs)\b/i;
+const TESTIMONIAL_RE = /(".{20,}"|".{20,}"|—\s?[A-Z][a-z]+\s+[A-Z][a-z]+|ceo|founder|head of)/i;
+const PRICING_RE = /(\$\s?\d|€\s?\d|£\s?\d|per\s?(month|user|seat)|\/mo\b|\/month|billed)/i;
+
+function blob(s) {
+  return `${s.className || ''} ${s.id || ''}`.toLowerCase();
+}
+
+function detectLogoWall(s) {
+  // Logo walls: many small images in one row, minimal text.
+  // The enriched sections don't carry image counts directly — we proxy via
+  // cardCount with very short text.
+  if ((s.cardCount || 0) >= 5 && (s.text || '').length < 300 &&
+      /(trusted by|used by|customers|as seen in|logos?|partners|clients)/i.test(s.text || '' + ' ' + blob(s))) {
+    return true;
+  }
+  return false;
+}
+
+function detectBento(s) {
+  const b = blob(s);
+  if (/bento/.test(b)) return true;
+  // Bento hint: 4-8 cards with irregular sizes — we can't measure layout grid
+  // here, so fall back to class name + cardCount heuristic.
+  return false;
+}
+
+function classifyRole(s, existingRole, pageType) {
+  const text = (s.text || '').slice(0, 2000);
+  const b = blob(s);
+  const headings = s.headings || [];
+  const h1 = (headings[0] || '').toLowerCase();
+
+  // Landmarks come first.
+  if (s.tag === 'footer') return { role: 'footer', confidence: 0.95 };
+  if (s.tag === 'nav' || /^nav|header-nav|top-?bar/.test(b)) return { role: 'nav', confidence: 0.9 };
+
+  // Strong class-based hints.
+  if (/logo-?(wall|cloud|grid|strip)|trusted-?by/.test(b) || detectLogoWall(s)) {
+    return { role: 'logo-wall', confidence: 0.85 };
+  }
+  if (/bento/.test(b) || detectBento(s)) return { role: 'bento', subrole: 'features', confidence: 0.75 };
+  if (/gallery|carousel|slider/.test(b)) return { role: 'gallery', confidence: 0.7 };
+  if (/stat(s|istic)|metric|number/.test(b) && STATS_RE.test(text)) return { role: 'stats', confidence: 0.85 };
+  if (FAQ_RE.test(text) || /\bfaq\b/.test(b)) return { role: 'faq', confidence: 0.85 };
+  if (STEPS_RE.test(text) && (s.cardCount || 0) >= 3) return { role: 'steps', confidence: 0.75 };
+  if (COMPARE_RE.test(text) && (s.cardCount || 0) >= 2) return { role: 'comparison', confidence: 0.7 };
+  if (PRICING_RE.test(text) && (s.cardCount || 0) >= 2) return { role: 'pricing-table', confidence: 0.9 };
+
+  // Testimonials vs hero vs features — existing classifier handled most of these;
+  // re-run with tighter signals.
+  if (TESTIMONIAL_RE.test(text) || /testimonial|review|quote/.test(b)) {
+    return { role: 'testimonial', confidence: 0.8 };
+  }
+  if (/hero/.test(b) || (headings.length === 1 && (s.buttonCount || 0) >= 1 && s.bounds && s.bounds.h > 300 && s.bounds.y < 400)) {
+    return { role: 'hero', confidence: 0.85 };
+  }
+  if ((s.cardCount || 0) >= 3 && (/(feature|benefit|what you get|why )/i.test(text) || /feature|grid/.test(b))) {
+    return { role: 'feature-grid', confidence: 0.8 };
+  }
+  if (CTA_RE.test(text) && (s.buttonCount || 0) >= 1 && text.length < 600) {
+    return { role: 'cta', confidence: 0.75 };
+  }
+  if (pageType === 'blog' && (s.cardCount || 0) >= 3) {
+    return { role: 'blog-grid', confidence: 0.75 };
+  }
+
+  // Fall back to the coarse existing label if we have one.
+  if (existingRole && existingRole !== 'content') {
+    return { role: existingRole, confidence: 0.4 };
+  }
+  return { role: 'content', confidence: 0.3 };
+}
+
+function extractSlots(s) {
+  // Lightweight slot detection from headings + button count. Real DOM-walking
+  // slot extraction happens in component-anatomy.js — here we just record
+  // rendered copy so prompts can quote the actual words.
+  const slots = {};
+  if ((s.headings || []).length) slots.heading = s.headings[0];
+  if ((s.headings || []).length > 1) slots.subheadings = s.headings.slice(1);
+  if (s.buttonCount > 0) slots.ctaCount = s.buttonCount;
+  const text = s.text || '';
+  const firstPara = text.split(/\n{2,}/)[0];
+  if (firstPara && firstPara.length < 400 && firstPara !== slots.heading) {
+    slots.lede = firstPara.trim();
+  }
+  return slots;
+}
+
+export function extractSectionRoles(sections = [], regions = [], pageIntent = null) {
+  const pageType = pageIntent && pageIntent.type;
+  const labeled = sections.map((s, i) => {
+    const existing = regions[i] ? regions[i].role : null;
+    const classified = classifyRole(s, existing, pageType);
+    return {
+      index: i,
+      tag: s.tag,
+      role: classified.role,
+      subrole: classified.subrole || null,
+      confidence: Number((classified.confidence || 0).toFixed(3)),
+      heading: (s.headings && s.headings[0]) || null,
+      bounds: s.bounds,
+      buttonCount: s.buttonCount || 0,
+      cardCount: s.cardCount || 0,
+      slots: extractSlots(s),
+      needsSmart: (classified.confidence || 0) < 0.5,
+    };
+  });
+
+  // Reading-order + emphasis summary.
+  const byRole = {};
+  for (const r of labeled) {
+    byRole[r.role] = (byRole[r.role] || 0) + 1;
+  }
+
+  return {
+    sections: labeled,
+    counts: byRole,
+    readingOrder: labeled
+      .filter(r => r.bounds)
+      .sort((a, b) => (a.bounds?.y || 0) - (b.bounds?.y || 0))
+      .map(r => r.role),
+  };
+}

package/src/formatters/markdown.js

@@ -711,6 +711,115 @@ export function formatMarkdown(design) {
     }
   }
 
+  // ── v10: Page Intent ──
+  if (design.pageIntent && design.pageIntent.type) {
+    lines.push('## Page Intent');
+    lines.push('');
+    lines.push(`**Type:** \`${design.pageIntent.type}\` (confidence ${design.pageIntent.confidence})`);
+    if (design.pageIntent.description) lines.push(`**Description:** ${design.pageIntent.description}`);
+    if (design.pageIntent.alternates?.length) {
+      lines.push('');
+      lines.push('Alternates: ' + design.pageIntent.alternates.map(a => `${a.type} (${a.score})`).join(', '));
+    }
+    lines.push('');
+  }
+
+  // ── v10: Section Roles ──
+  if (design.sectionRoles && design.sectionRoles.sections?.length) {
+    lines.push('## Section Roles');
+    lines.push('');
+    lines.push('Reading order (top→bottom): ' + (design.sectionRoles.readingOrder || []).join(' → '));
+    lines.push('');
+    lines.push('| # | Role | Heading | Confidence |');
+    lines.push('|---|------|---------|------------|');
+    for (const s of design.sectionRoles.sections.slice(0, 20)) {
+      const h = (s.heading || '').replace(/\|/g, '\\|').slice(0, 80);
+      lines.push(`| ${s.index} | ${s.role}${s.subrole ? ` · ${s.subrole}` : ''} | ${h || '—'} | ${s.confidence} |`);
+    }
+    lines.push('');
+  }
+
+  // ── v10: Material Language ──
+  if (design.materialLanguage && design.materialLanguage.label) {
+    lines.push('## Material Language');
+    lines.push('');
+    lines.push(`**Label:** \`${design.materialLanguage.label}\` (confidence ${design.materialLanguage.confidence})`);
+    const m = design.materialLanguage.metrics || {};
+    lines.push('');
+    lines.push('| Metric | Value |');
+    lines.push('|--------|-------|');
+    if (m.saturation != null) lines.push(`| Avg saturation | ${m.saturation} |`);
+    if (m.shadowProfile) lines.push(`| Shadow profile | ${m.shadowProfile} |`);
+    if (m.avgShadowBlur != null) lines.push(`| Avg shadow blur | ${m.avgShadowBlur}px |`);
+    if (m.maxRadius != null) lines.push(`| Max radius | ${m.maxRadius}px |`);
+    if (m.hasBackdropBlur != null) lines.push(`| backdrop-filter in use | ${m.hasBackdropBlur ? 'yes' : 'no'} |`);
+    if (m.gradientCount != null) lines.push(`| Gradients | ${m.gradientCount} |`);
+    lines.push('');
+  }
+
+  // ── v10: Imagery Style ──
+  if (design.imageryStyle && design.imageryStyle.label && design.imageryStyle.label !== 'none') {
+    lines.push('## Imagery Style');
+    lines.push('');
+    lines.push(`**Label:** \`${design.imageryStyle.label}\` (confidence ${design.imageryStyle.confidence})`);
+    const c = design.imageryStyle.counts || {};
+    lines.push(`**Counts:** total ${c.total || 0}, svg ${c.svg || 0}, icon ${c.icon || 0}, screenshot-like ${c.screenshot || 0}, photo-like ${c.photoLike || 0}`);
+    if (design.imageryStyle.dominantAspect) lines.push(`**Dominant aspect:** ${design.imageryStyle.dominantAspect}`);
+    if (design.imageryStyle.radiusProfile) lines.push(`**Radius profile on images:** ${design.imageryStyle.radiusProfile}`);
+    lines.push('');
+  }
+
+  // ── v10: Component Library ──
+  if (design.componentLibrary && design.componentLibrary.library && design.componentLibrary.library !== 'unknown') {
+    lines.push('## Component Library');
+    lines.push('');
+    lines.push(`**Detected:** \`${design.componentLibrary.library}\` (confidence ${design.componentLibrary.confidence})`);
+    if ((design.componentLibrary.evidence || []).length) {
+      lines.push('');
+      lines.push('Evidence:');
+      for (const e of design.componentLibrary.evidence) lines.push(`- ${e}`);
+    }
+    if ((design.componentLibrary.alternates || []).length) {
+      lines.push('');
+      lines.push('Also considered: ' + design.componentLibrary.alternates.map(a => `${a.id} (${a.score})`).join(', '));
+    }
+    lines.push('');
+  }
+
+  // ── v10: Multi-Page Map ──
+  if (design.multiPage && Array.isArray(design.multiPage.pages) && design.multiPage.pages.length) {
+    lines.push('## Multi-Page Map');
+    lines.push('');
+    lines.push('| Page Type | URL | Status |');
+    lines.push('|-----------|-----|--------|');
+    for (const p of design.multiPage.pages) {
+      lines.push(`| ${p.type || '—'} | ${p.url} | ${p.error ? 'error' : 'ok'} |`);
+    }
+    lines.push('');
+    if (design.multiPage.consistency?.shared?.colors?.length) {
+      lines.push(`**Shared colors across pages:** ${design.multiPage.consistency.shared.colors.slice(0, 10).map(c => `\`${c}\``).join(', ')}`);
+      lines.push('');
+    }
+  }
+
+  // ── v10.1: Component Screenshots ──
+  if (design.componentScreenshots && Array.isArray(design.componentScreenshots.components) && design.componentScreenshots.components.length) {
+    lines.push('## Component Screenshots');
+    lines.push('');
+    lines.push(`${design.componentScreenshots.components.length} retina crops written to \`screenshots/\`. Index: \`*-screenshots.json\`.`);
+    lines.push('');
+    lines.push('| Cluster | Variant | Size (px) | File |');
+    lines.push('|---------|---------|-----------|------|');
+    for (const c of design.componentScreenshots.components.slice(0, 20)) {
+      lines.push(`| ${c.cluster} | ${c.variant} | ${c.bounds?.w || '?'} × ${c.bounds?.h || '?'} | \`${c.path}\` |`);
+    }
+    if (design.componentScreenshots.fullPage) {
+      lines.push('');
+      lines.push(`Full-page: \`${design.componentScreenshots.fullPage.path}\``);
+    }
+    lines.push('');
+  }
+
   // ── Quick Start ──
   lines.push('## Quick Start');
   lines.push('');

package/src/formatters/prompt-pack.js

@@ -0,0 +1,214 @@
+// Generates ready-to-paste prompts for v0, Lovable, Cursor, and Claude
+// Artifacts — plus atomic per-component "recipe cards". The point is to get an
+// LLM to reproduce a site's look without the user having to hand-translate the
+// extracted JSON. We inline the tokens, voice, section order, and library
+// guidance so the model has everything it needs in one message.
+
+function colorList(design) {
+  const all = (design.colors?.all || []).map(c => c.hex).filter(Boolean);
+  return [...new Set(all)].slice(0, 14);
+}
+
+function typeFamilies(design) {
+  return [...new Set((design.typography?.families || []).filter(Boolean))].slice(0, 4);
+}
+
+function scaleSnippet(scale = []) {
+  if (!scale.length) return '(not detected)';
+  return scale.slice(0, 8).map(s => (s.value || s) + (s.label ? ` (${s.label})` : '')).join(', ');
+}
+
+function radiiSnippet(borders) {
+  const r = (borders?.radii || []).slice(0, 6).map(x => (x.value || x).toString());
+  return r.length ? r.join(', ') : '(none)';
+}
+
+function shadowSnippet(shadows) {
+  const s = (shadows?.values || []).slice(0, 3).map(x => (x.value || x).toString());
+  return s.length ? s.join(' | ') : '(none)';
+}
+
+function librarySuggest(library) {
+  if (!library || library.library === 'unknown') return null;
+  const map = {
+    'shadcn/ui': 'Use shadcn/ui components (Button, Card, Dialog, Input, Sheet, Tabs). Pair with Tailwind.',
+    'radix-ui': 'Use Radix UI primitives for accessibility. Style with your preferred CSS solution.',
+    'headlessui': 'Use Headless UI primitives styled with Tailwind.',
+    'mui': 'Use MUI v5 components with a custom ThemeProvider matching the tokens below.',
+    'chakra-ui': 'Use Chakra UI components with a custom extendTheme({}) block.',
+    'mantine': 'Use Mantine UI components with MantineProvider theme overrides.',
+    'ant-design': 'Use Ant Design v5 with ConfigProvider theme tokens.',
+    'bootstrap': 'Use Bootstrap 5 utility classes. Customize via CSS variables.',
+    'heroui': 'Use HeroUI/NextUI components.',
+    'tailwind-ui': 'Use Tailwind UI patterns — no component library runtime, just Tailwind classes.',
+    'tailwindcss': 'Use plain Tailwind CSS without a component library.',
+    'vuetify': 'Use Vuetify 3 components with a custom theme object.',
+  };
+  return map[library.library] || null;
+}
+
+function sectionList(sectionRoles) {
+  if (!sectionRoles || !sectionRoles.sections) return [];
+  return sectionRoles.sections
+    .filter(s => s.role && s.role !== 'content' && s.role !== 'nav')
+    .map(s => {
+      const slot = s.slots?.heading ? ` — heading: "${s.slots.heading.slice(0, 80)}"` : '';
+      return `- ${s.role}${slot}`;
+    });
+}
+
+function voiceBlock(voice) {
+  if (!voice) return '';
+  const parts = [];
+  if (voice.tone) parts.push(`Tone: ${voice.tone}`);
+  if (voice.headingStyle) parts.push(`Headings: ${voice.headingStyle}`);
+  if (voice.pronounPosture) parts.push(`Pronoun posture: ${voice.pronounPosture}`);
+  if ((voice.ctaVerbs || []).length) parts.push(`CTA verbs: ${(voice.ctaVerbs || []).slice(0, 6).join(', ')}`);
+  return parts.join(' · ');
+}
+
+function coreBrief(design, opts = {}) {
+  const colors = colorList(design);
+  const fonts = typeFamilies(design);
+  const spacing = scaleSnippet(design.spacing?.scale);
+  const radii = radiiSnippet(design.borders);
+  const shadows = shadowSnippet(design.shadows);
+  const material = design.materialLanguage?.label || 'flat';
+  const intent = design.pageIntent?.type || 'landing';
+  const sections = sectionList(design.sectionRoles);
+  const voice = voiceBlock(design.voice);
+  const lib = librarySuggest(design.componentLibrary);
+  return {
+    colors, fonts, spacing, radii, shadows, material, intent, sections, voice, lib,
+  };
+}
+
+export function formatV0Prompt(design) {
+  const b = coreBrief(design);
+  return [
+    `Build a ${b.intent} page with this exact visual language.`,
+    '',
+    'COLORS:',
+    b.colors.map(c => `  ${c}`).join('\n'),
+    '',
+    `FONTS: ${b.fonts.join(', ') || 'system-ui'}`,
+    `SPACING: ${b.spacing}`,
+    `RADIUS: ${b.radii}`,
+    `SHADOWS: ${b.shadows}`,
+    `MATERIAL LANGUAGE: ${b.material}`,
+    b.voice ? `VOICE: ${b.voice}` : '',
+    b.lib ? `LIBRARY: ${b.lib}` : '',
+    '',
+    'SECTIONS (in order):',
+    (b.sections.length ? b.sections : ['- hero', '- features', '- cta', '- footer']).join('\n'),
+    '',
+    'Use Tailwind. Match these tokens exactly. Keep the material language consistent.',
+  ].filter(Boolean).join('\n');
+}
+
+export function formatLovablePrompt(design) {
+  const b = coreBrief(design);
+  return [
+    `Clone the design language of this ${b.intent} page and build a fresh equivalent.`,
+    '',
+    `Visual feel: ${b.material}. ${b.voice || ''}`,
+    `Primary palette: ${b.colors.slice(0, 5).join(', ')}.`,
+    `Typography: ${b.fonts.join(', ') || 'system-ui'}.`,
+    `Corner radius vocabulary: ${b.radii}.`,
+    `Shadow vocabulary: ${b.shadows}.`,
+    b.lib ? `Use: ${b.lib}` : '',
+    '',
+    'Page structure:',
+    (b.sections.length ? b.sections : ['- hero', '- features', '- social proof', '- cta', '- footer']).join('\n'),
+  ].filter(Boolean).join('\n');
+}
+
+export function formatCursorPrompt(design) {
+  const b = coreBrief(design);
+  return [
+    '# Design brief',
+    '',
+    `Page type: **${b.intent}**.`,
+    `Material language: **${b.material}**.`,
+    b.voice ? `Voice: ${b.voice}.` : '',
+    '',
+    '## Tokens',
+    '',
+    '```ts',
+    'export const tokens = {',
+    `  colors: [${b.colors.map(c => `'${c}'`).join(', ')}],`,
+    `  fonts: [${b.fonts.map(f => `'${f}'`).join(', ')}],`,
+    `  radii: [${(design.borders?.radii || []).slice(0, 6).map(r => `'${(r.value || r)}'`).join(', ')}],`,
+    `  shadows: [${(design.shadows?.values || []).slice(0, 3).map(s => `'${(s.value || s).replace(/'/g, "\\'")}'`).join(', ')}],`,
+    '};',
+    '```',
+    '',
+    '## Sections',
+    (b.sections.length ? b.sections : ['- hero', '- features', '- cta', '- footer']).join('\n'),
+    '',
+    b.lib ? `## Library\n\n${b.lib}` : '',
+  ].filter(Boolean).join('\n');
+}
+
+export function formatClaudeArtifactPrompt(design) {
+  const b = coreBrief(design);
+  return [
+    'Create a React artifact that reproduces this brand\'s design language.',
+    '',
+    `Page intent: ${b.intent}.`,
+    `Material language: ${b.material}.`,
+    b.voice ? `Voice: ${b.voice}.` : '',
+    b.lib ? `Library preference: ${b.lib}` : '',
+    '',
+    `Colors to use: ${b.colors.join(', ')}.`,
+    `Fonts: ${b.fonts.join(', ') || 'system-ui'}.`,
+    `Radius vocabulary: ${b.radii}.`,
+    '',
+    'Sections:',
+    (b.sections.length ? b.sections : ['- hero', '- features', '- cta', '- footer']).join('\n'),
+    '',
+    'Use Tailwind via CDN, lucide-react for icons, and keep the material language consistent across sections. Do not add extra decorative elements outside this vocabulary.',
+  ].filter(Boolean).join('\n');
+}
+
+export function formatRecipeCards(design) {
+  const clusters = design.componentClusters || [];
+  if (!clusters.length) return [];
+  const b = coreBrief(design);
+  return clusters.slice(0, 12).map((c, i) => {
+    const name = c.name || c.kind || `component-${i + 1}`;
+    const signals = [
+      b.lib,
+      `Radius: ${b.radii}`,
+      `Shadows: ${b.shadows}`,
+    ].filter(Boolean).join(' · ');
+    return {
+      name,
+      content: [
+        `# Recipe: ${name}`,
+        '',
+        `Build one ${name} component that matches this brand.`,
+        '',
+        `Palette: ${b.colors.slice(0, 6).join(', ')}`,
+        `Typography: ${b.fonts.join(', ') || 'system-ui'}`,
+        `Material: ${b.material}`,
+        signals ? `Signals: ${signals}` : '',
+        '',
+        '## Anatomy (detected)',
+        '```json',
+        JSON.stringify(c, null, 2).slice(0, 1500),
+        '```',
+      ].filter(Boolean).join('\n'),
+    };
+  });
+}
+
+export function buildPromptPack(design) {
+  return {
+    'v0.txt': formatV0Prompt(design),
+    'lovable.txt': formatLovablePrompt(design),
+    'cursor.md': formatCursorPrompt(design),
+    'claude-artifacts.md': formatClaudeArtifactPrompt(design),
+    recipes: formatRecipeCards(design),
+  };
+}