AI+GPT+Figma 真实B端UI设计全流程:从视觉探索到可交付设计稿
一、全文速览图
最近网上关于 image2 的案例层出不穷,但真正让我反复思考的是:image2 究竟能不能接住真实 B 端 UI 需求?本文以一个供电所智能工作台首页为例,完整复盘我如何用 image2 展开视觉探索,再结合 Figma/Figma Make 把方案变成可交付的设计稿。

二、核心判断:image2 更适合打开视觉方向
经过多轮测试,我得出的判断是:不要一开始就寄望于 AI 直接输出最终设计稿。更稳妥的路径是:先借助 image2 把视觉效果确立出来,再回到 Figma / Figma Make 中整理结构。因为在真实项目中,页面不能只「好看」。它必须保留产品原型里的模块关系、业务字段和信息层级,并且后续还要在 Figma 中继续修改、组件化和交接。因此,我现在更推荐把这套流程拆成四步:

这套流程的关键,不是让 AI 一步到位,而是把不同工具放在最适合的位置:image2 负责视觉探索,生成 Banner、卡片、图标、插画和整体氛围;Figma / Figma Make 负责结构承接,把页面变成可继续编辑和调整的设计稿;设计师则完成最终落地,整理组件、自动布局、业务字段和设计规范。
同一个原型,我跑了多个视觉方向
为了验证这套流程,我在同一产品原型上连续生成了多版方案。我没有让 image2 自由发挥,而是始终用原型约束页面结构,再通过不同参考图和描述词调整视觉方向。从结果来看,它能基本保留首页工作台的模块关系,不同方案之间的差异主要体现在视觉层:有的更偏清爽蓝白,有的强化了 Banner 和图标,有的加入了更强的科技感,也输出了暗黑风格版本。

这一步的价值不是直接选定最终稿,而是快速判断哪种方向更适合项目。确认方向后,再进入 Figma 的结构化还原与人工整理。
三、准备:确认生图能力,并连接 Figma
开始前需要先确认两件事。第一,当前对话是否支持图片生成。如果你能直接上传参考图,并让 AI 据此生成或修改视觉图,说明这一步已就绪。第二,如果后续希望把结果带回 Figma,就需要提前把 Figma 接入进来。连接成功后,可以用一个简单指令测试:请在当前 Figma 文件中新建一个测试 Frame,尺寸为 1920 × 1080。 如果 AI 能读取文件或在 Figma 中创建测试画板,就说明连接已可用。核心在于确认三件事:能生图、能连接 Figma、Figma AI credits 够用。
Figma连接的大致流程如下:

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

然后进行连接,建议连接前先登录 Figma 账号。

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

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

还要注意 Figma 的版本和额度,否则流程跑一半,很容易因额度或权限问题中断。

四、第一次尝试:为什么仅靠描述生图不适合真实项目
最初我也试过用简单描述直接生成页面:帮我生成一张虚拟电厂工作台首页设计稿,蓝白风格、B端后台、清爽专业、有科技感。 结果看起来像是一个 B 端页面,但它只是「像」,并不等于能直接用到当前项目里。

因为真实项目中的页面不只是风格问题,还包含大量业务约束。这些信息光靠一句简单描述,AI 很难准确理解。这类生成方式更适合做灵感参考,不宜直接进入真实项目。真实项目一定要基于产品原型来输出,而不是让 AI 从零自由发挥。更重要的是把已有原型、业务结构和不可变约束告诉它。
五、第二次尝试:把产品原型交给 image2
后来我换了思路:不再让 AI 从零生成,而是直接把真实项目的产品原型给到 image2。这一步最关键的是先讲清楚:产品原型负责结构,image2 负责视觉升级。也就是说,原型里的模块、顺序和业务信息尽量不要乱动。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。这一步我测试了两种方式:方法 A:image2 直写 Figma;方法 B:Figma Make 按图还原。两种方式都能用,但解决的场景不同。

方法 A:image2 直写 Figma,更适合保留视觉质感
第一种方法是直接让 image2 根据图片在 Figma 里还原设计稿。我的指令写得很简单:根据这个原型,转成设计稿

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

但缺点也很明显:没有自动布局,页面细节仍需要大量人工修正。因此,image2 直写 Figma 更适合拿视觉细节,不适合作为最终交付稿。它可以帮你保住图像里的氛围和细节,但若要进入真实项目交付,仍需要设计师继续整理。
方法 B:Figma Make 按图还原,更适合拿结构和自动布局
第二种方法是把 image2 生成的视觉图交给 Figma Make,让它基于图片还原页面。Figma Make 的具体使用如下:

这条路径的视觉效果可能没有 image2 直接画那么惊艳,但有一个关键优势:自动布局。这对真实项目很关键,因为后面一定会改字段、改数据、改模块内容,如果页面没有自动布局,后续维护成本会很高。
描述词也不用写得太复杂,重点是说清楚最核心的要求即可:按图片还原页面,必须保持整体架构不变。 Banner 可用色块代替。 分辨率 1920,高度根据内容适配。 就这样丢给他,它就开始快速输出了。

完成后,通过页面右上角的按钮点击复制,然后粘贴到 Figma 里。复制时建议尽量把窗口拉大,让页面显示更完整,方便复制。

可以看到,它基本是按照设计稿来还原的,布局也没大问题,并且拥有自动布局。我们可以直接把刚才 image2 画得比较好的元素贴进来,两者结合使用。这比自己拿到原型从零开始手拼快得多。

所以我对 Figma Make 的定位是:把图片结构化成可继续编辑的设计稿。它不一定负责把页面做到最惊艳,但能让页面进入可编辑、可调整、可继续搭建的状态。

最终建议:不要二选一,而是组合使用
测试下来,我不建议只押一种方式。更好的做法是:先让 image2 直接还原一版,看它能保住多少视觉细节;再让 Figma Make 按图还原一版,拿到自动布局和可编辑结构;最后由设计师把两边的优点合并起来。

这会比单独依赖一种方式更稳。
八、最终推荐的工作流
如果再做类似真实项目,真正有效的顺序其实可以压缩成四步:

这套方法不追求最省事,但目前来看比较稳。它没有幻想 AI 一步到位,而是把 AI 放到了它最擅长的位置。
原型 + 参考图定方向
原型负责结构,参考图负责风格,先把 AI 的发挥范围框住。image2 生成视觉方案
先看整体风格是否成立,再决定是否继续拆图标、Banner、插画等局部素材。回到 Figma 做结构承接
可以同时尝试 image2 直写 Figma 和 Figma Make 按图还原:前者保视觉,后者保结构和自动布局。设计师整理与收敛
复用现有组件库,整理图层、自动布局、字段、组件和规范,最终变成可交付设计稿。
到这一步,AI 替设计师把前期探索效率提高了一截。真正进入交付时,再由设计师判断哪些内容可复用、哪些内容要替换、哪些内容要回到组件体系里重新整理。
九、最后
这次实践之后,我对 image2 的定位更清晰了。它在前期多方案探索、页面视觉升级、Banner、小图标等方向上的效率非常高,尤其在快速打开视觉方向的能力上表现突出。比较推荐的做法是:复用现有组件库,把 AI 生成稿作为视觉参考,再调整样式、间距和层级。

如果只是快速提案,可以让 image2 直接生成几版视觉方案。如果要进入项目交付,更推荐用 Figma / Figma Make 承接结构,再由设计师完成组件化和规范整理。如果图里有好看的 Banner、图标、插画和装饰元素,可以拆出来作为局部素材复用。
目前来看,工具确实在不断进化,越来越强,但总结下来:AI 负责打开方向,依旧需要人负责把结果变成真正能用的设计稿。
