UI Designer

Vibe-code it with Claude or ChatGPT

You don't have to write the game code yourself. Give an AI your two hook scripts and a clear prompt, and it can fill in the handlers: shops, rewards, teleports, saving. This page shows what to paste, a prompt that keeps the AI on the rails, and how to check the result in Studio.

What you need#

1. Your UI installed in a place (Getting started). Press Play once to see it works.
2. The two hook scripts, <Name>_UIHooks and <Name>_ServerHooks. Every export includes them (The two hook scripts). Add your real product and game pass ids first, so the scripts contain them.
3. A prompt: the Copy AI prompt button on your design, or the template below.

The hook scripts are what make this work: they list every button, event, product and setting of your UI, with safe empty handlers and a checklist of what's missing. The AI fills in blanks instead of guessing how the UI works.

The Copy AI prompt button#

Open your design on the UI Designer. In the Make it work in your game box, press Copy AI prompt. It copies a prompt written for that design:

• where the UI's pieces are in your place, and that the logic goes in the two hook scripts;
• its screens, currencies, the events the UI fires and the Remote actions the server receives;
• the products and passes that still need ids, the things the server has to give, and the settings only code can apply;
• the Extras already in the game, so the AI doesn't write them again;
• the BloxUI calls it may use and the safety rules (the server decides, never give twice, return true only after giving);
• once the design is exported, both scripts as they were exported.

Paste it into Claude or ChatGPT, replace the line What I want the game to do with what you want, and send. If you've already changed the scripts in Studio, paste your versions instead of the ones in the prompt: it says so itself. For a UI without the button, use the template below.

A prompt template#

Copy it, replace <Name> with your UI's name, describe one feature, and paste your scripts at the bottom.

You are helping me script my Roblox game in Luau. Its UI was made with the BloxMaps UI Designer and runs on the BloxUI runtime. Follow these rules:

1. The UI builds itself when the game runs, from its blueprint (ReplicatedStorage.BloxUI_Blueprints.<Name>). Never create, clone or edit GUI instances for it and never touch PlayerGui. Change what it does only through the two hook scripts below.
2. <Name>_UIHooks is a LocalScript in StarterPlayerScripts. <Name>_ServerHooks is a Script in ServerScriptService. Keep their structure: fill in the handlers, keep every check, don't rename anything, and keep UI.Server.start({...}) as the LAST line of ServerHooks.
3. Client API: local ui = UI.Blueprint.waitFor("<Name>", 30). ui:on(eventName, function(context) end) gives context.id, context.screen and context.payload. ui:open(id), ui:close(id), ui:toggle(id). ui.currencies.<id> is a Fusion value (read it with UI.peek). ui:give(id, amount, fromPart) only plays the fly-in for leaderstat/attribute currencies. ui:notify(text). ui:state(sectionId, key, default):set(value) sets what a section shows: Daily "claimed", Quests "<questId>.progress" and "<questId>.claimed", Pass "progress".
4. Server API: UI.Server.on(name, function(player, elementId, payload) end) for Remote actions. UI.Server.grant(player, currencyId, amount), UI.Server.getCurrency, UI.Server.setCurrency. UI.Server.onReceipt(productId, fn), onCaseDrop, onSpinPrize and onReward must return true ONLY after the item was really given, and must never give twice for the same claim id (PurchaseId / claimId). UI.Server.canBuy, UI.Server.setIndexOwned, UI.Server.getSettings.
5. Security: the client only asks, the server decides. Every reward, purchase, currency change, unlock and teleport happens on the server after checking the player's own data. Check the type, length and range of every value a client sends. Never trust a price, amount or item id from a client.
6. BloxUI already answers MarketplaceService.ProcessReceipt. Do not write another ProcessReceipt: use UI.Server.onReceipt for products that need code.
7. UI.Server already saves the UI's currencies, upgrades and reward claims. Save anything new (levels, inventory, quest progress) with DataStoreService, inside pcall, keyed by player.UserId.
8. Use task.wait / task.spawn / task.delay, not wait / spawn / delay.
9. If my place has ServerScriptService.BloxGame (BloxMaps Extras: ready-made systems like saving, Robux products, daily rewards), don't write those systems again. Their settings are in BloxGame.GameSettings.
10. Reply with complete scripts I can paste over the old ones, and tell me exactly where any new instance (a RemoteEvent, a Part) must go.

What I want:
<describe your game and ONE feature, e.g. "Hatching an egg in the Eggs shop gives a random pet from its pool and adds it to the My Pets screen. Pets are saved.">

My two hook scripts:

-- <Name>_UIHooks
<paste the whole script here>

-- <Name>_ServerHooks
<paste the whole script here>

What to paste, in order#

1. The prompt (from the button or the template).
2. Only if the prompt doesn't already contain them (the template, or scripts you changed in Studio): the whole <Name>_UIHooks: open it in Studio, press Ctrl+A, Ctrl+C.
3. The whole <Name>_ServerHooks, the same way.
4. Any of your own scripts the feature touches (your data script, your pet system).
5. Later, when something breaks: the exact red error lines from Studio's Output window.

Then paste the scripts it returns over the old ones (select all in the script, paste). Keep the names: the UI finds nothing by itself, but the scripts find the UI by its name.

Good requests#

• "When a player touches a coin in workspace.Coins, give 10 Coins on the server, play the fly-in from the coin, and respawn the coin after 30 seconds."
• "Make the Rebirth button work: it costs 10,000 Coins, resets Coins to 0, adds 1 to a saved Rebirths value, and every rebirth gives +10% coins."
• "The Daily rewards window should really work: one claim every 20 hours, the streak resets after 48 hours, rewards come from the server and are saved."
• "Selling pets: the Sell button in My Pets sells the selected pet for its value. Check on the server that the player owns it."

Test it in Studio#

1. Press Play (F5) and open the Output window. Red lines are errors; lines starting with [BloxUI] come from the UI and usually say what's wrong.
2. Click through every button you changed. Watch the counters: server-owned currencies only change when the server changes them.
3. Test purchases: in Studio, buying a developer product shows a test purchase prompt and charges nothing, and ProcessReceipt runs like in the live game. The products must exist on your published experience (Creator Dashboard > Monetization). If a game pass perk doesn't turn on after a test purchase in Studio, check it in the live game: BloxUI only trusts Roblox's ownership check.
4. Test saving: DataStores need a published game and Game Settings > Security > Enable Studio Access to API Services. Stop, press Play again, and check your coins came back.
5. Test with two players for anything between players (trading, gifts): Studio's Test tab can start a local server with several clients.
6. Test on a phone screen with Studio's device emulator. BloxUI lays itself out for phones by itself.

Common mistakes#