UI

The HTML-first pipeline, style rules, reusable patterns and measured GUI facts.

1. 01UI overviewHow to design, build, ship and verify game UI on Roblox with an AI coding agent. Everything here came from real bugs in shipped and prototype games (a kids' strategy tycoon, several idle games, a...3 min read
2. 02Style rulesRules that held across every project. Each one exists because breaking it got a screen rejected.6 min read
3. 03HTML-first UI pipelineDesign every screen in HTML/CSS, then turn it into real Roblox GUI instances by code. Never hand-place frames in Studio, and never hand-write a builder per screen once you have more than two or three.8 min read
4. 04HUD and progression patternsPatterns that made progression readable for kids without adding clutter. Feedback patterns (toasts, crates, celebrations, formatting) are in patterns-feedback.md.6 min read
5. 05Feedback patternsToasts, celebrations, odds, crate openings, loading and number formatting.5 min read
6. 06Measured GUI and input factsEngine behaviour that was measured in Studio, not assumed. Roblox changes some of these between versions (one note below flipped within a month), so re-measure any rule your code depends on.6 min read
7. 07Verifying UIAn agent can't trust its eyes in Studio. Captures lie, clicks miss, hover never fires. Verify with numbers first, pictures second.5 min read
8. 08ChecklistsDesign - [ ] Purpose in one sentence; what the player does here and how they leave. - [ ] Designed in HTML at the design canvas, in the game's one kit (shared plate, fonts, outlines).4 min read
9. 09Words, numbers and rewards on screenError copy that helps, one number formatter, and the reward rules players notice.1 min read