Design app screens with an image model and rebuild them in code

Shakib Uzzaman had Claude Code drive OpenAI's image model to mock up screens, redraw every icon as a clean asset and build the screens, used for the HushNest 1.1 update.

Done withClaude CodeinOpenAI· Oct 20, 2026

What they did

Shakib Uzzaman builds small mobile apps. Over about three weeks from late September 2026 Uzzaman worked with Claude Code to turn a loop the author was doing by hand into a Claude Code skill. ChatGPT's image model, called through the OpenAI API or the Codex CLI, paints candidate screens. Once the author approves one, Claude Code lists every icon and illustration on it, asks the image model to redraw each item from a close-up crop, scores the attempts against the original with local code, corrects colour drift, and then writes the actual screen in code and compares a screenshot of the build against the design. Before writing the tool, Claude fired eight test requests at the image API to see what it really returned. Uzzaman told it to act as the driver and hand each subtask to whatever did it best. One night the author left it running alone with the instruction to find only real, measured improvements.

How it went

The early API tests found the returned size, quality level and colours often differed from what was asked. Redrawn icons came out sharper and much closer to the design than cut-outs; one campfire icon went from a distance score of 59 to 20. In the overnight session, adding spacing rules to the prompt changed nothing, and asking the model which design was better mostly picked the second one shown. A specific checklist caught 12 of 15 planted layout flaws, a local corner check caught 27 of 28, and a spacing comparison caught 20 of 22. The tool made the new sound icons and three welcome screens for HushNest 1.1 on iOS and Android. An early pass looked crude next to polished apps, so layout moved into code and the image model now paints only artwork.

Worth knowing

Each image takes 35 to 80 seconds and is billed at the provider's normal rate; the tool estimates cost and asks before spending. The author found their image provider was quietly serving lower quality than requested. Telling the image model what to do had less effect than measuring its output with code. The skill is the author's own open-source project, so the write-up is also a pitch for it.

Try it

With Claude Code· 7 parts to fill in

Help me design [screen name] for my [iOS or Android] app [app name]. Use [my image model API] to paint three candidate screens in [style and colours] and show them to me. When I pick one, list every icon and illustration on it, redraw each from a close-up crop rather than cutting it out, and keep the attempt that measures closest to the design. Then build the screen in [my UI framework] with the layout and text in code, screenshot it, and report where spacing or colour differs from the design. Tell me how many image calls you plan and roughly what they cost before making any, and stop at [budget].

Square brackets are the parts to fill in. The prompt is ours; the story is theirs.

Where they said it

Related