Start with a reference you may use
Use your own artwork, licensed material, or references you have permission to process. Treat other games as learning references, not assets to copy.
Extract general design principles—contrast, density, panel shape, spacing, or color relationships—rather than reproducing another creator’s branding or protected artwork.
Describe what the reference is doing
Before generating, identify the screen regions, content hierarchy, repeated components, and visual rules you want to carry forward.
- Which area attracts attention first?
- Which elements repeat and should become reusable cards or rows?
- Which parts are decorative images versus native text or containers?
- How does the screen communicate selected, locked, affordable, or unavailable states?
Use the image as style context
GenGUI accepts an optional PNG, JPEG, or WebP reference during generation. The reference can guide palette and shape language while the prompt defines the new screen’s purpose and content.
A clear prompt is still required. If the reference is a shop but you need an inventory, say which inventory elements must exist and which visual traits should carry over.
Reconstruct structure, not just pixels
Separate the result into logical containers, images, text, and controls. Correct the hierarchy where visual segmentation does not match interaction.
A card rendered as one image may be acceptable for decoration, but a dynamic item name, price, or buy action usually needs its own object. Decide based on what the game must update at runtime.
Verify text, states, and responsiveness
Replace generated text with real labels, test aspect ratios, and create missing interaction states before connecting game logic.