prototype-design

高保真原型设计 Skill

基于产品经理（PM）产出的 PRD 文档和低保真 wireframe，升级生成高保真 Hi-Fi 原型图。呈现接近最终产品的视觉效果，包含品牌配色、图标系统、交互动效和组件规范，适用于用户测试和利益相关者评审。

职责边界：本 Skill 不负责需求分析和 PRD 编写（由 requirement-doc Skill 负责），只聚焦于视觉设计和原型升级。

参考文件

按需加载模板文件：

文件	内容	何时加载
hifi-guide.md	高保真原型生成规范（主题系统、组件库、动效规范）	方式 A（直接写 HTML）时加载

可选依赖

依赖	用途	何时需要
modao-proto-mcp MCP	提供 gen_description、gen_html、import_html 工具	仅方式 B（通过 gen_html 生成）时需要

注意：方式 B 为可选路径，不影响默认工作流。若未配置 modao-proto-mcp，默认使用方式 A。

工作流

步骤 1：定位输入文件

1. 定位 PRD 文档：

   • 如果用户指定了 PRD 路径，直接读取
   • 如果未指定，在 docs/ 目录下搜索 prd-*.md 文件
   • 提取产品定位、目标用户、功能需求、交互设计章节

2. 定位低保真 wireframe：

   • 检查 projects/prd-{项目名}/wireframes/ 目录
   • 读取 index.html 获取页面清单
   • 逐一读取各 wireframe 页面，理解布局结构和交互流程

3. 若缺少 wireframe：

   • 提示用户先通过 requirement-doc Skill 生成 PRD 和低保真原型
   • 或者基于 PRD 功能需求直接生成高保真原型（跳过低保真阶段）

步骤 2：设计决策

基于 PRD 产品定位和目标用户，做以下设计决策：

1. 选择生成方式：

   • 方式 A（默认）：直接写 HTML — 使用 hifi-guide.md 中的主题系统、组件库和动效规范，精确控制视觉细节。适合需要严格品牌一致性的场景。
   • 方式 B（可选）：通过 gen_html MCP 工具生成 — 快速出图，接受 MCP 默认样式，无需手动编写 HTML/CSS。适合快速原型验证、不要求严格遵循三套主题系统的场景。
   • 选择依据：
     • 用户说"用 gen_html 生成"、"快速生成"、"通过墨刀生成" → 方式 B
     • 用户无特殊要求或要求精确主题控制 → 方式 A

2. 选择主题（方式 A 适用）：

   • 加载 hifi-guide.md，根据产品定位匹配预设主题：
     • 工具/效率/SaaS/AI/开发 → 科技蓝（Tech Blue）
     • 健康/环保/社区/生活/宠物/运动 → 自然绿（Nature Green）
     • 创意/社交/媒体/内容/娱乐/视频 → 优雅紫（Elegant Purple）
   • 若用户指定了主题或配色偏好，优先使用用户指定的
   • 若产品跨多个类别，选择最核心用户场景对应的主题

3. 确定设计方向（方式 A 适用）：

   • 移动端优先（max-width: 375px）还是桌面端优先（max-width: 1200px）
   • 核心交互模式：底部 Tab 导航 / 顶部导航 / 侧边栏
   • 图标风格统一使用 Lucide Icons

4. 输出设计摘要：向用户展示设计决策，包括：

   • 生成方式（A 或 B）
   • 选择的主题及原因（方式 A）
   • 主色调和辅助色（方式 A）
   • 页面布局方向（移动端/桌面端）
   • 需要升级的页面列表

等待用户确认设计方向后再继续。若用户无特殊要求，直接继续。

步骤 3：生成高保真原型

根据步骤 2 选择的生成方式执行：

方式 A：直接写 HTML（默认）

1. 加载 hifi-guide.md 完整规范
2. 逐页将低保真 wireframe 升级为高保真原型：

升级要点：

• 配色：将灰度色替换为主题 CSS 变量（var(--color-primary) 等）
• 字体：引入 Google Fonts（DM Sans + Noto Sans SC），替换系统字体
• 图标：将文字占位符和 emoji 替换为 Lucide Icons（<i data-lucide="xxx"></i>）
• 图片占位：从纯灰色块升级为带渐变和图标的占位区域
• 组件：使用 hifi-guide 中的标准组件（.btn-primary、.card、.badge 等）
• 动效：添加入场动画（fadeInUp）、hover 效果、过渡动画
• 阴影/圆角：应用阴影体系和圆角体系
• 交互反馈：按钮 hover/active 状态、输入框 focus 状态、卡片 hover 提升

3. 保持结构一致：

   • 保留 wireframe 的信息架构和功能布局
   • 保留页面间的跳转链接
   • 生成 index.html 导航首页

4. 文件输出位置：projects/prd-{项目名}/hifi-wireframes/

方式 B：通过 gen_html 生成（可选）

1. 准备设计说明（可选）：

   • 如果 PRD 中的功能描述较简短，先调用 gen_description 工具将功能点扩写为结构化设计说明
   • 输入：PRD 中的页面功能描述或低保真 wireframe 的布局信息
   • 输出：结构化的设计说明（页面目标、模块布局、交互描述）
   • 如果已有详细的 PRD 交互设计描述或完整的 wireframe，可跳过此步

2. 逐页调用 gen_html：

   • 按功能链路分组（建议每组 3-5 个页面），逐组生成
   • 输入：步骤 1 的设计说明，或直接传入 PRD 页面功能描述
   • 输出：每个页面的 HTML 代码（及导入用的 key）
   • 记录每个页面返回的 key（用于后续可选的墨刀导入）

3. 写入本地文件：

   • 将 gen_html 返回的 HTML 写入 projects/prd-{项目名}/hifi-wireframes/ 目录
   • 文件名保持与低保真 wireframe 一致（如 home.html、detail.html）

4. 生成 index.html 导航首页：

   • 手动构建导航首页，列出所有已生成的页面
   • 确保页面间的跳转链接正确（使用相对路径）

步骤 4：质量自检

根据生成方式选择对应的检查清单：

方式 A 检查清单（10 项）

• 所有页面使用统一的主题 CSS 变量，配色一致
• 按钮/输入框/卡片等均有 hover/focus 交互反馈
• Google Fonts 和 Lucide Icons CDN 引用正确
• 使用 Lucide 图标替代 emoji 和文字占位符，风格统一
• 入场动画（fadeInUp）应用到卡片和内容区
• 页面之间的跳转链接正确（指向 hifi-wireframes 目录内的文件）
• index.html 导航首页列出所有页面并可点击跳转
• 低保真中的所有功能区块在高保真中均已覆盖
• 视觉层次清晰：主标题 > 区块标题 > 正文 > 辅助文字
• 移动端布局在 375px 宽度下无溢出

方式 B 检查清单（5 项）

• 所有 P0 页面已通过 gen_html 生成并写入 hifi-wireframes/ 目录
• 各页面配色和视觉风格一致
• 页面之间的跳转链接正确（相对路径）
• index.html 导航首页列出所有页面并可点击跳转
• 页面布局在目标宽度（移动端 375px / 桌面端 1200px）下无溢出

步骤 5：输出与交付

manifest 接入：写入 stages.design。启动前 check {项目} design 校验 gate1 通过；产出后写入：

echo '{
  "agent": "designer",
  "doc": "projects/prd-{项目}/hifi-wireframes/",
  "checkpoint_with_arch": "projects/prd-{项目}/design-arch-sync-{YYYYMMDD}.md"
}' | node scripts/workflow-manifest.js set {项目} design

若设计-架构 checkpoint 文档尚未产出，checkpoint_with_arch 字段留空字符串，并在向用户的收尾消息中提醒「Gate 2 前必须补齐」。规范见 docs/workflow-manifest-spec.md。

默认：写入本地文件

• 将高保真原型写入 projects/prd-{项目名}/hifi-wireframes/ 目录
• 在 PRD 文档的「交互设计」章节中补充高保真原型文件链接

可选：导入墨刀（方式 B 时主动询问用户）

• 若使用方式 B 生成，完成后询问用户是否需要将原型导入墨刀
• 若用户确认导入：调用 import_html 工具，优先使用 gen_html 返回的 key，否则传入 HTML 文件内容
• 若用户不需要导入：仅保留本地 hifi-wireframes/ 文件
• 若使用方式 A 生成，可通过 prototype-publish Skill 将原型发布到墨刀或 Figma

可选：提交到 GitHub

• 使用 github-publish Skill 将高保真原型文件提交到 GitHub

快速命令

一键升级

当用户说"把 wireframe 升级为高保真"或"生成高保真原型"时，按步骤 1-5 顺序执行。

指定主题

当用户说"用科技蓝主题"或"配色用紫色"时，在步骤 2 中使用用户指定的主题。

仅升级部分页面

当用户说"只升级首页和详情页"时，在步骤 1 中仅读取指定页面的 wireframe。

从 PRD 直接生成（无 wireframe 输入）

当用户说"直接生成高保真原型"且无 wireframe 时，跳过低保真比对，直接从 PRD 功能需求生成高保真原型。

用 gen_html 快速生成

当用户说"用 gen_html 生成高保真"、"快速生成原型"或"通过墨刀生成"时，在步骤 2 选择方式 B，按方式 B 流程执行。

生成并导入墨刀

当用户说"生成高保真并导入墨刀"时，选择方式 B，生成完成后自动调用 import_html 导入墨刀（无需再次询问）。