Your wireframe. In your game’s art style.
Upload the grey-box layout and one piece of key art, and get the finished screen: your boxes, your buttons, your art. Then the next screen in the same UI. Recorded in the app: 2 Pro renders, 300 credits, 3 minutes 9 seconds.
Free: watermarked images · personal use only · No credit card required
Message to Vizzy
Turn the grey-box wireframe in the first image into a finished game UI screen in the exact art style of the second image: hand-painted cozy fantasy, warm wood, parchment, amber, teal and plum, painterly texture. Keep the wireframe layout exactly: the INVENTORY title bar with the coin and gem counters top right, the portrait panel with the WEAPON, ARMOR and ACCESSORY slots on the left, the 4 by 3 grid of item slots, and the EQUIP, SELL and BACK buttons along the bottom. Put the fox-eared adventurer from the second image in the portrait and painted items in some slots: a potion, a lantern, a sword, a shield, a scroll, a key. Readable labels, crisp edges, a finished in-game screen.
Recorded walkthrough
Game UI screens from a wireframe
Two wireframes and one key art in a chat, two Pro renders, every prompt shown, the credits and the clock on screen. Watch the recording or read the same steps below.
- 1Upload
Start a chat, add the wireframe, add the key art
Two references: the grey-box layout from your design file or a quick mockup, and one image that carries the art style, key art, a concept painting or a screen you already like. One file per Add media click.
- 2Main prompt
Sixteen by nine, keep the layout, take the style from the key art
Pick the screen’s aspect ratio. The prompt names every box of the wireframe so none of them moves, says which image the style comes from, and names what goes in the slots. Pro quality, 150 credits.
Message to Vizzy
Turn the grey-box wireframe in the first image into a finished game UI screen in the exact art style of the second image: hand-painted cozy fantasy, warm wood, parchment, amber, teal and plum, painterly texture. Keep the wireframe layout exactly: the INVENTORY title bar with the coin and gem counters top right, the portrait panel with the WEAPON, ARMOR and ACCESSORY slots on the left, the 4 by 3 grid of item slots, and the EQUIP, SELL and BACK buttons along the bottom. Put the fox-eared adventurer from the second image in the portrait and painted items in some slots: a potion, a lantern, a sword, a shield, a scroll, a key. Readable labels, crisp edges, a finished in-game screen.
- 3Result59 s150 credits
59 seconds later: the inventory screen
The wireframe’s layout box for box, in the key art’s paint: wooden frames, parchment slots, painted items, the adventurer in the portrait, readable labels. Click the thumbnail to see it full size.
- 4Main prompt
The next screen: the finished screen as the style, the shop wireframe as the layout
Remove the two inputs, add the finished screen to the chat so it becomes the style reference, add the shop wireframe, and ask for the next screen in exactly the same UI. This is how the kit stays one kit across twenty screens.
Message to Vizzy
Turn the shop wireframe in the second image into the next screen of the same game, in exactly the UI style of the first image: the same wooden frames, parchment cards, buttons, fonts, colours and painted icons. Keep the wireframe layout: the SHOP title bar with the coin and gem counters, the merchant portrait with a speech bubble on the left, the 3 by 2 grid of product cards with an item, a name and a price each, and the BUY and BACK buttons. Make the merchant a friendly badger shopkeeper in the same painted style and fill the cards with six different items.
- 5Result63 s150 credits
63 seconds later: the shop, and the bill
The shop screen in the same UI: the same frames, buttons, fonts and painted icons. Two screens, 300 credits, 3 minutes 9 seconds from the first upload to the second result: about $0.55 on the $35 Pro plan.
- 2
- renders
- 300
- credits
- 3:09
- from the first upload to the second screen
Timings are from send to result on Pro quality at 1K, read from the recording. Fast quality costs 80 credits per render instead of 150. Nothing in the recording was retouched. 300 credits is about $0.55 on the Pro plan (19,250 credits for $35).
Real before and after
The layout is yours, the style comes from a reference, the UI stays one kit
The finished screen plus the next wireframe to the shop screen
Message to Vizzy
(the finished screen and the shop wireframe as references) Turn the shop wireframe in the second image into the next screen of the same game, in exactly the UI style of the first image: the same wooden frames, parchment cards, buttons, fonts, colours and painted icons. Keep the wireframe layout: the SHOP title bar with the coin and gem counters, the merchant portrait with a speech bubble on the left, the 3 by 2 grid of product cards with an item, a name and a price each, and the BUY and BACK buttons. Make the merchant a friendly badger shopkeeper in the same painted style and fill the cards with six different items.
Why game teams mock screens up this way
The layout is the design decision. The paint should not cost a week.
Game UI starts as boxes: a designer decides where the inventory grid, the currency counters and the buttons go, and then the screen waits for an artist to paint it in the game’s style. Every new screen waits again, and every layout change repaints it. In the 60 days to Sep 29, 84 paying Visualizee accounts made game renders, and UI screens were the heaviest single job among them: 22 accounts and 862 renders, almost all of them starting from a layout or a style reference rather than from text.
Because the wireframe is a reference, the layout is yours: the render places the boxes where you drew them. Because the style is a reference too, the screens match your key art instead of a generic fantasy UI, and the first finished screen becomes the style reference for the next one, so a whole flow (title, inventory, shop, settings, results) stays one kit. Teams use it for pitch decks, vertical slices, store screenshots and to hand the UI artist a finished target instead of a paragraph. The next step, splitting the finished screen into assets on green screen, has its own walkthrough.
The two screens of the recording, and another take of the inventory
FAQ
Game UI screens FAQ
What the recording shows, what it cost, and what to expect from your own wireframes.
More demos
