7.5 KiB
name, description
| name | description |
|---|---|
| draw-prototype-flow | 将产品想法、需求文档或现有系统整理成可编辑的低保真 Draw.io 原型、用户动线和产品规则说明板。 当用户提出画原型图、线框图、用户流程、用户动线、页面跳转、交互状态、wireframe、user flow、 UX flow、产品方案可视化，或要求检查和完善现有 .drawio 产品原型时使用。适合同时表达页面、弹窗、 异常态、角色权限、状态流转、字段规则与操作反馈；不用于像素级高保真 UI、纯技术架构图或单张插画。 |
绘制低保真原型与用户动线
把原型、动线和关键规则放进同一套可追踪的产品模型，交付原生可编辑的 .drawio 文件。
使用资源
- 快速单页原型复制
assets/prototype-flow-template.drawio，保留其画板尺寸、语义色和基础组件，再替换占位内容。 - 多页面原型复制
assets/scaffold-spec.example.json，填写页面清单和transitions，再运行scripts/scaffold_drawio.py生成可编辑骨架与总览连线，禁止手工从空 XML 重复搭建外壳。 - 开始绘制前读取
references/design-patterns.md；遇到复杂业务、多个角色或超过 8 个页面时，再读取references/product-model.md。 - 完成后运行
scripts/validate_drawio.py。该脚本可检查常见的压缩或未压缩 Draw.io 文件；Agent 输出时仍设置compressed="false"，便于审阅、差异比较和后续修改。
工作流
1. 确认交付边界
从用户材料中提取目标用户、核心任务、终端形态、必须覆盖的流程和输出路径。信息不全但不影响主流程时，采用合理假设并在交付说明中列出；只有会改变产品范围或关键流程时才询问。
默认交付：
- 原生可编辑
.drawio； - 一张端到端动线总览；
- 核心任务的页面与关键状态；
- 页面索引、状态流转和角色权限等必要规格；
- 可选的 PNG/SVG 预览，仅作为查看副本，不能代替源文件。
根据请求选择交付档位，避免把概念验证画成大而全的规格库：
- 快速：1 条核心动线、3～8 个画板、最高风险的 1～2 个异常；适合早期讨论。
- 标准（默认）：核心任务、8～20 个画板、动线总览、关键状态和必要的权限/字段规则；适合产品评审。
- 完整：多角色、多业务域、系统异常、状态机、权限矩阵和详细规格；适合开发与测试对齐。
用户没有指定时，根据材料成熟度选择，先说明档位和不覆盖的内容。
2. 先建模，再画图
建立稳定 ID，避免用会随排序变化的显示序号充当引用：
- 角色：
R-APPLICANT、R-APPROVER； - 页面：
P-LOGIN、P-ORDER-LIST； - 状态：
S-DRAFT、S-PENDING； - 动作：
A-SUBMIT、A-REJECT。
至少整理以下关系：
- 角色 → 目标 → 入口；
- 页面/弹窗 → 可见信息 → 可执行动作；
- 动作 → 前置条件 → 成功去向 → 失败反馈；
- 业务对象 → 状态 → 可编辑性 → 角色权限；
- 字段 → 必填/值域/联动 → 校验反馈。
复杂任务使用 references/product-model.md 中的清单模板。先消除断头页面、无去向按钮和无入口状态，再开始排版。
3. 选择画布结构
- 不超过 12 个交互画板：可放在一个 Draw.io 页面，按「主流程 → 异常态 → 规格」排列。
- 超过 12 个交互画板：默认拆成多个 Draw.io 页面，例如
00-总览、10-申请人、20-审批人、30-异常状态、40-规格。总览页保留所有跨域跳转。 - 用户明确需要一张巨幅说明板时才使用单页矩阵；每行最多 5 个 1600×900 画板，横向间距 120，纵向间距 260，先放原型、再放流程和规格。
这里的“交互画板”只统计用户可进入的页面、弹窗和异常状态；动线总览、页面索引、字段字典和权限矩阵不参与 12 个阈值计算。生成多页骨架：
python3 <skill-dir>/scripts/scaffold_drawio.py scaffold-spec.json output.drawio
每个画板标题使用「显示序号 · 页面名 · 状态」；底部元信息写角色、入口、核心功能和下一步，但跨页引用使用稳定 ID，例如 下一步：P-DETAIL，不要手写易漂移的序号。
4. 绘制页面与状态
遵循 references/design-patterns.md 的视觉语法，并保持低保真：
- 使用一致的应用外壳、导航、标题层级、表单、表格、按钮和反馈组件；
- 主操作、成功、警告、危险和辅助跳转使用固定语义色；
- 按钮、字段、弹窗和表格单元格保持独立图元，禁止把整个页面栅格化为图片；
- 为核心任务画成功路径，也覆盖与业务相关的加载、空数据、校验失败、权限不足、并发冲突和不可逆确认；
- 弹窗作为触发页面的明确状态，必须同时画取消/返回路径和确认后的结果；
- 内容优先使用真实语义的示例数据，避免大段 Lorem Ipsum。
5. 绘制动线
在总览中按角色或阶段使用泳道。所有跳转必须使用 Draw.io edge，并设置真实的 source、target：
- 节点写页面稳定 ID 与名称；
- 连线标签写用户动作或系统结果，如「提交审批」「保存失败」「自动完结」；
- 判断节点写条件，分支在线上写具体结果；
- 成功用绿、警告/可恢复异常用橙、破坏性操作用红、普通导航用蓝；
- 连线优先正交，绕开画板与文字，不用无来源或无目标的装饰箭头；
- 每个入口可达，每个非终态有去向，每个终态有清晰结果。
6. 补齐产品规格
原型之后至少提供页面与动作索引。按复杂度增加：
- 角色 × 页面 × 操作权限矩阵；
- 状态流转、触发动作、操作者和结果；
- 字段字典、值域、必填与联动规则；
- 异常反馈与恢复动作；
- 报表、导出或批处理口径。
不要为凑数量复制页面。规格应解释原型无法准确表达的规则，并使用与原型相同的稳定 ID。
7. 一致性检查
逐项核对：
- 每个核心任务都能从入口走到明确结果；
- 每个可点击主操作都在动线或规格中有去向；
- 每条连线的源按钮、目标页面和标签语义一致；
- 页面状态、角色权限、字段规则和按钮可编辑性不冲突；
- 确认弹窗、失败反馈和恢复路径成对出现；
- 所有引用使用稳定 ID，显示序号没有被当作唯一标识；
- 文字没有明显截断，图元不重叠，连线不穿过主要内容。
运行结构校验：
python3 <skill-dir>/scripts/validate_drawio.py <output.drawio> --min-frames 1
存在两个以上交互画板时追加 --min-edges 1，确保至少有一条真实动线；正式交付按核心转移清单设置更高的最小连线数。
多页面或正式交付追加 --strict；如果环境有 Draw.io 导出工具，再导出 PNG/SVG 并目视检查全图和 2～3 个关键画板。不要把包含私有需求的文件上传到公共在线转换服务。
完成标准
.drawio能被 XML 解析并在 diagrams.net/Draw.io 打开；- 图元和文字可单独编辑，关键跳转是有源和目标的连接线；
- 核心流程、关键分支、角色权限和业务状态相互一致；
- 校验无 error；正式交付在
--strict下也无 warning，或逐条说明保留原因； - 向用户列出产物路径、采用的假设、覆盖范围以及仍待产品决策的问题。