Roblox ui implementation

Roblox UI Implementation

Goal

Build Roblox UI that is readable, responsive, touch-friendly, and connected to real game state without trusting the client for valuable decisions.

Design Gate (read before building)

Do not improvise UI. Before building a non-trivial surface, read its approved design brief:

• design/DESIGN.md — global palette, type scale, spacing, and patterns.
• design/features/<feature-slug>/design.md — this surface's layout, states, and mobile/tablet/desktop behavior. It must say Status: approved.

If the brief is missing or still draft, stop and run roblox-game-ux to produce and approve it first (or get an explicit user override). Build every state the brief specifies — default, empty, loading, error, and permission/locked — not just the happy path, and match the mobile/tablet/desktop behavior it describes.

Architecture

• Keep UI construction and state updates in client-side controllers.
• Keep reward, purchase, inventory, and currency decisions on the server.
• Put shared UI constants or formatting helpers in ReplicatedStorage.
• Use remotes to request actions, not to grant value directly.
• Separate HUD state, menu state, notification state, and input handling when the UI grows.

Layout Rules

• Design phone-first.
• Use UIScale, constraints, and anchors deliberately.
• Keep important buttons away from corners and system gesture zones.
• Use large tap targets and clear pressed/disabled/loading states.
• Avoid text that can overflow in small buttons or compact panels.
• Keep core HUD visible without blocking the playfield.

Common Surfaces

• HUD: objective, currency, health/energy, progress, next reward.
• Upgrade panel: current value, next value, cost, affordability.
• Shop: optional offers, clear benefit, no first-session pressure.
• Rewards: short celebration, visible delta, next goal.
• Settings: audio, graphics/performance, input preferences.

MCP Build Workflow

1. Locate UI scripts and GUI instances with script_search, script_grep, and search_game_tree.
2. Read scripts with script_read and inspect GUI instances with inspect_instance.
3. Use multi_edit for code changes or execute_luau for targeted GUI construction.
4. Use start_stop_play, user_mouse_input, user_keyboard_input, and screen_capture to verify.
5. Check get_console_output.

Verification

Confirm:

• Text fits on mobile-sized screens.
• Buttons have obvious affordances and state.
• UI does not block first action.
• Valuable actions are server-validated.
• The built surface matches the approved design brief across mobile, tablet, and desktop, including empty/loading/error states.
• No new console errors.

Next

Verify the surface with roblox-mobile-playtest and roblox-playtest-qa. If the UI drove new server actions, review the trust boundary with roblox-security-economy. Return to roblox-to-issues / roblox-game-development-lifecycle for the next slice.