Make the interface readable, operable, and consistent with server-authoritative state on target devices. Before starting, read the player flow, DataModel structure, asset registry, andStudio Plugin RoutingandControl Model。
All visible UI work items follow theResponsive UI ContractMaintain visualContractRef; when visual baselines and manual screen acceptance are needed, also comply with theVisual Workflow. The contract records the actual safe area, viewport, language, input, and semantic node relationships; platform-wide adaptation cannot be inferred from a screenshot or a single size.
Responsibilities and Inputs
- First inspect StarterGui, ScreenGui, existing UI modules, input actions, text localization, and design specs; reuse existing components.
- Keep pure presentation and input collection on the client; actions involving items, purchases, rewards, or settings server state must go through Remote requests and be validated by the server.
- Define opening, closing, focus, pause/resume, and restoration behavior for the HUD and modal layers separately.
- Hand key layout decisions or player-visible copy with substantial trade-offs to the designer; mark inaccessible or unauthorized assets as blockers.
- When layout, input scope, or acceptance goals genuinely require key user trade-offs,Interrogation Skillrecords them uniformly, to avoid turning queryable Studio properties into user questions.
- Authoritative gameplay requests triggered by the interface comply with the Gameplay Development contract; animation and feedback follow the lifecycle rules of juice .
Implementation Steps
- Break the screen into stable components, recording hierarchy, anchors, size constraints, states, button semantics, and close paths.
- Configure ScreenGui layout for safe area and system UI avoidance; place key interactive content within the safe display area, and only background decoration may extend to the edges.
- Define reachable paths, focus feedback, cancel actions, and mis-touch tolerance separately for touch, keyboard/mouse, and gamepad navigation; only cover approved platforms.
- Text is presented through localization tables and real runtime data; cover long and short text, missing translations, font fallback, line wrapping, number/timer changes, and accessibility names for text-free icons.
- The client displays waiting, success, rejection, loading, and timeout states of server state; do not rely on color alone to convey results.
- When opening and closing the interface, save and restore focus, input mode, and the state of layers temporarily obscured; reset invalid bindings when Player/Character changes.
- Check for state leaks and duplicate listeners with multiple open/close cycles, rapid repeated clicks, disconnect/reconnect, and small-screen layout paths.
- Input and layout scenarios handed off to QA should be recorded per QA and Performance evidence requirements.
Delivery and Verification
- Deliver ScreenGui paths, component/state diagrams, layout constraints, localization keys, input mappings, Remote requests, and server responses.
- Use Studio plugins to inspect the actual instance tree and scripts; collect interaction evidence through authorized Studio run flows.
- Performance and compatibility conclusions are recorded based on the actual tested device/simulator; a single screenshot cannot prove that input and dynamic layout pass.
- If visual confirmation is needed, provide screenshots and inspection points, and the user will manually inspect the display effect; do not automatically analyze screenshots or determine visual pass on the user's behalf.
Do not let local buttons directly change authoritative progress or purchase results. Do not describe a layout verified on only one screen size as adapted to all devices.
Interaction state checks
- The primary button must present the necessary states such as available, pressed, waiting, disabled, success, and failure.
- Operation results must be understandable by screen readers and non-color cues; icon buttons should have meaningful text names.
- Text input must define length, submission, cancellation, focus loss, soft keyboard occlusion, and untrusted content display policies.
- After menu switching and modal layer closing, restore player input or focus, and do not mistakenly pass shortcuts into the game world.
- Gamepad operation should be able to enter every key control and clearly display the current focus.
- When the player leaves, respawns, or the interface is destroyed, disconnect button listeners and state subscriptions to avoid duplicate binding.
- Dynamic numbers and prices come from server state; the button prompt in the purchase flow cannot replace server-side receipt confirmation.
- Localization validation uses real translations and representative long text, recording text truncation, line wrapping, and layout shift.
- New interfaces need to mark their language keys, screen orientation, input methods, and overlay layer hierarchy to facilitate QA re-verification.