AI没法直出UI？GPT+Figma这样搭才管用！

一、全文速览图

这段时间，网上关于 GPT Image 2 的案例很多。

但看多了华丽的视觉，我脑子里始终在思考一个更现实的问题：

GPT Image 2 到底能不能接真实的 UI 需求？

本篇文章基于一个真实 B 端首页实践，分享我如何结合 GPT Image 2 + Figma/Figma Make 完成视觉探索到可交付设计稿的全过程。

二、先说结论：GPT Image 2 更适合打开视觉方向

这次测试后，我比较明确的判断是：

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

更稳妥的方式是：先用 GPT Image 2 把视觉效果做出来，再回到 Figma / Figma Make 里整理结构。

因为在真实项目里，页面不是只要“好看”就够了。它还需要保留产品原型里的模块关系、业务字段和信息层级，最后也要回到 Figma 里继续修改、组件化和交付。

所以我现在更推荐把流程拆成四步：

这套流程的关键不是让 AI 一步到位，而是把不同工具放在最适合的位置：

1. GPT Image 2 负责视觉探索：生成 Banner、卡片、图标、插画和整体氛围；
2. Figma / Figma Make 负责结构承接：把页面变成可继续编辑和调整的设计稿；
3. 设计师负责最终落地：整理组件、自动布局、业务字段和设计规范。

先看结果：同一个原型，我跑了几版不同方向

为了验证这套流程，我基于同一个产品原型连续生成了多版方案。

这一步我没有让 GPT Image 2 从零自由发挥，而是始终用原型约束页面结构，再通过不同参考图和描述词调整视觉方向。

从结果可以看到，它基本能保留首页工作台的模块关系。不同方案之间的差异，主要体现在视觉层：有的更偏清爽蓝白，有的强化了 Banner 和图标，有的加入了更强的科技感，也有暗黑风格版本。

这一步的价值不是直接选一张当最终稿，而是快速判断哪种方向更适合项目。确认方向后，再进入后续的 Figma 结构化还原和人工整理。

三、准备工作：确认生图能力，并连接 Figma

在开始之前，需要先确认两件事。

第一，当前对话是否支持图片生成。

如果你可以直接上传参考图，并让 AI 根据图片生成或修改视觉图，就说明这一步已经具备了。

第二，如果你希望后续把结果带回 Figma，就需要提前把 Figma 接进来。

连接成功后，可以先用一个简单指令测试：

请在当前 Figma 文件中新建一个测试 Frame，尺寸为 1920 × 1080。

如果 AI 能读取文件，或者能在 Figma 里创建测试画板，就说明连接已经可用。

这里不展开太细，核心就是确认三件事：能生图、能连接 Figma、Figma AI credits 够用。

Figma 连接的大致流程如下：

首先，在侧边导航找到应用入口，并搜索插件名字

然后进行连接，建议连接之前先登录 figma 账号。

浏览器授权时，点击授权按钮，完成后会自动回到 ChatGPT 页面。

回到 ChatGPT 后，如果对话框里出现 Figma 图标，就说明已经连接成功。

这里还要注意 Figma 的版本和额度。

不然后面流程跑到一半，很容易因为额度或权限问题中断。

四、第一次尝试：只靠描述生图，为什么不适合真实项目

一开始，我也试过直接用简单描述生成页面。

帮我生成一张虚拟电厂工作台首页设计稿，要求蓝白风格、B 端后台、清爽专业、有科技感。

生成结果整体看起来也像一个 B 端页面，但问题很明显：

它只是“像一个 B 端页面”，并不等于“能用到当前项目里”。

因为真实项目里的页面，不只是风格问题，还包含很多业务约束。

这些信息只靠一句简单描述，AI 很难准确理解。所以这类生成方式更适合做灵感参考，不适合直接进入真实项目。

简单描述适合发散灵感，但真实项目一定要基于产品原型来输出。

也就是说，不要让 AI 从零自由发挥。

真实项目里，更重要的是把已有原型、业务结构和不可变约束告诉它。

五、第二次尝试：把产品原型给 GPT Image 2

后来我换了思路。

不再让 AI 从零生成，而是直接把真实项目里的产品原型给到 GPT Image 2。

这一步最关键的是先告诉它：产品原型负责结构，而 GPT Image 2 负责视觉升级。

也就是说，原型里的模块、顺序和业务信息尽量不要乱动。

AI 可以从视觉维度入手，优化 Banner、卡片、图标、阴影、渐变、页面氛围和整体层次。

这样做出来的结果，会比“只靠一句描述”更接近真实项目。

因为原型给了结构约束，AI 不会完全自由发挥；

参考图又能给它视觉方向，让生成结果不只是原型美化。

提示词怎么写？

这里我不会只说“帮我优化得好看一点”，而是会把需求拆成几个部分：
原型用途、参考图用途、项目类型、当前约束、优化重点、风格要求和输出要求。

下面这段不是必须逐字照抄，而是想说明：真实项目的提示词要同时写清楚结构约束、视觉目标和输出要求。

请基于我提供的 3 张图生成一版高保真 B 端首页设计稿：

图 1 是我的原型图，主要用于参考页面结构、模块布局、信息层级和业务逻辑。
请尽量保持原型的大结构不变，不要大幅调整页面框架。
图 2 和图 3 是视觉参考图，主要参考它们的整体风格、卡片层次、色彩关系、图表表现、首页氛围和精致度。
不要照搬参考图内容，只借鉴视觉语言。
页面类型

这是一个供电所智能工作台首页 / B 端首页，主要面向供电所管理人员，偏运营工作台属性。

当前约束，页面整体结构不要大改
左侧导航和顶部区域保留
原型中的主要模块关系不要变，业务信息逻辑不要变
品牌主色必须沿用蓝色体系，希望重点优化，整体视觉更现代、更精致、更有层次
提升首页氛围感和视觉完成度，顶部 banner 更有设计感，可以加入轻量渐变、抽象图形或科技感装饰
各信息卡片增强层次、阴影、圆角和留白，数据模块更清晰，重点指标更突出
图表区域、任务区域、报表区域、文件区域更规整易读，常用应用区域图标更统一精致
页面可以更丰富一些，但不要过于花哨，仍需符合政企 / 国企 B 端审美

风格要求
蓝白主色，辅以少量青色 / 橙色 / 绿色点缀
清爽、专业、现代、轻科技感
卡片式布局
圆角、柔和阴影、轻渐变
页面层次清楚，既有设计感又有落地感

输出要求
请输出一张完整的桌面端高保真设计图，适合作为后续 Figma Make 还原的视觉锚点

这段提示词的重点需要把几个关键问题说清楚：哪些不能动、哪些可以优化、参考图怎么用、最终要生成什么。

从结果来看，这一轮明显比“简单描述生成”更接近真实项目。

它没有完全推翻原型结构，而是在原有页面骨架上增加了视觉层次：Banner 更完整，卡片更像设计稿，图标和模块氛围也更接近实际可讨论的方案。

尤其是“不要改变原型结构”这一点，在真实项目里非常重要。

因为 AI 很容易为了追求好看，把页面改成一个概念稿。但真实项目里，能不能用，首先看它有没有保住业务骨架。

如果第一版方向对了，后面可以继续通过描述进行几轮局部优化。

这一轮之后，页面会更像正式设计稿，而不是单纯的原型美化。

多方案如何生成？

这里有一个经验，如果想要多个方向的设计：不要只说“再给我几版”。这样很容易变成同风格变体。更好的写法是直接把差异说清楚。

基于同一个产品原型，请生成4个明显不同的视觉方向：

方向 A：政企蓝白风，清爽、稳重、弱装饰
方向 B：基于现有方案，整体色调偏青色
方向 C：运营工作台风，信息密度更高、模块更紧凑、图标更实用
方向 D：基于现有方案，生成对应的暗黑风格

四版不要沿用同一套卡片样式和 Banner 构图，要在色彩、卡片、图标、空间节奏上拉开差异。

确认方向后，再进入后续的 Figma 结构化还原和局部细节整理。

六、细节拆分：整页负责方向，局部素材负责质感

整页生成可以帮助我们快速看到一个方向，但它不适合承担所有细节。

比如小图标、插图、Banner、各种应用图标等等，这些元素如果直接跟着整页一起生成，效果通常不会特别稳定。

所以后面可以把它们拆出来，单独绘制或单独优化。

整页图负责方向，局部素材负责质感。

例如工单图标可以单独这样写：

生成一套 B 端工作台风格的状态图标，适用于工单概况模块。
图标包括：

待派工
待处理
待评价
已完成

要求：
轻 3D、彩色、小体积感
图形语义清晰
适合 32×32 或 40×40 使用
透明背景 PNG
风格与工作台页面一致

Banner 之类的装饰元素也可以单独生成：

基于这张工作台页面，帮我单独生成顶部 banner 的背景插图素材。 
要求：  
不要标题文字 
不要按钮 
只保留蓝色科技感电力场景插图 
包含电塔、电网线条、山体/城市轮廓、柔和光感 
企业级 B 端风格，克制、干净、未来感 输出横向透明背景 PNG 或浅底独立背景图 
方便放进 Figma 作为 banner 背景使用

这一步很重要。

整页视觉稿不用一次性承担所有精细元素。它主要负责定方向，而局部图标、插画、背景可以后续单独生成，再放回 Figma 里组合。

另外，一些细节如果没有按照原型输出，也可以直接在 GPT 内继续修改，好用到起飞🛫～

这里也要区分哪些内容适合图片化，哪些内容必须可编辑。

原因很简单：业务内容后续一定会改，如果做成图片，维护成本会很高。

由此可见：视觉氛围类内容可以图片化，业务内容类必须可编辑。

七、回到 Figma：两种方法对比和最终工作流

生成 PNG 视觉稿之后，下一步就是回到 Figma。

这一步我测试了两种方式：

1. 方法 A：GPT Image 2 直写 Figma
2. 方法 B：Figma Make 按图还原

这两种方式都能用，但适合解决的问题不一样。

方法 A：GPT Image 2 直写 Figma，更适合保留视觉质感

第一种方法是直接让 GPT Image 2 根据图片在 Figma 里还原设计稿。

我的指令写得很简单：

根据这个原型，转成设计稿

这个方法的好处是：视觉质感保留得相对好一些，一些小图标和装饰元素也可能以 SVG 的形式生成，页面整体氛围能保住。

但缺点也很明显：没有自动布局，页面细节仍然需要大量人工修正。

所以，GPT Image 2 直写 Figma，更适合拿视觉细节，不适合作为最终交付稿。

它可以帮你保住图像里的氛围和细节，但如果要进入真实项目交付，还是需要设计师继续整理。

方法 B：Figma Make 按图还原，更适合拿结构和自动布局

第二种方法是把 GPT Image 2 生成的视觉图交给 Figma Make，让它基于图片还原页面。

Figma Make 的具体使用如下：

这条路径的视觉效果可能没有 GPT Image 2 直接画那么惊艳，但有一个关键优势：自动布局

这对真实项目很关键。

因为后面一定会改字段、改数据、改模块内容，如果页面没有自动布局，后续维护成本会很高。

（不用自动布局的朋友，使用 Figma 的乐趣与效率会少掉一半～）

描述词也不用写得像论文一样复杂，重点是说清楚最核心的要求即可。

按图片还原页面，必须保持整体架构不变。
Banner 可用色块代替。
分辨率 1920，高度根据内容适配。

你就这样丢给他，就开始 chuachuachua 的写起来了～

完成后，通过页面右上角的按钮点击复制，然后粘贴到 Figma 里。

复制的时候建议尽可能把窗口拉大一些，让页面显示尽可能完整，方便复制。

可以看到，它基本是按照设计稿来还原的，布局也没什么大问题，并且还有自动布局。

我们可以直接把刚才 GPT Image 2 画得比较好的元素贴进来，两者结合起来使用。

朋友们，这比自己拿到原型，从 0 开始徒手搓图快多了～

所以我对 Figma Make 的定位是：把图片结构化成可继续编辑的设计稿

它不一定负责把页面做到最惊艳，但它能让页面进入可编辑、可调整、可继续搭建的状态。

最终建议：不要二选一，而是组合使用

测试下来，我不建议只押一种方式。

更好的做法是：

先让 GPT Image 2 直接还原一版，看它能把视觉细节保到什么程度；

再让 Figma Make 按图还原一版，拿到自动布局和可编辑结构；

最后由设计师把两边的优点合并起来。

这会比单独依赖一种方式更稳。

八、最终推荐的工作流

如果后面再做类似真实项目，真正有效的顺序其实可以压缩成四步：

这套方法不是最省事的，但目前我觉得比较稳。它没有幻想 AI 一步到位，而是把 AI 放到了它最擅长的位置。

1. 原型 + 参考图定方向

原型负责结构，参考图负责风格，先把 AI 的发挥范围框住。

2. GPT Image 2 生成视觉方案

先看整体风格是否成立，再决定是否继续拆图标、Banner、插画等局部素材。

3. 回到 Figma 做结构承接

可以同时尝试 GPT Image 2 直写 Figma 和 Figma Make 按图还原：前者保视觉，后者保结构和自动布局。

4. 设计师整理与收敛

复用现有组件库，整理图层、自动布局、字段、组件和规范，最终变成可交付设计稿。

到这一步，AI 替设计师把前期探索效率提高了一截。真正进入交付时，再由设计师判断哪些内容可复用、哪些内容要替换、哪些内容要回到组件体系里重新整理。

九、最后

这次实践之后，我对 GPT Image 2 的定位更清晰了。

它在前期多方案探索、页面视觉升级、Banner、小图标这些方向上的效率非常高。尤其是在需要快速打开视觉方向的能力上夯爆了。

比较推荐的做法是：

复用现有组件库，把 AI 生成稿作为视觉参考，再调整样式、间距和层级。

如果只是快速提案，可以让 GPT Image 2 直接生成几版视觉方案。

如果要进入项目交付，更推荐用 Figma / Figma Make 承接结构，再由设计师完成组件化和规范整理

如果图里有好看的 Banner、图标、插画和装饰元素，可以拆出来作为局部素材复用。

目前来看，工具确实在不断进化越来越强，但是总结下来：

AI 负责打开方向，依旧需要人负责把结果变成真正能用的设计稿。

欢迎关注作者微信公众号：「B 端设计情报局」