大数跨境

GPT-5.6 vs GPT-5.5 前端UI横向对比!!前者直达产品原型!附ui设计skill sop。

GPT-5.6 vs GPT-5.5 前端UI横向对比!!前者直达产品原型!附ui设计skill sop。 拟像AIGC
2026-07-10
9
导读:今天凌晨,我的 Mac 端终于刷到了 GPT-5.6。第一反应是把我折腾很久的「艺术地球」重新丢进去。

今天凌晨,我的 Mac 端终于刷到了 GPT-5.6。第一反应是把我折腾很久的「艺术地球」重新丢进去。这个项目以前用 GPT-5.5 做过一版,氛围有了,真到地球、星河、展馆和作品互相咬合的时候,很多东西就是落不下来。

这次我给同一组目标,让 5.6 从头走一遍。结果确实给我做爽了!!但我先把丑话放前面,好看的截图不等于产品已经做完,静态画面更证明不了 3D 性能、节点命中和音画响应。所以这篇不吹神话,只看它到底比 5.5 多接住了什么。


先把发布这件事聊明白

这次模型家族以后会固定成三个档位。Sol 是旗舰,Terra 负责能力和成本的平衡,Luna 最快也最便宜。

跑分这块确实猛。Agents' Last Exam 里 Sol 最高 53.6,领先 Fable 5 的自适应推理 13.1 分,Coding Agent Index 得到 80 分,速度和 token 消耗也更省。


然后,我用5.6和5.5分别把「艺术地球」重新做了一遍

我一直想把艺术史放进一个可以探索的地球空间里。艺术家、风格、作品和时代不是一张从上往下滚的年表,而是像星系一样彼此连接。你可以转动地球找人,顺着关系进入星河,再走进展馆看作品,最后让音乐改变整个空间。

那么这篇文章我会用gpt5.5 和 5.6 分别去按照同样的流程去生成ui设计稿,来看一下二者的效果差距究竟有多么大,我只能说,给我做爽了!!

在这之前说一下,我现在做前端设计的流程是,先让codex 给出ui设计图稿,然后发送给codex 让它确认其中的技术选型和难点,针对具体的ui设计稿调研全网的相似设计案例,参考其中的技术解决方案再去给出复刻,最终验收。这个skill凝练了我这半年多以来做前端ui的经验,希望能帮到大家,我把它放在了文尾。

我事先让codex设计好了UI界面,长这个样子,是不是还不错。看看他们两个能不能实现?

放到gpt5.5 中看看,并不难看,黑金、地球、头像和时间轴都抓到了。但它更像一张风格提案,所有作品缩略图挤在地球中间,看得出想表达「艺术遍布世界」,却不知道下一步该点哪里。

我之前发在在小红书有很多还不错的反馈,但也有用户在群内告诉我,这个产品的ui设计还需要优化。那时的我是用gpt5.5做的,由于模型的缺陷很多地方的设计巧思还没办法如愿以偿。而今天,5.6出来了,我立刻决定用它重新做一遍。

那gpt5.6的效果呢?我们直接看对比。

我先看了一眼地球,差距已经出来了,大家可以猜一下,哪边是5.5,哪边是5.6?

这个是艺术作品阐释的前端设计界面:


这个是艺术家银河谱系图的界面:

这个是虚拟展馆的界面:



好了揭晓答案,左边是5.6,右边是5.5。大家猜的应该都差不多哈哈哈。

是的,5.6 把地球重新推成了主角。大陆纹理、球体边缘光和地理体积先把空间立起来,艺术家节点再落到区域附近,名字、焦点环和声波都有了清楚的层级。5.5 是把内容放在地球上,5.6 开始让地球承担导航。

当然,我这里说的是「看起来已经像一个可交互的 3D 场景」。它到底能不能顺滑旋转,节点会不会穿模,低性能设备会不会掉帧,还是要进浏览器狠狠干一轮。截图不能替它毕业。


旧版的关系停在画面上,5.6 已经能从星河继续钻进中文知识。

旧版的艺术家缩略图是一团漂亮的装饰。5.6 的星河页开始有轨道、连线、节点层级、筛选器、时间轴和选中卡,切换到梵高以后,还能继续打开中文知识,看简介、为什么重要和艺术关系。这个变化很朴素,却很要命。

它让产品从「给懂艺术的人看一张酷图」,往「帮普通人理解艺术」走了一步。缺点也很明显,弹层有点挤,正文偏小,英文名字还会被截断。这些都不是换个发光颜色能解决的事。


再往里走,展馆和作品终于不是两张海报

从进入展馆到看懂一件作品,终于连成了一条连续体验。

5.5 里展馆只是顶部的一个入口,没有对应页面。5.6 真的给出了走廊纵深、墙面挂画、前进控制和当前选中态,下面还接着作品缩略图、年代、风格、关系路径和查看按钮。哪怕只看截图,也知道自己正站在一个空间里。

点进《星月夜》,作品也终于单独站住了。大图是主角,艺术家、年代、风格和关系人物退到后面,Original、ASCII、Grain、Pulse 这些观看方式则留在画面附近。进馆、选画、理解、继续漫游,这条路终于接上了。

5.5 只展示状态,5.6 把声音怎样改变画面的控制权交给用户。

5.5 底部只有时间轴和几个静态计数。5.6 把音乐、波形、星光、辉光、艺术家数量、轮廓光、颗粒和脉冲放进同一个面板,还保留地球作为上下文。它不再只告诉你这里有音画联动,而是把「声音怎样改变画面」的控制权交给用户。

面板现在确实有点大,参数也不是越多越高级。真要上线,我会让常用项先露出来,复杂项再渐进展开。但看到这里,我前面那句「画面像了,产品还没站住」,至少可以改一半。

我最后的判断|5.5 更像风格提案,5.6 已经接近产品原型。地球、星河、展馆、作品、知识和音乐终于各自有了工作,但我还是不敢把它叫最终交付。真实 3D 的性能、知识准确性、音画响应和移动端触控都得实际验收。模型越会做漂亮东西,人越要记得问一句,这玩意到底能不能用。

做到这里,我反而把这半年炼出来的ui设计 Skill 推出来了。

以前我会对 Codex 说,把页面做得再高级一点。然后它加渐变、加发光、加玻璃卡片,忙得像在参加前端年终汇演,页面却还是不知道该先看哪里。后来我才反应过来,「高级感」只有感受,没有约束。

现在我会先让原型站住,再把图片、字体、图标、视频和 3D 模型的来源说清。动效也不能只写「丝滑一点」,得写目的、触发方式、持续时间和降级。等这些都能检查了,才进入真实复刻。


这套 Skill 现在只保留四个动作。原型负责把模糊感觉变成可检查的画面,资产检查负责确认真实素材和降级方案,动效说明负责让每一个动作都有理由,最后再拿参考图、原型和浏览器成品一起验收。

一开始这么做可能比直接开写还慢,我自己也踩过很多坑。但页面一旦进入第二轮、第三轮修改,差距就出来了。

所以这次真正让我兴奋的,是它开始能承接更完整的设计意图。人负责把模糊感觉变成方向和约束,模型负责把视觉、资产、交互和工程串起来。两边谁都别蒙头,东西才有机会真的像个产品。



【声明】内容源于网络
0
0
拟像AIGC
一个产品经理
内容 1
粉丝 0
拟像AIGC 一个产品经理
总阅读6
粉丝0
内容1