Menu
Use when: 需要设计产品原型、规划交互流程、确定界面布局、从PRD到视觉的过渡 Do NOT use when: 原型已由设计师完成、仅需文字描述无需视觉产出
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | pm-proto |
| description | Use when: 需要设计产品原型、规划交互流程、确定界面布局、从PRD到视觉的过渡 Do NOT use when: 原型已由设计师完成、仅需文字描述无需视觉产出 |
| allowed-tools | ["Agent","Read","Write","AskUserQuestion","Bash"] |
bash "$(dirname "${BASH_SOURCE[0]}")"/check-update.sh 2>/dev/null || true
# 读取技能包版本号
SKILL_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")" 2>/dev/null && pwd)" || true
if [ -f "$SKILL_ROOT/VERSION" ]; then echo "📦 super-pm $(cat "$SKILL_ROOT/VERSION")"; fi
# 检查方案设计目录
mkdir -p docs/02-方案设计
# 检查前置文档
echo "📊 正在检查前置文档..."
if [ -f "docs/02-方案设计/PRD产品需求文档.md" ]; then
echo "✅ PRD文档 - 已找到"
else
echo "⏳ PRD文档 - 未找到"
fi
if [ -f "docs/01-需求调研/MVP方案.md" ]; then
echo "✅ MVP方案 - 已找到"
else
echo "⏳ MVP方案 - 未找到"
fi
当流程要求与用户交互时：
使用 AskUserQuestion 询问：
您需要设计哪个层面的原型？
A) 整体产品原型（完整产品流程） B) 核心功能原型（MVP核心流程） C) 单个功能模块原型（特定功能） D) 交互优化原型（已有原型的优化） E) 其他（请手动输入）
💡 提示：
- 新产品从0到1 → 推荐整体产品原型
- 快速验证 → 推荐核心功能原型
- 迭代优化 → 推荐单个功能模块原型
记录到变量 PROTO_SCOPE
根据原型范围读取相应文档：
必需文档：
读取失败处理：
如果 PRD 文档不存在：
⚠️ 未找到 PRD 文档
原型设计通常需要 PRD 作为输入，确保设计符合需求。
您可以选择：
A) 执行 /pm-docs 生成 PRD
B) 使用 MVP 方案作为输入（如果没有 PRD）
C) 手动输入功能需求（快速模式）
是否继续？
基于前置文档提取：
从 PRD 提取：
从 MVP 方案提取：
从用户旅程地图提取：
使用 AskUserQuestion 询问：
基于功能需求，我整理了以下信息架构：
{展示信息架构树形图}
这个架构是否合理？
A) 架构合理，继续设计页面流程 B) 需要调整架构 C) 我有其他想法（请手动输入）
如果选择 B，引导用户调整架构。
AI 分析并列举核心页面：
📱 根据信息架构和用户旅程，识别出以下核心页面：
{页面列表，如：首页、商品列表、商品详情、购物车、订单页等}
是否需要调整？
A) 页面完整，开始设计流程 B) 需要增加页面 C) 需要删除页面 D) 其他调整
基于用户旅程和功能需求，设计页面跳转流程：
核心业务流程：
用户启动 → 首页 → 浏览商品 → 商品详情 → 加入购物车 → 结算 → 支付 → 订单完成
关键分支流程：
- 未登录用户：触发登录/注册流程
- 库存不足：提示缺货，推荐相似商品
- 支付失败：重试或更换支付方式
使用 AskUserQuestion 逐个设计关键交互：
现在设计"{页面名称}"页面的交互流程：
核心功能：
- {功能1}
- {功能2}
用户操作路径：
- 进入页面的触发方式
- 主要操作按钮
- 操作后的反馈
- 页面跳转逻辑
是否需要特殊交互？
A) 标准交互（常用组件和模式） B) 创新交互（需要设计新组件） C) 参考{竞品名称}的交互方式 D) 其他（请手动输入）
使用 Write 工具创建 docs/02-方案设计/原型设计方案.md：
# {产品名称} 原型设计方案
## 文档信息
- **产品名称**: {从PRD提取}
- **原型范围**: {整体产品/核心功能/单个模块}
- **创建时间**: {当前时间}
- **设计工具**: super-pm
---
## 一、设计概述
### 1.1 设计目标
{从PRD或MVP方案提取：产品目标}
### 1.2 目标用户
{从PRD提取：目标用户}
### 1.3 核心场景
{从用户旅程或PRD提取：核心使用场景}
---
## 二、信息架构
### 2.1 整体架构
{产品名称} ├── 首页 │ ├── 推荐内容 │ ├── 分类入口 │ └── 搜索入口 ├── 分类页 │ ├── 一级分类 │ └── 二级分类 ├── 列表页 │ ├── 筛选功能 │ ├── 排序功能 │ └── 商品展示 ├── 详情页 │ ├── 基本信息 │ ├── 操作按钮 │ └── 相关推荐 ├── 购物车 │ ├── 商品列表 │ ├── 数量调整 │ └── 结算入口 └── 个人中心 ├── 订单管理 ├── 收藏夹 └── 设置
### 2.2 导航设计
**主导航**：
- 首页
- 分类
- 购物车
- 我的
**辅助导航**：
- 搜索
- 客服
- 返回
---
## 三、页面设计详情
### 3.1 首页
**页面目标**：
- 快速触达用户感兴趣的内容
- 引导用户浏览和转化
**核心功能**：
- 搜索栏
- Banner轮播
- 推荐内容流
- 分类快捷入口
- 底部导航
**布局结构**：
┌─────────────────────┐ │ Logo 🔍 搜索 │ ← 顶部栏 ├─────────────────────┤ │ │ │ Banner 轮播区 │ │ │ ├─────────────────────┤ │ 快捷入口 (2x4图标) │ ├─────────────────────┤ │ │ │ 推荐内容流 │ │ (卡片式布局) │ │ │ └─────────────────────┘ │ 首页 分类 购物车 我的│ ← 底部导航 └─────────────────────┘
**交互说明**：
- 下拉刷新内容流
- 上滑加载更多
- Banner自动轮播，手动可滑动
- 点击快捷入口跳转分类页
**异常处理**：
- 网络失败：显示占位图和重试按钮
- 内容为空：显示引导文案和推荐分类
---
### 3.2 {下一页面}
{重复上述结构}
---
## 四、交互流程
### 4.1 核心业务流程
**流程名称**：商品购买流程
**流程图**：
首页 → 商品列表 → 商品详情 → 加入购物车 → 购物车页 → 结算 → 支付 → 订单完成
**详细步骤**：
1. **首页**
- 用户行为：浏览推荐内容或搜索商品
- 触发操作：点击商品卡片
- 页面跳转：进入商品详情
2. **商品详情**
- 用户行为：查看商品信息、选择规格
- 触发操作：点击"加入购物车"或"立即购买"
- 系统反馈：Toast提示"已加入购物车"
- 页面跳转：
- 加入购物车 → 留在当前页
- 立即购买 → 进入结算页
3. **购物车页**
- 用户行为：调整商品数量、选择商品
- 触发操作：点击"去结算"
- 前置检查：检查库存、价格变化
- 页面跳转：进入结算页
4. **结算页**
- 用户行为：选择收货地址、支付方式
- 触发操作：点击"提交订单"
- 页面跳转：进入支付页
5. **支付页**
- 用户行为：完成支付
- 触发操作：支付成功
- 页面跳转：进入订单详情
---
### 4.2 异常流程
**场景 1：商品库存不足**
商品详情页 → 加入购物车 → 系统检查库存 → Toast提示"库存不足"
**处理方式**：
- 显示库存不足提示
- 推荐"到货通知"功能
- 展示相似商品推荐
**场景 2：未登录用户下单**
购物车页 → 去结算 → 检测未登录 → 弹出登录引导 → 登录成功 → 继续结算
**处理方式**：
- 弹出登录引导框
- 支持：账号密码登录、短信登录、第三方登录
- 登录成功后自动继续流程
---
## 五、设计规范建议
### 5.1 视觉风格
**色彩方案**：
- 主色：{基于产品定位推荐}
- 辅助色：{推荐配色}
- 强调色：{用于重要按钮}
**字体规范**：
- 标题：16-20px 粗体
- 正文：14px 常规
- 辅助文字：12px 浅色
**间距规范**：
- 页面边距：16px
- 卡片间距：12px
- 元素间距：8px
---
### 5.2 组件规范
**按钮规范**：
- 主按钮：填充色，高度44px，圆角8px
- 次要按钮：描边，高度44px
- 文字按钮：无背景，高度自适应
**表单规范**：
- 输入框高度：48px
- 标签位置：左对齐或顶部对齐
- 错误提示：红色文字，输入框下方
**卡片规范**：
- 圆角：8px
- 阴影：0 2px 8px rgba(0,0,0,0.1)
- 内边距：16px
---
## 六、原型工具建议
### 6.1 工具选择
根据团队技能和项目需求，推荐以下工具：
**A) Figma（推荐）**
- 优势：协作便捷、组件库丰富、支持原型交互
- 适用：团队协作项目、需要实时评审
**B) Axure RP**
- 优势：交互功能强大、支持复杂逻辑
- 适用：需要高保真交互原型
**C) 墨刀 / 蓝湖**
- 优势：中文友好、上手快、支持协作
- 适用：快速原型、小型团队
**D) Sketch + Principle**
- 优势：设计精美、动画效果好
- 适用：偏重视觉设计的团队
---
### 6.2 设计资源
**组件库推荐**：
- Ant Design Mobile（通用）
- Material Design（国际化）
- WeUI（微信风格）
**图标库推荐**：
- iconfont（阿里巴巴图标库）
- Font Awesome
- Material Icons
---
## 七、下一步建议
### 7.1 原型设计完成后
建议执行：
1. **评审原型** - 与团队、stakeholder评审原型
2. **/pm-tech** - 技术对接，讨论可行性
3. **/pm-feature** - 功能细节拆解
4. **/pm-data** - 定义数据埋点需求
### 7.2 原型迭代优化
- 用户测试：招募目标用户测试原型
- 数据验证：关键页面加入数据埋点
- 快速迭代：基于反馈快速调整
---
## 八、附录
### 8.1 参考文档
- PRD产品需求文档
- MVP方案
- 用户旅程地图
### 8.2 设计检查清单
- [ ] 核心流程是否完整
- [ ] 异常流程是否覆盖
- [ ] 交互是否一致
- [ ] 加载状态是否考虑
- [ ] 空状态是否设计
- [ ] 错误提示是否友好
- [ ] 操作反馈是否及时
---
**文档状态**: 原型设计方案完成
**生成时间**: {时间戳}
**生成工具**: super-pm
在步骤 4（设计原型框架）之前，主 agent 可派发 subagent 并行执行独立分析任务：
使用 Agent 工具并行派发：
Agent 1: 竞品设计模式分析
- 收集竞品的页面结构和交互模式
- 输出：竞品设计模式报告（JSON）
Agent 2: 行业设计规范查询
- 分析行业通用的设计规范和最佳实践
- 输出：设计规范摘要（JSON）
Agent 3: 用户旅程推导
- 基于 PRD 和 MVP 方案推导用户操作路径
- 输出：用户旅程关键触点（JSON）
主 agent 等待所有 subagent 完成，整合结果用于原型框架设计。
| 维度 | v1（串行） | v2（Subagent 并行） |
|---|---|---|
| 竞品分析 | 人工逐个分析 | Subagent 并行分析 |
| 设计规范 | 手动查询 | Subagent 自动搜索 |
| 用户旅程推导 | 主 agent 处理 | Subagent 独立处理 |
| Token 占用 | 设计细节占用主上下文 | Subagent 独立上下文 |
| 执行效率 | 线性顺序 | 并行 3x 加速 |
使用 AskUserQuestion 提供下一步选项：
✅ 原型设计方案已生成！
📄 文档路径：
docs/02-方案设计/原型设计方案.md🎯 建议下一步：
A) 执行 /pm-tech - 技术对接（推荐） B) 执行 /pm-feature - 功能细节拆解 C) 执行 /pm-data - 数据指标设计 D) 查看原型设计方案
⚠️ 未找到 PRD 文档
原型设计通常基于 PRD 的功能需求。您可以选择：
A) 执行 /pm-docs 生成 PRD
B) 使用 MVP 方案作为输入
C) 手动输入功能需求
是否继续？
引导用户思考：
🤔 不确定如何设计？
我可以帮您： A) 分析竞品的设计模式 B) 基于用户旅程推导设计 C) 提供行业通用设计方案 D) 参考设计规范（如 Ant Design）
docs/02-方案设计/原型设计方案.md✅ Good 示例：
- 有数据引用：「根据 Q4 数据，留存率从 35% 降至 28%」
- 有验证来源：「数据来源：Google Analytics, 2025-12-01」
- 有明确建议：「建议将新手引导步骤从 5 步减少至 3 步」
❌ Bad 示例：
- 模糊结论：「数据表明留存率有所下降」
- 无来源：「根据经验，这个功能很重要」
- 没有行动建议：「留存是个问题」
出现以下情况立即停止并回溯：
| 误区 | 正确做法 |
|---|---|
| 使用"应该"、"大概"、"看起来"做结论 | 必须基于实际数据和验证 |
| 未运行检查就声称已完成 | 先验证，再陈述 |
| 因时间紧迫跳过关键步骤 | 没有例外，时间紧更要严格 |
| "这次应该没问题"的想法 | 每次都要重新验证 |
docs/ 目录⚠️ 任何一项未通过 → 补全后再标记完成。
Product Manager Skills Pack - Full lifecycle support from demand to delivery 让一个产品经理拥有一个产品团队的能力 Use when: Starting a new product, planning features, analyzing market, designing solutions, managing growth, strategic decision
Use when starting any product management task - automatically detects task type and invokes appropriate PM skill using intelligent routing
Use when: 需要检查super-pm skills健康状态、定期维护审计、验证元数据完整性 Do NOT use when: 正在使用某个功能skill、仅需执行产品管理任务
Use when: 有初步需求清单需要细化细节、需明确需求场景和边界条件、需求描述模糊需要结构化 Do NOT use when: 需求已足够详细可直达开发、仅需快速立项无需深入
Use when: 需要理解用户体验全链路、发现用户痛点与机会点、优化用户转化流程 Do NOT use when: 用户流程已非常清晰、仅需单一功能分析而非全局体验
Use when: 需要了解市场格局与竞争态势、收集行业数据、分析竞品优劣势、评估市场机会 Do NOT use when: 市场已有充分内部调研数据、仅需简单规模估算无需深度分析