Prototype 是一个把设计令牌（design tokens）与页面规格（page specs）转化为可查看产物的技能。它的输出始终是一个单文件、自包含的 .html 文件，可直接在任意浏览器打开查看，不需要构建步骤，也不是指导说明或代码片段。
适用场景
当用户提出“给我看看它长什么样”“做个模型稿”“搭一个原型”“渲染一个线框图”等需求时适用。具体包括：根据 JOURNEY.md 的页面规格来可视化一个页面；在编写生产代码之前检查令牌的应用效果；为 design-review-agent 提供一张截图以供评审。
所需输入
该技能收集三类输入：
- 令牌（Tokens）：来源为项目根目录下的 DESIGN.md（即 palette.mjs 中的 CSS 自定义属性块）。若缺失，则采用线框图模式下的灰度默认值。
- 页面规格（Page spec）：来源为 JOURNEY.md 的页面规格章节，或用户描述。若缺失，则搭建一个通用的页面骨架。
- 保真度（Fidelity）：由用户请求决定；“wireframe”表示只呈现结构，“styled”表示应用完整令牌。当存在 DESIGN.md 时默认采用 styled，不存在时默认采用 wireframe。
如果 DESIGN.md 缺失，技能会加以说明并以线框图模式继续，在输出的 .html 中加入注释：<!-- No DESIGN.md found — wireframe mode: greyscale defaults. Run /design-for-ai to establish tokens. -->。
构建模型
加载 references/mock-recipe.md，按所选保真度遵循配方：
线框图模式：HTML 结构加默认灰度的 CSS 自定义属性；使用语义化分区（<header>、<main>、<nav>、<section>、<aside>、<footer>）；占位标签（如 [Hero headline]、[Body copy]、[CTA]）；不使用颜色与图像。
带样式模式：把 DESIGN.md 的所有令牌作为 CSS 自定义属性应用到 :root；遵循 DESIGN.md 中的字号层级、颜色、间距和表面（surface）约束；当 DESIGN.md 指定了 Web 字体时包含对应的 <link>。
两种保真度共同要求：单文件、所有 CSS 写在 <style> 内、使用 prefers-reduced-motion 媒体查询抑制过渡、移动端表面的触控目标不小于 44×44px、语义化 HTML。
文件写入位置为 <project-root>/mocks/<page-name>.html（必要时创建 mocks/ 目录），当项目根目录不明确时写入 ./mock.html。
渲染与截图（优雅降级协议）
当浏览器 MCP 已连接时：调用 browser_connect(mode: "launch", channel: "chrome", headless: true)，或复用已有连接；调用 browser_navigate(url: "file://<绝对路径到 html>", allow_internal: true) 进行本地文件渲染（allow_internal 为必需参数）；调用 browser_screenshot() 返回 {path}（PNG 图片）；派发一个 Haiku 子代理读取该 PNG 并返回文字摘要（负载纪律：大体积产物不进入主上下文）。最终返回 .html 路径、截图路径和 Haiku 摘要。
当浏览器 MCP 未连接时（优雅回退）：输出 .html 路径并提示“在你的浏览器中打开 <path> 查看——浏览器 MCP 未连接，因此未捕获截图。”这不算错误，模型稿本身仍是交付物。检测方式：若 browser_connect 失败，则进入回退流程，绝不因 MCP 可用性而阻塞。
交接
建议运行 /design-for-ai:mock（它会派发 design-review-agent）来评审渲染结果，或进行构建以完成完整的分级评审。
参考资料
references/mock-recipe.md：在构建任何模型稿时加载，包含 HTML/CSS 配方、令牌映射、表面约束表、保真度规格以及 prefers-reduced-motion 规则。