---
name: draw-prototype-flow
description: >-
  将产品想法、需求文档或现有系统整理成可编辑的低保真 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`。

至少整理以下关系：

1. 角色 → 目标 → 入口；
2. 页面/弹窗 → 可见信息 → 可执行动作；
3. 动作 → 前置条件 → 成功去向 → 失败反馈；
4. 业务对象 → 状态 → 可编辑性 → 角色权限；
5. 字段 → 必填/值域/联动 → 校验反馈。

复杂任务使用 `references/product-model.md` 中的清单模板。先消除断头页面、无去向按钮和无入口状态，再开始排版。

### 3. 选择画布结构

- 不超过 12 个交互画板：可放在一个 Draw.io 页面，按「主流程 → 异常态 → 规格」排列。
- 超过 12 个交互画板：默认拆成多个 Draw.io 页面，例如 `00-总览`、`10-申请人`、`20-审批人`、`30-异常状态`、`40-规格`。总览页保留所有跨域跳转。
- 用户明确需要一张巨幅说明板时才使用单页矩阵；每行最多 5 个 1600×900 画板，横向间距 120，纵向间距 260，先放原型、再放流程和规格。

这里的“交互画板”只统计用户可进入的页面、弹窗和异常状态；动线总览、页面索引、字段字典和权限矩阵不参与 12 个阈值计算。生成多页骨架：

```bash
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. 一致性检查

逐项核对：

1. 每个核心任务都能从入口走到明确结果；
2. 每个可点击主操作都在动线或规格中有去向；
3. 每条连线的源按钮、目标页面和标签语义一致；
4. 页面状态、角色权限、字段规则和按钮可编辑性不冲突；
5. 确认弹窗、失败反馈和恢复路径成对出现；
6. 所有引用使用稳定 ID，显示序号没有被当作唯一标识；
7. 文字没有明显截断，图元不重叠，连线不穿过主要内容。

运行结构校验：

```bash
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，或逐条说明保留原因；
- 向用户列出产物路径、采用的假设、覆盖范围以及仍待产品决策的问题。