Gemini 3 is Google’s latest multimodal/agentic AI model. Previously, I showed how to use Gemini 3 for UI Design, and in this article, I want to show you how to make the most of this tool for web design.

If you want to create a quick prototype of a web page, you no longer need to use Figma for that. You can start in Gemini and provide the following instructions:

1️⃣ Gemini Settings

Before writing a prompt, you need to make sure you:

  • Enable Canvas (Gemini 3’s visual / generative UI output area)
  • Choose Gemini 3 Thinking model (it will provide a more robust output)

2️⃣ Prompt format & example

When it comes to prompt-writing, Gemini can better understand the nuances of instructions you provide. So I suggest structuring a prompt in the following format:

  • Context: Explain what you want to build in one or two sentences
  • Requirements: List requirements in a bullet-list format
  • Output: Explain desirable output for the tool

Here is an example of a prompt for landing page design:

<context>
Design a high-fidelity landing page for a new mobile AI app. 
Style = clean, geometric, vibrant accents, premium feel.
</context>

<requirements>
- Hero with phone mockup (angled).
- Feature rows (icon + text), social proof, pricing section.
- CTA section with powerful typography.
- Consistent spacing rhythm.
- Include light + dark versions.
</requirements>

<output>
Mockup design in high-fidelity
</output>

As you can see, I’m using an XML-inspired format of the prompt. It works well not only for Gemini 3 but also for ChatGPT (check my article 4 Proven Methods to Get the Most Out of ChatGPT-5 for more practical tips for prompt writing)

Quick note: You can spot the keyword ‘mockup’ in the output, but many times Gemini will interpret this keyword as source code rather than imagery.

3️⃣ Review and share output

Gemini 3 will generate the source code of the future page. And the great thing is that it will also show a preview of the page right in the Canvas. You can jump between the Code and Preview tabs to better understand the nuances of web design.

Canvas in Gemini 3 with a design of a landing page.

In case you want to share a preview with someone, you can simply click Share, copy a link to the canvas and open in a browser.

Web page design shared as a link.

If you want to learn more cases of using Gemini in product design, check the article Gemini 3 for UI Design or watch a video

If you have more tips on how to use the tool, share them in the comments.

Written by Nick Babich

Gemini 3 for Web Design was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.