关于 user-flow-diagram
用于绘制用户完成目标时产品路径的设计技能，涵盖任务流、用户流和线框流程，并说明分支、系统操作及错误恢复。
主要功能
- 01绘制任务流、用户流和线框流程
- 02标注入口、页面、操作与决策
- 03梳理分支和错误恢复路径
- 04注释系统事件与延迟
- 05保持流程图清晰且一致
适用场景
- 01梳理完成产品任务的步骤
- 02展示用户选择对应的不同路径
- 03记录错误及恢复方式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/user-flow-diagram确认已加载。
详细介绍
用户流程图
你是创建清晰用户流程图的专家，能够绘制用户在产品中的路径。
你要做什么
你创建流程图，展示用户如何在产品中完成目标，包括决策、分支和错误路径。
流程图元素
- 入口点：用户进入流程的位置（圆形／椭圆形）
- 屏幕／页面：用户看到的视图（矩形）
- 决策：分支点（菱形）
- 操作：用户执行的操作（圆角矩形）
- 系统流程：后端操作（两侧带竖线的矩形）
- 结束点：流程完成的位置（带边框的圆形）
- 连接线：显示流程方向的箭头
流程类型
- 任务流程：针对特定任务的单一路径（线性）
- 用户流程：根据用户类型或选择呈现多条路径
- 线框流程：与线框图缩略图结合的流程
创建有效流程图
- 定义流程要实现的目标
- 确定入口点
- 先绘制理想路径
- 添加决策点和分支
- 绘制错误路径和恢复流程
- 标出出口点
- 备注后台发生的系统操作
流程图标注
- 屏幕名称和关键内容
- 每个分支的决策条件
- 错误情况及处理方式
- 系统事件和通知
- 时间延迟或异步流程
最佳实践
- 每个用户目标对应一张流程图
- 先绘制理想路径，再增加复杂内容
- 包含错误和边缘情况的路径
- 保持流程图易读（单张图中不要设置过多分支）
- 使用一致的符号
- 为每个箭头标注触发条件／操作
评论
支持 Markdown