Design Interactive Preview 是一个交互式视觉对比技能，目标是在浏览器中并排展示多个设计方向，帮助用户选择。
适用用途 该技能用于当设计文档（02-design.md）包含 2 个以上 Design Alternatives，且 artifact_type 为软件（有 UI）、视觉或 deck 时，生成本轮对比 HTML 页面，让用户在浏览器中查看并选择设计方向。
入口与出口 入口条件：02-design.md 包含 2+ 个 Design Alternatives，且 artifact_type 为 software（有 UI）、visual 或 deck。 出口：用户已做出选择，02-design.md 已精炼为选定方向，design-selection.json 已写入。 前置加载：CANON.md + scripts/design-preview.mjs + references/design-best-practices.md + references/design-inspiration-catalog.md + 项目根 DESIGN.md（如果存在）。 输出路径：选择完成后回到 design-workflow-design Step 5 进行最终批准，批准后进入 build-content-writing 或 build-content-layout。
主要能力与流程
- 读取 02-design.md 中的 Design Alternatives 区段，确认有 2-3 个 alternative，根据 artifact_type 确定对比维度和轮次。
- 生成本轮对比 HTML（design-comparison.html）到 feature 目录。页面包含轮次指示、当前对比维度标签、2-3 列并排卡片（名称、核心差异、设计要点、优势、劣势、Select 按钮）以及已选摘要栏。
- 启动本地 HTTP 服务：node scripts/design-preview.mjs <feature-dir> &，捕获 DESIGN_PREVIEW_PORT=<port> 获取端口号。
- 打开浏览器（优先 open http://localhost:<port>，其次 MCP 浏览器工具 navigate_page，最后手动告知 URL）。
- 等待用户选择，支持文件轮询模式（每 5 秒读取 design-selection.json）和 CLI 确认模式。
- 处理选择结果：如有下一轮则更新 HTML 并 POST /api/next-round 回到 Step 2；如无下一轮或用户说“就这个了”则进入下一步。
- 精炼 02-design.md：选定 alternative 的设计决策提升为主设计内容，未选方案移入 Alternatives Considered 并附理由，在 Selection Record 中记录每轮选择，确保证据链完整。
- 关闭服务（kill 或 pkill）。
技术要求 所有 CSS/JS 内联，零外部依赖；CSS Grid 或 Flexbox 并排布局；系统字体栈；响应式（桌面 2-3 列，移动端堆叠）；暗色/亮色均可用（尊重 prefers-color-scheme）。交互逻辑：点击 Select 按钮后 POST /api/selection 发送 { round, dimension, selected, alternatives }，成功后选中卡片高亮、其他卡片淡出，页面顶部显示选择结果，已选摘要栏更新。视觉示意用 CSS/SVG：software + UI 用 CSS Grid/Flexbox 模拟线框图；visual 用内联 SVG 或 CSS 渐变；deck 用缩略卡片序列。
对比维度 software + UI：Round 1 维度为整体布局 + 交互模式；Round 2+ 为布局细化 / 配色 / 字体 / 组件风格 / 状态流转。 visual：Round 1 为构图 + 色彩方向；Round 2+ 为色板 / 层级 / 留白 / 视觉元素。 deck：Round 1 为叙事结构 + 页面节奏；Round 2+ 为单页排版 / 视觉风格 / 图表方式。
降级路径 Node.js 不可用：用 MCP 浏览器工具打开 file:// URL，evaluate_script 读取 window.__selection。 MCP 浏览器不可用（Codex CLI）：CLI 文本对比，AskUserQuestion + preview 字段渲染 ASCII 对比。 两者都不可用：纯文本 AskUserQuestion 逐项对比。 降级时需在 02-design.md 的 Selection Record 中注明 Preview mode 与原因。
限制与不适用场景 artifact_type 为 document / article（文本产物，视觉对比价值低）。 software 纯后端、纯脚本、纯迁移、纯 CI。 02-design.md 只有一个设计方向（没有 alternatives）。 Node.js 不可用且 MCP 浏览器工具也不可用（降级到 CLI 文本对比）。
验证与红旗 验证清单包括：HTTP 服务已启动并返回端口号、design-comparison.html 已生成、页面正确渲染、Select 按钮可触发 POST、design-selection.json 在选择后写入、Agent 成功读取选择结果、02-design.md 已精炼、未选方案已移入 Alternatives Considered、服务已关闭。 红旗（STOP）包括：用户在浏览器中选了方案但 design-selection.json 未写入；选定方案的设计决策无法追溯到 Adopt 列表；HTML 生成失败或浏览器无法打开且降级路径也不可用；服务启动后端口无法获取；多轮对比陷入循环（超过 5 轮）。
Adopt / Reject 示例 Adopt：CSS Grid 并排布局（企业产品模式）；系统字体栈（官方系统/平台规则）；多轮逐层收窄（方法/理论/风格流派）。 Reject：外部 CSS 框架（零依赖约束）；单页全部维度同时对比（超出用户认知带宽）。
常见说辞 “浏览器里选了就算批准了”——错，视觉对比只是方向选择，Phase 5 还要确认证据质量和完整性。 “不用多轮，一轮就够了”——可以，用户可在任意轮次说“就这个了”跳过后续对比。 “HTML 太简陋了不好看”——对比页面目的是让用户区分方向差异，线框级足够。 “直接在终端里看就行了”——对文本产物可以，对 UI/visual/deck，视觉对比效率高一个数量级。