sdtk-design-kit 0.2.1 → 0.3.1

package/src/commands/prototype.js

@@ -4,620 +4,189 @@ const fs = require("fs");
 const path = require("path");
 const { parseFlags } = require("../lib/args");
 const { describeDesignPaths, resolveProjectPath } = require("../lib/design-paths");
-const { inferDomainProfile } = require("../lib/domain-profile");
 const { ValidationError } = require("../lib/errors");
-const { renderMultiPagePrototype, screenFileName } = require("../lib/prototype-renderer");
-const { DEFAULT_STYLE, availableStyleNames, resolveStyleName } = require("../lib/style-presets");
 
 const PROTOTYPE_FLAG_DEFS = {
   help: { type: "boolean" },
   "project-path": { type: "string" },
   force: { type: "boolean" },
-  style: { type: "string" },
 };
 
-const REQUIRED_ARTIFACTS = [
-  ["docs/design/DESIGN_BRIEF.md", "designBriefPath"],
-  ["docs/design/SCREEN_MAP.md", "screenMapPath"],
-  ["docs/design/DESIGN_SYSTEM.md", "designSystemPath"],
-  ["docs/design/wireframes/LANDING.md", "landingWireframePath"],
-  ["docs/design/wireframes/ONBOARDING.md", "onboardingWireframePath"],
-  ["docs/design/wireframes/DASHBOARD.md", "dashboardWireframePath"],
-];
-
-const THEME_TOKENS = {
-  "minimal-saas": {
-    bg: "#F7F8FA",
-    surface: "#FFFFFF",
-    text: "#1F2933",
-    muted: "#667085",
-    primary: "#2563EB",
-    accent: "#0F8A5F",
-    border: "#D9DEE7",
-    shadow: "0 14px 40px rgba(31,41,51,0.10)",
-  },
-  "premium-dashboard": {
-    bg: "#F5F7FB",
-    surface: "#FFFFFF",
-    text: "#111827",
-    muted: "#64748B",
-    primary: "#0F766E",
-    accent: "#2563EB",
-    border: "#D8E0EA",
-    shadow: "0 18px 48px rgba(15,23,42,0.12)",
-  },
-  "bold-founder": {
-    bg: "#111111",
-    surface: "#18181B",
-    text: "#FAFAFA",
-    muted: "#A1A1AA",
-    primary: "#F97316",
-    accent: "#22C55E",
-    border: "#27272A",
-    shadow: "0 20px 0 rgba(249,115,22,0.24)",
-  },
-  "warm-editorial": {
-    bg: "#FAF7F2",
-    surface: "#FFFFFF",
-    text: "#1C1A17",
-    muted: "#8A817A",
-    primary: "#C0512F",
-    accent: "#2F5B4F",
-    border: "rgba(47,91,79,0.16)",
-    shadow: "0 16px 36px rgba(28,26,23,0.08)",
-  },
-};
+function toPosix(value) {
+  return String(value || "").replace(/\\/g, "/");
+}
 
-function readInputContractState(paths) {
-  if (!fs.existsSync(paths.designStartInputStatePath) || !fs.statSync(paths.designStartInputStatePath).isFile()) {
-    return null;
-  }
-  try {
-    return JSON.parse(fs.readFileSync(paths.designStartInputStatePath, "utf-8"));
-  } catch (_err) {
-    return null;
-  }
+function escapeHtml(value) {
+  return String(value == null ? "" : value)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
 }
 
 function cmdPrototypeHelp() {
   console.log(`SDTK-DESIGN Prototype
 
 Usage:
-  sdtk-design prototype [--style <preset>] [--project-path <path>] [--force]
+  sdtk-design prototype [--project-path <path>] [--force]
 
 Example:
-  sdtk-design prototype --style premium-dashboard
-
-Style presets:
-  ${availableStyleNames().join(", ")}
-  Default: inferred from docs/design/DESIGN_SYSTEM.md, then ${DEFAULT_STYLE}
+  sdtk-design prototype
 
 Reads:
-  docs/design/DESIGN_BRIEF.md
-  docs/design/SCREEN_MAP.md
+  .sdtk/design/START_INPUT_STATE.json (must be INPUT_CONTRACT_READY)
   docs/design/DESIGN_SYSTEM.md
-  docs/design/wireframes/LANDING.md
-  docs/design/wireframes/ONBOARDING.md
-  docs/design/wireframes/DASHBOARD.md
-  .sdtk/design/START_INPUT_STATE.json (optional; enables explicit multi-screen rendering when ready)
+  docs/design/DESIGN_TOKENS.json
+  docs/design/screens/*_DESIGN_BRIEF.md
 
 Creates:
-  legacy/simple mode:
-    docs/design/prototype/index.html
-  from-spec multi-page mode:
-    docs/design/prototype/index.html
-    docs/design/prototype/screens/*.html
-    docs/design/prototype/assets/prototype.css
-    docs/design/prototype/assets/prototype.js
+  docs/design/prototype/.manifest.json
+  docs/design/prototype/index.html
+  docs/design/prototype/screens/ (empty output directory for the agent-owned screen HTML)
 
 Safety:
   Local files only.
-  Existing prototype index is not overwritten unless --force is explicit.
+  Existing prototype manifest and index are not overwritten unless --force is explicit.
+  Screen HTML files under docs/design/prototype/screens are never overwritten by this command.
   No production app code outside docs/design/prototype.
   No JavaScript app runtime, server, network call, .sdtk/atlas, or SDTK-WIKI output mutation.`);
   return 0;
 }
 
-function resolvePrototypeMode(canUseMultiScreen) {
-  if (!canUseMultiScreen) {
-    return "single";
-  }
-  const raw = String(process.env.SDTK_DESIGN_PROTOTYPE_MODE || "").trim().toLowerCase();
-  if (!raw) {
-    return "multi";
+function readInputContractState(paths) {
+  if (!fs.existsSync(paths.designStartInputStatePath) || !fs.statSync(paths.designStartInputStatePath).isFile()) {
+    return null;
   }
-  if (raw === "single" || raw === "multi") {
-    return raw;
+  try {
+    return JSON.parse(fs.readFileSync(paths.designStartInputStatePath, "utf-8"));
+  } catch (_err) {
+    return null;
   }
-  throw new ValidationError(
-    `Unsupported SDTK_DESIGN_PROTOTYPE_MODE "${process.env.SDTK_DESIGN_PROTOTYPE_MODE}". Use "single" or "multi". No project files were changed.`
-  );
-}
-
-function wireframePath(paths, fileName) {
-  return path.join(paths.wireframesPath, fileName);
 }
 
-function requiredArtifactTargets(paths) {
-  return REQUIRED_ARTIFACTS.map(([relativePath, key]) => {
-    const filePath =
-      key === "landingWireframePath"
-        ? wireframePath(paths, "LANDING.md")
-        : key === "onboardingWireframePath"
-          ? wireframePath(paths, "ONBOARDING.md")
-          : key === "dashboardWireframePath"
-            ? wireframePath(paths, "DASHBOARD.md")
-            : paths[key];
-    return { relativePath, filePath };
-  });
-}
-
-function firstLine(content, fallback) {
-  const line = String(content || "")
-    .split(/\r?\n/)
-    .map((value) => value.trim())
-    .find(Boolean);
-  return line ? line.replace(/^#\s*/, "") : fallback;
-}
-
-function escapeHtml(value) {
-  return String(value)
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;");
+function assertReadyInputContract(statePayload) {
+  return (
+    statePayload &&
+    statePayload.mode === "from-spec" &&
+    statePayload.analysisStatus === "INPUT_CONTRACT_READY" &&
+    statePayload.screenModel &&
+    Array.isArray(statePayload.screenModel.screens) &&
+    statePayload.screenModel.screens.length > 0
+  );
 }
 
-function inferStyleFromDesignSystem(designSystemContent) {
-  const content = String(designSystemContent || "");
-  return availableStyleNames().find((styleName) => new RegExp(`Preset:\\s*${styleName}\\b`, "i").test(content)) || DEFAULT_STYLE;
+function screenBriefRelativePath(screenId) {
+  return `docs/design/screens/${String(screenId || "")
+    .replace(/[^a-zA-Z0-9_-]+/g, "-")}_DESIGN_BRIEF.md`;
 }
 
-function prototypeContent({ style, briefContent, screenMapContent, designSystemContent, wireframeContents = [] }) {
-  const styleName = resolveStyleName(style);
-  const tokens = THEME_TOKENS[styleName];
-  const profile = inferDomainProfile({ briefContent, screenMapContent, designSystemContent, wireframeContents });
-
-  return `<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>${escapeHtml(profile.productName)} Prototype</title>
-  <style>
-    :root {
-      --bg: ${tokens.bg};
-      --surface: ${tokens.surface};
-      --text: ${tokens.text};
-      --muted: ${tokens.muted};
-      --primary: ${tokens.primary};
-      --accent: ${tokens.accent};
-      --border: ${tokens.border};
-      --shadow: ${tokens.shadow};
-    }
-    * { box-sizing: border-box; }
-    body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
-    .sdtk-prototype { width: min(1180px, calc(100vw - 32px)); margin: 0 auto; padding: 32px 0 56px; }
-    .prototype-header { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 22px; }
-    .brand { font-weight: 800; letter-spacing: 0; }
-    .style-pill, .status-pill { display: inline-flex; align-items: center; min-height: 28px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; color: var(--muted); background: var(--surface); font-size: 12px; font-weight: 750; }
-    .prototype-section { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); margin: 18px 0; overflow: hidden; }
-    .section-inner { padding: clamp(22px, 4vw, 44px); }
-    .eyebrow { margin: 0 0 8px; color: var(--primary); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: 0; }
-    h1, h2, h3, p { margin-top: 0; }
-    h1 { max-width: 860px; font-size: clamp(34px, 7vw, 72px); line-height: 1.02; margin-bottom: 16px; }
-    h2 { font-size: clamp(26px, 4vw, 40px); line-height: 1.12; margin-bottom: 12px; }
-    h3 { font-size: 16px; margin-bottom: 8px; }
-    .support { max-width: 700px; color: var(--muted); font-size: 18px; }
-    .button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
-    .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 8px; padding: 0 18px; font-weight: 800; text-decoration: none; }
-    .btn-primary { background: var(--primary); color: #fff; }
-    .btn-secondary { color: var(--text); border: 1px solid var(--border); background: transparent; }
-    .workflow-grid, .metric-grid, .dashboard-grid { display: grid; gap: 14px; }
-    .workflow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
-    .workflow-card, .metric-card, .item-card, .form-card, .empty-state { border: 1px solid var(--border); border-radius: 8px; padding: 16px; background: color-mix(in srgb, var(--surface) 92%, var(--bg)); }
-    .workflow-card strong, .metric-card strong { display: block; font-size: 24px; }
-    .onboarding-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.55fr); gap: 20px; align-items: start; }
-    .field { display: grid; gap: 6px; margin-bottom: 12px; }
-    .input-preview { min-height: 42px; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; padding: 0 12px; color: var(--muted); }
-    .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0; }
-    .dashboard-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
-    .item-card { display: grid; gap: 8px; }
-    .item-meta { display: flex; flex-wrap: wrap; gap: 8px; }
-    .status-pill { color: var(--primary); }
-    .empty-state { color: var(--muted); border-style: dashed; }
-    .style-premium-dashboard .metric-card strong { font-size: 30px; }
-    .style-bold-founder h1 { text-transform: uppercase; }
-    .style-warm-editorial h1, .style-warm-editorial h2 { font-family: Georgia, "Times New Roman", serif; }
-    @media (max-width: 780px) {
-      .prototype-header, .onboarding-layout { display: block; }
-      .workflow-grid, .metric-grid, .dashboard-grid { grid-template-columns: 1fr; }
-      h1 { font-size: 36px; }
-    }
-  </style>
-</head>
-<body>
-  <main class="sdtk-prototype style-${styleName}" data-style-preset="${styleName}">
-    <header class="prototype-header">
-      <div class="brand">${escapeHtml(profile.productName)}</div>
-      <span class="style-pill">Style preset: ${styleName}</span>
-    </header>
-
-    <section class="prototype-section section-landing" aria-labelledby="landing-title">
-      <div class="section-inner">
-        <p class="eyebrow">Landing</p>
-        <h1 id="landing-title">${escapeHtml(profile.promise)}</h1>
-        <p class="support">A demo-ready first screen with one clear CTA, a focused product promise, and a workflow preview that shows what happens after signup.</p>
-        <div class="button-row">
-          <a class="btn btn-primary" href="#onboarding">${escapeHtml(profile.primaryAction)}</a>
-          <a class="btn btn-secondary" href="#dashboard">${escapeHtml(profile.secondaryAction)}</a>
-        </div>
-        <div class="workflow-grid">
-          <div class="workflow-card"><strong>01</strong><span>Capture a ${escapeHtml(profile.itemSingular)} with status and context.</span></div>
-          <div class="workflow-card"><strong>02</strong><span>Record the next action before it slips.</span></div>
-          <div class="workflow-card"><strong>03</strong><span>Scan the dashboard and choose what to do next.</span></div>
-        </div>
-      </div>
-    </section>
-
-    <section class="prototype-section section-onboarding" id="onboarding" aria-labelledby="onboarding-title">
-      <div class="section-inner onboarding-layout">
-        <div>
-          <p class="eyebrow">Onboarding</p>
-          <h2 id="onboarding-title">Create a focused ${escapeHtml(profile.setupLabel.toLowerCase())} in one step.</h2>
-          <p class="support">The setup flow asks only for the minimum needed before the user can create the first ${escapeHtml(profile.itemSingular)}.</p>
-        </div>
-        <div class="form-card">
-          <div class="field"><strong>${escapeHtml(profile.setupNameLabel)}</strong><div class="input-preview">${escapeHtml(profile.setupNameValue)}</div></div>
-          <div class="field"><strong>Primary workflow</strong><div class="input-preview">${escapeHtml(profile.itemAction)}</div></div>
-          <a class="btn btn-primary" href="#dashboard">Continue</a>
-        </div>
-      </div>
-    </section>
-
-    <section class="prototype-section section-dashboard" id="dashboard" aria-labelledby="dashboard-title">
-      <div class="section-inner">
-        <p class="eyebrow">Dashboard</p>
-        <h2 id="dashboard-title">${escapeHtml(profile.dashboardTitle)}</h2>
-        <div class="metric-grid">
-          <div class="metric-card"><span>${escapeHtml(profile.metricLabels[0])}</span><strong>${escapeHtml(profile.metricValues[0])}</strong></div>
-          <div class="metric-card"><span>${escapeHtml(profile.metricLabels[1])}</span><strong>${escapeHtml(profile.metricValues[1])}</strong></div>
-          <div class="metric-card"><span>${escapeHtml(profile.metricLabels[2])}</span><strong>${escapeHtml(profile.metricValues[2])}</strong></div>
-          <div class="metric-card"><span>${escapeHtml(profile.metricLabels[3])}</span><strong>${escapeHtml(profile.metricValues[3])}</strong></div>
-        </div>
-        <div class="dashboard-grid">
-          <div class="form-card">
-            <h3>${escapeHtml(profile.itemAction)}</h3>
-            <div class="field"><strong>${escapeHtml(profile.itemNameLabel)}</strong><div class="input-preview">${escapeHtml(profile.itemNameValue)}</div></div>
-            <div class="field"><strong>${escapeHtml(profile.itemContextLabel)}</strong><div class="input-preview">${escapeHtml(profile.itemContextValue)}</div></div>
-            <a class="btn btn-primary" href="#dashboard">${escapeHtml(profile.saveAction)}</a>
-          </div>
-          <div class="item-card">
-            <h3>${escapeHtml(profile.itemNameValue)}</h3>
-            <div class="item-meta">
-              <span class="status-pill">${escapeHtml(profile.statusExample)}</span>
-              <span class="status-pill">${escapeHtml(profile.itemContextValue)}</span>
-            </div>
-            <p class="support">Keep context, status, and next action visible in the ${escapeHtml(profile.collectionSurface)}.</p>
-            <div class="empty-state">${escapeHtml(profile.emptyState)}</div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </main>
-</body>
-</html>
-`;
+function screenOutRelativePath(screenId) {
+  return `docs/design/prototype/screens/${String(screenId || "")
+    .replace(/[^a-zA-Z0-9_-]+/g, "-")}.html`;
 }
 
 function normalizeScreenRole(screen) {
-  const token = `${screen.screenId || ""} ${screen.title || ""}`.toLowerCase();
+  const token = `${screen && screen.screenId ? screen.screenId : ""} ${screen && screen.title ? screen.title : ""} ${
+    screen && screen.templateRole ? screen.templateRole : ""
+  } ${screen && screen.template_role ? screen.template_role : ""}`.toLowerCase();
   if (token.includes("home")) return "home";
-  if (token.includes("category")) return "category";
+  if (token.includes("category") || token.includes("catalog")) return "category";
   if (token.includes("product-detail") || token.includes("product detail") || token.includes("pdp")) return "product-detail";
   if (token.includes("search")) return "search";
-  if (token.includes("cart")) return "cart";
+  if (token.includes("cart") && !token.includes("checkout")) return "cart";
   if (token.includes("checkout")) return "checkout";
   if (token.includes("order-history") || token.includes("order history")) return "order-history";
   if (token.includes("order-detail") || token.includes("order detail")) return "order-detail";
   if (token.includes("account")) return "account-info";
-  if (token.includes("configurator") || token.includes("mode-b")) return "mode-b-configurator";
-  return screen.screenId || "screen";
-}
-
-function renderPrimitiveChips(primitiveNames) {
-  if (!Array.isArray(primitiveNames) || primitiveNames.length === 0) return "";
-  return `<div class="chip-row">${primitiveNames.map((item) => `<span class="chip">${escapeHtml(item)}</span>`).join("")}</div>`;
+  if (token.includes("configurator") || token.includes("bom") || token.includes("mode-b")) return "mode-b-configurator";
+  return screen && screen.screenId ? screen.screenId : "screen";
 }
 
-function renderStateChips(requiredStates) {
-  if (!Array.isArray(requiredStates) || requiredStates.length === 0) return "";
-  return `<div class="chip-row">${requiredStates
-    .slice(0, 3)
-    .map((item) => `<span class="chip" data-chip-type="state">${escapeHtml(item)}</span>`)
-    .join("")}</div>`;
+function requiredPrototypeInputs(paths, screens) {
+  return [
+    { relativePath: "docs/design/DESIGN_SYSTEM.md", filePath: paths.designSystemPath },
+    { relativePath: "docs/design/DESIGN_TOKENS.json", filePath: paths.designTokensPath },
+    ...screens.map((screen) => {
+      const relativePath = screenBriefRelativePath(screen.screenId);
+      return {
+        relativePath,
+        filePath: path.join(paths.projectPath, relativePath),
+      };
+    }),
+  ];
 }
 
-function screenBriefPath(paths, screenId) {
-  return path.join(paths.screensPath, `${screenId}_DESIGN_BRIEF.md`);
-}
-
-function screenBriefSidecarPath(paths, screenId) {
-  return path.join(paths.designScreenBriefsStatePath, `${screenId}.json`);
-}
-
-function readJsonSafe(filePath) {
-  try {
-    return JSON.parse(fs.readFileSync(filePath, "utf-8"));
-  } catch (_err) {
-    return null;
-  }
-}
-
-function loadHighFidelityContracts(paths, statePayload) {
-  const warnings = [];
-  if (!fs.existsSync(paths.componentPatternLibraryPath)) {
-    warnings.push("missing docs/design/COMPONENT_PATTERN_LIBRARY.md");
-  }
-  if (!fs.existsSync(paths.designTokensPath)) {
-    warnings.push("missing docs/design/DESIGN_TOKENS.json");
-  }
-  const missingBriefs = [];
-  const screenContracts = new Map();
-  for (const screen of statePayload.screenModel.screens) {
-    const briefPath = screenBriefPath(paths, screen.screenId);
-    if (!fs.existsSync(briefPath)) {
-      missingBriefs.push(screen.screenId);
-      continue;
-    }
-    const sidecarPath = screenBriefSidecarPath(paths, screen.screenId);
-    screenContracts.set(screen.screenId, {
-      briefPath,
-      briefContent: fs.readFileSync(briefPath, "utf-8"),
-      sidecar: fs.existsSync(sidecarPath) ? readJsonSafe(sidecarPath) : null,
-    });
-  }
-  if (missingBriefs.length > 0) {
-    warnings.push(`missing per-screen briefs for: ${missingBriefs.join(", ")}`);
-  }
-  if (warnings.length > 0) {
-    return { ready: false, warnings, screenContracts: new Map(), tokens: null };
-  }
-  const tokens = readJsonSafe(paths.designTokensPath);
-  if (!tokens || typeof tokens !== "object") {
-    return { ready: false, warnings: ["invalid docs/design/DESIGN_TOKENS.json"], screenContracts: new Map(), tokens: null };
-  }
-  return { ready: true, warnings: [], screenContracts, tokens };
-}
-
-function managedPrototypeTargets(paths, statePayload, mode) {
-  const targets = [{ relativePath: "docs/design/prototype/index.html", filePath: paths.prototypeIndexPath }];
-  if (
-    mode === "multi" &&
-    statePayload &&
-    statePayload.screenModel &&
-    Array.isArray(statePayload.screenModel.screens)
-  ) {
-    targets.push(
-      { relativePath: "docs/design/prototype/assets/prototype.css", filePath: paths.prototypeCssPath },
-      { relativePath: "docs/design/prototype/assets/prototype.js", filePath: paths.prototypeJsPath },
-      ...statePayload.screenModel.screens.map((screen) => ({
-        relativePath: `docs/design/prototype/screens/${screenFileName(screen)}`,
-        filePath: path.join(paths.prototypeScreensPath, screenFileName(screen)),
-      }))
-    );
-  }
-  return targets;
-}
-
-function tokenOrDefault(tokens, keyPath, fallback) {
-  const value = keyPath.reduce((obj, key) => (obj && Object.prototype.hasOwnProperty.call(obj, key) ? obj[key] : undefined), tokens);
-  return value == null ? fallback : value;
-}
-
-function renderHighFidelityScreen(screenRole, title) {
-  switch (screenRole) {
-    case "home":
-      return `
-      <section class="hf-hero panel"><h3>${escapeHtml(title)} hero</h3><p>Category-first commerce landing with featured products and guided CTA.</p><div class="button-row"><a class="btn btn-primary" href="#">Start purchase</a><a class="btn btn-secondary" href="#">Open configurator</a></div></section>
-      <section class="hf-feature-grid"><article class="panel">Category range</article><article class="panel">Featured products</article><article class="panel">Configurator quick start</article></section>`;
-    case "category":
-      return `<section class="hf-split"><aside class="panel">Filter sidebar</aside><div class="panel"><h3>Product grid</h3><div class="hf-card-grid"><article class="product-card">Card A</article><article class="product-card">Card B</article><article class="product-card">Card C</article></div></div></section>`;
-    case "product-detail":
-      return `<section class="hf-split"><div class="panel"><h3>Gallery and spec area</h3><table class="spec-table"><tr><th>Spec</th><th>Value</th></tr><tr><td>Voltage</td><td>High pressure</td></tr></table></div><aside class="panel"><h3>Price and quantity</h3><div class="qty-stepper"><button>-</button><span>1</span><button>+</button></div><a class="btn btn-primary" href="#">Add to cart</a></aside></section>`;
-    case "search":
-      return `<section class="panel"><h3>Search and result state</h3><div class="search-toolbar"><input aria-label="Search query" placeholder="Search product"><button class="btn btn-primary">Search</button></div><div class="hf-list"><article class="result-row">Result item</article><article class="result-row no-result">No-result state</article></div></section>`;
-    case "cart":
-      return `<section class="hf-split"><div class="panel"><h3>Cart table</h3><table class="cart-table"><tr><th>Item</th><th>Qty</th><th>Total</th></tr><tr><td>Product</td><td><div class="qty-stepper"><button>-</button><span>2</span><button>+</button></div></td><td>100000</td></tr></table></div><aside class="panel"><h3>Summary</h3><p>Subtotal, tax, total</p><a class="btn btn-primary" href="#">Checkout</a></aside></section>`;
-    case "checkout":
-      return `<section class="panel"><ol class="checkout-stepper"><li>Information</li><li>Confirmation</li><li>Complete</li></ol><div class="hf-split"><div class="panel"><h3>Checkout form</h3><div class="field-row">Recipient / Address / Phone</div></div><aside class="panel"><h3>Summary card</h3><a class="btn btn-primary" href="#">Place order</a></aside></div></section>`;
-    case "order-history":
-      return `<section class="panel"><h3>Order history list</h3><div class="hf-list"><article class="result-row">Order #001 / paid</article><article class="result-row">Order #002 / shipping</article></div></section>`;
-    case "order-detail":
-      return `<section class="hf-split"><div class="panel"><h3>Order timeline</h3><ul class="timeline"><li>Placed</li><li>Paid</li><li>Shipping</li></ul></div><aside class="panel"><h3>Detail summary</h3><p>Delivery and payment snapshot</p></aside></section>`;
-    case "account-info":
-      return `<section class="hf-split"><aside class="panel">Account sidebar</aside><div class="panel"><h3>View or edit form</h3><div class="field-row">Company / Contact / Email / Phone</div><a class="btn btn-primary" href="#">Save profile</a></div></section>`;
-    case "mode-b-configurator":
-      return `<section class="panel"><h3>Configurator wizard</h3><ol class="checkout-stepper"><li>Project</li><li>Assembly</li><li>Construction</li><li>Review</li></ol><div class="hf-split"><div class="panel"><h4>Preview panel</h4><p>Derived material preview</p></div><div class="panel"><h4>BOM table</h4><table class="cart-table"><tr><th>Material</th><th>Qty</th><th>Action</th></tr><tr><td>Cable</td><td>4</td><td><button>Exclude</button></td></tr></table><div class="button-row"><a class="btn btn-secondary" href="#">Recalculate</a><a class="btn btn-primary" href="#">Add BOM to cart</a></div></div></div></section>`;
-    default:
-      return `<section class="panel"><h3>Screen contract section</h3><p>Render screen-specific layout from brief + component contract.</p></section>`;
-  }
+function buildPrototypeManifest(screens) {
+  return {
+    schema: "sdtk.design.prototype-manifest.v1",
+    screens: screens.map((screen) => ({
+      screenId: screen.screenId,
+      title: screen.title || screen.screenId,
+      role: normalizeScreenRole(screen),
+      briefPath: screenBriefRelativePath(screen.screenId),
+      outPath: screenOutRelativePath(screen.screenId),
+    })),
+  };
 }
 
-function highFidelityMultiScreenPrototypeContent({ style, statePayload, contractBundle }) {
-  const styleName = resolveStyleName(style);
-  const tokens = contractBundle.tokens || {};
-  const screens = statePayload.screenModel.screens;
-  const profileSelection = statePayload.profileSelection || null;
-  const mappedRefs = statePayload.referenceMap && typeof statePayload.referenceMap.mappedCount === "number" ? statePayload.referenceMap.mappedCount : 0;
-  const sections = screens
+function launcherHtml(manifest) {
+  const links = manifest.screens
     .map((screen) => {
-      const screenRole = normalizeScreenRole(screen);
-      const contract = contractBundle.screenContracts.get(screen.screenId);
-      const sidecar = contract && contract.sidecar ? contract.sidecar : null;
-      const stateChips = renderStateChips(sidecar && Array.isArray(sidecar.required_states) ? sidecar.required_states : screen.requiredStates);
-      return `
-      <section class="prototype-section screen-${escapeHtml(screen.screenId)}" id="screen-${escapeHtml(screen.screenId)}" aria-labelledby="title-${escapeHtml(screen.screenId)}">
-        <div class="section-inner">
-          <div class="section-header">
-            <p class="eyebrow">${escapeHtml(screenRole.replace(/-/g, " "))}</p>
-            <h2 id="title-${escapeHtml(screen.screenId)}">${escapeHtml(screen.title)}</h2>
-            ${screen.route ? `<p class="support">Route: <code>${escapeHtml(screen.route)}</code></p>` : ""}
-            <p class="support">Source brief: <code>${escapeHtml(path.basename(contract.briefPath))}</code></p>
-          </div>
-          ${stateChips}
-          ${renderHighFidelityScreen(screenRole, screen.title)}
-        </div>
-      </section>`;
+      const href = toPosix(path.relative("docs/design/prototype", screen.outPath));
+      return `      <article class="screen-card">
+        <p class="role">${escapeHtml(screen.role)}</p>
+        <h2>${escapeHtml(screen.title)}</h2>
+        <p><code>${escapeHtml(screen.screenId)}</code></p>
+        <a href="${escapeHtml(href)}">Open generated screen</a>
+      </article>`;
     })
-    .join("");
+    .join("\n");
 
   return `<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>SDTK-DESIGN High-Fidelity Prototype</title>
+  <title>SDTK-DESIGN Prototype Launcher</title>
   <style>
-    :root { --bg:${tokenOrDefault(tokens, ["color", "surfaceAlt"], "#F5F7FB")}; --surface:${tokenOrDefault(tokens, ["color", "surface"], "#FFFFFF")}; --text:${tokenOrDefault(tokens, ["color", "textPrimary"], "#111827")}; --muted:${tokenOrDefault(tokens, ["color", "textMuted"], "#64748B")}; --primary:${tokenOrDefault(tokens, ["color", "accentPrimary"], "#0F766E")}; --accent:${tokenOrDefault(tokens, ["color", "accentSecondary"], "#2563EB")}; --border:${tokenOrDefault(tokens, ["color", "border"], "#D8E0EA")}; --shadow:0 18px 40px rgba(15,23,42,0.10); }
-    * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
-    .shell { width:min(1240px, calc(100vw - 24px)); margin:0 auto; padding:24px 0 48px; }
-    .topbar { position:sticky; top:0; z-index:4; background:color-mix(in srgb, var(--bg) 92%, var(--surface)); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); padding:14px; margin-bottom:18px; }
-    .topline { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
-    .meta { color:var(--muted); font-size:12px; font-weight:700; }
-    .nav { display:flex; gap:8px; overflow:auto; margin-top:10px; padding-bottom:4px; } .nav a { text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:6px 10px; white-space:nowrap; color:var(--text); background:var(--surface); font-size:12px; font-weight:700; }
-    .prototype-section { background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); margin:14px 0; } .section-inner { padding:20px; }
-    .eyebrow { margin:0 0 6px; color:var(--primary); font-size:12px; font-weight:800; text-transform:uppercase; } h2,h3,h4,p { margin-top:0; } h2 { margin-bottom:8px; font-size:28px; } .support { color:var(--muted); margin-bottom:10px; }
-    .chip-row { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; } .chip { border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:12px; background:color-mix(in srgb, var(--surface) 92%, var(--bg)); } .chip-state { color:var(--primary); border-color:color-mix(in srgb, var(--primary) 35%, var(--border)); }
-    .panel { border:1px solid var(--border); border-radius:8px; padding:14px; background:color-mix(in srgb, var(--surface) 95%, var(--bg)); }
-    .hf-split { display:grid; grid-template-columns:minmax(220px,0.35fr) minmax(0,1fr); gap:12px; }
-    .hf-feature-grid, .hf-card-grid { display:grid; gap:12px; grid-template-columns:repeat(3, minmax(0, 1fr)); }
-    .product-card, .result-row { border:1px solid var(--border); border-radius:8px; padding:10px; background:var(--surface); }
-    .search-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; } input { min-height:40px; border:1px solid var(--border); border-radius:8px; padding:0 12px; min-width:220px; }
-    .button-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; } .btn { display:inline-flex; min-height:40px; align-items:center; justify-content:center; border-radius:8px; padding:0 14px; text-decoration:none; font-weight:800; border:1px solid transparent; } .btn-primary { background:var(--primary); color:#fff; } .btn-secondary { border-color:var(--border); color:var(--text); background:transparent; }
-    .spec-table, .cart-table { width:100%; border-collapse:collapse; font-size:13px; } .spec-table th, .spec-table td, .cart-table th, .cart-table td { border-bottom:1px solid var(--border); text-align:left; padding:8px 6px; }
-    .qty-stepper { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:8px; padding:4px 8px; }
-    .checkout-stepper { display:flex; gap:10px; list-style:none; padding:0; margin:0 0 12px; } .checkout-stepper li { border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; }
-    .timeline { margin:0; padding-left:16px; } .field-row { border:1px dashed var(--border); border-radius:8px; padding:10px; color:var(--muted); }
-    @media (max-width: 920px) { .hf-split,.hf-feature-grid,.hf-card-grid { grid-template-columns:1fr; } h2 { font-size:24px; } }
+    :root { --bg:#f7f8fa; --surface:#ffffff; --text:#111827; --muted:#64748b; --border:#d8e0ea; --accent:#0f766e; }
+    * { box-sizing:border-box; }
+    body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
+    main { width:min(1120px, calc(100vw - 32px)); margin:0 auto; padding:32px 0 56px; }
+    header { margin-bottom:24px; }
+    h1 { margin:0 0 8px; font-size:32px; line-height:1.15; }
+    .summary { margin:0; color:var(--muted); max-width:72ch; }
+    .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
+    .screen-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px; }
+    .role { color:var(--accent); font-size:12px; font-weight:800; margin:0 0 6px; text-transform:uppercase; }
+    h2 { margin:0 0 8px; font-size:18px; }
+    code { color:var(--muted); }
+    a { display:inline-flex; min-height:40px; align-items:center; margin-top:10px; color:var(--accent); font-weight:750; }
   </style>
 </head>
 <body>
-  <main class="shell style-${styleName}" data-style-preset="${styleName}">
-    <header class="topbar">
-      <div class="topline">
-        <strong>SDTK-DESIGN high-fidelity prototype</strong>
-        <span class="meta">screens=${screens.length} | profile=${escapeHtml(profileSelection || "none")} | mapped references=${mappedRefs}</span>
-      </div>
-      <nav class="nav" aria-label="Screen navigation">
-        ${screens.map((screen) => `<a href="#screen-${escapeHtml(screen.screenId)}">${escapeHtml(screen.title)}</a>`).join("")}
-      </nav>
+  <main>
+    <header>
+      <h1>Prototype generation manifest ready</h1>
+      <p class="summary">This launcher lists the screen HTML files owned by the running agent via the design-prototype skill. The CLI emitted the manifest and did not generate screen HTML.</p>
     </header>
-    ${sections}
+    <section class="grid" aria-label="Prototype screens">
+${links}
+    </section>
   </main>
 </body>
 </html>
 `;
 }
 
-function multiScreenPrototypeContent({ style, statePayload }) {
-  const styleName = resolveStyleName(style);
-  const tokens = THEME_TOKENS[styleName];
-  const screens = statePayload.screenModel.screens;
-  const profileSelection = statePayload.profileSelection || null;
-  const profilePrimitives = statePayload.profilePrimitives || null;
-  const mappedRefs = statePayload.referenceMap && typeof statePayload.referenceMap.mappedCount === "number" ? statePayload.referenceMap.mappedCount : 0;
-
-  const sections = screens
-    .map((screen) => {
-      const screenRole = normalizeScreenRole(screen);
-      const primitiveHints =
-        profilePrimitives &&
-        profilePrimitives.screenRoleHints &&
-        Array.isArray(profilePrimitives.screenRoleHints[screenRole])
-          ? profilePrimitives.screenRoleHints[screenRole]
-          : [];
-      const majorSections = Array.isArray(screen.majorSections) && screen.majorSections.length > 0 ? screen.majorSections : ["Primary content", "Supporting panel"];
-      return `
-      <section class="prototype-section screen-${escapeHtml(screen.screenId)}" id="screen-${escapeHtml(screen.screenId)}" aria-labelledby="title-${escapeHtml(screen.screenId)}">
-        <div class="section-inner">
-          <div class="section-header">
-            <p class="eyebrow">${escapeHtml(screenRole.replace(/-/g, " "))}</p>
-            <h2 id="title-${escapeHtml(screen.screenId)}">${escapeHtml(screen.title)}</h2>
-            ${screen.route ? `<p class="support">Route: <code>${escapeHtml(screen.route)}</code></p>` : ""}
-            ${screen.purpose ? `<p class="support">${escapeHtml(screen.purpose)}</p>` : ""}
-          </div>
-          ${renderPrimitiveChips(primitiveHints)}
-          ${renderStateChips(screen.requiredStates)}
-          <div class="screen-grid">
-            <article class="panel">
-              <h3>Main layout</h3>
-              <ul>${majorSections.slice(0, 5).map((item) => `<li>${escapeHtml(item)}</li>`).join("")}</ul>
-            </article>
-            <article class="panel">
-              <h3>Primary action</h3>
-              <p>${escapeHtml(screen.primaryAction || "Primary CTA from explicit input")}</p>
-              <div class="button-row"><a class="btn btn-primary" href="#screen-${escapeHtml(screen.screenId)}">Trigger CTA</a></div>
-            </article>
-          </div>
-        </div>
-      </section>`;
-    })
-    .join("");
-
-  return `<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>SDTK-DESIGN Multi-Screen Prototype</title>
-  <style>
-    :root { --bg:${tokens.bg}; --surface:${tokens.surface}; --text:${tokens.text}; --muted:${tokens.muted}; --primary:${tokens.primary}; --accent:${tokens.accent}; --border:${tokens.border}; --shadow:${tokens.shadow}; }
-    * { box-sizing:border-box; }
-    body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
-    .shell { width:min(1200px, calc(100vw - 24px)); margin:0 auto; padding:24px 0 44px; }
-    .topbar { position:sticky; top:0; z-index:4; background:color-mix(in srgb, var(--bg) 92%, var(--surface)); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); padding:14px; margin-bottom:18px; }
-    .topline { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
-    .meta { color:var(--muted); font-size:12px; font-weight:700; }
-    .nav { display:flex; gap:8px; overflow:auto; margin-top:10px; padding-bottom:4px; }
-    .nav a { text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:6px 10px; white-space:nowrap; color:var(--text); background:var(--surface); font-size:12px; font-weight:700; }
-    .prototype-section { background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); margin:14px 0; }
-    .section-inner { padding:20px; }
-    .eyebrow { margin:0 0 6px; color:var(--primary); font-size:12px; font-weight:800; text-transform:uppercase; }
-    h2,h3,p { margin-top:0; }
-    h2 { margin-bottom:8px; font-size:28px; }
-    .support { color:var(--muted); margin-bottom:10px; }
-    .chip-row { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
-    .chip { border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:12px; background:color-mix(in srgb, var(--surface) 92%, var(--bg)); }
-    .chip-state { color:var(--primary); border-color:color-mix(in srgb, var(--primary) 35%, var(--border)); }
-    .screen-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:12px; }
-    .panel { border:1px solid var(--border); border-radius:8px; padding:14px; }
-    .panel ul { margin:0; padding-left:18px; }
-    .btn { display:inline-flex; min-height:40px; align-items:center; justify-content:center; border-radius:8px; padding:0 14px; text-decoration:none; font-weight:800; }
-    .btn-primary { background:var(--primary); color:#fff; }
-    @media (max-width: 820px) { .screen-grid { grid-template-columns:1fr; } h2 { font-size:24px; } }
-  </style>
-</head>
-<body>
-  <main class="shell style-${styleName}" data-style-preset="${styleName}">
-    <header class="topbar">
-      <div class="topline">
-        <strong>SDTK-DESIGN multi-screen prototype</strong>
-        <span class="meta">screens=${screens.length} | profile=${escapeHtml(profileSelection || "none")} | mapped references=${mappedRefs}</span>
-      </div>
-      <nav class="nav" aria-label="Screen navigation">
-        ${screens.map((screen) => `<a href="#screen-${escapeHtml(screen.screenId)}">${escapeHtml(screen.title)}</a>`).join("")}
-      </nav>
-    </header>
-    ${sections}
-  </main>
-</body>
-</html>
-`;
+function managedPrototypeTargets(paths) {
+  return [
+    { relativePath: "docs/design/prototype/.manifest.json", filePath: paths.prototypeManifestPath },
+    { relativePath: "docs/design/prototype/index.html", filePath: paths.prototypeIndexPath },
+  ];
 }
 
-function runDesignPrototype({ projectPath, force = false, style }) {
-  const explicitStyleName = typeof style === "string" && style.trim() ? resolveStyleName(style) : null;
+function runDesignPrototype({ projectPath, force = false }) {
   const resolvedProjectPath = resolveProjectPath(projectPath || process.cwd());
   if (!fs.existsSync(resolvedProjectPath) || !fs.statSync(resolvedProjectPath).isDirectory()) {
     throw new ValidationError(`--project-path is not a valid directory: ${resolvedProjectPath}. No project files were changed.`);
@@ -625,152 +194,70 @@ function runDesignPrototype({ projectPath, force = false, style }) {
 
   const paths = describeDesignPaths(resolvedProjectPath);
   const inputContractState = readInputContractState(paths);
-  const canUseMultiScreen =
-    inputContractState &&
-    inputContractState.mode === "from-spec" &&
-    inputContractState.analysisStatus === "INPUT_CONTRACT_READY" &&
-    inputContractState.screenModel &&
-    Array.isArray(inputContractState.screenModel.screens) &&
-    inputContractState.screenModel.screens.length > 0;
-  const missing = canUseMultiScreen ? [] : requiredArtifactTargets(paths).filter((target) => !fs.existsSync(target.filePath));
+  if (!assertReadyInputContract(inputContractState)) {
+    throw new ValidationError(
+      "sdtk-design prototype requires .sdtk/design/START_INPUT_STATE.json with analysisStatus=INPUT_CONTRACT_READY. Run sdtk-design start --from-spec with explicit design inputs first. No project files were changed."
+    );
+  }
+
+  const screens = inputContractState.screenModel.screens;
+  const missing = requiredPrototypeInputs(paths, screens).filter((target) => !fs.existsSync(target.filePath));
   if (missing.length > 0) {
     const list = missing.map((target) => target.relativePath).join(", ");
-    throw new ValidationError(`Missing required design artifacts: ${list}. Run sdtk-design start --idea "<idea>" first. No project files were changed.`);
+    throw new ValidationError(`Missing required prototype generation artifacts: ${list}. No project files were changed.`);
   }
-  const prototypeMode = resolvePrototypeMode(canUseMultiScreen);
-  const existingManagedPrototype = managedPrototypeTargets(paths, inputContractState, prototypeMode).filter((target) =>
-    fs.existsSync(target.filePath)
-  );
+
+  const existingManagedPrototype = managedPrototypeTargets(paths).filter((target) => fs.existsSync(target.filePath));
   if (existingManagedPrototype.length > 0 && !force) {
     throw new ValidationError(
-      `docs/design/prototype/index.html already exists. Managed prototype output already exists: ${existingManagedPrototype
+      `Managed prototype launcher output already exists: ${existingManagedPrototype
         .map((target) => target.relativePath)
-        .join(", ")}. Re-run with --force to replace managed prototype outputs.`
+        .join(", ")}. Re-run with --force to replace manifest and launcher. Screen HTML files are never overwritten by this command.`
     );
   }
 
-  const designSystemContent = fs.existsSync(paths.designSystemPath) ? fs.readFileSync(paths.designSystemPath, "utf-8") : "";
-  const styleName = explicitStyleName || (designSystemContent ? inferStyleFromDesignSystem(designSystemContent) : DEFAULT_STYLE);
-  const wireframeContents = canUseMultiScreen
-    ? []
-    : REQUIRED_ARTIFACTS
-        .filter(([relativePath]) => relativePath.startsWith("docs/design/wireframes/"))
-        .map(([, key]) => {
-          const filePath =
-            key === "landingWireframePath"
-              ? wireframePath(paths, "LANDING.md")
-              : key === "onboardingWireframePath"
-                ? wireframePath(paths, "ONBOARDING.md")
-                : wireframePath(paths, "DASHBOARD.md");
-          return fs.readFileSync(filePath, "utf-8");
-        });
-  let renderResult = null;
-  let content = null;
-  let bundle = null;
-  if (canUseMultiScreen) {
-    bundle = loadHighFidelityContracts(paths, inputContractState);
-    if (prototypeMode === "multi" && bundle.ready) {
-      renderResult = renderMultiPagePrototype({
-        paths,
-        statePayload: inputContractState,
-        contractBundle: bundle,
-        styleName,
-      });
-    } else if (bundle.ready) {
-      content = highFidelityMultiScreenPrototypeContent({
-        style: styleName,
-        statePayload: inputContractState,
-        contractBundle: bundle,
-      });
-    } else {
-      content = multiScreenPrototypeContent({
-        style: styleName,
-        statePayload: inputContractState,
-      });
-    }
-  } else {
-    content = prototypeContent({
-      style: styleName,
-      briefContent: fs.readFileSync(paths.designBriefPath, "utf-8"),
-      screenMapContent: fs.readFileSync(paths.screenMapPath, "utf-8"),
-      designSystemContent,
-      wireframeContents,
-    });
-  }
-
-  if (!renderResult) {
-    fs.mkdirSync(path.dirname(paths.prototypeIndexPath), { recursive: true });
-    fs.writeFileSync(paths.prototypeIndexPath, content, "utf-8");
-  }
+  const manifest = buildPrototypeManifest(screens);
+  fs.mkdirSync(paths.prototypePath, { recursive: true });
+  fs.mkdirSync(paths.prototypeScreensPath, { recursive: true });
+  fs.writeFileSync(paths.prototypeManifestPath, `${JSON.stringify(manifest, null, 2)}\n`, "utf-8");
+  fs.writeFileSync(paths.prototypeIndexPath, launcherHtml(manifest), "utf-8");
 
   return {
     projectPath: resolvedProjectPath,
+    relativeManifestPath: "docs/design/prototype/.manifest.json",
     relativePrototypePath: "docs/design/prototype/index.html",
+    screenCount: manifest.screens.length,
     forced: Boolean(force),
-    style: styleName,
-    mode: renderResult
-      ? renderResult.mode
-      : canUseMultiScreen
-        ? bundle && bundle.ready
-          ? "high-fidelity-single-file"
-          : "multi-screen"
-        : "simple",
-    screenCount: canUseMultiScreen ? inputContractState.screenModel.screens.length : 3,
-    warnings: canUseMultiScreen && bundle ? bundle.warnings : [],
-    generatedPages: renderResult ? renderResult.screenPages : [],
-    densityReport: renderResult ? renderResult.densityReport : null,
   };
 }
 
 function cmdPrototype(args) {
-  const { flags } = parseFlags(args || [], PROTOTYPE_FLAG_DEFS);
+  const { flags, positionals } = parseFlags(args || [], PROTOTYPE_FLAG_DEFS);
   if (flags.help) return cmdPrototypeHelp();
+  if (positionals.length > 0) {
+    throw new ValidationError(
+      `Unsupported prototype argument: ${positionals.join(" ")}. Use sdtk-design prototype [--project-path <path>] [--force]. No project files were changed.`
+    );
+  }
 
   const result = runDesignPrototype({
     projectPath: flags["project-path"],
     force: Boolean(flags.force),
-    style: flags.style,
   });
 
+  console.log(`[design] Wrote ${result.relativeManifestPath}: ${result.projectPath}`);
   console.log(`[design] Wrote ${result.relativePrototypePath}: ${result.projectPath}`);
-  console.log(`[design] Style: ${result.style}`);
-  console.log(`[design] Mode: ${result.mode} (${result.screenCount} screen(s))`);
-  if (result.densityReport) {
-    if (result.densityReport.mode === "bytes") {
-      console.log("[design] Density mode: bytes (deprecated rollback; report shape only, no filler emission)");
-      console.log(
-        `[design] Density: ${result.densityReport.pass ? "PASS" : "FAIL"} total=${result.densityReport.totalBytes}/${result.densityReport.minTotalBytes} bytes`
-      );
-      for (const page of result.densityReport.pages) {
-        console.log(`[design] Density page: ${page.screenId} ${page.byteLength}/${page.minBytes} bytes ${page.pass ? "PASS" : "FAIL"}`);
-      }
-    } else {
-      const aggregate = result.densityReport.aggregate || {};
-      console.log(
-        `[design] Density: ${result.densityReport.pass ? "PASS" : "FAIL"} mode=semantic sections=${aggregate.sectionCount || 0} components=${aggregate.componentCount || 0} dataSlots=${aggregate.dataSlotCount || 0} states=${aggregate.stateCount || 0}`
-      );
-      for (const page of result.densityReport.pages) {
-        const missing = Array.isArray(page.findings) && page.findings.length > 0 ? ` (${page.findings.join("; ")})` : "";
-        console.log(
-          `[design] Density page: ${page.screenId} sections=${page.sectionCount} components=${page.componentCount} dataSlots=${page.dataSlotCount} states=${page.stateCount} ${page.pass ? "PASS" : "FAIL"}${missing}`
-        );
-      }
-    }
-  }
-  if (Array.isArray(result.warnings) && result.warnings.length > 0) {
-    console.log(`[design] Contract fallback: ${result.warnings.join("; ")}`);
-  }
+  console.log(`[design] Mode: manifest-only (${result.screenCount} screen(s))`);
   console.log(`[design] Overwrite: ${result.forced ? "enabled by --force" : "not needed"}`);
-  console.log("[design] Prototype mode: static HTML/CSS preview only.");
+  console.log("[design] Screen HTML generation is owned by the design-prototype skill and running agent.");
   console.log("[design] No app code outside docs/design/prototype, server, network, .sdtk/atlas, or SDTK-WIKI output was modified.");
-  console.log("[design] Next: sdtk-design review --artifact docs/design/prototype/index.html");
-  return result.densityReport && result.densityReport.mode !== "bytes" && !result.densityReport.pass ? 1 : 0;
+  console.log("[design] Next: run the design-prototype skill, then sdtk-design review --artifact docs/design/prototype/index.html");
+  return 0;
 }
 
 module.exports = {
+  buildPrototypeManifest,
   cmdPrototype,
   cmdPrototypeHelp,
-  inferStyleFromDesignSystem,
-  prototypeContent,
   runDesignPrototype,
 };