Offset: 0.0s
Space Play/Pause

Nano Banana Pro is now available on Google Antigravity

This article explores how to use AI to generate website designs, specifically focusing on creating a modern and appealing online presence for a plant shop. We’ll walk through the process of prompti…

4 min read

AI-Powered Web Design: Iterative Image Generation with Gemini 3 Pro

Discover how the latest in AI technology is revolutionizing the creative process, allowing for the generation and precise, iterative editing of high-quality designs. This guide breaks down a fascinating demonstration of creating and refining a website mockup using an advanced AI agent, showcasing the power of natural language feedback to achieve the perfect look.

[00:00.000]

The process begins with a simple, direct prompt to an AI agent powered by Gemini 3 Pro. The goal is to create a visual concept for a new website. The user inputs a clear instruction, setting the stage for the AI’s creative task.

First Prompt

Generate an image of a light mode website design for a website to showcase a variety of of plants.

[00:04.406]

Once the prompt is submitted, the AI agent doesn’t just produce an image; it reveals its thought process. It outlines its plan, focusing on creating a modern and beautiful look for the plant showcase. The agent formulates a much more detailed and sophisticated prompt internally, breaking down the user’s request into specific design elements like a fresh color palette, elegant typography, and high-quality imagery. This “thinking” phase ensures the initial output is as close to a professional design as possible.

[00:08.573]

The agent’s refined internal prompt is a masterclass in specificity. It requests a high-fidelity, modern website design in light mode, detailing a color palette of soft whites and lush greens. It meticulously describes the hero section, calling for a “stunning, high-resolution image of a beautiful indoor plant” and “bold but refined typography.” This level of detail is crucial for guiding the AI to generate a polished and professional result right from the start.

[00:10.540]

The first version of the website design is generated, and it’s impressive. The AI has created a clean, airy, and elegant layout for a fictional plant shop named “Verdant Living.” The design is visually appealing, featuring a strong hero image, a clear headline reading “Bring Nature Home,” and a well-organized grid of plant products.

A Few Things to Tweak

[00:15.540]

While the initial design is excellent, the user wants to make a few specific tweaks. Instead of writing a new prompt from scratch, they interact directly with the generated image. The first change is to the headline. The user selects the text “Bring Nature Home” to provide targeted feedback.

Commenting to bring the changes

[00:18.240]

A comment box appears over the selected area, allowing for a conversational edit request. The user simply types their desired change in natural language: “Can we replace bring nature home with bring plants home?”. This intuitive interface makes the editing process feel like collaborating with a human designer.

[00:23.706]

Next, the user decides to adjust the call-to-action button. They select the “Shop Now” button and, in the same way, leave a comment requesting a color change: “Can we make the shop now button a darker green?”. This demonstrates the AI’s ability to understand and modify specific style attributes.

[00:27.706]

After leaving feedback, the user reviews their comments and adds a final instruction to implement the changes. This step consolidates the feedback into a single, actionable request for the AI agent.

Update the design with my comments

[00:30.340]

The AI agent begins its revision process. Crucially, it understands that the goal is not to create a new image from scratch, but to modify the existing image based on the user’s specific feedback. It updates its internal prompt to incorporate the requested text change and the new button color, preparing to generate a revised version that maintains the original design’s integrity.

[00:34.006]

The revised prompt demonstrates the AI’s precision. It now includes explicit, non-negotiable instructions to ensure the edits are made correctly.

A high-fidelity, modern website design for a plant shop in light mode. The headline text MUST be ‘Bring Plants Home’. The ‘Shop Now’ button MUST be a deep, dark green color. Keep the clean, airy, and elegant aesthetic with soft whites and creams. Hero section with a beautiful indoor plant. Grid layout below with minimalist plant cards. Sophisticated UI with whitespace.

[00:35.806]

The final image is generated, perfectly incorporating the user’s feedback. The headline now reads “Bring Plants Home,” and the “Shop Now” button is a distinct, darker green. The rest of the design remains consistent, preserving the high-quality aesthetic of the original. This showcases the power of in-image editing, where minor or major changes can be made without losing the context of the entire image.

This revolutionary workflow allows you to refine AI-generated images with simple, conversational feedback, rather than starting over with a new prompt. You can change specific elements, colors, and text while keeping the rest of the image intact, making the creative process faster and more intuitive than ever.