Getting started with the UI Designer

Describe your game, get every screen it needs, and put it in Roblox Studio. This page walks through the whole trip: designing, exporting, and where each piece lands in the Explorer.

1. Design your UI#

Open bloxmaps.com/ui/create.
Under Your game, describe it in a sentence or two (up to 500 characters), for example "A pet simulator with eggs, trading and rebirths". Stuck? Tap one of the example chips.
Pick the options, or leave them on Auto:
- Genre and HUD layout: Auto reads them from your prompt.
- Style: the look of the panels and buttons.
- Panels: Light or Dark.
- Designer: Instant works on every plan. AI (slower, more original) is on the Studio plan, up to 15 a day.
- Seed (under the arrow): the same prompt and seed give the same UI again.
Press Design my UI and wait a moment.

You can try one design without an account. After that, sign in with Roblox to make more (how many depends on your plan: see Plans, credits and exports). A design you made before signing in comes with you.

2. Look through every screen#

Every screen and tab shows up as a picture. Use the arrows or the strip under the picture to move between screens, switch between Desktop and Phone, and press Full screen to zoom in. Looking is free: you can open every screen and tab before you export anything.

Not happy with it? Change the prompt or the options and design again.

3. Export it#

Under the pictures, find Export to Roblox Studio. If you're signed out, press Sign in to export first.
Press Export and confirm. The first export of a design uses 1 export from your plan, the same exports maps use. When those run out it uses export credits.
You now get three buttons. Downloading or sending the same design again is free.

Button	What you get	Use it when
Add to my game (.rbxmx)	A model file named `<Name>.rbxmx` with everything the UI needs in one folder.	You already have a game and want to add the UI to it.
Starter place (.rbxlx)	A place file named `<Name>_Starter.rbxlx`: a baseplate with the UI already installed.	You're starting a new game, or just want to try the UI.
Send to Studio	Nothing to download. The BloxMaps Cloud plugin puts the UI straight into the place you have open.	You have the plugin. It's the tidiest way, and the best one for updates.

4. Put it in Studio#

Send to Studio#

Open your place in Roblox Studio with the BloxMaps Cloud plugin installed (get it here).
Sign the plugin in to the same account you use on the website. Export a map to Studio shows how to install it and sign in with a code.
Open the plugin's UIs tab and press Refresh if your design isn't listed yet.
Press Insert next to your UI. It puts the runtime, the design, its loader, its two hook scripts and any Extras in place in one undo step, so Ctrl+Z takes it all back out. Inserting again later updates them, but keeps any script you've edited.
Press Play.

Pressing Insert on a design you haven't exported yet exports it, which uses 1 export (or credit), just like the Export button.

Add to my game (.rbxmx)#

Open your game in Studio.
Drag <Name>.rbxmx into the Studio window, or right-click Workspace and choose Insert from File.
A folder called BloxUI_<Name> appears in Workspace. Press Play: its BloxUI_Setup script moves everything where it belongs and the UI appears.

BloxUI_Setup only moves things while the game is running. When you stop, the folder is back in Workspace. That's fine for trying the UI. To install it for good (and before you write code in the hook scripts), move the pieces yourself:

Open the BloxUI_<Name> folder in Workspace.
Drag BloxUI into ReplicatedStorage.
Drag the BloxUI_Blueprints folder into ReplicatedStorage. If ReplicatedStorage already has one, drag just the <Name> StringValue inside it into the existing folder.
Drag BloxUI_BlueprintLoader and <Name>_UIHooks into StarterPlayer > StarterPlayerScripts.
Drag <Name>_ServerHooks into ServerScriptService and tick its Enabled box in the Properties window (it ships turned off so it can't run from Workspace).
Has it a BloxUI_Extras folder (your Extras)? Move the BloxGame folder from BloxUI_Extras > ServerScriptService into ServerScriptService, and the one from BloxUI_Extras > StarterPlayer > StarterPlayerScripts into StarterPlayerScripts (anything else in it goes to the service it's named after). Then tick Enabled on ServerScriptService > BloxGame > Main.
Delete the now almost empty BloxUI_<Name> folder, including BloxUI_Setup.

Starter place (.rbxlx)#

Open <Name>_Starter.rbxlx in Studio (double-click it, or use Studio's open-from-file option) and press Play. Everything is already in place. Save it as your own place with File > Save to Roblox when you want to keep building on it.

Where everything lands#

However you install it, a finished install looks like this in the Explorer:

Explorer

ReplicatedStorage
├── BloxUI                        ModuleScript: the BloxUI runtime
└── BloxUI_Blueprints             Folder
    └── <Name>                    StringValue: your UI's design (the blueprint)
ServerScriptService
└── <Name>_ServerHooks            Script: your server code (starts UI.Server)
StarterPlayer
└── StarterPlayerScripts
    ├── BloxUI_BlueprintLoader    LocalScript: builds your UI when a player joins
    └── <Name>_UIHooks            LocalScript: your client code (button events)
StarterGui                        stays empty: that's normal

With Extras, also:
ServerScriptService > BloxGame    Main, GameSettings, Core, Features
StarterPlayerScripts > BloxGame   ClientMain, Features

Piece	What it is	Should you edit it?
`BloxUI`	The library that draws the UI. Shared by every UI in the place.	No. Updates replace it.
`BloxUI_Blueprints.<Name>`	Your design as data: screens, HUD, currencies, shop items, colours.	Only with care (see How it works). A new install replaces it.
`BloxUI_BlueprintLoader`	Builds every UI in `BloxUI_Blueprints` and opens its start screen.	No.
`<Name>_UIHooks`, `<Name>_ServerHooks`	The two hook scripts, made for this UI. They hold an empty handler for every button, product and reward.	Yes. This is where your game code goes.

Every export includes the two hook scripts. If they aren't in your place (a UI installed before exports had them, or scripts you deleted), one paste in the Command Bar makes them again: see If the scripts are missing.

5. Press Play#

Your UI appears when the game runs, not before. In edit mode there is nothing to see in StarterGui, because the UI is built on each player's screen when they join. While the game is running you can find it under Players > your name > PlayerGui, in ScreenGuis such as BloxUI_Hud, BloxUI_Screens, BloxUI_Popups and BloxUI_Menus. How it works explains why.

Buttons that open screens, settings and sounds already work, and so does selling currency packs once they have real ids. Anything else that gives a player something needs code in the hook scripts. The Make it work in your game box under your design lists what's left for this UI, and Copy AI prompt helps an AI write it. If something doesn't show up, see Troubleshooting.

Next steps#

Scripting your UI: hook the buttons, currencies and shop to your game.
Vibe-code it with AI: let Claude or ChatGPT fill in the hook scripts.
Updating and security: install a new version without losing your code.