Skip to content

GPT-Image-2×Figma实战工作流:30分钟出App概念稿

2026年5月8日

PM甩来一个需求:"明天要三个风格方向的App首页概念稿,投资人要看。"搁以前,这意味着Pinterest翻半天、Figma里搭框架、三天没了。现在用GPT-Image-2出概念图+Figma精修,30分钟出稿。

为什么这个组合能救急

核心逻辑:

  • GPT-Image-2 负责"从0到0.7":快速出视觉方向
  • Figma 负责"从0.7到1":做可交付的精细设计

分工明确,互不抢戏。

GPT-Image-2 到底强在哪

OpenAI 发布的 GPT-Image-2(代号"Spud"),对 UI 设计师来说有三件事值得关心:

1. 文字能看清了

以前AI生成的UI图,按钮文字不是乱码就是糊成一团。GPT-Image-2 能输出清晰可读的界面文字——导航标签、按钮文案、输入框占位符都能正常显示。

2. 布局能推理了

让它画外卖App首页,它能自动安排搜索栏放顶部、分类标签横向滚动、商品卡片排成纵向列表、底部导航固定。不是随机堆叠,而是有逻辑地组织界面元素。

3. 风格能统一了

上传参考图让它"照着这个风格画",它能保持色彩、圆角、阴影的一致性。做系列化设计时,第一张是橙色圆角卡片,第八张还是橙色圆角卡片。

但记住: 它出的是PNG/JPEG静态图,不是可编辑的Figma文件,也不是生产代码。定位是"视觉沟通工具"——快速验证想法、给老板看概念、需求评审时让大家有具象讨论基础。

五步工作流:从需求到可交付概念稿

Step 1:需求拆解(5分钟)

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

维度需要明确的信息示例
平台iOS/Android/Web?iOS,遵循HIG
场景用户来这页干啥?浏览餐厅、下单外卖
调性品牌色?字体?设计系统?主色#FF6B35,圆角16px,卡片布局

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

Step 2:双图参考法(5分钟)

准备两张图并排上传:

结构参考图(左):线框图/竞品截图/手绘草图。重点展示元素位置和层级,不要求好看。

风格参考图(右):Dribbble作品/品牌官网/喜欢的视觉风格。告诉AI"用什么风格画"。

Prompt模板:

"请根据左图的结构,应用右侧的视觉风格,生成一个外卖App首页概念设计图。"

Step 3:AI生成初稿(10分钟)

把拆解的需求和双图传给GPT-Image-2,生成初稿。如果不满意,调整Prompt或更换参考图重新生成。

生成技巧:

  • 明确标注"不要"的元素,减少随机性
  • 风格描述越具体越好,"简约现代风"比"好看"有效十倍
  • 一次生成3-5个方向,让PM有选择空间

Step 4:Figma精修(10分钟)

把AI生成的图导入Figma,开始精修:

  1. 替换文字:确保所有文案可读、可编辑
  2. 调整布局:对齐、间距、比例按设计规范来
  3. 补充细节:图标、渐变、阴影等Figma更可控
  4. 添加标注:标注关键尺寸和色值,方便开发对接

Step 5:交付与归档(5分钟)

  • 导出PNG/PDF交付
  • 把设计源文件、设计决策记录、Prompt版本归档
  • 方便后续复用和迭代

Prompt模板库

外卖App首页Prompt

请设计一个外卖App首页概念稿:
- 顶部:搜索栏 + 位置选择
- 中部:Banner轮播 + 分类标签(横向滚动)
- 下部:餐厅卡片列表(图片+名称+评分+配送时间)
- 底部:固定导航栏(首页/订单/我的)
- 风格:现代简约,主色调橙色,圆角16px

电商首页Prompt

请设计一个电商App首页概念稿:
- 顶部:搜索栏 + 消息图标 + 购物车图标
- 中部:搜索框 + 类目入口(图标网格)
- 下部:商品瀑布流(图片+价格+标签)
- 风格:轻奢优雅,主色调香槟金,间距宽松

社交App首页Prompt

请设计一个社交App首页概念稿:
- 顶部:用户头像 + 昵称 + 设置入口
- 中部:内容Feed流(图文/视频卡片)
- 底部:固定导航栏(首页/发现/发布/消息/我的)
- 风格:年轻活力,主色调渐变紫,圆角24px

避坑指南

解决方案
AI生成的设计太概念化先用线框图确定结构,再让AI填风格
文字乱码看不清明确要求"所有文字必须清晰可读"
风格不统一每次都用同一张风格参考图
返工率高需求拆解阶段多花时间,确认清楚再动手
版权问题用自己的线框图或无版权素材做参考

总结

GPT-Image-2 + Figma 工作流的价值:

  • 把"三天出概念稿"压缩到"30分钟"
  • AI负责探索方向,人负责把关质量
  • 设计师从执行者变成决策者

核心心法:把AI当实习生——给它明确的方向和参考,让它快速出初稿,你来做最终判断。

不要孤军奋战啦!

加入微信群一起学习交流 AI

与大神一起使用 OpenClaw、Hermes、Claude Code、Seedance 2.0、GPT-Image-2 等

微信公众号

扫码关注微信公众号
私信 "加群",将自动获取微信群二维码

探索 AI 世界,掌握智能未来