Design Exploration

/** * Generate HTML comparison board for user review of design variants. * Opens in headed Chrome via $B goto. User picks favorite, rates, comments, submits. * Agent reads feedback from hidden DOM element. * * Design spec: single column, full-width mockups, APP UI aesthetic. */ import fs from "fs"; import path from "path"; export interface CompareOptions { images: string[]; output: string; } /** * Generate the comparison board HTML page. */ export function generateCompareHtml(images: string[]): string { const variantLabels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; const variantCards = images.map((imgPath, i) => { const label = variantLabels[i] || `${i + 1}`; // Embed images as base64 data URIs for self-contained HTML const imgData = fs.readFileSync(imgPath).toString("base64"); const ext = path.extname(imgPath).slice(1) || "png"; return `

Option ${label} Design direction ${label}

Pick

${[1,2,3,4,5].map(n => `★`).join("")}

`; }).join("\n"); return ` Design Exploration

${variantCards}

Overall direction

e.g. "Use A's layout with C's fox icon" or "Make it more minimal" or "I want the problem statement text but bigger"

Want to explore more?

Feedback submitted! Return to your coding agent.

`; } /** * Compare command: generate comparison board HTML from image files. */ export function compare(options: CompareOptions): void { const html = generateCompareHtml(options.images); const outputDir = path.dirname(options.output); fs.mkdirSync(outputDir, { recursive: true }); fs.writeFileSync(options.output, html); console.log(JSON.stringify({ outputPath: options.output, variants: options.images.length })); }