SKILL-PROJECT: Skill for OpenCode

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 或临时图片等中间产物。