一句话看懂：资深 Web 开发者 Nolan Lawson 让 Claude Opus 5.5 用 12 种 JavaScript 框架构建同一个宝可梦应用，发现框架选择会让 AI 开发的 Token 成本和耗时相差一倍以上。当代码越来越由 Agent 编写，框架是否容易被模型理解，正成为技术选型的新变量。
事件核心：发生了什么
这场对比测试统一使用 Claude Opus 5.5、High 推理强度，任务为基于 PokéAPI 的宝可梦图鉴应用，包含列表、属性、技能、游戏版本数据和搜索筛选功能。每个框架在独立沙箱中原则上运行 5 次。
成本数据来自 Claude Code 按 API 价格估算的 Token 费用。目前公开结果显示，Hono+htmx 单次构建中位成本为 2.67 美元，Astro 为 2.76 美元，Nuxt 为 2.82 美元；Angular 达到 4.97 美元，接近 Hono+htmx 的 1.86 倍。Token 消耗上，Angular 为 976 万，Hono+htmx 为 426 万，相差约 2.3 倍；开发时间上 Angular 中位数为 17.2 分钟，Astro 仅 8.2 分钟。
性能方面，除 Vanilla、Angular、TanStack Start 外，多数方案 Lighthouse 性能评分接近满分，但 JavaScript 体积和总阻塞时间差异明显：Next.js 传输 142KiB、TBT 达 71ms，Angular 的 TBT 为 103ms。代码规模上，Hono+htmx 约 1370 行，Angular 约 2009 行，为 12 种方案最多。
为什么重要
过去框架选型主要看开发体验、生态和运行性能，而这次实验提示：模型对框架的熟悉程度、框架的约定性和生成代码的规模，会直接转化为 Token 成本与维护负担。SvelteKit 成本偏高，可能与其 v3 较新、Opus 5.5 训练数据覆盖不足有关；Gracile 则因模型不熟悉，出现克隆仓库、阅读 node_modules 编译代码的情况。官方 MCP、Skills 或 Claude Code 插件也未稳定发挥作用，这更接近普通开发者真实使用 AI 编码的状态。不过该结果受任务类型、模型版本和单次波动影响，不能当作永久排名。
对用户/开发者/创作者的影响
对使用 AI Agent 写代码的开发者，框架选型可把“模型是否熟悉”和“生成代码是否精简”纳入考量，而不只看社区热度。对团队而言，衡量 AI 编程成本时，Token 账单和后续维护行数都值得纳入评估。需要注意，Lawson 使用的是每月 100 美元的 Claude Max 套餐，成本数字是估算值而非单独账单；Lighthouse 和 Core Web Vitals 本身对 SPA 不够友好，MPA 在 LCP 上占优不宜直接外推为所有场景的结论。
AI 工具推荐
想把多个 AI 模型放在一个入口？
GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型，适合写作、绘图、视频和日常 AI 工作流。
推广链接：通过此链接购买，我可能获得佣金，不影响你的价格。
值得关注的后续
可观察三点：Anthropic 等模型厂商是否在新版本中补足对新框架和迁移指南的理解；框架团队是否推出更适配 Agent 的文档、MCP 或技能包，并真正被模型稳定调用；企业采购与团队规范是否会把 AI 开发成本列为框架评估的正式指标。
来源：InfoQ CN
