用GPT-4o做UI设计！这篇保姆级攻略讲透了（附App实战案例）

以下文章来源于UI设计达人，作者小优

能用 ChatGPT 生成 UI 设计吗？当然可以！

但生成的设计靠谱吗？这篇文章不仅会解答这个问题，还会分享用 ChatGPT 4o 做 UI 设计的实用技巧。

ChatGPT UI 生成器的进化简史

这不是我第一次尝试用 ChatGPT 做 UI 设计。2023 年第一次用的时候，它甚至还没有内置图像生成器，只能用来生成布局设计思路。

后来 DALL・E 集成到 ChatGPT 里，但效果不太理想 ——DALL・E 3 生成的图片里经常有乱码文本。

2023 年 AI 生成的 UI 设计

用 ChatGPT 4o 生成 UI 设计的分步指南

OpenAI 最近给 ChatGPT 来了波大更新，现在 4o 版本能生成带真实文本的精致 UI 设计了。

关键第一步是写好 “提示词”。我以虚构的外卖 App “Foodiez” 的首页设计为例，用 Markdown 格式来写提示词。

为啥用 Markdown？

因为它自带内容层级（比如 ## 标题），能逻辑化分组 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

写提示词的实用技巧

写提示词是用 ChatGPT 做 UI 设计最有挑战的部分。我的建议是：别从零开始！先用 ChatGPT 分析现有设计。参考已有设计能让 AI 明确你的风格偏好、视觉密度和整体调性，避免 “货不对板”。

比如我设计外卖 App，就会参考 DoorDash、Postmates、Uber Eats 这类 App 的界面。获取现有 App UI 的 3 种方法：

手机截图

搜网上的高保真原型（比如我从 DoorDash 官方素材库找的界面）

用 Mobbin 这类工具

DoorDash 是美国一款流行的外卖 App。以下是我可以作为参考的关键界面，包括主界面。

拿到 ChatGPT 生成的描述后，记得用 Markdown 格式化。Markdown 提示词的加分项：

明确平台（iOS/Android/ 网页）、布局、风格、用途

想要特定视觉效果就直说（比如 “32px 圆角图标”）

用数字分章节，理清布局顺序

加粗重点（如文本），保持格式统一（比如我用加粗标模块顶级属性）

层级不超过 3 级（#、##、###），太多 AI 可能解析出错

详细描述样式和交互（比如 “可横向滑动的圆角卡片，带柔和阴影”）

 懒人技巧：不用自己写 Markdown！让 ChatGPT 帮你把纯文本转格式。直接把我上面的示例 prompt 复制给它，让它照着改就行。

提交提示词后，生成图片需要 1-2 分钟（Plus 用户）。OpenAI 还搞了个复古加载效果 —— 图片从上到下慢慢 “刷” 出来，像极了早年网速慢时的加载画面。

ChatGPT 图片生成过程

下图是 AI 按提示词生成的原始设计：

ChatGPT 生成的设计

虽然和提示词匹配度很高，但细节有 bug，比如左上角 “Los” 应该是 “LA” 或 “Los Angeles”，底部导航栏 “Orders” 重复了。

我用这条提示词修正：

Remove extra Orders navigation option from the bottom Tab bar and change "Los" in the top left to "LA"

生成结果：（未裁剪的原始图）

第一版优化设计

可见，ChatGPT 改对了 “Los”，但直接删掉了整个 “Orders” 标签（而不是去掉重复），还微调了图标、文本布局和控件样式（比如 “All Types”）。

另一个技巧：让 ChatGPT 自己分析设计并提改进建议，比如问它：“从在层次结构、视觉平衡或无障碍性方面可以做哪些改进？”

What can be improved in terms of hierarchy, visual balance, or accessibility?

用 ChatGPT 做 UI 设计的完整流程

现在可以把 AI 工具融入 UI 设计流程了，我的创意阶段流程如下：

ChatGPT UI 设计流程图

明确设计目标：这是个什么界面？给谁用？用户要完成什么操作？

写提示词并验证：包含平台、布局、视觉风格、品牌调性，写完大声读一遍！

提交给 ChatGPT 生成设计

审核设计：是否符合目标？层级清晰吗？交互直观吗？缺什么或哪里别扭？

优化提示词并迭代

如果你想要 “像素级完美” 的最终设计，ChatGPT 还做不到（至少现在）。但作为快速试错、验证想法的工具，它绝对是把好手！

最后记得在 Figma 里细化设计，有两种方式：把 AI 生成的图当参考重新搭建，或者用 Codia 这类插件直接转 Figma 文件。

原始设计（ChatGPT 生成的原始图像）和基于此图像由 Codia 生成的 Figma 布局

使用 AI 进行快速编码

越来越明显的是，我们做产品的方式正在剧变。不远的将来，可能会更少用 Figma，更多用 ChatGPT、Claude 这类工具。甚至很多设计任务不再需要手动调像素，AI 能直接生成设计 + 代码。

我个人很喜欢 Cursor AI，用它做过一个简单但功能完整的移动 + 网页 App，体验超赞！

原文：uxplanet  作者：Nick Babich