---
name: pm-proto
version: 2.0.0
description: |
  Use when: 需要设计产品原型、规划交互流程、确定界面布局、从PRD到视觉的过渡
  Do NOT use when: 原型已由设计师完成、仅需文字描述无需视觉产出
allowed-tools:
  - Agent
  - Read
  - Write
  - AskUserQuestion
  - Bash
---

## Preamble (run first)

```bash
bash "$(dirname "${BASH_SOURCE[0]}")"/check-update.sh 2>/dev/null || true
# 检查方案设计目录
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
```

---

## 执行流程


### 步骤 1: 确定原型设计范围

使用 AskUserQuestion 询问：

> 您需要设计哪个层面的原型？
>
> A) 整体产品原型（完整产品流程）
> B) 核心功能原型（MVP核心流程）
> C) 单个功能模块原型（特定功能）
> D) 交互优化原型（已有原型的优化）
> E) 其他（请手动输入）
>
> 💡 提示：
> - 新产品从0到1 → 推荐整体产品原型
> - 快速验证 → 推荐核心功能原型
> - 迭代优化 → 推荐单个功能模块原型

记录到变量 `PROTO_SCOPE`

---

### 步骤 2: 读取前置数据

根据原型范围读取相应文档：

**必需文档**：
- PRD产品需求文档（如果存在）
- MVP方案（如果存在）
- 用户旅程地图（如果存在）

**读取失败处理**：

如果 PRD 文档不存在：

```markdown
⚠️ 未找到 PRD 文档

原型设计通常需要 PRD 作为输入，确保设计符合需求。

您可以选择：
A) 执行 /pm-docs 生成 PRD
B) 使用 MVP 方案作为输入（如果没有 PRD）
C) 手动输入功能需求（快速模式）

是否继续？
```

---

### 步骤 3: 提取关键信息

基于前置文档提取：

**从 PRD 提取**：
- 功能列表
- 核心业务流程
- 交互流程
- 用户场景
- 界面要求

**从 MVP 方案提取**：
- 核心功能集
- 用户旅程
- 功能优先级

**从用户旅程地图提取**：
- 用户操作路径
- 关键触点
- 情绪曲线

---

### 步骤 4: 设计原型框架

#### 4.1 信息架构设计

使用 AskUserQuestion 询问：

> 基于功能需求，我整理了以下信息架构：
>
> {展示信息架构树形图}
>
> 这个架构是否合理？
>
> A) 架构合理，继续设计页面流程
> B) 需要调整架构
> C) 我有其他想法（请手动输入）

如果选择 B，引导用户调整架构。

#### 4.2 核心页面识别

AI 分析并列举核心页面：

> 📱 根据信息架构和用户旅程，识别出以下核心页面：
>
> {页面列表，如：首页、商品列表、商品详情、购物车、订单页等}
>
> 是否需要调整？
>
> A) 页面完整，开始设计流程
> B) 需要增加页面
> C) 需要删除页面
> D) 其他调整

---

### 步骤 5: 设计页面流程

#### 5.1 核心业务流程梳理

基于用户旅程和功能需求，设计页面跳转流程：

```markdown
核心业务流程：

用户启动 → 首页 → 浏览商品 → 商品详情 → 加入购物车 → 结算 → 支付 → 订单完成

关键分支流程：
- 未登录用户：触发登录/注册流程
- 库存不足：提示缺货，推荐相似商品
- 支付失败：重试或更换支付方式
```

#### 5.2 交互流程设计

使用 AskUserQuestion 逐个设计关键交互：

> 现在设计"{页面名称}"页面的交互流程：
>
> 核心功能：
> - {功能1}
> - {功能2}
>
> 用户操作路径：
> 1. 进入页面的触发方式
> 2. 主要操作按钮
> 3. 操作后的反馈
> 4. 页面跳转逻辑
>
> 是否需要特殊交互？
>
> A) 标准交互（常用组件和模式）
> B) 创新交互（需要设计新组件）
> C) 参考{竞品名称}的交互方式
> D) 其他（请手动输入）

---

### 步骤 6: 输出原型设计方案

使用 Write 工具创建 `docs/02-方案设计/原型设计方案.md`：

```markdown
# {产品名称} 原型设计方案

## 文档信息

- **产品名称**: {从PRD提取}
- **原型范围**: {整体产品/核心功能/单个模块}
- **创建时间**: {当前时间}
- **设计工具**: super-pm v2.0.0

---

## 一、设计概述

### 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 v2.0.0
```

---

### Subagent 并行分析（v2.0 新增）

在步骤 4（设计原型框架）之前，主 agent 可派发 subagent 并行执行独立分析任务：

```markdown
使用 Agent 工具并行派发：

Agent 1: 竞品设计模式分析
  - 收集竞品的页面结构和交互模式
  - 输出：竞品设计模式报告（JSON）

Agent 2: 行业设计规范查询
  - 分析行业通用的设计规范和最佳实践
  - 输出：设计规范摘要（JSON）

Agent 3: 用户旅程推导
  - 基于 PRD 和 MVP 方案推导用户操作路径
  - 输出：用户旅程关键触点（JSON）

主 agent 等待所有 subagent 完成，整合结果用于原型框架设计。
```

### 版本对比（v1 vs v2）

| 维度 | v1（串行） | v2（Subagent 并行） |
|------|-----------|-------------------|
| 竞品分析 | 人工逐个分析 | Subagent 并行分析 |
| 设计规范 | 手动查询 | Subagent 自动搜索 |
| 用户旅程推导 | 主 agent 处理 | Subagent 独立处理 |
| Token 占用 | 设计细节占用主上下文 | Subagent 独立上下文 |
| 执行效率 | 线性顺序 | 并行 3x 加速 |

### 步骤 7: 输出完成提示

使用 AskUserQuestion 提供下一步选项：

> ✅ 原型设计方案已生成！
>
> 📄 文档路径：`docs/02-方案设计/原型设计方案.md`
>
> 🎯 建议下一步：
>
> A) 执行 /pm-tech - 技术对接（推荐）
> B) 执行 /pm-feature - 功能细节拆解
> C) 执行 /pm-data - 数据指标设计
> D) 查看原型设计方案

---

## 兜底机制

### 场景 1: PRD 文档不存在

```markdown
⚠️ 未找到 PRD 文档

原型设计通常基于 PRD 的功能需求。您可以选择：
A) 执行 /pm-docs 生成 PRD
B) 使用 MVP 方案作为输入
C) 手动输入功能需求

是否继续？
```

### 场景 2: 用户不确定设计方向

引导用户思考：

> 🤔 不确定如何设计？
>
> 我可以帮您：
> A) 分析竞品的设计模式
> B) 基于用户旅程推导设计
> C) 提供行业通用设计方案
> D) 参考设计规范（如 Ant Design）

---

## 注意事项

1. **聚焦核心流程**：优先设计高频核心流程，避免过度设计
2. **用户视角**：从用户使用场景出发，而非功能堆砌
3. **交互一致性**：保持交互模式统一，降低学习成本
4. **考虑异常状态**：不仅要设计正常流程，还要考虑错误、空状态等
5. **可落地性**：设计需考虑技术实现难度和成本

---

## 输出文件

- 原型设计方案 → `docs/02-方案设计/原型设计方案.md`

---

## 输出质量对比

**✅ Good 示例**：
```
- 有数据引用：「根据 Q4 数据，留存率从 35% 降至 28%」
- 有验证来源：「数据来源：Google Analytics, 2025-12-01」
- 有明确建议：「建议将新手引导步骤从 5 步减少至 3 步」
```

**❌ Bad 示例**：
```
- 模糊结论：「数据表明留存率有所下降」
- 无来源：「根据经验，这个功能很重要」
- 没有行动建议：「留存是个问题」
```

---

## 常见误区 / Red Flags — STOP

出现以下情况立即停止并回溯：

| 误区 | 正确做法 |
|------|---------|
| 使用"应该"、"大概"、"看起来"做结论 | 必须基于实际数据和验证 |
| 未运行检查就声称已完成 | 先验证，再陈述 |
| 因时间紧迫跳过关键步骤 | 没有例外，时间紧更要严格 |
| "这次应该没问题"的想法 | 每次都要重新验证 |

---

## 产出质量检查 / Verification Checklist

- [ ] 前置依赖已满足（输入文档/数据已收集）
- [ ] 核心步骤已全部执行
- [ ] 输出文档已生成到 `docs/` 目录
- [ ] 每个判断都有数据/证据支撑
- [ ] 已推荐 2-3 个后续 skill

> ⚠️ 任何一项未通过 → 补全后再标记完成。

---