Generating UI and HUD Elements
Create buttons, panels, frames, bars and icons that share one style — the building blocks of a clean game interface.
A game's interface — buttons, panels, health bars, inventory frames, icons — sells its polish as much as the character art does. The trick to good UI is consistency: every piece should look like it came from the same set.
Lock a style first
Before generating a dozen elements, nail one. Decide the vibe — "clean pixel-art UI, wooden fantasy frame", "sleek sci-fi HUD, glowing edges" — and generate a single button or panel you love. That first piece becomes the reference for everything else.
Generate the core set
Most UIs need the same building blocks:
- Buttons — normal, hover and pressed states.
- Panels & frames — inventory windows, dialog boxes, tooltips.
- Bars — health, mana, stamina, XP.
- Icons — a matched set (covered in its own guide).
Prompt each with the same style words so they read as a family: "wooden fantasy UI, [element], matching set".
Keep it tileable and scalable
Panels and bars get stretched to different sizes in-engine. Favor simple, repeatable borders and centers so they scale cleanly (9-slice friendly). Avoid ornate details that only work at one exact size.
Plain backgrounds, clean cutouts
Generate UI on a plain background so it cuts out cleanly and drops onto any screen. Keep edges hard so the art stays crisp when placed.
States matter
Interactive elements need visual feedback. Generate matching normal / hover / pressed versions of buttons so the UI feels responsive instead of static.
Assemble and test in-engine
Bring the pieces into your game engine, lay out a mock HUD, and check them together at real size. Consistency problems that hide in isolation jump out the moment the elements sit side by side.