返回首页主流模型前端能力测试

模型对比

主流模型前端能力测试 - 雨夜便利店

九月下旬,GPT-6 Astra 与 Claude Opus 5.5 先后发布,榜单和横评的分数接连刷新。但同样一句要求,各家会做出什么样的页面,光看分数还看不出来。

这次用同一段提示词测试九个主流模型的前端能力:各写一个单文件网页,把雨夜里成都街角的一家便利店,做成可以拖拽、旋转的三维微缩模型。

其中三款是 Flash 模型,与其余几款的定位不同。DeepSeek 和智谱的主力旗舰目前没有多模态能力,所以这次选了它们新出的 Flash 版本。

就这九份结果的完成度和审美来说,我认为 Claude 九月底发布的旗舰 Opus 5.5 和中端 Sonnet 5.5 领先一大截,GPT-6 Astra 紧随其后。国产模型中,腾讯混元 Hy4 最让我意外,效果比 Kimi K3 好出一大截。Kimi 一向以前端见长,这次的表现却让人不太理解。

Claude、GPT 和智谱在 Agent 中运行,其余使用网页端。用一句话生成一个网页,这样的轻量任务用不太到 Agent。下面保留了九份结果,点开场景就能运行、比较。

提示词原文

请以单文件 HTML 的形式,制作一个雨夜便利店街角小场景,以第三视角观察整个场景,整体像一个可以自由拖拽、旋转、缩放观看的微缩三维模型 / 小型景观,没有任何 UI 界面元素。地面为一个完整的正方形…展开全文收起全文

请以单文件 HTML 的形式,制作一个雨夜便利店街角小场景,以第三视角观察整个场景,整体像一个可以自由拖拽、旋转、缩放观看的微缩三维模型 / 小型景观,没有任何 UI 界面元素。地面为一个完整的正方形底座,所有元素都搭建在这个底座上,构图紧凑、层次清晰,整体呈现出小巧、精致、可收藏的模型感。画面风格为三渲二,强调浓厚的日式二次元动画氛围,材质表现干净,轮廓明确,色彩柔和但富有夜景霓虹的层次感。

场景主体是一处位于成都的便利店街角,便利店位于底座的视觉中心,外部有典型的成都街角元素:熊猫,便利店招牌、玻璃橱窗、自动门、屋檐雨棚、门口地垫、自动贩卖机、自行车、雨伞架、垃圾桶、路灯、电线杆、电线、路牌、街角护栏、停车位、排水沟、积水路面、反光斑马线、小巷入口、空调外机、小型公告栏或海报栏等。街道不需要太大,但要有明确的街角转折感,像日本动画里常见的夜晚社区一角。

不要人物,但便利店内部一定要有足够内容,并且可以透过大面积玻璃窗清楚看到店内。店内可见典型便利店陈设,例如:整齐排列的货架、饮料柜、便当区、零食陈列、收银台、咖啡机、杂志架、宣传海报、店内灯箱、冰柜、关东煮柜台、地面导视、储物柜或后场门等。要让便利店内部显得明亮、温暖、真实、充实,与室外潮湿昏暗的雨夜形成鲜明对比,营造出非常典型的西南地区动画雨夜氛围。

美术风格重点强调:高精细建模、三渲二卡通渲染、清晰的轮廓线、细腻但简洁的材质层次、湿润的夜景反光、暖色室内灯光与冷色雨夜街景对比、浓厚的二次元日常场景感。整体气质应偏向安静、治愈、带一点都市夜晚孤独感但依然温暖,像一幕被定格下来的动画街角场景模型。

加入一些基础动效来增强生命力:持续降雨、屋檐滴水、地面积水波纹、便利店招牌或灯箱轻微闪烁、自动门偶尔开合、雨水沿玻璃滑落、街道路面积水反射灯光、远处交通信号灯微弱变化等。整体效果应像一个静止而精致的三维微缩世界,但带有恰到好处的细微动态,突出其三渲二、二次元、雨夜、便利店、街角、小巧精致的核心特征。

1Anthropic

Claude Opus 5.5

档位
High(中档)
日期
2026 年 9 月 29 日
文件
714 KB,three.js r186 内嵌
单独打开有声音,可在面板中关闭
场景
便利店的招牌是「熊猫便利 PANDA MART」,标注为玉林北路店。旁边是一栋老住宅楼,路口有红绿灯和斑马线,路边停着汽车和电动车。
界面
提示词要求不出现界面元素,这一版仍在左下角加了天气与声音面板。面板提供八种天气,可调温度、降水、风力和雾气,也有雷电与声音开关。按 H 键可隐藏面板。
声音
背景音乐与环境音默认开启,第一次点击或拖动场景后开始播放。

2Anthropic

Claude Sonnet 5.5

档位
Extra
日期
2026 年 9 月 29 日
文件
736 KB,three.js r186 内嵌
单独打开有声音,按 M 键静音
场景
招牌「熊猫便利」,楼上是住家,阳台晾着衣服;隔壁是老王面馆,旁边的小巷路牌写「青石巷」。门口海报「雨天限定 · 雨伞 ¥15」,路边停着汽车和自行车,路口有一只撑红伞的熊猫。
界面
提示词要求不出现界面元素,这一版仍在底部加了天气与声音面板。可选七种天气:晴夜、毛毛雨、中雨、暴雨、雷阵雨、大雾和雪,还能调音量、开关音乐。按 H 键隐藏面板,数字键 1–7 切换天气,双击场景切到下一种天气。
声音
雨声、环境音与背景音乐默认开启,第一次点击、拖动或按键后开始播放。

3OpenAI

GPT-6 Astra

档位
Ultra(最高档)
日期
2026 年 9 月 29 日
文件
1.1 MB,three.js r184 内嵌
单独打开双击复位视角
场景
招牌「巷雨便利店」,路牌「玉林东路」;整个街角放在一块正方形底座上,门口有熊猫雕像,店内货架与柜台透过玻璃可见。
界面
没有界面元素。双击或按 Home 键复位视角;系统开启「减少动态效果」时,动画停止。

4xAI

Grok 4.7

档位
思考模式(在 Perplexity 中生成)
日期
2026 年 9 月 29 日
文件
45 KB,three.js 0.170 单独加载
单独打开点击场景后有声音
场景
招牌「灯巷 便利 24H」,路牌「芙蓉巷」;橙色雨棚,门边挂着「雨具」「串串」小牌子。打开时镜头贴近店门。
界面
没有可见的界面元素;数字键 1–7 可以切换天气,页面上没有提示。
声音
第一次点击后开始播放雨声、风声和旋律。

5腾讯

腾讯混元 Hy4 preview

档位
最高档
日期
2026 年 9 月 29 日
文件
771 KB,three.js r160 内嵌
单独打开拖动旋转,右键拖动平移
场景
招牌「熊猫便利店」「24H营业中」,路牌「玉林西路」;店外有社区公告栏、冷热饮贩卖机、垃圾桶和熊猫雕像,物体都有黑色描边。
界面
没有界面元素。

6月之暗面

Kimi K3

日期
2026 年 9 月 29 日
文件
50 KB,three.js 0.160 单独加载
单独打开拖动旋转,滚轮或双指缩放
场景
招牌「蓉城便利 RONGCHENG STORE」,门口有「欢迎光临」地垫,左侧是社区公告栏;店内货架、冷饮柜透过橱窗可见。打开时镜头正对店面。
界面
没有界面元素。
花絮
先在网页端做了一版,效果一般。我们怀疑是网页端影响了质量,于是又用 API 生成一版,花了 38 元,后来还在 Perplexity 中试了一版。三版的水平差不多,这里展示其中一版。

7Google

Gemini 3.8 Flash

日期
2026 年 9 月 29 日
文件
59 KB,three.js r128 单独加载
单独打开声音默认关闭,在右上角打开
场景
招牌「熊猫便利 24h」,路牌「春熙东路」;便利店是一个半透明的玻璃盒,门前有斑马线。
界面
右上角有气象面板,四种天气(锦江夜雨、蓉城雷雨、蜀都夜雾、暮色初霁),另有开门、视角复位与环境声开关;左下角有标题「PANDA MART · 熊猫便利」。
声音
环境声默认关闭。
花絮
第一次发题目,它回答「我是一个文本 AI,这超出了我的能力范围。」回它「你可以」,它又说「我是一个语言模型,这超出了我的设计用途。」直到问它「你一个网页也做不了吗」,才回答「完全可以做」,接着做出了这一版。

8深度求索

DeepSeek 5.3 Flash

日期
2026 年 9 月 29 日
文件
35 KB,three.js 0.160 单独加载
单独打开拖动旋转,滚轮或双指缩放
场景
招牌「24h 便利商店」,路牌「玉林路」;门口有熊猫,店内货架透过橱窗可见;海报和告示牌上写的是日文「新発売」「掲示板」。
界面
没有界面元素。打开后镜头缓慢自转。

9智谱

智谱 GLM-5.3 Flash

日期
2026 年 9 月 29 日
文件
66 KB,three.js 0.160 单独加载
单独打开拖动旋转,滚轮或双指缩放
场景
招牌「熊猫便利 PANDA MART」;旁边的楼里有文具店,街边有公告栏;路牌写「锦官驿街」「熊猫巷」。
界面
没有界面元素。打开后镜头缓慢自转,拖动后停止。
版本
这里展示第二版。第一版运行时资源占用较高,第二版取消了点光源阴影,限制分辨率与帧率,并在页面不可见时暂停渲染。