prototype

Prototype 可将设计令牌和页面规格转化为可查看的成果——一个独立完整的 .html 文件，无需构建步骤，即可在任何浏览器中打开。

适用场景

• “让我看看效果”／“做个模拟稿”／“构建原型”／“渲染线框图”
• 根据 JOURNEY.md 页面规格将页面可视化
• 编写生产代码前检查令牌的应用情况
• 提供截图供 design-review-agent 评审

流程

1. 收集输入

收集以下三项输入：

输入	来源	缺失时的处理
令牌	项目根目录中的 DESIGN.md（来自 palette.mjs 的 CSS 自定义属性代码块）	线框模式：使用灰度默认值
页面规格	JOURNEY.md 页面规格章节，或用户描述	搭建通用页面骨架
保真度	用户请求；“线框”＝仅结构，“带样式”＝完整令牌	存在 DESIGN.md 时默认为带样式，否则默认为线框

如果不存在 DESIGN.md，注明这一点，并在线框模式下继续——生成带有注释 `` 的 .html。

2. 构建模拟稿

加载 references/mock-recipe.md。根据所选保真度遵循相应规范：

• 线框： HTML 结构 + 默认使用灰色的 CSS 自定义属性；使用语义化分区（<header>、<main>、<nav>、<section>、<aside>、<footer>）；占位标签（[Hero headline]、[Body copy]、[CTA]）；不使用颜色或图片。
• 带样式： 将 DESIGN.md 中的所有令牌作为 CSS 自定义属性应用到 :root；遵循 DESIGN.md 中的字体比例、颜色、间距和表面约束。若 DESIGN.md 指定了网页字体，则包含 <link>。

两种保真度均须满足：单文件，所有 CSS 均放在 <style> 中；使用 prefers-reduced-motion 媒体查询禁用过渡效果；移动端界面的触控目标尺寸 ≥44×44px；使用语义化 HTML。

将文件写入 <project-root>/mocks/<page-name>.html（如有需要，创建 mocks/），如果无法确定项目根目录，则写入 ./mock.html。

3. 渲染并截图（宽容处理流程）

浏览器 MCP 已连接时：

1. browser_connect(mode: "launch", channel: "chrome", headless: true) ——或重用现有连接。
2. browser_navigate(url: "file://<absolute-path-to-html>", allow_internal: true) ——渲染本地文件；必须设置 allow_internal。
3. browser_screenshot() ——返回 {path}（PNG 文件）。
4. 调度一个 Haiku 子 Agent 读取 PNG 并返回文本摘要（载荷管理：大型成果不要放入主上下文）。
5. 返回：.html 路径、截图路径和 Haiku 摘要。

浏览器 MCP 未连接时（宽容回退）：

输出 .html 路径，并注明：“在浏览器中打开 <path> 查看——浏览器 MCP 未连接，因此未截取屏幕截图。”不报错。模拟稿仍是交付成果。

检测方式：如果 browser_connect 失败，则转入回退流程。切勿因 MCP 是否可用而阻塞。

4. 移交

建议运行 /design-for-ai:mock（它会调度 design-review-agent）来评审渲染结果，或运行 build 进行完整的关卡评审。

参考资料

参考文件	加载时机
references/mock-recipe.md	构建任何模拟稿时——HTML/CSS 规范、令牌映射、表面约束表、保真度规范和 prefers-reduced-motion 规则