用Gemini 3做Web设计

Gemini 3是Google最新的多模态/代理AI模型。之前，我展示了如何将Gemini 3用于UI设计，在这篇文章中，我想向你展示如何充分利用这个工具进行Web设计。

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

1️、Gemini设置

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

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

2、提示格式和示例

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

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

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

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

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

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

如你所见，我使用了XML格式的提示。它不仅对Gemini 3有效，而且对ChatGPT也有效（查看我的文章4种让ChatGPT发挥最大作用的验证方法以获取更多实用的提示编写技巧）

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

3、查看和共享输出

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

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

原文链接: Gemini 3 for Web Design

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