1. Give every screen one primary action
A shop screen can contain currency, filters, item cards and details, but only one action should win visually: buy, equip or continue. Make that control the strongest color and weight. Secondary actions should remain visible without competing with it.
This rule also improves generation prompts. Name the screen's primary action first, then list the supporting controls in order of importance.
2. Use Scale for proportion and Offset with intent
Roblox positions and sizes GuiObjects with UDim2, which combines Scale and Offset on each axis. Scale responds to the parent container; Offset adds a fixed pixel adjustment. A responsive layout normally uses both deliberately instead of relying on one desktop-sized Offset value.
Start with the proportional footprint of a panel, then use small offsets for padding or minimum breathing room. Test the result rather than treating one formula as universal.
3. Anchor controls to the place they should grow from
AnchorPoint changes the origin used when a GuiObject is positioned and resized. A center modal usually behaves predictably with a centered anchor; a bottom action bar should be anchored toward the bottom edge. Wrong anchors make otherwise responsive controls drift when the viewport changes.
4. Add constraints where stretching would damage the design
Use UISizeConstraint when a panel needs sensible minimum and maximum dimensions, UIAspectRatioConstraint when artwork must keep its shape, and text-size constraints when labels should remain readable without dominating the layout.
Constraints are guardrails, not a replacement for testing. A layout can satisfy every constraint and still hide the next action behind a thumb or platform overlay.
5. Design touch targets before hover states
A phone user cannot hover and often covers part of a control with a finger. Give important buttons enough separation, keep destructive and primary actions apart, and do not communicate essential meaning through hover color alone.
Then add mouse hover, keyboard focus and controller selection as enhancements around the same clear base state.
6. Make every state visually explicit
Buttons need normal, focused or selected, pressed, disabled and loading states. Inventory slots need empty, occupied, selected and locked states. If the only difference is a tiny color shift, players will miss it during play.
When generating a sprite kit, request the state inventory in the same prompt so borders, lighting and palette remain consistent.
7. Keep text editable and separate from decorative sprites
Decorative frames and icons can be image assets, but prices, item names, countdowns and translated copy should remain real text objects. This makes updates, localization and contrast fixes much easier than baking words into a generated image.
8. Reuse a small visual system
Choose a compact set of corner radii, border treatments, surface colors and spacing steps. Repeating that system across the HUD, shop and inventory creates coherence faster than adding more decorative detail.
Generate complete named sets—frames, bars, buttons, tabs and icons—instead of isolated pieces so the source artwork follows the same rules.
9. Test the actual task on every input class
Do not stop at screenshots. On a small touch screen, desktop window and controller flow, complete the real task: open the screen, find the next action, change a selection, confirm it and return to play. Record where the player hesitates or where focus order becomes unclear.
Fix those failures before polishing animation. A plain interface that completes the task is a stronger foundation than a beautiful screen that only works at one resolution.