Back to Details

threejs-game-ui-designer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Three.js Game UI Designer

Three.js游戏UI设计师

Purpose

目的

Make game UI intentional, readable, responsive, and genre-specific.
让游戏UI具备明确的目的性、可读性、响应式，并贴合游戏类型。

Workflow

工作流程

Load 
references/ui-patterns.md
as the first action when designing HUDs, menus, overlays, pause/win/lose screens, settings, touch controls, typography, responsive layout, safe areas, text fit, icons, or UI/world cohesion. Track it in a reference ledger with yes/no, path, and failure reason. Do not mark the UI phase complete while this reference is skipped for interface work.
Load 
references/checklists/game-ui-quality.md
, 
references/checklists/hud-readability.md
, and 
references/checklists/responsive-ui-fit.md
before claiming UI/HUD/menu work is complete. Load 
references/checklists/mobile-input.md
when touch controls or mobile safe areas are in scope.
Load 
references/prompt-templates.md
only when the user asks for reusable prompts, a UI pass prompt, or a task template.
Load 
threejs-image-generator
when logos, icons, GUI art, faction marks, menu backgrounds, decals, or 2D HUD assets would improve quality. Use 
threejs-3d-generator
only for 3D menu/showcase objects or diegetic 3D UI props, not normal flat HUD elements.
  1. Capture/inspect desktop and mobile screenshots.
  2. Inventory UI states: gameplay, pause, settings, fail/retry, win/milestone, loading, touch controls.
  3. Define hierarchy: survival/status, objective, feedback, flavor.
  4. Replace utility stat cards with authored clusters, meters, badges, icons, alerts, and modal states.
  5. Use stable dimensions, safe-area padding, text-fit constraints, hover/pressed/focus/disabled states.
  6. Wire UI to game state, not duplicated rules.
  7. Verify text fit, overlap, safe areas, touch targets, responsive screenshots, and real state changes.
在设计HUD、菜单、覆盖层、暂停/胜利/失败界面、设置、触摸控件、排版、响应式布局、安全区域、文本适配、图标或UI与游戏世界融合时，第一步需加载
references/ui-patterns.md
。将其记录在参考台账中，包含是否完成、文件路径及失败原因。若界面设计工作跳过该参考文件，则不得标记UI阶段完成。
在宣称UI/HUD/菜单工作完成前，需加载
references/checklists/game-ui-quality.md
、
references/checklists/hud-readability.md
和
references/checklists/responsive-ui-fit.md
。当涉及触摸控件或移动端安全区域时，需加载
references/checklists/mobile-input.md
。
仅当用户要求可复用提示词、UI优化提示词或任务模板时，才加载
references/prompt-templates.md
。
当需要提升图标、GUI美术、阵营标识、菜单背景、贴花或2D HUD资产质量时，加载
threejs-image-generator
。仅在设计3D菜单/展示对象或叙事性3D UI道具时使用
threejs-3d-generator
，常规平面HUD元素请勿使用。
  1. 捕获/检查桌面端和移动端截图。
  2. 梳理UI状态：游戏进行中、暂停、设置、失败/重试、胜利/里程碑、加载、触摸控件。
  3. 定义信息层级：生存/状态、目标、反馈、风格化内容。
  4. 将实用型统计卡片替换为定制化的信息组、计量表、徽章、图标、警报和模态状态。
  5. 使用固定尺寸、安全区域内边距、文本适配约束，以及悬停/按下/聚焦/禁用状态。
  6. 将UI与游戏状态关联，避免重复规则。
  7. 验证文本适配、重叠情况、安全区域、触摸目标、响应式截图和真实状态变化。

Common Failure Modes

常见失败模式

  • Generic dashboard/stat-card HUD.
  • UI covers player/threats.
  • Text shifts/clips on mobile.
  • Decorative panels reduce readability.
  • Touch controls look right but do not emit intents.
  • 通用仪表盘/统计卡片式HUD。
  • UI遮挡玩家/威胁目标。
  • 移动端文本移位/截断。
  • 装饰性面板降低可读性。
  • 触摸控件外观正常但无法触发指令。

Final Response

最终交付

Report the reference ledger, UI state checklist, UI intent, states covered, files changed, screenshots, text-fit/overlap checks, safe-area/touch-target evidence, controls, and remaining risks.
提交参考台账、UI状态检查清单、UI设计意图、覆盖的状态、修改的文件、截图、文本适配/重叠检查结果、安全区域/触摸目标验证依据、控件说明以及剩余风险。