stud-ui-clean-roblox

---
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
| Path | What | When to read |
|---|---|---|
| `src/StudUI.luau` | Component kit (ModuleScript). Tokens + builders for every component | always use it; read its header comments for parameters |
| `src/StudMotion.luau` | Motion/sound/responsive (client ModuleScript) | when wiring runtime behaviour |
| `src/CheckUIIcons.luau` | 1022-icon registry (ModuleScript) | install it; don't read it — use the catalog |
| `references/icon-catalog.md` | every icon path + id, ★ = used by reference | to pick icons (search by keyword) |
| `references/design-tokens.md` | fonts, sizes, every color, button themes, rarities, surfaces, strokes, z-index | when choosing or extending colors/sizes |
| `references/components.md` | exact instance trees + geometry of every component | when building something the kit doesn't cover, or debugging a look |
| `references/layouts-and-archetypes.md` | HUD placement, DisplayOrder stack, 7 window archetypes with recipes | when composing a screen |
| `references/motion-and-sound.md` | every tween, idle loop, feedback, sound id | when adding behaviour |
| `references/icons-and-assets.md` | icon API, variant rules, custom texture ids | when placing icons / images |
| `references/checklist.md` | QA checklist, common mistakes, MCP verification loop | before you say "done" |
| `examples/01…06` | runnable builders (shop, HUD, rebirth, daily, index+tabs) + runtime controller | copy the closest one as a starting point |
| `assets/screenshots/` | 11 reference captures + 3 validation captures | to see the target |

## 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)`)

```lua
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.