threejs-game-ui-designer

1# Three.js Game UI Designer
2 
3Make game UI intentional, readable, responsive, and specific to the genre.
4 
5Preserve the user's requested scope and style. For a narrow HUD fix, retain the existing design and check the changed state and target viewports. For a complete UI pass, use the full workflow below. Mobile input is required when mobile is a target, not because a desktop-only game has UI.
6 
7## Reference
8 
9`references/ui-patterns.md` — hierarchy and required states, HUD zones, menus, touch controls, responsive constraints, style cohesion, and state wiring. Read it before designing HUDs, menus, overlays, touch controls, or responsive layout.
10 
11Load `threejs-image-generator` when logos, icons, GUI art, faction marks, menu backgrounds, or 2D HUD assets would raise the quality. `threejs-3d-generator` only for genuine 3D menu objects and diegetic props, not flat HUD elements.
12 
13## Workflow
14 
151. Capture desktop and mobile screenshots of what exists.
162. Inventory the UI states: gameplay, pause, settings, fail and retry, win or milestone, loading, touch controls.
173. Set the hierarchy: survival and status, then objective, then feedback, then flavor.
184. Replace utility stat cards with authored clusters, meters, badges, icons, alerts, and modal states.
195. Use stable dimensions, safe-area padding, text-fit constraints, and hover/pressed/focus/disabled states.
206. Wire UI to game state rather than duplicating game rules inside UI code.
21…