设计或审查 Three.js 游戏 HUD、菜单…

当你为 Three.js 游戏设计或检查 HUD、菜单、暂停/胜负/设置/加载等界面，并需要响应式、安全区、文本适配和触控可用性时使用。

适用场景

解决思路

1. 让游戏 UI 有意图、可读、响应式，并贴合具体游戏类型。
2. 保留用户要求的范围与风格；窄范围 HUD 修复时保留现有设计，只检查被改动状态和目标视口；完整 UI pass 才使用完整工作流。
3. 移动端是目标时必须纳入移动输入；不要因为桌面端游戏有 UI 就加入移动输入。
4. 设计 HUD、菜单、覆盖层、触控控件或响应式布局前，先阅读 `references/ui-patterns.md`，了解层级与必需状态、HUD 分区、菜单、触控控件、响应式约束、风格一致性和状态接线。
5. 当 logo、图标、GUI 美术、阵营标记、菜单背景或 2D HUD 资产能提升质量时，加载 `threejs-image-generator`。
6. 仅对真实 3D 菜单对象和叙事道具加载 `threejs-3d-generator`，不要用于平面 HUD 元素。
7. 截取现有 UI 的桌面端和移动端截图。
8. 盘点 UI 状态：游玩、暂停、设置、失败与重试、胜利或里程碑、加载、触控控件。
9. 设定层级：生存与状态，然后目标，然后反馈，然后氛围/风味。
10. 用精心设计的簇、仪表、徽章、图标、警报和模态状态替换通用统计卡片。
11. 使用稳定尺寸、安全区内边距、文本适配约束，以及悬停、按下、聚焦、禁用状态。
12. 将 UI 接线到游戏状态，而不是在 UI 代码中复制游戏规则。
13. 用可能出现的最长值检查文本适配和重叠，检查安全区、触控目标，并在两个视口上用真实状态变化验证。
14. 避免通用统计卡片仪表盘。
15. 避免 UI 遮挡玩家、威胁或下一决策。
16. 避免文本在移动端发生位移和裁剪。
17. 避免装饰面板降低可读性。
18. 避免触控控件看起来正确但不发出意图。
19. 输出报告：UI 意图与覆盖状态、改动文件、目标视口截图、文本适配与重叠发现、适用时的安全区与触控目标证据、剩余风险。
20. 将这些结果反馈给负责人的整合检查，而不是重复运行未变化的全局检查。

适用边界 · 注意事项

• 只做窄范围 HUD 修复时，不适用完整 UI pass 工作流；应保留现有设计并只检查变更状态和目标视口。
• 移动端不是目标时，不适用强制加入移动输入或触控控件。
• 没有 Three.js 游戏项目或不需要 3D 菜单对象/叙事道具时，不适用 `threejs-3d-generator`；平面 HUD 元素也不要使用它。