GPT Image 2 发布后反响很大,它的生图能力特别强,中文也很准确,可以生成非常真实的截图和各种联动海报。我一直在尝试用 AI 生图来解决 UI 设计的问题,这次拿它和 Nano Banana Pro 做了一次系统的对比。

为什么用生图,而不是直接写 HTML 设计稿

现在最强的模型,比如 Gemini,直接写代码生成设计稿时,很多时候还是局限在代码层面。训练数据里代码实现有趋同的现象,如果我们不给出明确的设计方向,生成的东西会比较有 AI 味,视觉上也不够顶级。

生图的方式没有这个问题,因为它生成的是一张图片,不受代码实现的限制,可以做出更有设计感的东西。而现在 AI 模型复现一张设计稿的能力已经足够,即便没办法一次到位,后续调整时也能把这张图当作参考方向。

我的判断是:AI 直接写代码时,缺的是 UI 设计的创造力,执行能力是够的。生图正好可以把创造力这部分补上来。

之前我试过不少模型,从 Nano Banana 到 Nano Banana Pro,再到 Nano Banana 2,没有一款让我非常满意:要么生成的图片和系统已有的 UI 风格不一致,要么不够精致,效果还不如直接用代码写。只在游戏 UI 这类设计上,它们做得不错。

GPT Image 2 出来之后我测了很多案例,它在 UI 设计上的可用性已经达到了一个很高的级别。

对比方式

我做了一个对比页面,把两个模型生成的设计稿放在一起,左侧是 Nano Banana Pro(页面上标的是 Gemini 3 Pro,就是它背后的模型),右侧是 GPT Image 2。

对比页面,左侧是 Nano Banana Pro 的生成结果,右侧是 GPT Image 2

两边用的提示词完全一样,而且我没有限制排版布局,只给了主题色和需要传达的数据,让模型自己发挥。

各个场景的对比

第一张是 Dashboard。Nano Banana Pro 的结果其实已经可用,但生成中文内容时字体会有偏差,字一多问题更明显,而且每次生成的变化比较大。GPT Image 2 的结果我几乎会认为是一个真实系统的截图,非常准确。同一组提示词我给了三四次,它每次生成的风格都基本类似。在 UI 设计的稳定性上,GPT Image 2 相对 Nano Banana Pro 提升很大。

GPT Image 2 生成的 Dashboard,接近真实系统截图

第二个是上传弹窗。Nano Banana Pro 的版本太普通,我们自己用代码也能轻松写出这种风格。GPT Image 2 的版本里,TikTok、Instagram、YouTube 三个图标都非常准确——它学习过很多物料,不需要给参考图,就能生成真实的图标、卡通角色甚至真人明星。整体设计上它更偏海外 SaaS 的风格,也更清爽。

GPT Image 2 生成的上传弹窗,三个平台图标都准确

第三个是空状态页。这种页面纯用代码写 SVG 的上限比较低,需要真正的 UI 设计。Nano Banana Pro 的版本比较卡通,也太花了,可用性不强。

Nano Banana Pro 生成的空状态页,元素比较花

GPT Image 2 的版本可用性就强很多,而且它的风格让我一眼觉得像 Notion、Postman 这类产品里真实存在的空状态页。我之前研究过空状态页怎么设计,像这种图,可以把中间的插画单独拿出来,底下的 UI 自己补,就是一版很好的视觉参考。

GPT Image 2 生成的空状态页,风格接近成熟产品

第四个是步骤表单。真实的 UI 设计会涉及各种表单表格,这是 Nano Banana Pro 之前比较弱的地方:生成结果太花,而提示词里加更多限制,又会压制它的创造力。GPT Image 2 的版本可落地性强很多——顶部是步骤栏,左上角是 Logo,左侧加了一块背景纹理让表单显得更精致,右侧是勾选状态,底部是已选状态和右下角的 CTA 按钮,选好就可以进入下一步。

GPT Image 2 生成的步骤表单,结构和状态都完整

第五个是详情页。Nano Banana Pro 的版本用了各种渐变色,左侧栏也用了一样的渐变,一打眼感觉比较脏、比较油腻。GPT Image 2 的版本非常清爽,对比很明显,我自己也更喜欢这一版。

详情页对比,左侧 Nano Banana Pro,右侧 GPT Image 2

第六个是 Landing Page 首页。这一组见仁见智,但差别可以从顶部栏看出来:之前用 Midjourney 或其他生图工具生成的顶部栏,总是不太落地,很难用代码实现。GPT Image 2 的版本完全可以用代码写出来——顶多背景是一张图,里面的字体、按钮这些通用组件的设计都趋向真实,没有多余的模糊和阴影,底部的用户头像也非常准确。

GPT Image 2 生成的 Landing Page,组件接近代码可实现的效果

重头戏是游戏 UI。我让它们做了一个狼人杀游戏的设计。Nano Banana Pro 的版本里,右侧齿轮上包了弹层,弹窗带外发光、透明效果和高亮的边,我很难想象怎么用代码实现,落地性很差,但布局可以参考。

Nano Banana Pro 生成的狼人杀游戏 UI,效果好但难落地

GPT Image 2 的版本就是一个非常真实、很棒的 UI 设计,排版和整体的复古感、游戏感都很强。如果我之前做狼人杀游戏时有这样一版参考图,我可能真的会照着这个方向去做,即便个别地方代码实现不了。

GPT Image 2 生成的狼人杀游戏 UI,复古且真实

最后是产品详情页。这一组两张差别不大,但 GPT Image 2 的版本一体性更强,而且把竖屏的完整长详情页都做了出来。有这样的设计稿,AI 参考着复现,几乎可以做到百分之百的还原程度。

产品详情页对比,左侧 Nano Banana Pro,右侧 GPT Image 2

后续计划:把 draw Skill 切到 GPT Image 2

这轮测试给我的感觉是:如果我们有一个 Skill,能控制好系统内有哪些元素,再按页面调整提示词——比如左侧栏用哪些内容、顶部用哪些内容——那十次里有九次都能稳定生成,需要变化的只有右侧的主体内容。而且它生成的结果可落地,我现在只测了紫色和暖色调的主题,但我相信任何配色、任何设计风格,它都能比较好地实现。

我自己写过一个叫 draw 的 Skill,之前是通过 ZenMux 调用 Gemini 生图,现在我打算把它换成 GPT Image 2。

draw Skill 的描述和生成的场景清单

后续我会把它发展成一个 UI 设计的 Skill:它会读取我们代码里已有的设计风格,每次生图时根据项目里的实际实现动态调整布局,但不直接告诉 AI 布局要怎么做——只告诉它需要展示哪些元素,不去限制 AI 的创造力。

另外,GPT Image 2 的价格还比 Nano Banana Pro 便宜。大家可以自己去体验一下,我之后会持续用它生成 UI 设计的图片。