name: stud-ui-clean-roblox description: Build Roblox game UI in the "Stud UI" simulator style - chunky 3D stud buttons with bevel lip, gradient face, glass streaks and tiled studs; Heavy Montserrat/Gotham text with tinted outlines and 2px extrusion; translucent dark glass windows with colored stud headers and overflowing tilted icons; dark item slots with spinning sunbursts; rarity ladder Common to Cosmic; bouncy open/close with blur and FOV. Ships a tested Luau component kit (StudUI, StudMotion), a 1022-icon library (CheckUIIcons), exact design tokens, layouts, example builders and reference screenshots. Use this skill whenever the user wants to create, restyle, extend or fix any Roblox ScreenGui, HUD, menu, shop, inventory, hotbar, daily rewards, rebirth, season pass, index/collection, reward popup or button in this style or "like my game's UI", even if they only say "make a shop menu", "add a button to the HUD" or "UI simulator style" without naming the style. license: MIT

Stud UI Clean Roblox

A complete, measured design system extracted from a shipped Roblox simulator (17 ScreenGuis, ~7,700 instances) plus a tested component kit that rebuilds it from scratch. Your job when this skill triggers: produce UI that is indistinguishable from the reference screenshots, by building through the kit instead of hand-placing frames.

Look at assets/screenshots/ first (index in assets/screenshots/README.md). Screenshot 20 shows the original shop (left) next to the same window generated by this kit (right) — that is the quality bar.

What makes the style (keep these, they are the identity)

1. 3D stud buttons: dark outline (ImageButton background) → darker Biseau lip at the bottom (the thickness) → Face CanvasGroup with a bright vertical gradient, two diagonal hard-edged glass streaks (one light, one dark), a tiled stud texture fading in toward the bottom-right, a double 1 px inner bevel and a 2 px bottom glow. No corners.
2. Heavy outlined text: only Montserrat Heavy (windows) and GothamSSm Heavy (HUD) (+ Montserrat Bold for descriptions). Every label has a Contextual stroke 2–4 px in a dark tint of its background (never plain black), and important labels are extruded: a dark copy 2 px below the white text.
3. Dark glass windows: colored stud header (or the pink shop header texture) with a 96 px icon overflowing the top-left corner rotated −10°, 50 px title, red chunky X; body = black at 50 % transparency with a thin white second frame; the world stays visible behind, blurred (18) with FOV +8.
4. Sticker icons from the bundled CheckUIIcons library, "… 1st Outline" variants, tilted −8°/−10°/−12°, overflowing.
5. Dark item slots with a spinning sunburst behind the icon, 3 px black border + light inner line, lime selection.
6. Strict color semantics: green = in-game money / confirm, purple = Robux / skip, red = shop / locked / destroy, blue = primary navigation, yellow/orange = premium / claim-all / restock, gray = done. Rarities Common → Cosmic.
7. Pixel geometry + one UIScale: everything in offset px for a 1050×620 screen, each root scaled by a WindowScale UIScale = clamp(min(vx/1050, vy/620), 0.52, 1.18). This keeps 1 px bevels and 4 px lips crisp on every device.
8. Springy motion: press 0.92 in 0.05 s, Back-Out release, bouncy open (0.86 → 1, 0.32 s), fast close (0.16 s), sunbursts always spinning, badges pulsing, a sound on every interaction.

Files

Workflow

1. Identify the archetype (layouts-and-archetypes.md §3): product-list shop, collection grid + tabs, reward calendar, upgrade/prestige, season pass, premium offers, reward banner, HUD element. Open the matching screenshot and example.
2. Install the modules in the place (once): StudUI, StudMotion, CheckUIIcons as ModuleScripts in ReplicatedStorage (or map src/ with Rojo). If you can't write files into the place, inline the module source in your build script.
3. Build in Edit mode into StarterGui with a builder function like the examples (return function(UI, Icons, parent) … end), run once from the command bar / MCP execute_luau. Never rebuild UI on every spawn.
4. Wire behaviour with a LocalScript inside the ScreenGui (see examples/06_MenuController.client.luau): Motion.Window, Motion.BindButton, Motion.SpinSunbursts, feedback (Motion.Float, Motion.Shake).
5. Verify visually: screenshot and compare with the reference capture; walk references/checklist.md.

Kit quick reference (local UI = require(ReplicatedStorage.StudUI))

local gui = UI.ScreenGui("MenuShop", 11, { Parent = game.StarterGui })      -- + Sons folder + Basculer event
local win = UI.Window(gui, { Size = Vector2.new(662, 448), Title = "Nest Shop",
    Header = "image" --[[ or "blue"|"purple"|"gold"|"pink"|ColorSequence ]], Icon = UI.Assets.Basket })
-- win.Fenetre / win.Entete / win.Corps / win.Fermer / win.WindowScale / win.HeaderHeight

UI.Button(parent, { Theme = "green", Size = Vector2.new(179, 65), Position = UDim2.fromOffset(x, y),
    Text = "Pier", TextSize = 36, Icon = Icons.Get("Item/Box/Box 1st Outline") })    -- Style "Stud" (HUD/menus)
UI.Button(parent, { Style = "Glossy", Theme = "cash", Size = Vector2.new(142, 49), Text = "$100", FixedTextSize = 32 })
UI.Button(parent, { Style = "Chunky", Theme = "orange", Size = Vector2.new(146, 56), Text = "Restock", FixedTextSize = 31 })
UI.Button(parent, { Theme = "red", Size = Vector2.new(106, 106), IconLayout = "Big", Icon = id, Text = "Shop" })  -- menu tile
UI.Button(parent, { Style = "Chunky", Theme = "purple", Size = Vector2.new(96, 70), IconLayout = "Top", Icon = id, Text = "All" }) -- tab
UI.Button(parent, { Theme = "Legendary", Size = Vector2.new(150, 42), Text = "Legendary" })   -- rarity tab
UI.CloseButton(entete, { Position = UDim2.fromOffset(W - 41, 37) })

UI.ProductCard(list, { Title, Rarity = "Rare", Description, Stock = "Stock x3", Icon, Robux = 49, Price = "$1.2K" })
UI.ItemSlot(parent, { Size = Vector2.new(80, 80), Icon, Title, Quantity = "x1", Tag, Top = "60%", Selected, Check, Lock })
UI.StudPanel(parent, { Size, Position, Gradient = "cyan"|"violet"|"amber"|"lime"|"pink"|"cosmic"|"gold"|"rainbow", Rotation })
UI.InsetBox(parent, { Size, Position, Transparency = 0.1 })
UI.ProgressBar(parent, { Size, Position, Progress = 0.48, Text = "$12K / $25K" })
UI.Pill(parent, 'New stock in <font color="#FFD23F">4:59</font>', { Width = 230, Position = UDim2.new(.5, 0, 0, Hh) })
UI.ScrollList(win.Corps, { Size, Padding = 9 })  /  { Grid = Vector2.new(140, 126), GridGap = 12 }
UI.Text(parent, "text", { Size, Position, TextSize | Max, Stroke, Thickness, Gradient, Rich, Font = "Heavy"|"Gotham"|"Bold" })
UI.ShadowText(parent, "text", {...})       UI.MoneyText(frame, "$572,831")
UI.RobuxBadge(button, 49, oldPrice?)       UI.RobuxContent(robuxButton, 14)       UI.NotifBadge(button)
UI.Sunburst(parent, 150)                   UI.OutlinedIcon(parent, UI.Assets.PlusBlack, UI.Assets.PlusWhite, {...})
UI.Recolor(button, "red")   UI.SetButtonText(button, "CLAIMED")   UI.SetDisabled(button, true)

Themes: green red blue yellow purple gray meadow orange close robux cash (+ French aliases vert rouge bleu jaune violet gris) and every rarity name. Reflection presets in UI.ReflectionPresets; custom stripes with UI.Stripes{{from,to,alpha},…}.

Motion (local Motion = require(ReplicatedStorage.StudMotion), client only): Motion.Window(gui, fenetre) → {Open, Close, Toggle} · Motion.BindButton(btn, 1.05, gui.Sons) · Motion.CreateSounds(gui.Sons) · Motion.BindResponsive(uiScale, 0.8) · Motion.SpinSunbursts(root) · Motion.Sway(img) · Motion.PulseScale(badge.Pulse) · Motion.PulseStroke(slot.Lisere.Selection) · Motion.SelectTab(tabs, active) · Motion.Float(btn, "Bought!", UI.Colors.FloatSuccess) · Motion.Shake(btn) · Motion.ShowBanner(banner) · Motion.Abbreviate(1234) → "$1.2K" · Motion.Duration(299) → "04:59".

Rules of thumb (with the reason)

• Offsets, not scale — the bevels are 1–4 px; scale sizes round them away. One WindowScale per root handles devices.
• Build through the kit — a hand-made flat button misses 9 of the 10 layers that make it read as 3D.
• Tint every outline — #26020A on red, #022826 on blue, #1A2402 on green… Pure black makes it look generic.
• Extrude labels — the 2 px dark copy under white text is what gives the "toy" depth; UI.ShadowText does it.
• Never opaque windows — black @0.5 + blur keeps the game world present; it's a simulator, the world is the reward.
• Let things overflow and tilt — header icons, tile icons, badges, "OP"/"VALUE!" stickers. Perfect alignment looks corporate.
• Same component, different size for hierarchy — the primary action is the bigger blue button, not a new style.
• Keep the French instance names (Fenetre, Entete, Corps, Biseau, Face, Fond, Texte, Ombre, Icone…): runtime scripts (recolor, tabs, disabled state, menu controllers) find parts by these names.
• Motion is part of the style — no menu should appear without the bounce, no button without hover/press, no sunburst static.
• Use exact icon paths from references/icon-catalog.md, "1st Outline" variants by default.

Extending the style

New color theme for a button = 4 colors: a 3–5 stop bright fond gradient (lighter top), a 2-stop biseau ~45 % darker, a near-black bord of the same hue, a very dark texte tint. New rarity = text gradient (light → saturated) + tab theme + optional panel image. New window = pick the closest archetype and reuse its proportions; header color from UI.HeaderThemes or a new 3-stop vertical gradient in the same luminance range. Keep corner radii ≤ 6 and stroke thicknesses in the table.

Verifying with the Roblox Studio MCP

If the Roblox Studio MCP is connected: build with execute_luau (Edit), make the window visible temporarily (store and restore the original Visible), screen_capture, compare with the reference screenshot, fix, then clean up any temporary instances. For motion, start_stop_play, run a client check (blur 18, FOV +8, other GUIs hidden then restored), read get_console_output, stop Play. Never leave test instances or changed properties in the user's place.

🧱 Stud UI Clean Roblox

The AI agent skill that builds Roblox UI like a top-chart simulator

Chunky 3D stud buttons · glass streaks · extruded Heavy text · dark glass windows · spinning sunbursts · rarity ladder · bouncy motion

Download the skill · Quick start · Gallery · Kit API · 🇫🇷 Français

Left: the original shop from a shipped Roblox simulator. Right: the same window generated from scratch by this kit.

✨ What is this?

Stud UI Clean Roblox is a ready-to-use Agent Skill: a folder an AI agent (Claude Code, Claude.ai, or any agent that can read files) loads to create Roblox interfaces in one precise, polished style. The style was measured on a real Roblox experience (17 ScreenGuis, ~7,700 UI instances, every color, stroke, gradient keypoint and tween timing) and then rebuilt as a tested Luau component kit.

Ask your agent "make me a pet index with rarity tabs" or "add a daily rewards menu" and it builds UI that looks like it shipped with the game, instead of a generic flat menu.

🖼️ Gallery

More captures and notes: assets/screenshots/.

🚀 Quick start

1. Install the skill

git clone https://github.com/TemporaryLooker22/Stud-UI-Clean-Roblox ~/.claude/skills/stud-ui-clean-roblox

Or put it in a project at .claude/skills/stud-ui-clean-roblox. Claude picks it up automatically when you ask for Roblox UI.

Download stud-ui-clean-roblox.skill from the latest release and add it in Settings → Capabilities → Skills (or ask Claude to install it).

Give the agent this folder and tell it to start with SKILL.md. Every other file is referenced from there.

2. Ask for UI

Works best when the agent can drive Roblox Studio (for example through the Roblox Studio MCP) so it can build, screenshot and compare. Example prompts:

"Create a pet shop menu in my game's Stud UI style with 6 pets, Robux and coin prices." "Add a Settings window with music / sound toggles, same style as the Rebirth menu." "Build the HUD: top nav bar with Shop, Play, Trade, and a hotbar of 6 slots."

3. Or use the kit yourself

Put the three modules of src/ in ReplicatedStorage (copy-paste, or rojo serve with the included default.project.json), then from the Studio command bar:

local RS = game.ReplicatedStorage
local UI, Icons = require(RS.StudUI), require(RS.CheckUIIcons)

local gui = UI.ScreenGui("MenuShop", 11, { Parent = game.StarterGui })
local win = UI.Window(gui, { Size = Vector2.new(662, 448), Title = "Pet Shop", Header = "pink",
	Icon = Icons.Get("Main/Paw/Golden Paw 1st Outline"), Visible = true })

local list = UI.ScrollList(win.Corps, { Size = UDim2.fromOffset(648, 358) })
UI.ProductCard(list, { Title = "Golden Cat", Rarity = "Legendary", Description = "Purrs in pure gold.",
	Stock = "Stock x3", Icon = Icons.Get("Animal/Cat/Golden Cat 1st Outline"), Robux = 99, Price = "$25K" })

Then drop a LocalScript in the ScreenGui based on examples/06_MenuController.client.luau for the open / close animation, blur, hover and sounds. Open it from anywhere with PlayerGui.MenuShop.Basculer:Fire().

🧩 Kit API

local UI = require(ReplicatedStorage.StudUI)

local Motion = require(ReplicatedStorage.StudMotion) (client)

Full parameter docs are in the header comments of each function and in references/components.md.

🎨 The style in 8 rules

1. 3D stud buttons: dark outline → darker bottom lip → bright vertical gradient face with two hard-edged glass streaks, a fading stud texture, a double inner bevel and a bottom glow. No rounded corners.
2. **Heav