Game Ui Page Generator

游戏 UI 单页视觉生成

一次只完成一个页面，继承项目契约，不把连续页面做成互不相关的风格稿。

前置条件

读取：

• 策划三文档须已由 game-ui-product-design 完成：gdd.md、prd.md、interaction.md（status: approved，或 quickstart.md 已记录跳过策划门禁）
• spec.md 与 research.md
• contracts/style-contract.yaml
• 目标页面在 contracts/screen-contract.yaml 中的条目
• 已批准的基准页面及 asset-manifest.yaml

若策划三文档缺失或仍为 draft 且用户未明确跳过，停止生图，改调生成第一步 game-ui-product-design。 若样式契约仍为 draft，可以生成探索稿，但资源不得标记为已批准。

页面步骤

1. 确认页面 ID、目的、主操作、状态和比例；核对 interaction.md 中该页主流程。
2. 建立信息层级：主视觉、主操作、资源状态、导航、次级入口。
3. 具体说明顶部、中部、底部和悬浮区域，不只写通用布局名称。
4. 列出按钮、卡片、图标、角色、状态栏、导航、气泡和装饰。
5. 从样式契约注入色值、材质、光向、圆角、描边和字体策略。
6. 生成完整正向提示词和反向限制。
7. 图片工具可用时实际生图；不可用时保留提示词并降级。
8. 保存提示与图片，更新页面契约和资源清单。

提示文件

保存为 prompts/pages/.md，结构必须为：

# 

## 页面定位
## 视觉约束
## 布局与组件
## 状态
## 图像生成提示词
## 反向限制
## 验收记录

正向提示词必须包含：

• 页面名称、游戏类型、平台、比例和参考尺寸
• 顶中底及辅助区域的具体内容
• 主角色、场景或核心玩法焦点
• 契约中的色彩、材质、光源、圆角、描边和图标语言
• 可点击质感、信息层级、中文策略、画面质量
• 与已批准基准页保持一致的要求

反向限制至少包含：

• 乱码、错误文字、商标和未经授权角色
• 按钮变形、错误透视、元素粘连、主体遮挡
• 信息层级混乱、过度复杂、低清晰度
• 违反契约的色调、光向、材质或圆角

图片生成

图片工具可用时：

1. 使用工具支持的最接近比例。
2. 文件名使用 -v.。
3. 将结果保存到 assets/pages/。
4. 在 manifest 记录真实路径、尺寸、状态和版本来源。
5. 生图中文字不可读时，不通过验收；生成无文字底板或安排后期排字。

图片工具不可用时：

• 不创建假图片
• status: pending-generation
• approved: false
• 提示词路径必须有效

页面批准

只有同时满足以下条件才把 approved 设为 true：

• 主操作清楚，页面目的成立
• 比例、安全区和导航合理
• 契约中的视觉语言一致
• 关键状态有对应方案
• 文字可读或已明确采用后期排版
• 用户确认或项目验收规则明确通过

输出

• 页面说明与提示文件
• 实际视觉稿或明确的待生成状态
• 更新后的 screen-contract.yaml
• 更新后的 asset-manifest.yaml
• 后续组件拆解建议

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: guiguiyan930-source
• Source: guiguiyan930-source/game-ui-design-workflow
• License: MIT

Install and usage instructions live in the source repository linked above.