Cursor 中 Claude 3.7 vs 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智能模型。它是市场上首个混合推理模型，能够提供快速响应或进行详细的逐步思考。用户可以通过API精细控制模型的思考时间。
Claude 3.7 Sonnet在编码和前端开发方面表现出色，并且引入了一个名为Claude Code的命令行工具，允许开发者直接从终端委派大量工程任务给Claude。Claude Code目前处于有限的研究预览阶段，能够搜索和阅读代码、编辑文件、编写和运行测试、提交和推送代码到GitHub，并使用命令行工具。
Claude 3.7 Sonnet在标准模式下是Claude 3.5 Sonnet的升级版，而在扩展思考模式下，它会在回答前进行自我反思，从而提高在数学、物理、指令遵循、编码等任务上的表现。用户可以通过API控制思考预算，以在速度和答案质量之间进行权衡。
该模型在SWE-bench Verified和TAU-bench等基准测试中表现优异，尤其在处理复杂的代码库和全栈更新方面表现突出。Claude 3.7 Sonnet还在安全性、可靠性和减少不必要拒绝方面进行了改进。
Claude 3.7 Sonnet标志着AI系统在增强人类能力方面迈出了重要一步，能够进行深度推理、自动工作并有效协作。
接下来我将在 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 辅助编程将带来质的飞跃。
参考
欢迎关注我的公众号“Eric技术圈”，原创技术文章第一时间推送。
