APPLICATION

用 Gemini 3.1 进行 UI 设计

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

admin

Mar 2, 2026 • 8 min read

AI编程/Vibe Coding 遇到问题需要帮助的，联系微信 ezpoda，免费咨询。

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 格式文本时使用它。