roblox-ui-implementation

Roblox UI 实现

目标

构建易读、响应迅速、适合触控的 Roblox UI，并将其连接到真实游戏状态，同时不信任客户端来做有价值的决策。

设计关卡（构建前阅读）

不要凭空设计 UI。在构建非简单界面之前，先阅读已批准的设计简报：

• design/DESIGN.md — 全局配色、字号比例、间距和模式。
• design/features/<feature-slug>/design.md — 此界面的布局、状态，以及移动端／平板／桌面端行为。状态必须为 Status: approved。

如果简报缺失或仍处于 draft 状态，请停止并先运行 roblox-game-ux 来编写并批准简报（或取得用户的明确许可）。构建简报中规定的所有状态——默认、空、加载、错误和权限／锁定——而不仅仅是理想情况，并遵循其中描述的移动端／平板／桌面端行为。

架构

• 在客户端控制器中构建 UI 并更新状态。
• 在服务端处理奖励、购买、库存和货币相关决策。
• 将共享 UI 常量或格式化辅助函数放在 ReplicatedStorage 中。
• 使用远程对象来请求操作，而不是直接授予有价值的内容。
• UI 规模扩大时，分离 HUD 状态、菜单状态、通知状态和输入处理。

布局规则

• 优先按手机端进行设计。
• 谨慎使用 UIScale、约束和锚点。
• 重要按钮应远离角落和系统手势区域。
• 使用较大的点击目标，并清晰呈现按下／禁用／加载状态。
• 避免在小按钮或紧凑面板中使用可能溢出的文本。
• 保持核心 HUD 可见，且不遮挡游戏区域。

常见界面

• HUD：目标、货币、生命值／能量、进度、下一个奖励。
• 升级面板：当前数值、下一级数值、费用、是否负担得起。
• 商店：可选优惠、明确的收益、不对首次会话施加压力。
• 奖励：简短的庆祝效果、清晰显示数值变化、下一个目标。
• 设置：音频、图形／性能、输入偏好。

MCP 构建工作流

1. 使用 script_search、script_grep 和 search_game_tree 查找 UI 脚本和 GUI 实例。
2. 使用 script_read 阅读脚本，并使用 inspect_instance 检查 GUI 实例。
3. 使用 multi_edit 修改代码，或使用 execute_luau 定向构建 GUI。
4. 使用 start_stop_play、user_mouse_input、user_keyboard_input 和 screen_capture 进行验证。
5. 检查 get_console_output。

验证

确认：

• 文本在手机尺寸的屏幕上能够完整显示。
• 按钮具有明显的可交互提示和状态。
• UI 不会阻碍玩家执行第一个操作。
• 有价值的操作均经过服务端验证。
• 构建的界面符合已批准设计简报对移动端、平板和桌面端的要求，包括空／加载／错误状态。
• 控制台没有新增错误。

下一步

使用 roblox-mobile-playtest 和 roblox-playtest-qa 验证界面。如果 UI 触发了新的服务端操作，请使用 roblox-security-economy 检查信任边界。接下来返回 roblox-to-issues／roblox-game-development-lifecycle 处理下一个阶段。