← 回總覽

AI 没法直出 UI?GPT+Figma 这样搭才管用!

📅 2026-06-17 07:45 人人都是产品经理 产品设计 2 分鐘 1382 字 評分: 82
AI 产品设计 用户体验设计 UI 设计 设计工具 工作流
📌 一句话摘要 本文通过一个真实的供电所工作台案例,提出「image2 负责视觉探索、Figma 承接结构、设计师最终整合」的 AI+UI 工作流,强调不要幻想 AI 一步到位。 📝 详细摘要 文章基于一个真实的 B 端首页(供电所智能工作台)实践,详细拆解了如何结合 GPT(image2)与 Figma/Figma Make 完成从视觉探索到可交付设计稿的全过程。作者首先明确结论:image2 更适合打开视觉方向,而非直接生成最终交付稿。核心工作流分为四步:1)用原型+参考图约束 AI 的发挥范围;2)用 image2 生成多版视觉方案;3)回到 Figma 做结构承接(对比了 imag

📌 一句话摘要

本文通过一个真实的供电所工作台案例,提出「image2 负责视觉探索、Figma 承接结构、设计师最终整合」的 AI+UI 工作流,强调不要幻想 AI 一步到位。

📝 详细摘要

文章基于一个真实的 B 端首页(供电所智能工作台)实践,详细拆解了如何结合 GPT(image2)与 Figma/Figma Make 完成从视觉探索到可交付设计稿的全过程。作者首先明确结论:image2 更适合打开视觉方向,而非直接生成最终交付稿。核心工作流分为四步:1)用原型+参考图约束 AI 的发挥范围;2)用 image2 生成多版视觉方案;3)回到 Figma 做结构承接(对比了 image2 直写 Figma 与 Figma Make 按图还原两种方式的优劣);4)由设计师整理图层、自动布局、组件和规范,最终交付。文章还详细给出了提示词写法、多方案生成技巧、局部素材(图标、Banner)单独优化的方法,以及区分「视觉氛围类内容可图片化、业务内容必须可编辑」的原则。最终总结:AI 负责打开方向,人负责把结果变成真正能用的设计稿。

💡 主要观点

- image2 更适合视觉探索,而非直接生成最终交付稿。 真实项目需要保留业务结构、信息层级和可编辑性,AI 生成的图片无法直接满足这些要求,更适合作为视觉方向参考。

有效工作流是「原型约束 + image2 视觉 + Figma 结构 + 设计师整合」。 原型负责结构,参考图负责风格,image2 生成视觉方案,Figma/Figma Make 承接可编辑结构,最后由设计师完成组件化和规范整理。
image2 直写 Figma 保视觉质感,Figma Make 按图还原保自动布局。 两种方式各有优劣,建议组合使用:前者保留氛围和细节,后者提供可编辑结构和自动布局,最终由设计师合并优点。
视觉氛围类内容可图片化,业务内容必须可编辑。 Banner、图标、插画等装饰元素可以单独生成图片复用,但业务字段、数据模块等后续会修改的内容必须保留在 Figma 的可编辑图层中。

💬 文章金句

- 不要一开始就指望 AI 直接生成最终可交付的 Figma 设计稿。

  • AI 负责打开方向,依旧需要人负责把结果变成真正能用的设计稿。
  • 整页图负责方向,局部素材负责质感。

📊 文章信息

AI 初评:82

来源:人人都是产品经理

作者:人人都是产品经理

分类:产品设计

语言:中文

阅读时间:21 分钟

字数:5134

标签: AI 产品设计, 用户体验设计, UI 设计, 设计工具, 工作流

阅读完整文章

查看原文 → 發佈: 2026-06-17 07:45:00 收錄: 2026-06-17 16:00:54

🤖 問 AI

針對這篇文章提問,AI 會根據文章內容回答。按 Ctrl+Enter 送出。