| name | user-flow |
| description | 设计用户从入口到完成任务的流程时使用。适用于功能流程梳理、页面跳转设计、决策点和异常路径定义。优先输出 Mermaid 流程图 + 主路径 + 异常路径。 |
用户流程设计
适用场景
- 功能流程的步骤梳理
- 页面跳转和决策点设计
- 异常路径和异常恢复设计
- 给信息架构和页面结构提供输入
不适用场景
- 单一页面无流程（直接用 page-structure）
- 整体产品架构（用 information-architecture）
核心结构
触发点 → 进入 → 浏览 → 决策 → 操作 → 反馈 → 完成 / 失败
每个流程必须包含：
- 触发点（用户从哪进入）
- 主路径（最常见的成功路径）
- 决策点（用户需要做选择的地方）
- 异常路径（错误、空数据、权限不足）
- 反馈机制（系统如何回应用户）
- 退出路径（用户如何返回或取消）
输出格式
Mermaid 流程图
flowchart TD
A[首页] --> B{是否登录?}
B -- 否 --> C[登录页]
C --> D[输入账号密码]
D --> E{验证}
E -- 成功 --> F[跳转目标页]
E -- 失败 --> G[显示错误]
G --> D
B -- 是 --> F
F --> H[完成任务]
流程描述模板
## 流程：[流程名]
### 触发点
[用户从哪里进入这个流程]
### 主路径（成功路径）
1. 用户 [操作 1]
2. 系统 [反馈 1]
3. 用户 [操作 2]
...
### 决策点
- 决策 1：[条件] → 路径 A / 路径 B
- 决策 2：...
### 异常路径
- 异常 1：[条件] → 处理方式
- 异常 2：...
### 反馈机制
- 加载中：[显示什么]
- 成功：[显示什么 + 自动跳转?]
- 失败：[显示什么 + 是否可重试?]
### 退出路径
- 取消按钮：返回到 [页面]
- 浏览器后退：行为是 [...]
工作流程
1. 识别用户角色和场景
2. 定义触发点（用户从哪进入）
3. 列出主路径步骤（最简单的成功路径）
4. 在每个步骤识别决策点
5. 为每个决策点设计分支
6. 列出所有异常路径
7. 定义反馈机制
8. 定义退出路径
9. 用 Mermaid 可视化
10. 转交 page-structure 设计具体页面
质量自检
□ 主路径是否足够短（不要超过 7 步）
□ 是否覆盖了所有决策点
□ 异常路径是否完整
□ 反馈是否在每个关键节点
□ 退出路径是否明确
□ 是否使用 Mermaid 可视化
常见坑
- 只画成功路径——异常路径才是设计的灵魂
- 决策点不明确——用户不知道为什么会跳到这里
- 反馈缺失——加载中、成功、失败没有反馈
- 退出路径不清——用户被困在流程里
- 流程太长——超过 7 步必须考虑能否简化
- 没有可视化——只用文字描述很难看清
配套模板
templates/user-flow-template.md — 流程描述 + Mermaid 流程图模板
与其他 skill 的协作
上游：
product-manager 的 PRD / 用户故事
平行：
customer-journey（产品经理）→ 提供用户旅程
下游：
information-architecture → 设计整体架构
page-structure → 设计具体页面
component-states → 定义反馈状态
