<< All versions
Skill v1.0.0
currentAutomated scan100/100guiguiyan930-source/game-ui-design-workflow/game-ui-page-generator
──Details
PublishedSeptember 29, 2026 at 09:51 PM
Content Hashsha256:a3058c32aa0874d2...
Git SHA
──Files
Files (1 file, 3.6 KB)
SKILL.md3.6 KBactive
SKILL.md · 102 lines · 3.6 KB
version: "1.0.0" name: game-ui-page-generator description: Designs and generates one complete game UI page at a time using an approved style and screen contract, producing a page brief, reproducible image prompt, negative constraints, an actual visual asset when image generation is available, and a manifest entry. Use for home, task, ranking, shop, inventory, character, event, reward, settlement, login, onboarding, HUD, or other game screens.
游戏 UI 单页视觉生成
一次只完成一个页面,继承项目契约,不把连续页面做成互不相关的风格稿。
前置条件
读取:
- 策划三文档须已由
game-ui-product-design完成:gdd.md、prd.md、interaction.md(status: approved,或quickstart.md已记录跳过策划门禁) spec.md与research.mdcontracts/style-contract.yaml- 目标页面在
contracts/screen-contract.yaml中的条目 - 已批准的基准页面及
asset-manifest.yaml
若策划三文档缺失或仍为 draft 且用户未明确跳过,停止生图,改调生成第一步 game-ui-product-design。 若样式契约仍为 draft,可以生成探索稿,但资源不得标记为已批准。
页面步骤
- 确认页面 ID、目的、主操作、状态和比例;核对
interaction.md中该页主流程。 - 建立信息层级:主视觉、主操作、资源状态、导航、次级入口。
- 具体说明顶部、中部、底部和悬浮区域,不只写通用布局名称。
- 列出按钮、卡片、图标、角色、状态栏、导航、气泡和装饰。
- 从样式契约注入色值、材质、光向、圆角、描边和字体策略。
- 生成完整正向提示词和反向限制。
- 图片工具可用时实际生图;不可用时保留提示词并降级。
- 保存提示与图片,更新页面契约和资源清单。
提示文件
保存为 prompts/pages/<screen-id>.md,结构必须为:
markdown
# <页面名称>## 页面定位## 视觉约束## 布局与组件## 状态## 图像生成提示词## 反向限制## 验收记录
正向提示词必须包含:
- 页面名称、游戏类型、平台、比例和参考尺寸
- 顶中底及辅助区域的具体内容
- 主角色、场景或核心玩法焦点
- 契约中的色彩、材质、光源、圆角、描边和图标语言
- 可点击质感、信息层级、中文策略、画面质量
- 与已批准基准页保持一致的要求
反向限制至少包含:
- 乱码、错误文字、商标和未经授权角色
- 按钮变形、错误透视、元素粘连、主体遮挡
- 信息层级混乱、过度复杂、低清晰度
- 违反契约的色调、光向、材质或圆角
图片生成
图片工具可用时:
- 使用工具支持的最接近比例。
- 文件名使用
<screen-id>-v<数字>.<ext>。 - 将结果保存到
assets/pages/。 - 在 manifest 记录真实路径、尺寸、状态和版本来源。
- 生图中文字不可读时,不通过验收;生成无文字底板或安排后期排字。
图片工具不可用时:
- 不创建假图片
status: pending-generationapproved: false- 提示词路径必须有效
页面批准
只有同时满足以下条件才把 approved 设为 true:
- 主操作清楚,页面目的成立
- 比例、安全区和导航合理
- 契约中的视觉语言一致
- 关键状态有对应方案
- 文字可读或已明确采用后期排版
- 用户确认或项目验收规则明确通过
输出
- 页面说明与提示文件
- 实际视觉稿或明确的待生成状态
- 更新后的
screen-contract.yaml - 更新后的
asset-manifest.yaml - 后续组件拆解建议