GPT Image 2生成的UI效果图，教你做出高质量的设计还原！

一、全文速览图

大家好，我是风筝 KK，最近两个月，我一直在尝试将 AI 放入 UI 设计工作流中，目前 AI 已经能辅助我进行需求分析、方案设计、插图绘制、交互自查等。

今天我和大家分享使用 GPT 生成方案后，如何进行设计还原效率最高，质量最好，文章最后和大家分享我的设计工作流。

二、目前 AI 还原设计稿问题

在用 GPT image2 生成好效果图后，AI 在还原设计图上，不管是直接 AI coding，还是通过 AI 绘制还原，有一个问题就是图标、插图都是 svg 绘制，都没办法还原，都还需要人工去替换。

我用一个简单的启动页，和大家举个例子：我在网上找了一个这样的启动页，输入了简单的关键词，先让 GPT image2 生成效果图，当有参考图时，只需要简单的关键词，就能够生成同风格的页面。

界面生成好了，就需要将其还原成设计了，这里为了对比效果，我采用了几种还原方式，大家看后就知道什么方式更节约 token 和时间了。

1. Figma make

我原本想同样是 GPT 模型，应该不会太差，但是同样的关键词生成的效果太感人了。看来直接让 figma 绘制是不可能了。

2. Codex/GPT+Figma mcp

Codex 或者 GPT 的插件或者应用里面，都可以安装 Figma 的 mcp，就在这个位置点击安装即可。

接着点 Codex 对话框下方的+号，选中 Figma 插件，接着将 Figma 需要绘制的 page 链接发到对话框中，然后说你的提示词即可。

整体背景看上去还可以，但是插画部分由于使用 svg 绘制，基本没办法使用，还有按钮还原也不行。

三、当前最省钱的 AI 工作流

1. GPT image2（GPT 官网）

根据近段时间我的使用情况来说，目前我觉得对于用户体验设计来说，最省钱的方式是，使用 GPT image2 官网生成设计效果图，不占用 Codex 的额度。同时平时文字工作比较多，比如需求分析、竞品分析、交互自查等都可以使用。一个会员可以覆盖 UE 体验设计的全部工作流。

接着让 GPT 将效果图分层，背景可以是绿色，便于抠图。

2. Mastergo AI 抠图

AI 抠图使用下来，最方便的还是 Mastergo 了，选中图片，右上角有个图标，点击图标里面有几个选项，选中 AI 抠图，等 10S 左右，图就抠好了。

像 GPT 分层忘记指定背景，这种棋盘格看着透明，但是 PS 都不好抠的，Mastergo 也能轻松抠掉。

3. Figma 合并

最后在 figma 里面将插画替换即可，这一步我觉得是最省 token 的了，很多同学希望 AI 能够一步到位，让 AI 调整的时间，自己手搓不到 10 分钟就搓完了。所以我觉得能省就省吧，而且效果比较可控。

虽然今天举例的页面非常简单，但是设计流程就是这样，不管你是用 Pencil、Stitch、lovart、还是 AI coding，都是这样的思路。

四、最后的几个感受

用了 AI 之后，我最大的变化并不是“画图更快了”，而是开始重新思考设计这件事本身。

以前的设计流程里，设计师更多承担的是执行角色：寻找素材、搭建页面、调整细节、不断修改方案。

但当 AI 加入之后，设计师需要投入更多精力在前面的判断和决策上，比如如何定义设计方向、如何判断 AI 输出是否符合目标、如何组织 AI 完成不同阶段的任务，以及如何把 AI 生成的结果转化成真正可以落地的设计方案。

所以我现在越来越觉得，AI 时代设计师最重要的能力，并不是会不会生成一张漂亮的图片，而是有没有能力理解需求、判断结果，并把 AI 的能力融入自己的设计流程中。

AI 可以帮助我们降低探索成本，提高方案验证效率，但最终决定设计质量的，依然是设计师自己的审美、经验和判断。

这也是我最近一直研究 AI × UI 工作流的原因。我希望通过真实项目中的实践和踩坑，把这些经验分享出来，帮助更多设计师不用过度焦虑工具的快速变化，而是找到一套适合自己的 AI 工作方式，让 AI 真正成为设计过程中的协作者，而不是简单的出图工具。