Roblox · Luau export

Roblox UI builder: design in the browser, export Luau

Laying out a menu, shop or HUD by nudging Frames in Roblox Studio is slow. In openconstructor you build the screen on a free-form canvas from ready-made components (or ask the AI to make it), then export a single Luau LocalScript that recreates the design inside your game.

Open the editor →

How it works

Build the screen. Drop components from the library onto the page — buttons, cards, inventories made from grids, pricing tables for a shop — and drag them where you want them. You can also describe it to the AI assistant: “a dark shop window with three item cards and a buy button”.
Export. Click export ↓ and pick Roblox (Luau). openconstructor walks the rendered page, measures every visible box, text and control, and writes one .client.lua file.
Paste it into Studio. Create a LocalScript in StarterPlayer › StarterPlayerScripts (or in StarterGui) and paste the file into it. Press Play — the interface is built at runtime in the player's PlayerGui.

The .client.lua extension also works as-is with Rojo projects, which treat it as a LocalScript.

What the exported script creates

In the design	In Roblox
The page	A `ScreenGui` (`ResetOnSpawn = false`, `IgnoreGuiInset = true`) holding a centred `Frame` named “Page”
Boxes, panels, cards	`Frame` with the same position, size, colour and transparency
Text	`TextLabel` with size, colour, alignment and wrapping; bold weights use Gotham Bold, monospace text uses the Code font
Buttons	`TextButton` with `AutoButtonColor` so it reacts to hover and press
Inputs	`TextBox` with the placeholder text
Rounded corners	`UICorner`
Borders	`UIStroke` with thickness, colour and transparency
Linear gradients	`UIGradient` with a matching `ColorSequence`, `NumberSequence` and rotation
Screen size	A `UIScale` that fits the whole design to the viewport and updates when the window is resized

The script is plain, readable Luau with a small make() helper, so you can rename instances, move parts of it into your own modules or use it as a reference while you rebuild the UI by hand.

Wiring up logic

The export is a visual snapshot. Buttons and text boxes appear and respond to hover, but nothing is connected to your game yet. Each instance is named after the element it came from, so you can find it from your own code, for example:

local page = playerGui:WaitForChild("My interface"):WaitForChild("Page")
page:FindFirstChild("Buy", true).MouseButton1Click:Connect(function()
	-- fire a RemoteEvent, open a frame, etc.
end)

Honest limitations

Only layout and styling are exported — no click handlers, tweens or game logic.
CSS effects Roblox has no equivalent for (shadows, blur, filters, animations) are left out. Icons and images become plain frames, so add ImageLabels with your own asset IDs.
Positions are absolute offsets inside one scaled page, not a responsive UIListLayout structure. That keeps the result faithful to the design, but for complex, data-driven lists you will want to restructure the generated code.
Text uses Roblox fonts (Gotham, Gotham Bold, Code), so line breaks can differ slightly from the browser preview.

Tip: design at the resolution you target (for example 1440×900 for desktop) — the UIScale then only has to shrink the layout a little on smaller screens.

Making a game in LÖVE instead? See the LÖVE 2D export.

FAQ

Is this an official Roblox tool?

No. openconstructor is an independent, free and open-source project. It generates ordinary Luau that you paste into Roblox Studio yourself.

Where do I put the exported script?

Create a LocalScript in StarterPlayer › StarterPlayerScripts (or in StarterGui) and paste the exported file into it. It builds the ScreenGui in the local player’s PlayerGui when the game starts.

Do the buttons work after export?

They appear and react to hover and press, but they are not connected to any logic. Find them by name from your own script and connect MouseButton1Click or other events.

Does the UI scale on phones and tablets?

Yes. The script adds a UIScale that fits the whole design into the current viewport and updates when the screen size changes.

Does it cost anything?

No. The editor and all exports are free. The AI assistant is optional and uses your own provider key; several providers have no-cost tiers.

Ready to try it?

openconstructor is free, open source (MIT) and runs entirely in your browser. No sign-up is needed to build and export.