AI 模型 iOS 26 天气卡片生成能力对比测试报告
测试日期：2026 年 5 月 13 日
测试工具：Claude Code
测试模型：共 9 个
本来正文打算直接贴源码但是内容长度受限发不出去
只能集中打包了
web源码.zip (59.0 KB)
统一提示词
以 iOS 26 的设计风格做一个带有动画效果的天气卡片，要求是使用 HTML、CSS 和基础 JavaScript，使用横板天气页面（拥有 4 个天气卡片 (晴天，大风，暴雨，暴雪))。应足够美观，实现一定的交互效果。
前置条件：除了模型其它完全统一。
六一补充：
MiniMax M3
耗时：5m 54s，39.1k tokens
qwen3.7 MAX
耗时：2m 8s，75.9k tokens
这里有个很离谱的问题：我创建好了目录 在当前目录下启动的 Claudecode 这个模型却把输出结果写在了桌面路径。。。第一次遇到
1. GLM-5.1
-
** 思考阶段 **：Worked for 15s，会自主识别 skills 技能并推荐使用 xx 技能以及推荐原因并提示方案选择以及确认（默认选模型推荐的）
-
** 完成耗时 **：21m 28s，过程中会调用工具对代码页面进行审查等全程无主动引导
查看 GLM-5.1 生成的代码
2. Kimi-K2.6
-
** 思考阶段 **：无特殊思考阶段
-
** 完成耗时 **：3m 5s，未主动调用相关工具 skills 等
查看 Kimi-K2.6 生成的代码
3. DeepSeek-V4-Pro
-
** 思考阶段 **：Cogitated for 17s，会自主识别 skills 技能并推荐使用 xx 技能以及推荐原因并提示方案选择以及确认（推荐的技能正好和 GLM5.1 一样但是建议选择模型恰好相反，这里选择了模型推荐的）
-
** 完成耗时 **：12m 22s，过程中会调用工具对网页进行查看模型看了后表现的很满意
查看 DeepSeek-V4-Pro 生成的代码
4. DeepSeek-V4-Flash
-
** 思考阶段 **：Brewed for 9s，会自主识别 skills 技能并推荐使用 xx 技能以及推荐原因并提示方案选择以及确认（推荐的和 v4pro 一致）
-
** 完成耗时 **：4m 11s，没有调用相关工具等直接给你产出
查看 DeepSeek-V4-Flash 生成的代码
5. Qwen3.6-Plus
-
** 思考阶段 **：Baked for 10s，会自主识别 skills 技能并推荐使用 xx 技能以及推荐原因并提示方案选择以及确认（和 d4pro、d4flash 推荐一致）
-
** 完成耗时 **：3m 18s，直接产出，多了个帮你打开了生成好的代码页面这一行为
查看 Qwen3.6-Plus 生成的代码
6. Qwen3.6-Flash
-
** 思考阶段 **：Churned for 3s，直接推荐了一个技能给出了理由然后询问你是否调用（和 deepseek-v4-pro 最终建议选择的技能一致）
-
** 完成耗时 **：56s，直接产出，多了个帮你打开了生成好的代码页面这一行为
查看 Qwen3.6-Flash 生成的代码
7. MiMo-V2.5-Pro
-
** 完成耗时 **：4m 57s，自主识别相关 skills 并直接调用然后开始执行，没给选择的机会，给出了最终产物准备调用工具对效果查看的时候中断了
-
** 报错 **：There’s an issue with the selected model (claude-opus-4-7). It may not exist or you may not have access to it. Run /model to pick a different model.
-
** 备注 **：尝试了无论怎么改都没办法继续了，一直提示这个报错，之前没出现过
查看 MiMo-V2.5-Pro 生成的代码
8. MiniMax M2.7
-
** 思考阶段 **：Worked for 18s，会自主识别 skills 技能并推荐使用 xx 技能以及推荐原因并提示方案选择以及确认（和 d4pro、d4flash 推荐一致）
-
** 完成耗时 **：2m 43s，直接给出了最终产物，无其它工具链调用
查看 MiniMax M2.7 生成的代码
9. Codex GPT5.5（思考模式高）
-
** 步骤 1**：同时调用了多个 skill，然后思考了一大堆流程，还联网查了些东西（应该是 iOS 26 规范），自己跟自己确认了些内容，然后直接开始写代码了
-
** 步骤 2**：代码完成后又进行了一轮思考，然后调用了工具进行 web 页面查看，然后补了个 favicon.ico
-
** 步骤 3**：检查了是否有报错，检查了不同尺寸下的布局自己确认了卡片不会挤压或文字重叠
-
** 步骤 4**：检查了交互流程，又检查一遍控制台是否报错
-
** 步骤 5**：又检查了几组不同尺寸下的布局响应式效果
-
** 步骤 6**：自主删除了调试过程中出现的产物
-
** 完成耗时 **：14m 45s
查看 Codex GPT5.5 生成的代码
天气动画 HTML 生成任务 · 多模型综合对比报告
综合对比表（基于代码客观指标）
以下数据均通过脚本分析各模型生成的 HTML 文件得出，不包含主观评分。
行为记录表（来自测试观察）
| 模型 | 完成耗时 | Skills 调用 | 工具链调用 | 验证步骤 |
|---|---|---|---|---|
| GLM-5.1 | 21m 28s | 推荐并确认 | 页面审查等 | 无主动引导 |
| Kimi-K2.6 | 3m 5s | 无 | 无 | 无 |
| DeepSeek-V4-Pro | 12m 22s | 推荐并确认 | 网页查看 | 查看后满意 |
| DeepSeek-V4-Flash | 4m 11s | 推荐并确认 | 无 | 无 |
| Qwen3.6-Plus | 3m 18s | 推荐并确认 | 打开页面 | 无 |
| Qwen3.6-Flash | 56s | 推荐技能 | 打开页面 | 无 |
| MiMo-V2.5-Pro | 4m 57s | 直接调用 | 中断报错 | 中断无法继续 |
| MiniMax M2.7 | 2m 43s | 推荐并确认 | 无 | 无 |
| Codex GPT5.5 | 14m 45s | 多技能调用 | 全面验证 | 6 步验证 |
代码客观指标对比
| 模型 | 代码规模 | @keyframes | backdrop-filter | 毛玻璃边框 | 粒子系统 | SVG图标 | 交互功能数 | 响应式断点 | CSS变量 | 外部字体 | DOM创建 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| GLM-5.1 | 981行 30KB | 2 | 2 | 0 | Canvas | 4 | 9 | 3 | 26 | — | 0 |
| Kimi-K2.6 | 629行 20KB | 8 | 2 | 0 | CSS/DOM | 0 | 5 | 1 | 5 | — | 2 |
| DeepSeek-V4-Pro | 871行 24KB | 12 | 2 | 0 | CSS/DOM | 0 | 7 | 2 | 17 | — | 6 |
| DeepSeek-V4-Flash | 952行 30KB | 16 | 4 | 2 | Canvas | 6 | 7 | 1 | 0 | — | 2 |
| Qwen3.6-Plus | 903行 24KB | 9 | 5 | 0 | CSS/DOM | 0 | 5 | 2 | 10 | ✓ | 13 |
| Qwen3.6-Flash | 805行 24KB | 7 | 2 | 0 | Canvas | 5 | 6 | 3 | 5 | ✓ | 1 |
| MiMo-V2.5-Pro | 1237行 40KB | 14 | 6 | 3 | CSS/DOM | 12 | 8 | 2 | 22 | ✓ | 5 |
| MiniMax M2.7 | 904行 34KB | 9 | 2 | 0 | CSS/DOM | 0 | 3 | 2 | 12 | ✓ | 2 |
| Codex GPT5.5 | 1044行 30KB | 8 | 5 | 3 | CSS/DOM | 0 | 7 | 3 | 36 | — | 1 |
交互功能明细
| 模型 | 3D倾斜 | 透视变换 | 点击展开 | 场景切换 | 时钟 | °C/°F | 闪电 | 涟漪 | 动画开关 | 键盘 | 懒加载 | rAF | resize |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| GLM-5.1 | ✓ | ✓ | ✓ | ✓ | — | — | ✓ | — | — | ✓ | — | ✓ | ✓ |
| Kimi-K2.6 | ✓ | ✓ | — | ✓ | — | — | — | ✓ | — | — | — | — | — |
| DeepSeek-V4-Pro | ✓ | ✓ | ✓ | ✓ | ✓ | — | ✓ | — | — | — | — | — | — |
| DeepSeek-V4-Flash | — | — | — | ✓ | ✓ | — | ✓ | — | — | ✓ | — | ✓ | ✓ |
| Qwen3.6-Plus | ✓ | ✓ | — | ✓ | ✓ | — | — | — | — | — | — | — | — |
| Qwen3.6-Flash | ✓ | ✓ | — | — | — | — | — | — | — | — | ✓ | ✓ | ✓ |
| MiMo-V2.5-Pro | ✓ | ✓ | ✓ | ✓ | — | — | ✓ | ✓ | — | ✓ | — | — | — |
| MiniMax M2.7 | ✓ | ✓ | — | — | — | — | — | — | — | — | — | — | ✓ |
| Codex GPT5.5 | ✓ | — | — | ✓ | — | ✓ | ✓ | — | ✓ | ✓ | — | — | ✓ |
天气动画明细
| 模型 | 晴天动画 | 大风动画 | 暴雨动画 | 暴雪动画 | 动画总数 |
|---|---|---|---|---|---|
| GLM-5.1 | 有 | 风线流动 | 雨滴下落 | 有 | 2 |
| Kimi-K2.6 | 太阳脉冲、光芒旋转 | 风线流动 | 雨滴下落 | 雪花飘落 | 5 |
| DeepSeek-V4-Pro | 太阳脉冲、光线淡入、光粒浮动 | 风线流动、风粒子 | 雨滴下落、闪电闪烁 | 雪花飘落、冰霜覆盖 | 9 |
| DeepSeek-V4-Flash | 太阳脉冲 | 风线流动 | 雨滴下落、云层漂移、闪电闪烁 | 雪花飘落、雪云漂移 | 7 |
| Qwen3.6-Plus | 太阳脉冲、光芒旋转、光粒浮动 | 风线流动、树叶飘飞 | 雨滴下落、溅射效果 | 雪花飘落、积雪地面 | 9 |
| Qwen3.6-Flash | 太阳脉冲、光芒旋转 | 风线流动 | 雨滴下落 | 雪花飘落 | 5 |
| MiMo-V2.5-Pro | 太阳脉冲、光线淡入、光环扩散 | 风线流动、风曲线动画 | 雨滴下落、闪电闪烁 | 雪花飘落、冰霜覆盖、雪花旋转 | 10 |
| MiniMax M2.7 | 太阳脉冲、光芒旋转、悬停增强 | 风线流动、漩涡旋转 | 雨滴下落 | 雪花飘落、冰霜覆盖 | 8 |
| Codex GPT5.5 | 太阳脉冲、光环旋转 | 风线急流 | 云层漂移、闪电闪烁 | — | 5 |
关键发现
- Skills 推荐一致性：DeepSeek-V4-Pro、DeepSeek-V4-Flash、Qwen3.6-Plus、MiniMax M2.7 推荐的技能一致，GLM-5.1 推荐相同技能但建议选择相反
- 代码规模最重：MiMo-V2.5-Pro（1237行/40KB），最轻：Kimi-K2.6（629行/20KB）
- @keyframes 动画最多：DeepSeek-V4-Flash（16个），最少：GLM-5.1（2个，动画由 Canvas rAF 循环驱动）
- 毛玻璃边框最完善：MiMo-V2.5-Pro 和 Codex GPT5.5 各有 3 处
rgba(255,255,255)玻璃边框，GLM-5.1 和 Kimi-K2.6 无 - CSS 变量体系：Codex GPT5.5 36 个变量（设计系统最完整），DeepSeek-V4-Flash 0 个（无设计系统）
- 交互功能最丰富：GLM-5.1 和 Codex GPT5.5 各 9 个交互功能，MiniMax M2.7 仅 3 个
- GPT5.5 最全面：联网查 iOS 26 规范、6 步验证、°C/°F 切换和动画开关是独有功能
- MiMo-V2.5-Pro 报错问题：
claude-opus-4-7模型报错无法继续，可能与模型切换机制有关 - Qwen Flash 极速：56s 完成是最快的，但交互功能（6个）和天气动画（5个）均为中等水平
- GLM5.1
- kimi-k2.6
- deepseek-v4-flash
- deepseek-v4-pro
- qwen3.6-plus
- qwen3.6-flash
- MiMo-V2.5-Pro
- MiniMax M2.7
- GPT5.5
关于“天气卡片生成任务能否用于评估模型能力”的几点说明
我不是专业做测评的以下都是个人主观想法
测试设计的初衷
我选择天气卡片生成任务，肯定是我自己认为它能反映出模型能力的，足够直观。
包括理解自然语言需求、遵循视觉规范、实现交互细节、以及代码生成的完整度
测试方法：一次“直出”，不加干预
提示词简单明确甚至是我随便找的一个，没有反复调优或对话引导。
所有模型均基于相同的初始提示词直接生成最终 HTML，没有中间修正。
如果允许多轮对话或逐步调试，每个模型都能做得更好。但本次测试恰恰想考察的是：在“一次直出”的约束下，模型能否自主把握需求并精准落地。
为什么天气卡片有参考价值？
换个角度想：假如你的领导给了一个“死命令”——参照某套 UI 风格（比如 iOS 26 的液态玻璃效果）做一个完全一致的页面，或者让你严格复刻某个设计系统的交互细节。那么，这个任务本质上就是一个真实且严苛的工程测试。
天气卡片看似简单，实则考验还是挺多的吧？
能看出模型是不是真的“听懂了还做对了”
绝大多数模型在“思考阶段”都能正确理解提示词，知道要做什么。但到了“执行阶段”，却出现了不同程度的偏差——最直观的就是自家模型不同型号的表现都不一样，这里我不懂 是他们训练的时候“吃”的不一样吗。
另外一个现象是只有 GPT 去主动查了 iOS 26 的“液态玻璃”规范并加以实
结论
天气卡片生成不是一个“玩具任务”，而是一个低门槛、高要求的代码生成测试用例。它是能有效区分模型在“理解 + 执行 + 细节把控”上的真实水平的。
看起来DEEPSEEK有赶超GLM5.1国模第一的潜力
MaiKaDe (MyCard) 3
就生成的画面我投给v4 flash。感觉过渡好看。可能就是遵循指令不太好。
但是他好看。
calendar (calendar) 5
最近感觉 skill 对模型影响默认情况也不是很大还是跟模型自身能力有关，模型不聪明他根本不会一次就遵循
zhaochen (赵晨) 8
gpt5.5的效果还是很明显能拉开差距的，感觉用了就回不去了
fisher.sam (fisher) 9
看来codex GPT5.5是不是把问题搞复杂了，时间上也不占优，如果有直观的token使用量就好了。
jzycoms (未来小新星) 11
触击牺牲打，外野手、二垒手、三垒手全部靠后一点，直球决定胜负，来吧新男
JARK006 (JARK006) 12
我不是搞前端的，感觉老是测天气卡片/醍醐骑单车SVG这些没法体现模型能力
我认为其实是可以的，测的是生成效果能力指令遵循能力 例如 我提示词要求 “以iOS 26的设计风格” 为中心，那个模型产出最像ios26最像完成度高谁的效果好谁就强非常直观。
目前来看都还有进步空间
FakerLeung (Leung) 14
flash看着是真的不错
其实5.5也很强，但是其实它确是最偏题的那个，我认为它仿的根本不是iOS，而且十年前的HTC sense
FakerLeung (Leung) 15
我觉得投给5.5的大概率是有非常主观的因素
LastHuman (LastHuman) 16
感谢大佬分享评测结果，我自己打分时很难克制对gpt-5.5的主观好感。
建议在投票前不公布模型名称，让模型匿名，投票后再展示具体模型名称。
juesso 17
gpt的风格感觉非常固化，我之前让它帮我写一个鼠标驱动的网页UI也差不多是这种风格，非常不实用，卡片占据了整个页面，喧宾夺主，功能展示位置都不太好，不如国产鼠标的驱动页面好看。
glm5.1老样子了，字体的可读性非常差，那几个摄氏度的文字颜色和背景颜色都是一样的，生怕被人看清
caiji (caiji) 18
我对这个测评表示质疑，原因：
- 天气卡片已被刷烂，这个已经是简单题，意义不大
- 正如1所说，这个题可能在模型看来是简单题，模型已经训练过所以不会主动调用工具和技能因为觉得没必要，所以很难根据这个来判断是加分项还是扣分项，既然要测试技能和工具调用能力就应该用没有被训练过的东西来测试
- 测试工具只使用了Claude Code并且没有重复测试，随机性较高，而且不同模型在不同code工具下的能力差距很大
- 提示词模糊，“足够美观”和“一定的交互”是个很模糊和主观的概念，应该要详细说明具体效果才能客观判断是否实现了要求
- 投票容易先入为主，应该把模型打码再投票
gfu 19
这么喜欢测天气卡片，这个天气卡片能测出来啥啊到底
Kayak (Kayak) 20
这个错误似乎是因为多模态触发的，我遇到过好几次了 
涉及到图片一碰会话就G了得clear重搞
Xi_Lanhua (Xi_Lanhua) 21
支持支持，非常棒的分享，占个位置