在 GPT Image 2 刚发布的时候,我就尝试过直接用生图的方式来制作 UI 设计稿。和直接让大模型写 HTML 代码相比,先用生图模型出设计稿有几个很实在的好处:视觉创意的上限更高,生成一张图的速度比写完整套页面代码更快,而且单次生图的调用成本往往比跑一轮长代码还要便宜。

最近 OpenAI 发布了升级版 GPT Image 2.5,一共包含两个型号:基础版叫做 Flare,可以看作 GPT Image 2 的直接升级,在画质和生图速度上都有提升;高阶版叫做 Sunburst,定位接近 Pro 版本,主打更强的画面一致性保持,甚至可以在整体构图完全不变的前提下只微调人物动作或局部配饰,用来做定格动画级别的精细编辑。

为了验证新模型在界面设计上的实际表现,我用同一批提示词对比了 GPT Image 2 与 GPT Image 2.5,覆盖了移动应用、官网落地页、复杂后台、游戏 UI 以及多屏原型派生等场景。

中文文字排版与组件规整度的变化

第一个测试场景是移动端的点餐应用界面。把两个模型用相同提示词生成的结果放在一起,乍看整体配色和结构相近,但放大看细节就能发现明显的区别。

GPT Image 2 与 GPT Image 2.5 生成的移动端点餐应用界面对比

以前用 GPT Image 2 生成高密度的中文 UI 图时,中文字体普遍偏竖长,字形一旦拉长,在菜品列表这类信息密集的区域里排版就会显得局促。而在右侧 GPT Image 2.5 生成的界面中,中文字体变得方正规整了许多。同时,组件细节的一致性也有改善:左侧旧版界面里,不同按钮的圆角弧度并不统一,分类标签栏下方还多出了一条常规 UI 不会这样设计的横线;右侧新版不仅保持了统一的圆角规范,还在分类标签里自然地加上了小图标,用前端代码还原的可行性更高。

同样的变化也体现在宠物俱乐部官网落地页的对比中。

GPT Image 2 与 GPT Image 2.5 Flare 生成的宠物俱乐部官网落地页对比

左侧 GPT Image 2 生成的落地页其实很有想法,比如底部步骤模块做出了宠物狗探出容器边缘的视觉效果;但它的首屏高度留得太大,打开网页时首屏占比不符合常规桌面端网页的比例,而且正文字体依然偏瘦长。右侧 GPT Image 2.5 Flare 生成的首屏高度更接近真实的官网落地页,文字没有呆板地塞在方框容器里,字体排布也更规整。在官网落地页这类场景下,新模型并不是靠更夸张的创意取胜,而是让生成出来的版面更接近可以直接开发上线的真实网页。

画面干净度与信息层级的提升

在带有插画元素的游戏界面和故事板场景里,GPT Image 2 之前有一个很影响可用性的毛病:画面容易发灰、发脏,且锐度和对比度过高。

GPT Image 2 与 GPT Image 2.5 Flare 生成的《雾林来信》游戏任务与背包界面对比

在这组《雾林来信》游戏任务与背包界面对比中,左侧 GPT Image 2 的画面整体偏灰暗,边框和按钮带有很多难以用 CSS 代码直接编写的琐碎装饰,真要落地只能靠切大图硬拼。右侧 GPT Image 2.5 Flare 的画面则干净、清透很多,锐度控制得更自然;而且它画出来的任务目标列表、进度勾选框和奖励标签,结构都非常清晰,完全可以用标准的前端组件还原出来。在四格故事板和移动端旅行规划应用的测试里,新版同样解决了旧版灰蒙蒙的质感问题,连地图上的路线轨迹都画得更接近真实导航界面。

另一个对比明显的是后台管理系统与 AI Agent 工作台这类偏重逻辑的界面。以前让 GPT Image 2 画后台或工作台,效果往往还不如直接让编程模型写代码,不仅配色显得陈旧,交互逻辑也容易出错——比如在旧版生成的 Agent 工作台里,输入框右下角的「发送」和「暂停」被拆成了两个并排的独立按钮,右侧简报区的文字更是密密麻麻挤成一团。而在 GPT Image 2.5 生成的工作台中,版面变得清爽干净,「发送」与「暂停」被合理地收敛到同一个状态按钮上,右侧简报区也通过字号大小、加粗和颜色区分出了清晰的标题与正文层级。

在深色背景的 Wolfcha 狼人杀游戏官网落地页测试中,新旧模型在版面呼吸感上的差异也很直观。

GPT Image 2 与 GPT Image 2.5 生成的狼人杀游戏官网落地页对比

左侧 GPT Image 2 生成的长图左上角出现了轻微乱码,更主要的问题是上下模块之间挨得太紧,整张页面显得局促。右侧 GPT Image 2.5 生成的页面拉开了模块间距,留出了充足的呼吸感,并且融入了风格统一的动漫风插画。这种视觉表现力如果直接让编程模型纯写代码是很难凭空构思出来的,但先由 GPT Image 2.5 生成设计稿,再照着还原成前端页面,就能做出质感很好的产品落地页。

单图派生多屏原型与两个型号的取舍

除了生成单张页面,我还测试了一个适合产品早期探索的用法:让模型在一张九宫格图片里,一次性生成完整的多屏交互原型。

使用 GPT Image 2.5 生成的《芽芽词田》种菜背单词应用九宫格多屏原型

以我构思的「种菜背单词」应用为例,模型在第一格画出农场主页后,能够顺着业务逻辑,在后面八格依次派生出选择收获、单词测验弹窗、答错反馈、回答正确、收获完成、背包和单词本等连贯状态。对比两个版本,GPT Image 2.5 生成的底部导航栏和弹窗按钮更贴近真实的移动端 UI 组件,不再像单纯贴在画面上的说明文字。

针对这种「基于主界面派生新交互状态」的需求,我还专门对比了 Flare 和 Sunburst 两个型号的局部编辑能力:给定同一张农场基础界面,让它们分别加上「单词测验弹窗」和「收获完成提示」。实测下来,两个型号都能在叠加弹窗的同时,把底部的农田、房屋和小鸭子背景保持得丝毫不差;Sunburst 在弹窗内部的排版细节上略微精致一点,但差距并不算大,很大程度上属于单次抽卡的正常波动。

不过从生成耗时来看,Flare 生成一张派生图大约需要 27 秒,而 Sunburst 用了 44 秒。因此在实际做 UI 设计时,绝大多数出图和多状态派生直接用 Flare 就足够了;只有在对背景局部锁死要求极其严苛的场景下,才需要动用 Sunburst。

目前 Codex 内置的 imagegen 工具还没有接入 GPT Image 2.5,我把这次实测整理出的提示词写法、多屏派生技巧以及后续将设计稿还原成代码的脚本流程,都更新到了开源 Skill draw-ui 中,有需要可以直接安装使用。