Cursor 中 Claude 3.7 vs 3.5 前端开发深度对比（附源码）
Eric在真实前端复杂界面构建中，深度评测 Claude 3.7 与 3.5 的推理力度、代码质量与组件自洽性。
最近 Claude 3.7 Sonnect 推出后，很多人都在说很强，也看了不少测评，决定用 Cursor AI 编辑器对 Claude 3.5 和 Claude 3.7 AI 模型前端编程能力进行对比。所有代码通过 Cursor Chat 中的自然语言生成，想要跳过本文可以直接克隆 Github 的源码，本地运行查看效果。
https://github.com/flyeric0212/claude-3.5-vs-3.7-code-comparison
官方介绍
Anthropic公司最新推出了Claude 3.7 Sonnet智能模型。它是市场上首个混合推理模型，其在编码和前端开发方面表现出色。
Claude 3.7 Sonnet在标准模式下是Claude 3.5 Sonnet的升级版，而在扩展思考模式下，它会在回答前进行自我反思，从而提高在数学、物理、指令遵循、编码等任务上的表现。用户可以通过API控制思考预算，以在速度和答案质量之间进行权衡。
该模型在SWE-bench Verified和TAU-bench等基准测试中表现优异，尤其在处理复杂的代码库和全栈更新方面表现突出。Claude 3.7 Sonnet还在安全性、可靠性和减少不必要拒绝方面进行了改进。
Claude 3.7 Sonnet标志着AI系统在增强人类能力方面迈出了重要一步，能够进行深度推理、自动工作并有效协作。
上述信息来源：https://www.anthropic.com/news/claude-3-7-sonnet。
接下来我将在 Cursor 中使用 Claude 3.7 Sonnet 和 Claude 3.5 Sonnet 进行前端项目能力的对比。
01-网页复刻
根据截图重新创建 Cursor 官方网站 UI，测试 AI 将复杂视觉设计转换为功能代码的能力。
💡提示词：
用 HTML+CSS+JavaScript 复刻这张截图，如果是图片的地方可以进行占位或者使用开源免费的图片链接。
使用的是 Cursor 官网首页的长截图（可自行截取或者到 Github 仓库中下载）：
Claude 3.5
代码演示：
Claude 3.7
代码演示：
中间省略（可克隆项目启动查看）。。。
测试结论
Claude 3.7 比 3.5 的视觉识别能力强一大截。Claude 3.5 只能识别长截图中的第一页，而 Claude 3.7 几乎把长截图的每个模块都生成了，有图片的地方也进行了占位，同时向下滑动鼠标时加入了动画效果，完成度相对较高。
02-传统框架应用
使用 HTML、CSS 和 JavaScript 实现登录页面，评估 AI 对基础网络技术的熟练程度。
💡提示词：
请设计一个响应式的登录页面，支持桌面和移动设备。页面应包含用户名、密码输入框和登录按钮。使用 HTML、CSS 和 JavaScript 实现，确保页面在不同屏幕尺寸下布局合理。请提供完整的代码，并确保代码结构清晰、易于维护。
Claude 3.5
代码演示：
Claude 3.7
代码演示：
测试结论
Claude 3.7 生成的登录页面更加美观，符合当前现代化的 UI 审美，同时帮你补全了很多登录功能，例如：记住我、忘记密码以及立即注册。可以直接
03-单页应用
使用 React 开发博客应用，评估 AI 使用现代前端框架和创建交互式用户界面的能力。
💡提示词：
使用 React 框架开发一个博客单页应用，包含四个页面：首页、书籍、关于我们和联系我们。通过导航菜单实现页面间的无刷新切换，确保切换过程流畅且用户体验良好。
Claude 3.5
在使用 Claude 3.5 过程中，聊天框需要授权 Terminal 权限来执行创建react 项目，老是失败，改了下提示词。
最后，没有在 public 中生成 index.html，进行了一次提问让其补充。
代码演示：
Claude 3.7
代码演示：
测试结论
Claude 3.7 一次就生成所有的代码，包括 README.md文件，而 Claude 3.5 在中途添加了很多 Terminal 命令，如：npx 创建 react 项目，新建 folder 等命令，体验不佳，而且代码生成不全，需要多次提问进行补全，才可运行。
最值得一提的是，Claude 3.7 能通过简单的提示词，帮你补充了很多需求功能，内容很丰富。
最后
Claude 3.7 无论在多模态能力、需求理解以及前端 UI 能力方面，都要比 3.5 强大很多。随着未来 AI 大模型能力的增强，AI 辅助编程将带来质的飞跃。
Cursor 实战开发与模型测评专题推荐
如果你对全栈项目实战、模型测评对比与 Agent 模式感兴趣，推荐阅读：
- 完全使用 Cursor 开发一个 Web 项目的真实感受
- Cursor 项目研发最佳实践总结
- 国产 AI 编辑器 Trae 新版体验：Cursor 的可选替代方案
- Claude 4 登陆 Cursor：72.7% SWE-bench 成绩背后的真实编码体验
- 用 Cursor 开发全栈 Web 应用：Next.js + Supabase 全流程实战
👉 查阅更多实战技巧，欢迎访问 Cursor 专栏完整目录。
