Tutorial · 9 min read · Updated October 2026

How to make a Roblox UI with AI: shops, HUDs and menus

UI is where most AI-built Roblox games look unfinished. The logic works, but the shop is a grey box, the HUD hides under the phone notch, and the buttons are sized in pixels. This guide gives you the prompts that build a proper HUD, shop, main menu and settings screen inside your own Roblox Studio place, how to show the AI the look you want, and the checks that make it hold up on a phone.

What "AI-made Roblox GUI" actually means

There are two kinds of tool that answer to "Roblox GUI generator". Image generators produce a picture of a UI: a nice PNG of a shop frame that you still have to slice, upload and rebuild by hand. Agents that work inside Studio build the UI itself: ScreenGui, Frame, TextLabel, ImageButton, UIListLayout, UIGridLayout, UICorner, UIStroke, UIPadding, plus the LocalScript that opens and closes it. This guide is about the second kind. The result is real instances in StarterGui that you can select and edit in the Explorer like anything you made yourself.

Before you start

• Roblox Studio open on your place (or a new Baseplate). Save it once so it has a name.
• Studio ▸ Assistant ▸ ⋯ ▸ Manage MCP Servers ▸ Enable Studio as MCP server.
• The ForgeBlox Bridge running and paired on your Windows PC.
• A reference for the look. This matters more than any prompt wording, see the next step.

Step 1: show it the look you want

"Make a cool shop" gets you an average shop. A reference gets you your shop. You have three options in ForgeBlox:

1. Attach screenshots or mockups of the look you want. A sketch, a mockup you made in any drawing tool, or a screenshot of your own earlier UI. Say what to take from it: "match the colour palette and the rounded, chunky buttons; ignore the layout."
2. Paste a Figma frame link. ForgeBlox reads the frame and turns frames, text, buttons, rounded corners, strokes, gradients, auto-layout and padding into the matching Roblox instances, uploads the images into your Studio, and leaves you a module you can keep editing.
3. Describe it in words with concrete values: colours as hex, corner radius, font (for example Enum.Font.FredokaOne or GothamBold), and how big the main buttons should be relative to the screen.

Use designs you own or have the rights to. Copying another game's art is a fast way to a takedown.

Step 2: the HUD

Build the HUD in StarterGui/HUD (ScreenGui, ResetOnSpawn false,
ScreenInsets DeviceSafeInsets). Top-left: a Coins counter bound to the
player's leaderstats.Coins, with a coin icon. Bottom-right: Shop and Menu
buttons. Use Scale for every Size and Position (no Offset), a
UIAspectRatioConstraint on each button, UICorner 0.25 scale, UIStroke 2px.
Palette: #1E1B2E background, #FFB35C accent, white text, FredokaOne.
Playtest, screenshot, then check the iPhone preset in the device emulator.

What to check: the counter updates when coins change, nothing sits under the top bar or notch, and the buttons are big enough for a thumb (roughly 10–12% of screen height on a phone is a good starting point).

Step 3: the shop

Add a Shop panel to the HUD, hidden by default, opened by the Shop button
and closed by an X and by pressing the button again. Inside: a header,
category tabs (Passes, Coins), and a ScrollingFrame with a UIGridLayout of
item cards (icon, name, price). Read item ids from
ReplicatedStorage/Config/Products and show real Robux prices from
MarketplaceService:GetProductInfo, cached, in a pcall. Clicking a card only
calls PromptGamePassPurchase or PromptProductPurchase; granting happens on the
server. Tween the panel open over 0.2s. Playtest, open the shop, screenshot.

The last two sentences are the important ones. The UI should never decide what a player receives. If you have not wired the server side yet, follow the game pass and developer product guide first; it sets up the single ProcessReceipt the shop depends on.

The client half a good agent should produce is short:

-- StarterGui/HUD/ShopController (LocalScript)
local MarketplaceService = game:GetService("MarketplaceService")
local Players = game:GetService("Players")
local TweenService = game:GetService("TweenService")

local player = Players.LocalPlayer
local hud = script.Parent
local shop = hud:WaitForChild("Shop")
local openPos = shop.Position
local closedPos = UDim2.fromScale(openPos.X.Scale, 1.2)
shop.Position = closedPos
shop.Visible = false
local isOpen = false

local function setOpen(open)
	isOpen = open
	shop.Visible = true
	local tween = TweenService:Create(shop, TweenInfo.new(0.2, Enum.EasingStyle.Quad), {
		Position = if open then openPos else closedPos,
	})
	tween:Play()
	if not open then
		tween.Completed:Once(function()
			if not isOpen then shop.Visible = false end
		end)
	end
end

hud.Buttons.Shop.Activated:Connect(function()
	setOpen(not isOpen)
end)
shop.Close.Activated:Connect(function() setOpen(false) end)

-- Cards only ask Roblox to show the purchase prompt. The server grants.
for _, card in shop.Items:GetChildren() do
	if card:IsA("GuiButton") then
		card.Activated:Connect(function()
			local id = card:GetAttribute("Id")
			if card:GetAttribute("Kind") == "Pass" then
				MarketplaceService:PromptGamePassPurchase(player, id)
			else
				MarketplaceService:PromptProductPurchase(player, id)
			end
		end)
	end
end

Step 4: main menu and settings

Add a main menu ScreenGui shown on join: game title, Play, Settings and
Credits buttons, blurred background (BlurEffect in Lighting, removed on Play).
Settings screen: Music volume slider, SFX toggle, Low graphics toggle. Save the
settings per player on the server through a RemoteEvent that validates types
and ranges, and apply them on join. Same palette and fonts as the HUD.
Playtest, change a setting, rejoin, confirm it stuck, screenshot both screens.

Settings are a small thing players notice. A music toggle that does not survive a rejoin feels broken, so make the agent prove it with the rejoin test.

Step 5: the phone pass

Check every ScreenGui in the device emulator on a small phone, a large
phone and a tablet, in landscape. Fix anything that overlaps, is cut off, sits
under the notch or the top bar, or has text that scales below 14px. Convert any
remaining Offset sizes to Scale. Screenshot each device.

Most Roblox players are on phones, so this is not optional. The three things that break most often are Offset sizes, text without TextScaled and a UITextSizeConstraint, and panels placed where the Roblox top bar lives.

Common UI mistakes the agent should avoid

What it costs

On Sonnet 5.5 a single build step typically costs 20–150 credits ($0.20–$1.50), and each message shows its price before you send it. A UI pass like the five steps above is a handful of steps plus whatever fixes the device checks turn up. Builder and Pro members also get finished UI screens (shop, menu, HUD, settings, daily rewards, inventory) from a members-only library that the agent restyles to your game, which saves most of a run. Details on the pricing page.

Questions

Related guides

• Game pass and developer product scripts with AI: the server side of the shop.
• How to make a Roblox tycoon with AI: a full game the HUD and shop plug into.
• How to make a Roblox simulator with AI: pets, eggs and a shop-heavy UI.
• ForgeBlox vs Roblox Assistant: when the free built-in assistant is enough.