> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# 用Gemini 3做Web设计
- URL: https://www.hubwiz.com/blog/web-design-with-gemini-3/
- Published: 2026-02-02T02:34:37.000Z
- Updated: 2026-02-02T02:34:37.000Z
- Description: 如果你想要创建一个网页的快速原型，你不再需要为此使用Figma。你可以直接在Gemini中开始。
- Author: admin
- Tags: MODEL-ZOO, GEMINI-3, #Import 2026-10-14 14:41

Gemini 3是Google最新的多模态/代理AI模型。之前，我展示了如何将[Gemini 3用于UI设计](https://uxplanet.org/gemini-3-for-ui-design-f3fb44a295a6?ref=hubwiz.com)，在这篇文章中，我想向你展示如何充分利用这个工具进行Web设计。

如果你想要创建一个网页的快速原型，你不再需要为此使用Figma。你可以直接在Gemini中开始。

## 1️、Gemini设置

在编写提示之前，你需要确保你：

- 启用*画布*（Gemini 3的视觉/生成UI输出区域）
- 选择*Gemini 3思考模型*（它将提供更稳健的输出）

![None](https://www.hubwiz.com/blog/content/images/2026/02/1-Di6O2Nz_WJny8El8cCvU5g.png)

## 2、提示格式和示例

当涉及提示编写时，Gemini可以更好地理解你提供的指令的细微差别。所以我建议按以下格式构建提示：

- 上下文：用一两句话解释你想要构建的内容
- 要求：以项目符号列表格式列出要求
- 输出：解释工具的理想输出

这是一个用于着陆页设计的提示示例：

```
<context>
为新的移动AI应用设计高保真度着陆页。
风格 = 干净、几何形状、鲜艳的强调色、高级感觉。
</context>

<requirements>
- 带有手机模型（倾斜）的Hero。
- 功能行（图标 + 文本）、社会证明、定价部分。
- 具有强大排版的CTA部分。
- 一致的间距节奏。
- 包括亮色和暗色版本。
</requirements>

<output>
以高保真度模型化设计
</output>

```

如你所见，我使用了XML格式的提示。它不仅对Gemini 3有效，而且对ChatGPT也有效（查看我的文章[4种让ChatGPT发挥最大作用的验证方法](https://uxplanet.org/3-essential-techniques-that-will-make-the-most-of-chatgpt-5-40f7141fb3bf?ref=hubwiz.com)以获取更多实用的提示编写技巧）

\*快速说明：\*你可以在输出中发现"模型化"这个关键词，但很多时候Gemini会将这个关键词解释为源代码而不是图像。

## 3、查看和共享输出

Gemini 3将生成未来页面的源代码。而且很棒的事情是它还会在画布中直接显示页面的预览。你可以在代码和预览选项卡之间跳转，以更好地理解Web设计的细微差别。

![None](https://www.hubwiz.com/blog/content/images/2026/02/1-GkzimZhpzhiqF4nZPajtbw.png)

如果你想与他人共享预览，你可以直接点击共享，复制画布的链接并在浏览器中打开。

---

原文链接: [Gemini 3 for Web Design](https://uxplanet.org/gemini-3-for-web-design-3f44fb570dcc?ref=hubwiz.com)

汇智网翻译整理，转载请标明出处