Quick Start

Welcome to Roblox GUI Maker. This quick start walks you from a blank canvas to exported Luau in about five minutes, no Luau knowledge required.

1. Open the web editor and pick a device preset (desktop, tablet, or mobile). The canvas shows a DeviceFrame at the chosen size, so you see exactly how the layout will look on that device. 2. Drag a Frame from the Components tab onto the canvas. The Frame becomes your root container. Resize it by dragging its corner handles, or set exact Size values in the Properties panel. 3. Add a TextButton inside the Frame. Click the Frame first so the button parents to it, then drag the TextButton from the Components tab. Edit the button text in the Properties panel. 4. Use UIListLayout or UIGridLayout to arrange children automatically. Drag a layout object into the Frame and the children snap into a vertical list or a grid without manual UDim2 math. 5. Adjust colors and corner radius in the Properties panel. Every change updates the canvas instantly, and you can undo with Ctrl+Z if you make a mistake. 6. Preview on a different device by switching the DeviceFrame preset at the top of the canvas. Scale-based sizing means your layout stays proportional across sizes. 7. Click Export and choose LocalScript to copy the client Luau, or download a ZIP with the full project. The exported code is editable Luau, not a screenshot. 8. In Roblox Studio, insert a LocalScript under StarterGui and paste the code. Press Play and your GUI appears exactly as designed.

You can also skip the blank canvas: pick a template from the Templates page, open it directly in the editor, and customize it before exporting. Templates include inventories, shops, HUDs, and menus with real game logic.

Common first-timer questions: the Free plan gives you 50 AI generation credits per month, so you can also describe a UI in the AI panel and let the generator build the starting layout for you. And you do not need Roblox Studio open until the export step - everything up to then happens in the browser.