30分钟出概念稿！教你用好GPT Image 2 × Figma的实战工作流

一、全文速览图

二、为什么这个组合能救急

上周PM甩来一个需求："明天要三个风格方向的App首页，投资人要看。"

搁以前，这意味着Pinterest翻半天、Figma里搭框架、跟PM Battle圆角用8px还是12px，三天没了。现在用GPT-Image-2出概念图+Figma精修，30分钟出稿，PM直接挑一个往下走。

核心逻辑：GPT-Image-2负责"从0到0.7"快速出视觉方向，Figma负责"从0.7到1"做可交付的精细设计。分工明确，互不抢戏。

三、GPT-Image-2到底强在哪？（设计师视角版）

OpenAI 2026年4月发布的GPT-Image-2（代号"Spud"），对UI设计师来说有三件事值得关心：

文字能看清

以前AI生成的UI图，按钮文字不是乱码就是糊成一团，"Orders"能写成"Los"。GPT-Image-2能输出清晰可读的界面文字——导航标签、按钮文案、输入框占位符都能正常显示。这意味着你不用再对着一张AI生成的图猜"这行字到底写的是啥"。

布局能推理

你让它画外卖App首页，它能自动安排搜索栏放顶部、分类标签横向滚动、商品卡片排成纵向列表、底部导航固定。不是随机堆叠，而是有逻辑地组织界面元素。这背后是它的"原生Thinking模式"——生图前先规划布局，画完自检对齐和层级。

风格能统一

上传一张参考图让它"照着这个风格画"，它能保持色彩、圆角、阴影的一致性。做系列化设计时，第一张是橙色圆角卡片，第八张还是橙色圆角卡片，不会突然变成紫色方角。这是传统AI最难做到的。

但记住：它出的是PNG/JPEG静态图，不是可编辑的文件，也不是生产代码。定位是"视觉沟通工具"——快速验证想法、给老板看概念、需求评审时让大家有具象讨论基础。别指望它能直接出开发可用的设计稿。

四、五步工作流：从需求到可交付概念稿

Step 1：需求拆解（5分钟）

把PM的"大气一点"翻译成AI能听懂的话。确认三件事：

拆解完用Markdown整理，后续写Prompt直接复制粘贴。这一步花5分钟，能省后面50分钟的返工。

Step 2：双图参考法（5分钟）

准备两张图并排上传：

1. 结构参考图（左）：线框图/竞品截图/手绘草图。重点展示元素位置和层级，不要求好看。哪怕是你随手画的火柴人线框，只要位置对了就行。
2. 风格参考图（右）：Dribbble作品/品牌官网/喜欢的视觉风格。告诉AI"用什么风格画"。

Prompt模板：

"请根据左图的结构，应用右图的风格，生成一个[具体页面描述]。"

核心逻辑：把"做什么"和"怎么做"分开，降低AI理解难度。比如做烘焙店首页，结构图用化妆品电商（布局类似：Hero+分类+Featured Products），风格图用温暖面包质感摄影。AI不用同时理解"长什么样"和"啥风格"，任务拆分后准确率明显提升。

Step 3：写Prompt（5分钟）

用Markdown格式写，层级清晰AI更容易解析。公式：

[任务指令] + [平台规范] + [页面结构] + [视觉风格] + [输出要求]

外卖App首页完整Prompt示例：

# 任务指令 生成一个iOS风格的外卖App首页UI mockup。  # 页面结构 - 顶部：搜索栏（占位符"搜索餐厅或菜品"），左侧定位图标显示"LA"，右侧消息图标带红点 - 中部：横向滚动的分类标签栏（全部、汉堡、披萨、寿司、中餐、甜点），当前选中"全部" - 内容区：纵向滚动的餐厅卡片列表，每张卡片包含：   - 餐厅封面图（圆角12px）   - 餐厅名称（18px加粗）   - 评分（4.5星）+ 配送时间（30分钟）+ 配送费（$2.99）   - 特色标签（"满减优惠"、"新店开业"） - 底部：固定Tab导航栏（首页、发现、订单、我的），当前选中"首页"  # 视觉风格 - 整体风格：现代、干净、食物摄影为主 - 配色：主色#FF6B35（橙色），背景#FFFFFF，文字#1A1A1A，次要文字#666666 - 字体：SF Pro - 组件：卡片带柔和阴影（y:4, blur:12, color:rgba(0,0,0,0.08)），圆角16px  # 输出要求 - 比例：9:19（iPhone比例） - 分辨率：2K - 画质：medium - 要求：文字清晰可读，组件对齐，符合iOS Human Interface Guidelines

Prompt撰写技巧：

1. 用数字和列表理清布局顺序，AI按顺序读取
2. 加粗重点让AI知道优先级，比如主色#FF6B35
3. 层级不超过3级，太多AI会懵
4. 详细描述样式："32px圆角图标"、"可横向滑动的圆角卡片，带柔和阴影"
5. 明确平台规范：iOS HIG / Material Design / 自定义
6. 色值用Hex，AI识别最准
7. 阴影写具体参数，不要只说"带阴影"

Step 4：生成与迭代（10分钟）

提交后等1-2分钟（Plus用户），OpenAI搞了个复古加载效果——图从上到下慢慢"刷"出来，像早年网速慢时的加载画面。看着它一点点刷出来，有种奇怪的满足感。

常见错误检查清单：

1. 文字错误（如"Los"应为"LA"）
2. 布局bug（如底部导航重复元素）
3. 风格不一致（如圆角忽大忽小）
4. 对齐问题（组件没对齐网格）
5. 间距混乱（卡片间距不统一）
6. 颜色偏差（主色偏差太大）
7. 文字层级不清（标题=正文）

迭代指令要具体到像素，不要模糊感受：

常用迭代指令库：

1. "请让所有文字对比度更高，更易于阅读"
2. "请重新设计图标，让它们更精致、细节更丰富"
3. "请为背景增加一层从上到下的蓝色渐变"
4. "请让卡片之间的垂直间距再大一点"
5. "请把底部导航栏的文字从灰色改为白色，背景从白色改为深色"
6. "请把搜索栏的圆角从8px改为12px，增加左侧放大镜图标"

高级技巧：让AI自己分析——"从层次结构、视觉平衡或无障碍性方面可以做哪些改进？"有时候AI的反馈比你想得还细，比如它会指出"标题和副标题的对比度只有2.1:1，不符合WCAG AA标准，建议提高到4.5:1"。

Step 5：导入Figma精修（5分钟）

AI出的是PNG，最后一步是在Figma里"描一遍"变成可交付文件：

1. 导入底图：把AI生成的图拖进Figma作为参考层，锁定位置

2. 提取设计系统：用Figma的Color Picker吸色，建立Color Token；测量间距，建立Spacing Token（8px、16px、24px、32px、48px）

3. 重新绘制组件：用Figma的Auto Layout画按钮、卡片、导航栏——这时候你已经有明确视觉方向，不用纠结"橙色还是蓝色""圆角8px还是16px"

4. 建立组件库：把常用元素做成Component（按钮Primary/Secondary、卡片、输入框、导航栏），方便后续复用

5. 输出资产：导出切图（1x/2x/3x）、制作Style Guide、写设计规范文档

这个过程听起来麻烦，但实际上比从零设计快得多。因为你已经解决了最难的部分：视觉方向。剩下的只是"描图"和"规范化"，属于熟练工的重复劳动。

五、三个实战案例拆解

案例1：外卖App首页（入门级）

需求：明天投资人演示，要3个风格方向的概念稿

时间：2小时（传统流程2天）

执行过程：

1. 结构参考：Mobbin上找DoorDash和Uber Eats截图，截取首页布局。

2. 风格参考：找3张不同风格摄影 —— 1张现代极简（黑白灰）、一张活力橙色（暖色调食物）、一张高端深色（暗调质感）。

3. 用同一套Prompt分别搭配3张风格图，批量生成。Prompt核心结构不变，只改视觉风格描述。

4. 第一轮发现左上角显示"Los"而非"LA"，底部导航"Orders"重复——直接告诉AI"左上角定位文字应为LA不是Los，底部导航栏Orders只保留一个"，第二轮修正。

5. 导入Figma，提取3套设计系统（Color Token+Spacing Token+Typography Scale），制作3套方案页面。

成果：PM直接选"活力橙色"版本，投资人一次过。传统流程2天，现在2小时。投资人甚至问"这个设计师效率很高，是不是全职的？"——我笑了笑没说话。

案例2：SaaS产品落地页（进阶级）

需求：AI写作工具落地页，"专业但不死板"

时间：4小时（传统流程3-4天）

难点：结构复杂（Hero+功能介绍+定价+Testimonials+CTA），文字多容易翻车。如果一次性生成整页，AI容易"脑抽"——Hero区文字清晰，定价区文字就糊了。

解法 —— 分块生成：

风格统一技巧：每轮都上传上一轮的生成结果作为风格参考。第2轮上传第1轮的结果，第3轮上传第2轮的结果，以此类推。这样AI会自动继承配色、圆角、阴影风格。

局部修改用Mask：Hero区的产品截图需要换成真实界面，用Mask只改中间截图区域，标题、按钮、背景完全不动。Mask边缘做3px高斯模糊，接缝自然。

成果：完整落地页视觉稿，文字清晰、布局合理、风格统一。同事以为我熬了两个通宵画的，其实我下午还喝了杯咖啡。

案例3：品牌IP系列化延展（高阶级）

需求：教育App吉祥物IP，8个不同场景系列图

时间：1天（传统流程1-2周）

难点：保持角色在8张图中的一致性（脸型、发型、服装、配色）。传统AI最难做的就是这件事——第1张是小圆脸，第5张变瓜子脸了。

工作流：

① 先生成角色身份证：第一轮出正面全身设定图，包含所有细节特征：

• 脸型：圆脸，脸颊微鼓
• 发型：棕色短发，头顶有一撮呆毛
• 服装：蓝色背带裤，白色T恤，红色帆布鞋
• 配饰：圆框眼镜，左耳有个小星星耳钉
• 配色：主色橙#FF6B35，辅色蓝#4A90D9

② 上传参考图：后续每轮都以设定图为准，告诉AI"请保持角色与参考图完全一致"

③ 开启Thinking模式：让AI生成前先规划如何保持一致性，它会自检"这个角色有哪些固定特征不能改"

④ API批量跑：用gpt-image-2-all端点，每张约0.03，8张总成本不到3美元。设timeout=360秒，画质medium

Prompt：

生成一组IP形象系列图共8张：主角是一只穿蓝色背带裤的橙色小狐狸，戴圆框眼镜。 场景：1.图书馆看书 2.实验室做实验 3.操场跑步 4.食堂吃饭  5.教室上课 6.宿舍睡觉 7.公园野餐 8.舞台演讲 要求8张图角色脸型、发型、服装、配色完全一致。宽高比1:1，画质medium。

成果：一致性90%+，只有细微差异（眼镜反光角度、背带裤褶皱方向）。用Photoshop的液化工具微调脸型，30分钟搞定全部。如果手绘8张，至少1-2周。

六、五个让AI更听话的秘诀

秘诀1：双图参考法控制风格

结构图=告诉AI"做什么"，风格图=告诉AI"怎么做"。

做深色金融App：结构图用浅色银行App（告诉模块：账户余额+交易列表+快捷操作），风格图用深色科技摄影（告诉视觉：深蓝背景+霓虹蓝高光+玻璃拟态卡片）。

Prompt："请根据左图的结构和内容，应用右图的视觉风格来生成一张新图片。请将界面从浅色主题改为深色主题，使用简洁的深色背景，并在主体元素的周围留出更多空间。"

秘诀2：Markdown写Prompt

层级清晰，AI更容易解析。不要用大段文字堆砌，用标题分级。模板：

# 项目背景 [一句话描述这个页面是干啥的，用户是谁]  ## 平台规范 - 平台：[iOS/Android/Web] - 规范：[Human Interface Guidelines / Material Design / 自定义] - 安全区：[顶部44px / 底部34px]  ## 页面结构 ### 顶部区域（Status Bar + Navigation） - [元素1：描述+尺寸] - [元素2：描述+尺寸]  ### 中部区域（Content） - [元素3：描述+尺寸] - [元素4：描述+尺寸]  ### 底部区域（Tab Bar / CTA） - [元素5：描述+尺寸]  ## 视觉风格 - 整体风格：[描述，如"现代极简、留白充足"] - 配色：   - 主色：[色值]   - 辅色：[色值]   - 背景色：[色值]   - 文字色：[色值]   - 次要文字：[色值] - 字体：[字体名称+字重] - 组件：   - 圆角：[数值]   - 阴影：[参数]   - 间距：[8px/16px/24px网格]  ## 输出要求 - 比例：[9:19 / 16:9 / 1:1] - 分辨率：[2K / 4K] - 画质：[low / medium / high] - 特殊要求：[如"文字清晰可读""组件严格对齐"]

秘诀3：迭代时具体到像素

像给实习生改稿一样精确。不要说"感觉不对"，要说"按钮高度从44px改48px"。

1. 尺寸："请把[元素]的[宽/高]从[旧值]改为[新值]"
2. 颜色："请把[元素]的颜色从[旧色值]改为[新色值]"
3. 间距："请把[元素A]和[元素B]之间的间距从[旧值]增加到[新值]"
4. 位置："请把[元素]从[旧位置]移动到[新位置]"
5. 样式："请把[元素]的[圆角/阴影/边框]从[旧样式]改为[新样式]"

秘诀4：Mask局部重绘

上传原图+同尺寸黑白Mask图（白色=编辑区，黑色=保留区），只改局部不影响其他。

1. 在Figma/PS里打开原图
2. 新建图层，用黑色填充整张画布
3. 用白色画笔涂抹要修改的区域
4. 导出PNG，确保尺寸和原图完全一致
5. 上传原图+Mask图+修改指令

保真技巧：Mask边缘用3-5px高斯模糊，避免出现"贴纸感"接缝。白色区域不要画得太精确，比实际修改区域大一圈，给AI留发挥空间。

适用场景：换Hero配图、改定价数字、统一Logo位置、调整某个按钮样式等。

秘诀5：API批量控制成本

批量生成别在网页端一张一张点，用API跑效率最高。推荐参数配置：

格式选择：PNG（UI导出）、JPEG（网页插图）、WebP（移动端优先）。

API调用示例（Python）：

import openai  response = openai.images.generate(     model="gpt-image-2",     prompt="你的Prompt",     size="1024x1792",  # 9:19 iPhone比例     quality="medium",     timeout=360  # 4K图可能需要3-5分钟 )

七、避坑指南：常见问题速查

文字渲染

布局对齐

风格一致性

成本与速度

八、它替代不了设计师，但能替代80%的重复劳动

擅长的事：

1. 快速概念验证：30分钟出3个风格方向，让团队尽早看到具象方案，避免"我觉得不对但说不出哪不对"的无效讨论
2. 风格探索：快速试"如果换成深色模式会怎样""如果用玻璃拟态风格会怎样"——以前每种方向画半天，现在5分钟
3. 批量物料生产：一次性生成10张社媒封面、8张IP场景图、5张PPT封面——统一风格，批量输出
4. 局部翻新：在现有图上改个按钮、换个配色，不用重画整张图。Mask功能让"只改这一小块"成为可能

不擅长的事：

1. 复杂交互设计：它生成的是静态图，没法展示交互动效、状态变化、手势操作、页面转场。需要Figma Prototype
2. 设计系统搭建：它能生成好看的图，但出不了可复用的组件库、Design Token、变体。需要设计师手动搭建
3. 用户研究：它不懂用户痛点、使用场景、业务目标。为什么这个按钮放这里？AI不知道
4. 跨平台适配：生成的是单张图，不是响应式布局、不是多分辨率适配方案。
5. 无障碍设计：它不知道WCAG对比度标准、不知道色盲用户怎么看。需要专业判断。

未来工作流预测：

GPT-Image-2负责"0到0.7"——快速出方向、定调性、做探索。设计师负责"0.7到1"——做细节、建系统、保体验。两者不是替代关系，是分工关系。

九、Prompt模板库（直接复制用）

模板1：App首页

生成一个[平台]风格的[App类型]首页UI mockup：页面标题"[标题]"，内容区包含[模块1]、[模块2]、[模块3]共[N]个卡片/列表项，底部导航[Tab1]、[Tab2]、[Tab3]，强调色[主色]，字体[字体名称]，要求文字清晰可读、组件对齐、符合[规范名称]规范。比例[比例]，分辨率[分辨率]。

模板2：落地页

生成一个[风格]的落地页：包含Hero区（标题"[标题]"+副标题"[副标题]"+CTA按钮"[按钮文字]"）、功能介绍区（[N]列卡片）、定价区（[N]个定价方案）、用户评价区（[N]条评价）。配色[主色/辅色]，字体[字体]，比例16:9，分辨率2K。

模板3：PPT封面

生成一张PPT封面：16:9比例，主题"[主题]"，主标题"[主标题]"72号字加粗，副标题"[副标题]"24号字，左侧视觉[主视觉描述]，右侧留出标题区，风格参考[参考风格]，配色[配色方案]。

模板4：信息图

生成一张信息图：主题"[主题]"，竖版9:16，内容包含[数据点1]、[数据点2]、[数据点3]，用[图表类型]呈现，顶部主标题，底部标注数据来源，商务风格，配色专业克制。请先联网查询最新数据，再生成图表。

模板5：局部重绘

保留整体构图、光影、色调、主体位置完全不变，只把[具体位置]的[旧内容]替换为[新内容]，其他区域保持像素级一致。

模板6：品牌IP系列

生成一组IP形象系列图共[N]张：主角是[角色描述，含所有细节特征]。场景分别为：1.[场景1] 2.[场景2] 3.[场景3]...要求[N]张图中角色的[脸型/发型/服装/配色]保持完全一致。宽高比[比例]，画质[low/medium/high]。

最后一句：工具是手段，下班是目的。今天比昨天少熬一小时，就是胜利。用好AI，然后——关机，回家。