Roblox GUI Maker
在线设计商店、HUD、菜单和背包面板，再把可编辑的 Luau ScreenGui 代码复制到 Roblox Studio。
实时预览
生成的 ScreenGui 工作区
可视化主题
切换风格时保持同一套 Luau 组件树不变。
图层化输出
导出前就能检查生成的框、文字和按钮。
纯 Luau 导出
复制干净的 ScreenGui 代码，不依赖外部运行时库。
使用方式
不用注册
打开就能编辑，复制或下载 Luau 代码都不需要账号。
手机上能用
编辑器在手机浏览器里可以直接跑，预览能切换成手机布局，导出前就能确认缩放。
Beta 期间免费
生成器在 Beta 阶段保持免费，不绑卡，没有试用倒计时。
Roblox GUI 工作流
如何使用 Roblox GUI Maker 制作游戏界面
实用的 Roblox GUI 应该从玩家任务开始，而不是先堆装饰。先确定玩家是在购买物品、查看生命值、打开背包，还是选择菜单操作。这个免费 Roblox GUI Maker 可以把任务整理成清晰层级，在写脚本前预览，并导出可继续编辑的 Luau，而不是一张无法修改的图片。
Roblox GUI Maker 实际会创建什么
Roblox 把屏幕界面放在 ScreenGui 中。Frame 用来组织区域，TextLabel 展示状态，TextButton 提供玩家操作。生成器可以为商店、背包、主菜单、HUD、每日奖励和 Gamepass 弹窗创建这些常见 Roblox UI 实例。浏览器预览和导出使用同一份组件模型，所以 Luau 层级会尽量贴近你确认过的布局。
导出结果是可扩展的起点，不是锁死的模板，也不是完整游戏系统。你可以重命名实例、调整颜色和 UDim2、添加图片，再用自己的 LocalScript 连接按钮。购买请求、背包数据、生命值和其他游戏状态仍应由你的 Roblox 项目管理，并由服务器代码验证。
为什么写脚本前要先规划 Roblox ScreenGui
Roblox 新手经常遇到相同问题：布局太挤、实例树难读，或者界面只在一台显示器上正常，换到手机就错位。先规划结构，可以减少从草图搬到 Roblox Studio 时的返工。
清晰的信息层级
每个界面先确定一个主要目的、一个明确标题和一个核心操作，再增加装饰。
跨设备布局
需要随屏幕变化的元素优先使用 Scale，再到 Studio Device Emulator 检查 AnchorPoint 和约束。
界面与逻辑分离
先完成可见的 ScreenGui，再把按钮连接到安全的游戏系统，不要把所有职责塞进一个脚本。
更快迭代
有名称的 Frame、Label 和 Button 层级，比匿名生成图层更容易检查、换肤和调试。
六步制作一个 Roblox GUI
不必等所有交互完成后再看布局。先用下面的流程把清晰的视觉基础放进 Studio，再补上只有你的游戏才知道的业务行为。
- 1
选择玩家任务
选择 Shop、Inventory、Main Menu、HUD、Daily Reward 或 Gamepass Popup。应选择最接近玩家任务的模式，而不是特效最多的模式。
- 2
选择风格并写清标题
尝试视觉预设，再把示例标题换成游戏内真实用语。文字要足够短，避免在小屏幕或本地化文本变长时溢出。
- 3
检查 Roblox UI 层级
查看实时预览和命名图层，确认主面板、标题、信息文字和主要按钮符合玩家自然浏览顺序。
- 4
复制 Luau ScreenGui 导出
点击 Copy Luau code 或下载 .lua 文件。生成代码只创建标准 Roblox 实例，不依赖外部运行库、软件包或账号连接。
- 5
在 LocalScript 中运行
在 Roblox Studio 的 StarterPlayerScripts 下创建 LocalScript，粘贴代码并开始 Play Test。脚本会等待本地玩家的 PlayerGui，再挂载 ScreenGui。
- 6
测试桌面、手机和重生
使用 Studio Device Emulator 检查手机和桌面尺寸，并查看 Scale、Offset、AnchorPoint、安全区域和文字长度。再重生一次，确认 ScreenGui 是否应保留状态。
从浏览器预览到 Roblox Studio
导出的 ScreenGui 会把 ResetOnSpawn 设为 false，适合需要在角色重生后继续显示的界面。如果你的游戏要求每次重生都刷新界面，应主动修改这个行为，并重新连接与角色相关的引用。不要把 StarterGui 当成玩家运行时界面的实时状态。
响应式布局仍然必须真实测试。DevForum 中很多问题来自固定像素 Offset：它在一个分辨率上正常，换设备就失效。需要跟随视口的元素应优先使用相对 Scale，用 AnchorPoint 控制缩放方向，只在设计确实需要时添加比例或尺寸约束。
- 把导出放进 LocalScript，而不是服务器 Script，因为它使用本地玩家和 PlayerGui。
- 把生成的实例名称当作可读基础；如果后续脚本依赖路径，重命名时要同步修改引用。
- 发布前测试手机、平板和桌面预设，同时检查 Roblox 顶栏和设备安全区域。
- 按钮必须连接你自己的服务器验证逻辑；视觉生成器不会发放物品、货币或购买结果。
更快做出 Roblox UI
从实用 GUI 模板开始，预览布局，再导出 Roblox Studio 可用代码。
面向游戏的 GUI 模板
生成商店、背包、HUD、每日奖励、Gamepass 弹窗和主菜单。
适合游戏的风格预设
在科幻、模拟器、奇幻、极简、军事和休闲风格之间切换。
实时预览
导出前先检查间距、文字和层级。
Luau ScreenGui 导出
复制生成的 Luau 代码，创建 Roblox UI 实例并挂到 PlayerGui。
模板库
先用首批模板验证，再扩展 shop、inventory、menu 和 HUD 长尾页面。
独立且合规
不使用 Roblox 官方 Logo，不暗示官方关系，不做账号自动化、免费 Robux 或 exploit 内容。
抢先体验
生成器 beta 期间免费
现在可以免费试用 Roblox GUI Maker。保存项目和模板包成熟后，再开放付费计划。
现在就能搭好并复制你的第一个 GUI
生成器在 Beta 期间不收费。你可以用它测试导出的 ScreenGui 代码是否适合你的 Roblox Studio 工作流。
- 生成 Roblox 商店、背包、HUD、菜单、奖励和通行证 GUI 预览
- 复制可编辑的 Luau ScreenGUI 代码
- 不用注册就能试风格预设
产品准备好之后再开放付费计划
等核心导出流程、项目保存和模板库成熟到可以收费时，我们再加定价。
- 项目保存和模板历史
- 更多 Roblox 风格 UI 包
- PNG 导出和高级布局控制
Roblox GUI Maker FAQ
面向想要真实 Roblox Studio 导出的创作者。
继续制作
相关 Roblox GUI 工具与指南
从通用布局进入更专注的商店工作流，或者先了解 ScreenGui 层级，再连接游戏逻辑。
Roblox Shop GUI Maker
制作带分类、商品卡片、响应式预览、开关控件和可编辑 Luau UI 代码的 Roblox 商店。
打开商店 GUI 工具Roblox 游戏 UI 工具
在线搭商店、背包、主菜单、HUD 和弹窗，再导出对应的 Luau 代码。
打开游戏 UI 工具Robux 换 USD 计算器
按 Roblox 官方 DevEx 汇率把 Robux 换算成美元，也能反向用美元目标算 Robux。
打开计算器Roblox UI 创意清单
按游戏类型分组的十二个布局，每一条都对应一个能直接打开的预设。
看创意清单Roblox Inventory GUI Maker
设置网格槽位、列数、物品卡片、稀有度和数量，再导出对应的背包布局。
打开背包工具Roblox GUI 指南
阅读 GUI 层级、ScreenGui 导出以及从浏览器预览到 Roblox Studio 的实用说明。
浏览指南