Generative UI in Practice: Image Model for Design, Code Model for Implementation

Between July 14–15, Dilum Sanjaya (relayed via @FinanceYF5) showed a series of generative UI experiments built around a single workflow: use an image model to design the concept, then use a code model to implement it. He used Nano Banana to quickly produce concept images and Gemini Pro to turn them into runnable interactive demos, and on top of this launched a new series, Exploring Futuristic Interfaces, dedicated to unconventional futuristic UI concepts. What makes it worth following is that it fairly completely demonstrates this pipeline while also exposing where AI-generated UI currently breaks down.

Key details

In the shown cases, the author used Nano Banana to quickly explore visual directions, including map interaction design and data-visualization UI, and implemented the concepts with Gemini Pro; he also mentioned wanting to continue with a series of "aesthetic variants" of data-visualization UI, adding in replies that he had done similar work before. In the first entry of the new series, Exploring Futuristic Interfaces | Part 1, the design side switched to Nano Banana 2 (with custom tuning) while development stayed on Gemini Pro.

Limits and manual cleanup

Per his replies, Gemini and Claude already handle most data-visualization and interaction code reasonably well, but custom shapes or elements the AI still gets wrong require human intervention, typically patched in Figma. For tools like Nano Banana, he sees the strength as blending multiple styles and quickly producing visually decent results; but in futuristic concepts the output is sometimes inconsistent, with mismatched UI parts and awkward spacing, so final pieces usually require stitching several generated results together and then manual adjustment.

2026-07-14 ~ 2026-07-15 · 6 related posts