| name | prototype-design-xml |
| description | 根据自然语言需求或需求文档生成简约、可在 Draw.io/diagrams.net 中继续编辑的 `.drawio` XML 页面原型。用于 XML 原型、Draw.io 原型、可编辑页面原型、后台页面线框图、UI 评审稿和产品页面结构设计；不用于可运行 HTML、架构图、流程图或高装饰性成品 UI。 |
Draw.io XML 原型生成器
生成用于需求沟通和页面评审的可编辑原型。重点表达页面结构、组件和状态，不把原型画成复杂流程图或正式视觉稿。
必读资源
- 分析页面、组件和布局前读取
references/prototype-dsl.md。
- 生成时以
templates/web-prototype.drawio 为页面骨架参考。
- 需要完整案例时读取
examples/red-packet-prototype.drawio。
强制流程
需求分析 → 页面与任务规划 → 内部自然语言 DSL → 匹配基础模板 → 生成 Draw.io XML → 结构检查 → Draw.io 渲染检查 → 修正并交付
1. 分析需求
明确原型目的、用户角色、核心任务、页面范围、设备类型、保真度、主题和输出路径。用户提供需求文档时读取该文档；未提供时直接分析当前需求，不依赖固定默认文件。
2. 规划页面与任务
列出页面清单、全局导航、每个页面的主要任务及页面关系。一个主要页面优先使用一个 Draw.io diagram page；页面较少时也可以在同一画布使用清晰分离的页面画框。
普通页面原型不使用大量跳转箭头。需要表达页面关系时优先使用编号、文字注释或单独的页面索引；只有用户明确要求页面流程视图时才增加少量连线。
3. 在内部形成详细自然语言 DSL
按 references/prototype-dsl.md 在当前上下文中描述页面、画框、导航、组件、文案、状态、布局和检查要求。DSL 仅作为内部生成依据，默认不得创建、输出或交付 .dsl、Markdown、JSON、JSON Schema 或 DiagramPlan 等中间文件。
完成条件：只阅读 DSL 即可还原所有页面画框和主要组件，XML 阶段不再猜测布局意图。
4. 匹配基础模板
使用 templates/web-prototype.drawio 的页面画框、设计令牌和基础组件。根据需求增删区域，禁止保留空导航、空卡片或无业务含义的模板占位内容。
5. 生成 Draw.io XML
- 生成 UTF-8、未压缩、可编辑的
.drawio XML。
- 保持
mxCell ID 唯一，元素位于对应页面 root 下。
- 默认
grid=0、shadow=0，不使用渐变、纹理或背景网格。
- 标题使用独立文字元素，不与内容容器共用一个 cell。
- 使用普通矩形、文字和分割线；圆角控制在 4–6px 的视觉程度。
- 页面允许纵向延伸，不把全部内容压入固定首屏。
- 原型页面默认不画连接线；注释线不得穿过页面内容。
6. 结构检查
检查 XML 可解析、ID 唯一、页面名称清楚、元素父级正确、画框范围合理、文字非空以及必要组件完整。检查标题是否独立、同类组件尺寸是否一致、表格列是否对齐、元素是否越界或重叠。
7. Draw.io 渲染检查
在 Draw.io 中打开或导出 PNG 进行视觉检查，覆盖颜色对比、布局均衡、元素重叠、字体清晰、对齐、间距、内容拥挤、大面积空白和连线混乱。发现问题时返回 DSL 或布局阶段修正。
无法真实打开或渲染时必须明确说明“仅完成 XML 结构检查，未完成视觉验收”，不得声称最终视觉质量已通过。
简约视觉基线
- 默认浅色、系统字体、1px 边框、4–6px 圆角和 4/8px 间距体系。
- 默认无阴影、渐变、网格、发光和装饰性插画。
- 页面标题、区域标题和组件标签使用独立文字元素形成三级层级。
- 主色只用于主要操作和当前状态，状态色不得大面积铺色。
- 不为每个区域增加容器；只在需要表达分组时使用边框。
输出
输出到用户指定目录；未指定时输出到项目根目录 output/prototype/drawio。只交付最终 .drawio 路径，并说明页面范围、主题及结构和渲染验证结果。默认不创建 README、DSL、Markdown、JSON 或临时图片等中间产物。
