Claude Fable 5 vs GPT-5.5：一道 Canvas 动画题测出“输出预算”这个坑

Claude Fable 5 vs GPT-5.5一道 Canvas 动画题测出“输出预算”这个坑适合读者正在做大模型评测、AI 编程助手选型、前端代码生成测试、模型网关接入的开发者。本文重点不是做模型排行榜而是记录一次可复现的小测试同一道数学题、物理题、前端动画题分别让claude-fable-5和gpt-5.5完成。真正有价值的结论不是“谁更强”而是长代码任务里必须记录max_tokens、completion_tokens和finish_reason。先说结论这次我把模型对比题目从“简单数学 简单代码”升级了一档题目类型主要考察点MATH-003数学期望连续抛硬币直到 HH不能直接用1 / 概率PHYS-003物理综合非弹性碰撞、动量守恒、弹簧压缩、摩擦做功CODE-003-ANIM前端动画一次性生成完整 HTML Canvas 动画实测结果题目claude-fable-5gpt-5.5数学期望正确正确物理综合正确正确Canvas 动画max_tokens3200被截断完整输出Canvas 动画Claude 复测max_tokens8000完整输出未复测也就是说claude-fable-5第一次动画题不是“不会写”而是输出预算不够。把max_tokens从3200提高到8000后它可以输出完整 HTML并且浏览器验证动画能正常运行。这个坑很常见如果只看最终文件不完整很容易误判成模型能力不行但看finish_reasonlength和completion_tokens3200就会发现它是被输出上限截断了。测试环境Base URL: https://cn.crazyrouter.com/v1 Endpoint: POST /v1/chat/completions 模型 1: claude-fable-5 模型 2: gpt-5.5 测试日期: 2026-07-06请求时保持低随机性temperature 0.2本站测试入口https://crazyrouter.com/register?utm_sourcecsdnutm_mediumarticleutm_campaignmodel_compare_seriesutm_contentfable5_gpt55_round2_animation第一题连续抛硬币直到 HH题目连续抛一枚公平硬币直到第一次出现连续两个正面 HH 为止。 1. 求停止时所需抛掷次数的期望值。 2. 请用状态方程或递推方式推导不要只给结论。 3. 最后用一句话解释为什么答案不是 4。标准解法是建两个状态E0当前没有 H 前缀时到第一次出现 HH 还需要的期望次数 E1当前已经有一个 H 前缀时到第一次出现 HH 还需要的期望次数状态方程E0 1 1/2 E1 1/2 E0 E1 1 1/2 * 0 1/2 E0解得E0 6两个模型都答对了。这题的关键是不能直接写1 / (1/4) 4因为“连续两个正面”是有状态记忆的相邻窗口不是独立试验。第二题子弹嵌入木块后压缩弹簧题目摘要子弹 m 0.02 kgv 300 m/s 木块 M 1.98 kg初始静止 子弹嵌入木块 弹簧 k 800 N/m 桌面动摩擦因数 μ 0.10 g 9.8 m/s^2要求1. 求碰撞后共同速度 2. 求弹簧最大压缩量 3. 说明哪里用动量守恒哪里用能量关系标准思路碰撞瞬间用动量守恒 mv (M m)V V 3.0 m/s 碰后压缩弹簧阶段用能量关系 1/2(Mm)V^2 1/2kx^2 μ(Mm)gx 9 400x^2 1.96x x ≈ 0.148 m两个模型也都答对了。这里我更关注它们是否会犯一个经典错误把子弹嵌入木块的全过程当作机械能守恒。这一步不能用机械能守恒因为完全非弹性碰撞会有大量机械能转化为内能、形变能和声能。claude-fable-5在解释上更直观一些它额外指出碰前动能约 900 J 碰后整体动能约 9 J这个对比能很直接地说明为什么碰撞过程机械能不守恒。第三题让模型生成一个 Canvas 动画这轮真正有区分度的是前端动画题。我要求模型只输出完整 HTML不能解释直接可保存为.html打开运行。核心要求1. 原生 HTML/CSS/JavaScript 2. 不能依赖外部库、外部图片或网络资源 3. 页面包含 800x500 canvas 4. 中心恒星 至少 5 个绕行粒子 5. requestAnimationFrame 驱动 6. 半透明轨迹 7. 暂停/继续、重置、速度滑杆 8. 左上角显示 FPS 和速度倍率 9. 至少包含 init、update、draw、animate 四个函数 10. 刷新后轨道布局一致GPT-5.5原始测试一次过gpt-5.5在max_tokens3200的原始测试里输出了完整 HTML。静态检查结果包含 !DOCTYPE html 包含 /html 包含 requestAnimationFrame 包含 init / update / draw / animate 包含暂停、重置、速度滑杆 canvas 为 800x500浏览器运行验证控制台错误无 canvas 尺寸800x500 控件存在 700ms 后 changedPixels 37512 hasAnimation true截图如下这说明它不是只生成了静态画面而是真的在跑动画。Claude Fable 5第一次被截断claude-fable-5第一次动画题的代码方向是对的它写了页面结构、canvas、控件、粒子配置、轨道、恒星和 HUD。但原始测试里有一个关键问题max_tokens 3200 finish_reason length completion_tokens 3200 HTML 没有 /html也就是说它不是自然结束而是正好打满了输出上限。第一次输出的 HTML 末尾停在类似这样的地方ctx.beginPath();后面的粒子绘制、事件绑定、animate、/script、/body、/html都没输出完。这份文件不能直接运行。如果只看“代码不完整”很容易下结论Claude Fable 5 不适合这类前端动画任务。但这个结论是不严谨的因为finish_reasonlength已经提示我们它是输出长度到顶了。复测把 Claude Fable 5 的 max_tokens 提到 8000为了确认原因我单独复测了一次claude-fable-5测试max_tokensfinish_reasoncompletion_tokensHTML 是否闭合同参数复测3200length3200否提高输出预算8000stop3975是结论很明确3200 不够写完 8000 可以写完 实际只用了 3975 个 completion tokens然后我把 8000 版本保存为 HTML用浏览器打开验证控制台错误无 canvas 尺寸800x500 控件暂停、重置、速度滑杆均存在 700ms 后 changedPixels 15795 hasAnimation trueClaude Fable 5 复测通过后的截图所以正确结论不是“Claude Fable 5 不会写动画”而是Claude Fable 5 在 max_tokens3200 时写不完这个完整 HTML。 提高输出预算后它可以完成并且动画可运行。这类对比为什么必须看 finish_reason很多模型评测只展示最终输出不展示 API 元数据。这在长代码任务里很危险。至少要记录这些字段requested_model returned_model max_tokens completion_tokens finish_reason elapsed_ms本次最关键的字段就是finish_reason length它表示输出不是自然完成而是因为长度限制停止。如果没有这个字段读者只看到一个不完整 HTML很可能以为模型写崩了。但结合completion_tokens3200就能判断这是输出预算问题。接入时建议怎么设置如果你用模型生成完整页面、小游戏、可视化组件、复杂脚本不建议一开始就把max_tokens设得太小。我现在的建议是任务类型建议数学/物理短推导max_tokens1000-2000通常够用简单函数实现max_tokens1500-3000完整 HTML 页面至少max_tokens6000-10000带 CSS、JS、交互、动画的页面建议从8000起步生成失败后先看finish_reason不要先改 prompt一个简化的请求结构payload{model:claude-fable-5,messages:[{role:user,content:prompt}],temperature:0.2,max_tokens:8000}如果返回finish_reason length优先考虑1. 提高 max_tokens 2. 拆分任务 3. 要求模型先输出骨架再补 CSS/JS 4. 让模型只输出核心 JS不输出完整页面最终评分怎么改如果只看原始同参数测试题目claude-fable-5gpt-5.5说明数学期望5/55/5两者都正确物理综合5/55/5两者都正确Canvas 动画max_tokens32002/55/5Claude 被截断GPT 完整但复测后应该补充一行复测claude-fable-5说明Canvas 动画max_tokens80005/5输出完整 HTML浏览器验证通过所以文章最终不应该写成“GPT-5.5 碾压 Claude Fable 5”。更准确的说法是在相同 max_tokens3200 的长代码任务里GPT-5.5 更容易一次性完整输出。 Claude Fable 5 需要更高输出预算预算足够时也能完成可运行动画。对开发者的实际意义这次测试最有价值的地方不是数学题和物理题。那两题两个模型都答对了。真正有价值的是动画题暴露出的工程细节长代码任务里max_tokens 是测试条件的一部分。 finish_reason 必须记录。 completion_tokens 必须记录。 生成 HTML 后必须用浏览器验证而不是只看代码。 Canvas 动画还要验证像素是否变化避免“看起来有 canvas但实际上没动”。如果你正在用 AI 做前端页面、小游戏、可视化工具或代码生成评测这个坑很值得提前避开。总结这轮对比可以总结成三句话1. 数学和物理题上claude-fable-5 与 gpt-5.5 都表现稳定。 2. Canvas 动画题上gpt-5.5 在 max_tokens3200 下完整输出。 3. claude-fable-5 第一次被截断但提高 max_tokens 到 8000 后复测通过。所以模型对比不要只看“最终答出来没”。对于长输出任务必须把这些字段写进测试报告max_tokens completion_tokens finish_reason 浏览器运行结果 截图或像素变化验证后续继续做模型对比时我会把“可运行产物”作为固定测试项比如小游戏、Canvas 可视化、拖拽工具、日志分析脚本等。这样比单纯问几道选择题更接近真实开发场景。复现入口https://crazyrouter.com/register?utm_sourcecsdnutm_mediumarticleutm_campaignmodel_compare_seriesutm_contentfable5_gpt55_round2_animation_finalCSDN 图片检查本文图片使用 jsDelivr 图床链接未使用raw.githubusercontent.comhttps://cdn.jsdelivr.net/gh/xujfcn/imagesmain/blog/posts/model-compare-fable5-gpt55-round2-gpt55.png https://cdn.jsdelivr.net/gh/xujfcn/imagesmain/blog/posts/model-compare-fable5-gpt55-round2-claude-fable5.png发布前已用curl -I -L检查两个 URL 均返回HTTP 200。