| name | prototype-design |
| description | 高保真原型设计 Skill（设计师角色）。基于 PM 产出的 PRD 和低保真 wireframe，升级生成高保真 Hi-Fi 原型图。覆盖品牌配色、组件系统、交互动效、视觉规范。触发条件：(1) 生成高保真原型图/hifi prototype，(2) 将 wireframe 升级为高保真，(3) 原型视觉设计，(4) 从低保真转高保真，(5) 设计高保真交互原型，(6) UI 原型设计。 |
高保真原型设计 Skill
基于产品经理（PM）产出的 PRD 文档和低保真 wireframe，升级生成高保真 Hi-Fi 原型图。呈现接近最终产品的视觉效果，包含品牌配色、图标系统、交互动效和组件规范，适用于用户测试和利益相关者评审。
职责边界：本 Skill 不负责需求分析和 PRD 编写（由 requirement-doc Skill 负责），只聚焦于视觉设计和原型升级。
参考文件
按需加载模板文件：
可选依赖
| 依赖 | 用途 | 何时需要 |
|---|
modao-proto-mcp MCP | 提供 gen_description、gen_html、import_html 工具 | 仅方式 B（通过 gen_html 生成）时需要 |
注意：方式 B 为可选路径，不影响默认工作流。若未配置 modao-proto-mcp，默认使用方式 A。
工作流
步骤 1：定位输入文件
-
定位 PRD 文档：
- 如果用户指定了 PRD 路径，直接读取
- 如果未指定，在
docs/ 目录下搜索 prd-*.md 文件
- 提取产品定位、目标用户、功能需求、交互设计章节
-
定位低保真 wireframe：
- 检查
projects/prd-{项目名}/wireframes/ 目录
- 读取
index.html 获取页面清单
- 逐一读取各 wireframe 页面，理解布局结构和交互流程
-
若缺少 wireframe：
- 提示用户先通过
requirement-doc Skill 生成 PRD 和低保真原型
- 或者基于 PRD 功能需求直接生成高保真原型（跳过低保真阶段）
步骤 2：设计决策
基于 PRD 产品定位和目标用户，做以下设计决策：
-
选择生成方式：
- 方式 A（默认）：直接写 HTML — 使用
hifi-guide.md 中的主题系统、组件库和动效规范，精确控制视觉细节。适合需要严格品牌一致性的场景。
- 方式 B（可选）：通过
gen_html MCP 工具生成 — 快速出图，接受 MCP 默认样式，无需手动编写 HTML/CSS。适合快速原型验证、不要求严格遵循三套主题系统的场景。
- 选择依据：
- 用户说"用 gen_html 生成"、"快速生成"、"通过墨刀生成" → 方式 B
- 用户无特殊要求或要求精确主题控制 → 方式 A
-
选择主题（方式 A 适用）：
- 加载 hifi-guide.md，根据产品定位匹配预设主题：
- 工具/效率/SaaS/AI/开发 → 科技蓝（Tech Blue）
- 健康/环保/社区/生活/宠物/运动 → 自然绿（Nature Green）
- 创意/社交/媒体/内容/娱乐/视频 → 优雅紫（Elegant Purple）
- 若用户指定了主题或配色偏好，优先使用用户指定的
- 若产品跨多个类别，选择最核心用户场景对应的主题
-
确定设计方向（方式 A 适用）：
- 移动端优先（max-width: 375px）还是桌面端优先（max-width: 1200px）
- 核心交互模式：底部 Tab 导航 / 顶部导航 / 侧边栏
- 图标风格统一使用 Lucide Icons
-
输出设计摘要：向用户展示设计决策，包括：
- 生成方式（A 或 B）
- 选择的主题及原因（方式 A）
- 主色调和辅助色（方式 A）
- 页面布局方向（移动端/桌面端）
- 需要升级的页面列表
等待用户确认设计方向后再继续。若用户无特殊要求，直接继续。
步骤 3：生成高保真原型
根据步骤 2 选择的生成方式执行：
方式 A：直接写 HTML（默认）
- 加载 hifi-guide.md 完整规范
- 逐页将低保真 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 提升
-
保持结构一致：
- 保留 wireframe 的信息架构和功能布局
- 保留页面间的跳转链接
- 生成
index.html 导航首页
-
文件输出位置：projects/prd-{项目名}/hifi-wireframes/
方式 B：通过 gen_html 生成（可选）
-
准备设计说明（可选）：
- 如果 PRD 中的功能描述较简短，先调用
gen_description 工具将功能点扩写为结构化设计说明
- 输入：PRD 中的页面功能描述或低保真 wireframe 的布局信息
- 输出：结构化的设计说明（页面目标、模块布局、交互描述）
- 如果已有详细的 PRD 交互设计描述或完整的 wireframe，可跳过此步
-
逐页调用 gen_html：
- 按功能链路分组（建议每组 3-5 个页面），逐组生成
- 输入：步骤 1 的设计说明，或直接传入 PRD 页面功能描述
- 输出：每个页面的 HTML 代码（及导入用的 key）
- 记录每个页面返回的 key（用于后续可选的墨刀导入）
-
写入本地文件：
- 将
gen_html 返回的 HTML 写入 projects/prd-{项目名}/hifi-wireframes/ 目录
- 文件名保持与低保真 wireframe 一致（如
home.html、detail.html）
-
生成 index.html 导航首页：
- 手动构建导航首页，列出所有已生成的页面
- 确保页面间的跳转链接正确（使用相对路径）
步骤 4：质量自检
根据生成方式选择对应的检查清单：
方式 A 检查清单（10 项）
方式 B 检查清单（5 项）
步骤 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 导入墨刀（无需再次询问）。
