launchframe 0.1.4 → 0.1.6

package/packages/extract/dom-crawler.ts

@@ -0,0 +1,521 @@
+/**
+ * DOM layout crawler.
+ *
+ * Runs inside the rendered page via Playwright's `page.evaluate`. Walks the
+ * DOM, identifies top-level sections, classifies each section's role and
+ * composition, and counts the content slots it contains. Returns a
+ * `SiteLayout` structural model the emitter rebuilds into a Next.js page.
+ *
+ * What this records:
+ *   - Section tree (geometry, role, composition, density)
+ *   - Slot inventory per section: how many headings / body paragraphs /
+ *     buttons / images / icons / logos / code blocks etc. it contains
+ *   - Per-section style tokens: background, foreground, padding
+ *   - Page-level tokens: fonts, primary surface colors, container width
+ *
+ * What this does NOT record:
+ *   - Heading or body text content (slots are counts, not strings).
+ *   - Raw HTML, CSS, or class names from the source.
+ *   - Brand assets (logos, illustrations, product screenshots).
+ *
+ * The structural model is what the mirror emitter uses to reconstruct the
+ * page's section grammar with `<TextSlot>` / `<MediaSlot>` placeholders.
+ */
+
+import type { Page } from "playwright";
+
+import type {
+  Composition,
+  SectionLayout,
+  SectionRole,
+  SiteLayout,
+  SiteTokens,
+  SlotCount,
+  SlotKind,
+} from "./types.js";
+
+export async function crawlLayout(
+  page: Page,
+  url: string,
+  viewport: { width: number; height: number },
+): Promise<SiteLayout> {
+  await page.evaluate(() => {
+    const g = globalThis as unknown as { __name?: (fn: unknown) => unknown };
+    if (typeof g.__name === "undefined") g.__name = (fn: unknown) => fn;
+  });
+
+  const host = new URL(url).host;
+  const partial = await page.evaluate(crawlInPage);
+
+  return {
+    url,
+    host,
+    capturedAt: new Date().toISOString(),
+    viewport,
+    ...partial,
+  };
+}
+
+/**
+ * Browser-context crawler. Dependency-free so Playwright can serialize it.
+ * Returns the layout-bearing fields of `SiteLayout` (url/host/capturedAt
+ * are added on the Node side).
+ */
+function crawlInPage(): Pick<
+  SiteLayout,
+  "pageHeightPx" | "sections" | "tokens"
+> {
+  const VIEWPORT_W = window.innerWidth;
+  const PAGE_H = Math.max(
+    document.documentElement.scrollHeight,
+    document.body.scrollHeight,
+  );
+
+  /* ----- helpers ----- */
+
+  function toHex(rgb: string): string | null {
+    if (!rgb || rgb === "transparent") return null;
+    const m = rgb.match(/rgba?\(([^)]+)\)/);
+    if (!m) return null;
+    const parts = m[1]!.split(",").map((s) => s.trim());
+    const r = parseInt(parts[0]!, 10);
+    const g = parseInt(parts[1]!, 10);
+    const b = parseInt(parts[2]!, 10);
+    const a = parts[3] !== undefined ? parseFloat(parts[3]) : 1;
+    if (a < 0.05) return null;
+    if ([r, g, b].some((n) => Number.isNaN(n))) return null;
+    const h = (n: number) => n.toString(16).padStart(2, "0");
+    return `#${h(r)}${h(g)}${h(b)}`;
+  }
+
+  function isVisible(el: HTMLElement): boolean {
+    const style = getComputedStyle(el);
+    if (style.visibility === "hidden" || style.display === "none") return false;
+    if (parseFloat(style.opacity) < 0.05) return false;
+    const r = el.getBoundingClientRect();
+    return r.width > 0 && r.height > 0;
+  }
+
+  function directTextLength(el: Element): number {
+    let total = 0;
+    for (const child of Array.from(el.childNodes)) {
+      if (child.nodeType === 3) {
+        const text = (child.nodeValue ?? "").trim();
+        if (text) total += text.length;
+      }
+    }
+    return total;
+  }
+
+  function classifySlotForElement(el: HTMLElement): SlotKind | null {
+    const tag = el.tagName;
+    const style = getComputedStyle(el);
+    const fontSize = parseFloat(style.fontSize) || 16;
+    const fontWeight = parseInt(style.fontWeight, 10) || 400;
+
+    if (tag === "IMG" || tag === "PICTURE") {
+      // Heuristic: small square-ish images in a logo strip vs hero photos.
+      const r = el.getBoundingClientRect();
+      const ratio = r.width > 0 && r.height > 0 ? r.width / r.height : 0;
+      if (r.height > 0 && r.height < 56 && ratio < 6) return "logo-mono";
+      return "image";
+    }
+    if (tag === "SVG" || tag === "svg") {
+      const r = el.getBoundingClientRect();
+      if (r.width < 32 && r.height < 32) return "icon";
+      return "image";
+    }
+    if (tag === "VIDEO") return "video";
+    if (tag === "PRE" || tag === "CODE") return "code";
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return "input";
+
+    if (tag === "BUTTON" || (tag === "A" && el.getAttribute("role") === "button")) {
+      // Decide primary vs secondary by background contrast vs the page.
+      const bg = toHex(style.backgroundColor);
+      if (bg && bg !== toHex(getComputedStyle(document.body).backgroundColor)) {
+        return "button-primary";
+      }
+      return "button-secondary";
+    }
+
+    if (tag === "A" && directTextLength(el) > 0) {
+      // Anchor that looks like a styled CTA (padded, bordered, or backgrounded).
+      const padX = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+      const hasBackdrop =
+        toHex(style.backgroundColor) !== null ||
+        parseFloat(style.borderTopWidth) > 0;
+      if (padX > 16 && hasBackdrop) {
+        return toHex(style.backgroundColor) ? "button-primary" : "button-secondary";
+      }
+    }
+
+    if (directTextLength(el) === 0) return null;
+
+    if (/^H[1-6]$/.test(tag)) {
+      const level = parseInt(tag.slice(1), 10);
+      if (level === 1) return "heading-1";
+      if (level === 2) return "heading-2";
+      return "heading-3";
+    }
+
+    if (tag === "LI") return "bullet";
+
+    if (fontSize >= 36 && fontWeight >= 600) return "heading-1";
+    if (fontSize >= 24 && fontWeight >= 500) return "heading-2";
+    if (fontSize >= 18 && fontWeight >= 500) return "heading-3";
+
+    if (fontSize <= 12 && /uppercase/i.test(style.textTransform)) return "eyebrow";
+    if (fontSize <= 13 && fontWeight >= 600) return "badge";
+
+    if (tag === "P" || tag === "SPAN" || tag === "DIV") return "body";
+
+    return null;
+  }
+
+  function countSlots(root: HTMLElement): SlotCount[] {
+    const buckets = new Map<SlotKind, number>();
+    const all = root.querySelectorAll<HTMLElement>("*");
+    for (const el of Array.from(all)) {
+      if (!isVisible(el)) continue;
+      const kind = classifySlotForElement(el);
+      if (kind) buckets.set(kind, (buckets.get(kind) ?? 0) + 1);
+    }
+    // De-dupe nested H1 spans etc: if an H1 contains spans, the outer H1 counts.
+    // We accept some over-count for body since it's coarse anyway; cap it.
+    if ((buckets.get("body") ?? 0) > 12) buckets.set("body", 12);
+    if ((buckets.get("bullet") ?? 0) > 24) buckets.set("bullet", 24);
+
+    const out: SlotCount[] = [];
+    for (const [kind, count] of buckets) out.push({ kind, count });
+    return out.sort((a, b) => a.kind.localeCompare(b.kind));
+  }
+
+  /* ----- section discovery ----- */
+
+  /**
+   * A top-level section is a block-level element that:
+   *  - is at least ~70% of the viewport wide,
+   *  - has a non-trivial height (>= 80 px),
+   *  - and is one of <header>, <footer>, <main>, <section>, <article>,
+   *    or a direct child of <body> / <main> that visually plays that role.
+   */
+  function findSections(): HTMLElement[] {
+    const candidates = new Set<HTMLElement>();
+    const tagSet = ["HEADER", "MAIN", "SECTION", "ARTICLE", "FOOTER", "NAV"];
+    for (const tag of tagSet) {
+      for (const el of Array.from(document.getElementsByTagName(tag))) {
+        candidates.add(el as HTMLElement);
+      }
+    }
+    // Add direct children of <body> and <main> as fallback.
+    const bodyKids = Array.from(document.body.children) as HTMLElement[];
+    for (const el of bodyKids) candidates.add(el);
+    const main = document.querySelector("main");
+    if (main) {
+      for (const el of Array.from(main.children) as HTMLElement[]) {
+        candidates.add(el);
+      }
+    }
+
+    const accepted: HTMLElement[] = [];
+    for (const el of candidates) {
+      if (!isVisible(el)) continue;
+      const r = el.getBoundingClientRect();
+      if (r.width < VIEWPORT_W * 0.7) continue;
+      if (r.height < 80) continue;
+      // Skip if this element is nested inside another already-accepted candidate.
+      // We'll do a final pass after sorting.
+      accepted.push(el);
+    }
+    // Sort by document y position.
+    accepted.sort((a, b) => {
+      const ay = a.getBoundingClientRect().top + window.scrollY;
+      const by = b.getBoundingClientRect().top + window.scrollY;
+      return ay - by;
+    });
+
+    // Drop any element fully contained in an earlier accepted one.
+    const final: HTMLElement[] = [];
+    for (const el of accepted) {
+      const inside = final.some((p) => p !== el && p.contains(el));
+      if (!inside) final.push(el);
+    }
+    return final;
+  }
+
+  /* ----- per-section classification ----- */
+
+  function classifyRole(
+    el: HTMLElement,
+    indexFromTop: number,
+    indexFromBottom: number,
+    slots: SlotCount[],
+  ): SectionRole {
+    const r = el.getBoundingClientRect();
+    const tag = el.tagName;
+    const count = (k: SlotKind) => slots.find((s) => s.kind === k)?.count ?? 0;
+
+    if (tag === "NAV") return "nav";
+    if (tag === "FOOTER" || (indexFromBottom === 0 && r.height < 600)) return "footer";
+    if (tag === "HEADER" && indexFromTop === 0 && r.height < 140) return "nav";
+
+    const headingCount = count("heading-1") + count("heading-2") + count("heading-3");
+    const buttons = count("button-primary") + count("button-secondary");
+    const images = count("image");
+    const logos = count("logo-mono");
+    const bullets = count("bullet");
+
+    // First in-document, has H1 + CTA → hero.
+    if (indexFromTop <= 1 && count("heading-1") >= 1 && buttons >= 1) return "hero";
+
+    // A wide, short band of small uniform images → logo strip.
+    if (logos >= 4 && headingCount <= 1 && r.height < r.width * 0.25) {
+      return "proof-logos";
+    }
+
+    // Pricing tells: 2–4 tall columns each with bullets and a button.
+    if (bullets >= 6 && buttons >= 2 && r.height > 360) return "pricing";
+
+    // Lots of headings (3+) of the same level + small bodies → feature grid.
+    if (count("heading-2") + count("heading-3") >= 3 && images <= 2) return "feature-grid";
+
+    // One heading, generous body, one media slot → deep dive.
+    if (headingCount >= 1 && images >= 1 && bullets <= 4 && r.height > 320) {
+      return "feature-deep-dive";
+    }
+
+    // Heading + 2 buttons, short height → conversion band near the bottom.
+    if (headingCount <= 2 && buttons >= 1 && r.height < 480 && indexFromBottom <= 2) {
+      return "conversion";
+    }
+
+    // Quote-shaped: short body strings, sometimes 3-up.
+    if (count("body") >= 3 && images === 0 && bullets === 0 && buttons === 0) {
+      return "proof-quotes";
+    }
+
+    return "other";
+  }
+
+  function classifyComposition(el: HTMLElement): Composition {
+    // Find the deepest descendant that uses CSS grid or flex with >1 row of cols.
+    const candidates = el.querySelectorAll<HTMLElement>("*");
+    let bestCols = 1;
+    let bestKind: "grid" | "flex" | "none" = "none";
+    let logoRowCols = 0;
+    for (const c of Array.from(candidates).slice(0, 400)) {
+      if (!isVisible(c)) continue;
+      const s = getComputedStyle(c);
+      if (s.display === "grid") {
+        const cols = s.gridTemplateColumns
+          .split(" ")
+          .filter((x) => x.trim().length > 0).length;
+        if (cols > bestCols) {
+          bestCols = cols;
+          bestKind = "grid";
+        }
+      } else if (s.display === "flex" && s.flexDirection.startsWith("row")) {
+        const kids = Array.from(c.children) as HTMLElement[];
+        const visibleKids = kids.filter(isVisible);
+        if (visibleKids.length > bestCols && visibleKids.length <= 12) {
+          bestCols = visibleKids.length;
+          bestKind = "flex";
+        }
+        if (visibleKids.length >= 4) {
+          const allSmall = visibleKids.every((k) => {
+            const kr = k.getBoundingClientRect();
+            return kr.height < 80 && kr.width < 200;
+          });
+          if (allSmall) logoRowCols = Math.max(logoRowCols, visibleKids.length);
+        }
+      }
+    }
+
+    if (logoRowCols >= 4) return "logo-row";
+    if (bestKind === "none" || bestCols <= 1) return "single-column";
+    if (bestCols === 2) return "split-2";
+    if (bestCols === 3) return "grid-3";
+    if (bestCols === 4) return "grid-4";
+    if (bestCols >= 5) return "list";
+    return "unknown";
+  }
+
+  function classifyDensity(el: HTMLElement, slots: SlotCount[]): "thin" | "balanced" | "dense" {
+    const total = slots.reduce((sum, s) => sum + s.count, 0);
+    const r = el.getBoundingClientRect();
+    const density = total / Math.max(1, r.height / 100);
+    if (density < 0.8) return "thin";
+    if (density > 2.4) return "dense";
+    return "balanced";
+  }
+
+  function extractSectionStyles(el: HTMLElement): SectionLayout["styles"] {
+    const s = getComputedStyle(el);
+    return {
+      backgroundHex: toHex(s.backgroundColor),
+      foregroundHex: toHex(s.color),
+      paddingTopPx: Math.round(parseFloat(s.paddingTop) || 0) || null,
+      paddingBottomPx: Math.round(parseFloat(s.paddingBottom) || 0) || null,
+    };
+  }
+
+  /* ----- page-level token extraction ----- */
+
+  function extractPageTokens(): SiteTokens {
+    const body = document.body;
+    const bodyStyle = getComputedStyle(body);
+    const bodyFontFamily = bodyStyle.fontFamily.split(",")[0]!.trim().replace(/^["']|["']$/g, "") || "system-ui";
+
+    let headingFontFamily = bodyFontFamily;
+    const h = document.querySelector("h1, h2, h3");
+    if (h) {
+      const hs = getComputedStyle(h);
+      headingFontFamily = hs.fontFamily.split(",")[0]!.trim().replace(/^["']|["']$/g, "") || bodyFontFamily;
+    }
+
+    const bg = toHex(bodyStyle.backgroundColor) ?? "#ffffff";
+    const fg = toHex(bodyStyle.color) ?? "#0a0a0a";
+
+    // Primary = the most-used non-text colored button background.
+    const buttonBgCounts = new Map<string, number>();
+    for (const b of Array.from(document.querySelectorAll<HTMLElement>("button, a, [role='button']"))) {
+      if (!isVisible(b)) continue;
+      const sb = toHex(getComputedStyle(b).backgroundColor);
+      if (!sb || sb === bg) continue;
+      buttonBgCounts.set(sb, (buttonBgCounts.get(sb) ?? 0) + 1);
+    }
+    let primary = fg;
+    let primaryCount = 0;
+    for (const [hex, count] of buttonBgCounts) {
+      if (count > primaryCount) {
+        primary = hex;
+        primaryCount = count;
+      }
+    }
+
+    // Muted = a frequent off-white / off-black surface color (non-page).
+    const surfaceCounts = new Map<string, number>();
+    for (const el of Array.from(document.querySelectorAll<HTMLElement>("body *"))) {
+      if (!isVisible(el)) continue;
+      const sb = toHex(getComputedStyle(el).backgroundColor);
+      if (!sb || sb === bg) continue;
+      surfaceCounts.set(sb, (surfaceCounts.get(sb) ?? 0) + 1);
+    }
+    let muted = bg;
+    let mutedCount = 0;
+    for (const [hex, count] of surfaceCounts) {
+      if (hex === primary) continue;
+      if (count > mutedCount) {
+        muted = hex;
+        mutedCount = count;
+      }
+    }
+
+    // Border = most-used border color across all elements with a border.
+    const borderCounts = new Map<string, number>();
+    for (const el of Array.from(document.querySelectorAll<HTMLElement>("body *"))) {
+      if (!isVisible(el)) continue;
+      const s = getComputedStyle(el);
+      if (parseFloat(s.borderTopWidth) <= 0) continue;
+      const bh = toHex(s.borderTopColor);
+      if (!bh) continue;
+      borderCounts.set(bh, (borderCounts.get(bh) ?? 0) + 1);
+    }
+    let border = "#e5e7eb";
+    let borderCount = 0;
+    for (const [hex, count] of borderCounts) {
+      if (count > borderCount) {
+        border = hex;
+        borderCount = count;
+      }
+    }
+
+    // Radius = the most-used non-zero corner radius.
+    const radiusCounts = new Map<number, number>();
+    for (const el of Array.from(document.querySelectorAll<HTMLElement>("body *"))) {
+      if (!isVisible(el)) continue;
+      const r = parseFloat(getComputedStyle(el).borderTopLeftRadius);
+      if (!(r > 0 && r < 64)) continue;
+      const k = Math.round(r);
+      radiusCounts.set(k, (radiusCounts.get(k) ?? 0) + 1);
+    }
+    let radius = 8;
+    let radiusCount = 0;
+    for (const [px, count] of radiusCounts) {
+      if (count > radiusCount) {
+        radius = px;
+        radiusCount = count;
+      }
+    }
+
+    // Container: widest layout block under 1600px.
+    let containerPx: number | null = null;
+    let containerArea = 0;
+    for (const el of Array.from(
+      document.querySelectorAll<HTMLElement>("main, section, header, footer, div"),
+    )) {
+      if (!isVisible(el)) continue;
+      const r = el.getBoundingClientRect();
+      if (r.width < 720 || r.width > 1600) continue;
+      if (r.height < 240) continue;
+      const area = r.width * r.height;
+      if (area > containerArea) {
+        containerArea = area;
+        containerPx = Math.round(r.width);
+      }
+    }
+
+    return {
+      bodyFontFamily,
+      headingFontFamily,
+      backgroundHex: bg,
+      foregroundHex: fg,
+      primaryHex: primary,
+      mutedHex: muted,
+      borderHex: border,
+      radiusPx: radius,
+      containerPx,
+    };
+  }
+
+  /* ----- main pass ----- */
+
+  const sectionEls = findSections();
+  const sections: SectionLayout[] = [];
+  for (let i = 0; i < sectionEls.length; i++) {
+    const el = sectionEls[i]!;
+    const r = el.getBoundingClientRect();
+    const top = r.top + window.scrollY;
+    const slots = countSlots(el);
+    const composition = classifyComposition(el);
+    const density = classifyDensity(el, slots);
+    const role = classifyRole(el, i, sectionEls.length - 1 - i, slots);
+    const styles = extractSectionStyles(el);
+
+    const notes: string[] = [];
+    if (slots.length === 0) notes.push("No content slots detected; rendering an empty wrapper.");
+    if (composition === "unknown") notes.push("Composition was ambiguous; fell back to single-column.");
+
+    sections.push({
+      id: `s${i + 1}`,
+      role,
+      composition,
+      density,
+      bbox: [
+        Math.max(0, Math.min(1, r.left / VIEWPORT_W)),
+        Math.max(0, Math.min(1, top / PAGE_H)),
+        Math.max(0, Math.min(1, r.width / VIEWPORT_W)),
+        Math.max(0, Math.min(1, r.height / PAGE_H)),
+      ],
+      slots,
+      styles,
+      notes,
+    });
+  }
+
+  return {
+    pageHeightPx: PAGE_H,
+    sections,
+    tokens: extractPageTokens(),
+  };
+}

package/packages/extract/emit.ts

@@ -9,8 +9,8 @@
  *   globals.css         — shadcn-compatible CSS variables (light + dark)
  *   theme-preview.tsx   — a self-contained React component that renders
  *                         every token so you can eyeball the system
- *   REPORT.md           — what was extracted, from where, with the
- *                         anti-clone disclaimer
+ *   REPORT.md           — what was extracted, from where, and how the
+ *                         output is meant to be used
  */
 
 import { mkdirSync, writeFileSync } from "node:fs";

package/packages/extract/extract.ts

@@ -4,16 +4,23 @@
  *   npm run extract -- https://site-a.com https://site-b.com https://site-c.com
  *
  * For each URL: open in Chromium, screenshot, harvest computed design
- * tokens via `browser-extract.ts`. After all sites: synthesize an
- * original shadcn-compatible design system and emit drop-in files.
+ * tokens via `browser-extract.ts`, and crawl the rendered DOM into a
+ * typed `SiteLayout` model via `dom-crawler.ts`. After all sites:
+ *   - Synthesize a drop-in shadcn-compatible design system from the
+ *     aggregated tokens.
+ *   - Emit a per-site **layout mirror**: a Next.js page that reconstructs
+ *     the source's section structure from typed primitives, with
+ *     `<TextSlot>` / `<MediaSlot>` placeholders for the user's copy and
+ *     brand assets.
  *
  * Output goes to `output/<runId>/`.
  *
- * Policy (from rules/anti-clone-policy.md):
- *   - Honor robots.txt by default.
- *   - Per-domain rate limit defaults to 15 req/min.
- *   - Store only PNG screenshots and harvested computed-style values.
- *   - Never persist HTML, JS, CSS, or third-party assets.
+ * Operational defaults (configurable via flags):
+ *   - Honor robots.txt unless `--no-robots` is passed.
+ *   - Per-domain rate limit defaults to 15 req/min (`--rate <n>`).
+ *   - The crawler extracts a structured representation (section tree,
+ *     computed style tokens, content kinds); it does not store raw HTML,
+ *     copy text, or third-party assets in the output.
  */
 
 import { mkdirSync, writeFileSync } from "node:fs";
@@ -23,9 +30,11 @@ import { fileURLToPath, pathToFileURL } from "node:url";
 import { chromium, type Browser } from "playwright";
 
 import { harvestTokens } from "./browser-extract.js";
+import { crawlLayout } from "./dom-crawler.js";
 import { emitAll } from "./emit.js";
+import { emitMirror } from "./mirror-emit.js";
 import { synthesize } from "./synthesize.js";
-import type { ExtractionRun, RawTokens, SiteCapture } from "./types.js";
+import type { ExtractionRun, RawTokens, SiteCapture, SiteLayout } from "./types.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -90,9 +99,18 @@ function printHelp(): void {
       "Writes to ./output/<runId>/ in your current working directory unless",
       "you pass --out.",
       "",
-      "Captures each URL at a desktop viewport, harvests computed design",
-      "tokens (colors, type, spacing, radius, shadow), and synthesizes a",
-      "drop-in shadcn-compatible design system in output/<runId>/.",
+      "For each URL the CLI:",
+      "  1. Renders the page at a desktop viewport in headless Chromium.",
+      "  2. Harvests computed design tokens (colors, type, spacing, radius,",
+      "     shadow).",
+      "  3. Crawls the rendered DOM into a typed SiteLayout (section tree,",
+      "     composition, slot counts, per-section style tokens).",
+      "  4. Emits a layout-mirror Next.js page at",
+      "     output/<runId>/mirror/<host>/page.tsx with <TextSlot> /",
+      "     <MediaSlot> placeholders for your own copy and imagery.",
+      "",
+      "After every URL, a drop-in shadcn-compatible design system is",
+      "synthesized from the aggregated tokens and written to output/<runId>/.",
       "",
       "Options:",
       "  --out <dir>          Output directory (default: output/<runId>)",
@@ -178,11 +196,13 @@ async function captureOne(
   url: string,
   viewport: { width: number; height: number },
   outDir: string,
-): Promise<{ raw: RawTokens; capture: SiteCapture } | null> {
+): Promise<{ raw: RawTokens; layout: SiteLayout | null; capture: SiteCapture } | null> {
   const host = new URL(url).host;
   const stamp = `${host}.png`;
   const screenshotPath = join(outDir, "screenshots", stamp);
   const rawPath = join(outDir, "raw", `${host}.tokens.json`);
+  const layoutPath = join(outDir, "raw", `${host}.layout.json`);
+  const mirrorDir = join(outDir, "mirror", host);
 
   const ctx = await browser.newContext({
     userAgent: USER_AGENT,
@@ -215,18 +235,32 @@ async function captureOne(
     mkdirSync(dirname(rawPath), { recursive: true });
     writeFileSync(rawPath, JSON.stringify(raw, null, 2));
 
+    let layout: SiteLayout | null = null;
+    let mirrorWritten: string[] = [];
+    try {
+      layout = await crawlLayout(page, url, viewport);
+      mkdirSync(dirname(layoutPath), { recursive: true });
+      writeFileSync(layoutPath, JSON.stringify(layout, null, 2));
+      mirrorWritten = emitMirror(layout, mirrorDir);
+    } catch (err) {
+      console.warn(`  ! layout crawl failed for ${url}: ${(err as Error).message}`);
+    }
+
     const capture: SiteCapture = {
       url,
       host,
       capturedAt: raw.capturedAt,
       screenshotPath,
       rawTokensPath: rawPath,
+      ...(layout ? { layoutPath } : {}),
+      ...(mirrorWritten.length > 0 ? { mirrorDir } : {}),
       status: "ok",
     };
-    return { raw, capture };
+    return { raw, layout, capture };
   } catch (err) {
     return {
       raw: emptyRaw(url, viewport),
+      layout: null,
       capture: {
         url,
         host,
@@ -303,7 +337,11 @@ async function main(): Promise<void> {
       captures.push(result.capture);
       if (result.capture.status === "ok") {
         rawList.push(result.raw);
-        console.log(`  ✓ ${url}`);
+        const tag = result.layout ? "mirror" : "tokens-only";
+        const sectionCount = result.layout?.sections.length ?? 0;
+        console.log(
+          `  ✓ ${url}  → ${tag}${result.layout ? ` (${sectionCount} sections)` : ""}`,
+        );
       } else {
         console.log(`  ✗ ${url}  ${result.capture.reason ?? ""}`);
       }
@@ -339,9 +377,21 @@ async function main(): Promise<void> {
   console.log("[extract] wrote:");
   for (const f of written) console.log(`  → ${f}`);
   console.log(`  → ${join(outDir, "run.json")}`);
+  const mirrorDirs = captures.filter((c) => c.mirrorDir).map((c) => c.mirrorDir!);
+  if (mirrorDirs.length > 0) {
+    console.log("");
+    console.log("[extract] layout mirrors:");
+    for (const d of mirrorDirs) console.log(`  → ${d}/page.tsx`);
+  }
   console.log("");
-  console.log(`[extract] done. Open ${join(outDir, "REPORT.md")} for the summary.`);
-  console.log(`[extract] Give your AI: ${join(outDir, "FOR_AI.md")}`);
+  console.log(`[extract] done. Open ${join(outDir, "REPORT.md")} for the design-system summary.`);
+  if (mirrorDirs.length > 0) {
+    console.log(
+      `[extract] each mirror folder ships a Next.js page.tsx + MIRROR_NOTES.md.`,
+    );
+    console.log(`[extract] fill the <TextSlot> / <MediaSlot> placeholders with your own content.`);
+  }
+  console.log(`[extract] AI handoff: ${join(outDir, "FOR_AI.md")}`);
 }
 
 function makeRunId(startedAt: string, name: string | undefined): string {