> ## 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.1 进行 UI 设计
- URL: https://www.hubwiz.com/blog/ui-design-with-gemini-3-1/
- Published: 2026-03-02T01:26:57.000Z
- Updated: 2026-03-02T01:26:57.000Z
- Description: 在本文中，我想实验使用 Gemini 3.1 来生成移动应用程序的 UI。
- Author: admin
- Tags: APPLICATION, GEMINI-3, #Import 2026-10-14 14:41

Google 最近发布了一个新的 AI 模型 Gemini 3.1，在 UI 和网页设计任务中表现出色。我已经为网页设计任务测试过这个模型：

在本文中，我想实验使用 Gemini 3.1 来生成移动应用程序的 UI。

## 1、产品详情和为 Gemini 3.1 编写初始提示词

我将生成一个食品订购移动应用的主屏幕（类似于 Uber Eats 或 DoorDash），并使用 markdown 格式的提示词：

> ***为什么要使用 markdown？***

> *Markdown 天然具有内容层次结构（如 ## Header 这样的标题），提供了 UI 部分的逻辑分组，并且对人类和 AI 模型都具有更好的可读性。*

```
# Foodiez – Home Screen (iOS UI Design)

Design a clean, modern mobile UI screen for an iOS app titled Foodiez –
Local Food Delivery. The layout should have the following sections:

---

## 1. Status Bar (Top)

- **Style**: Standard iOS layout (top safe area)

---

## 2. Header Section

- **Centered Logo**: Foodiez
- **Font**: Medium weight, small size
- **Color**: Orange text

---

## 3. Location & Search Row

- **Left**: Location indicator (Los Angeles)
- **Right**: Notification icon (rounded, 32px)
- **Below**: Search bar with placeholder Search restaurants or dishes...
  - Rounded corners, light gray background
  - Search icon aligned left

---

## 4. Featured Restaurants Carousel

- **Style**: Horizontally scrollable cards with rounded corners and
soft shadow

### Card Items

- **Card 1**
  - Title: Sushi Master
  - Subtitle: *20–30 min • Free delivery*
  - Visual: Sushi photo thumbnail

- **Card 2**
  - Title: Pizza Mia
  - Subtitle: *15–25 min • $5 delivery*
  - Visual: Pizza image thumbnail

---

## 5. Filter Row

- **Dropdown Filters**:
  - Delivery Time – e.g., "Under 30 min"
  - Cuisine – e.g., "All Types"
  - Rating – e.g., "4+ stars"

---

## 6. Popular Nearby Restaurants List

### Layout

- Vertical stack of repeatable items

### Restaurant Card Item

- **Left**
  - Restaurant image (rounded, 64x64)

- **Center**
  - Name (e.g., Burger Zone)
  - Subtitle: Cuisine + delivery time (e.g., *Burgers • 20–25 min*)
  - Rating: Star icon + score (e.g., ⭐ 4.7)

- **Right**
  - Favorite icon (♡ outline)

- **Bottom Row**
  - Delivery fee (e.g., $5 delivery)
  - Promo badge (if applicable): 10% Off Today!

---

## 7. Bottom Navigation Bar

- **Tabs** (Icons on top, labels below):
  - **Home**
    - State: Active
    - Style: Highlighted icon and label (orange)
  - **Search**
    - State: Inactive
    - Style: Default gray icon and label
  - **Orders**
    - State: Inactive
    - Style: Default gray icon and label
  - **Profile**
    - State: Inactive
    - Style: Default gray icon and label

- **Spacing**: Equal horizontal spacing
- **Padding**: Bottom safe area included

```

编写优秀 markdown 提示词的一些实用技巧：

✅ **描述布局、目的、风格和平台。** 明确说明你在构建什么：web 应用、iOS 还是 Android。这将指导 AI 应该使用什么交互模式。

✅ **如果你想要特定的外观，明确提及视觉风格**（即圆角图标、32px）

✅ **使用编号的部分。** 这是 Markdown 的一个很好的补充，可以清晰地展示布局构建的顺序。这将对你和 AI 都有好处。

**✅ 使用粗体（即 \*\*text\*\*）来强调。** 它会增强清晰度。尝试一致地使用 markdown 样式（即在我的例子中，我对某部分的一级属性使用粗体）。

**✅ 在 markdown 层次结构中使用最多 3 级元素。** 使用超过 3 级（#、##、###）可能会分散意图。GPT 可能根本无法正确解析复杂的层次结构。

**✅ 提供风格和功能行为的清晰描述。** 清楚地解释某些元素应该如何外观和功能（例如，"带有圆角和柔和阴影的水平滚动卡片"）。这是过程中最棘手的部分，因为你清楚地需要理解某些东西的外观和功能。

💡*快速提示：*

- 你可以不用自己编写 markdown 文本，而是以纯文本格式提供提示词，并要求 Gemini 使用 markdown 格式化。
- 如果你想达到我在示例中使用的精确结构，可以将我上面分享的提示词提供给 Gemini 作为参考（复制并粘贴到输入字段），连同你的纯文本提示词一起，并要求 Gemini 在将你的提示词转换为 markdown 格式文本时使用它。

## 2、逐步生成 UI

现在，让我们从应用程序的一般想法转移到主屏幕的 UI，所有这些都不需要离开 Gemini。

### 2.1 选择 Gemini 3.1 设置

Google 在其几个服务中提供了对 Gemini 3.1 的访问，但我会选择最常见的一个 [Gemini for web](https://gemini.google.com/app?ref=hubwiz.com)。一旦你登录此服务，你需要激活其 AI 图像生成器（Nano Banana Pro，这样它将生成图像而不是其他东西），并选择 Pro 作为 AI 模型。

> ***为什么要使用 Pro 模型？***

> *Gemini Pro 在图像生成方面比轻量级模型（Flash）更好，因为它具有更大的容量、更强的多模态推理能力和更高的视觉保真度控制。*

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

输入字段选择了创建图像（Nano Banana Pro）和 Pro 模型。

### 2.2 提交提示词

一旦你提交上述提示词，Gemini 将开始处理 UI 设计。

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

填充了提示词的输入字段。

短暂等待后，你将收到如下所示的设计。

![None](https://www.hubwiz.com/blog/content/images/2026/03/1-MEO-j-r1rAdW6BjV6vo1Qw-1.png)

Gemini 3.1 生成的设计

如果你将此设计与 ChatGPT 5 生成的设计进行比较，你会发现 Gemini 3.1 更好地遵循了提示词中提供的说明；然而，它经常创建更加混乱的设计（即沉重的阴影、额外的线条分隔符等）。

这里有一个并排比较供你参考：

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

ChatGPT 5 vs Gemini 3.1

## 3、将静态 UI 设计转换为原型

除非你正在为你的项目创建情绪板，否则静态 UI 设计不会给你带来太多好处。所以你需要找到将此设计转换为编码原型的方法。有几个不错的选择。

### 3.1 在 Gemini 中完成

首先，也是最明显的，使用原生的 Gemini 3.1 编码功能。为此，我将创建一个新的聊天，附加 Gemini 为我生成的 UI 图像，激活 *Canvas* 模式，并提示 Gemini 对此设计进行编码。

> ***为什么要使用 Canvas 模式？***

> *Canvas 模式打开了一个专门的代码和代码预览空间（是的，它被称为 Canvas）。*

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

将设计作为图像文件附加，从工具列表中选择 Canvas，并选择 Pro 模式。

整个编码过程不会花费很长时间，很快你就会看到为你创建的 React Web 应用程序。

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

Gemini 在 Canvas 中编码 UI。

如果我们切换到 *Preview*，我们将看到解决方案的实时预览。大多数情况下，它不会是我们提供的原始 UI 图像的精确副本，但它会是对原始设计的良好重新创作。

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

Gemini 创建的最终解决方案。

### 3.2 在 Figma Make 中完成

你也可以在 Figma Make 中将设计转换为代码。过程几乎相同。你需要跳转到 **Figma** → **Figma** **Make**。

在提示词窗口中，点击"*Attach image*"并输入"*code this UI*"作为提示词。点击发送。

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

Figma Make 提示词窗口。

> 快速说明：如果你使用默认设置，Figma 可能会使用 Claude Sonnet 模型，该模型在编码方面效果很好。

初始输出将是这样的，你可以通过在 Figma Make 中提出后续提示词来轻松优化它。

![None](https://www.hubwiz.com/blog/content/images/2026/03/1-75MvP-ZW7LMsOHTokZRgSg-1.png)

但是 Figma 用户选择 *选项 B* 的原因不同。他们使用此模式是因为可以将设计从 Figma Make 导出到常规 Figma。

为此，你需要点击预览（右上角的播放按钮）来查看此设计的预览，并点击右上角的 *Copy design* 按钮来复制 Figma 就绪的设计。

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

点击 Make copy 旁边的"Copy design"图标按钮。顺便说一句，我不知道为什么 Figma 将此按钮设置为仅图标按钮，有足够的空间可以将其制作为像"Make copy"和"Share"这样的文本按钮

跳转到 Figma 文件并将此设计粘贴到 Figma 中以手动进行微调。

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

将 Figma Make 设计转换为常规 Figma 设计。

---

原文链接: [UI Design with Gemini 3.1](https://uxplanet.org/ui-design-with-gemini-3-1-cba61b49c98b?ref=hubwiz.com)

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