本文分享给大家的是：

本周对人工智能来说是一个疯狂的一周DeepSeek V3刚刚发布根据基准测试，它是目前最好的AI模型，甚至超过了像Grok 3这样的推理模型就在几天后，谷歌发布了Gemini 2.5 Pro，再次在基准测试中击败了其他所有模型。

Gemini 2.5 Pro的表现随着这些模型的推出，大家都在问同一个问题：“哪个是最佳的编程模型？”——我们的集体意识本文将探讨这个问题在一个真实的前端开发任务中1、准备任务为了完成这个任务，我们需要给LLM足够的信息来完成它。

我们将如何做到这一点作为背景，我正在构建一个算法交易平台其中一个功能叫做“深度挖掘”，即AI生成的全面尽职调查报告我在这篇文章中详细介绍了这一功能尽管我已经发布了这个功能，但我没有一个SEO优化的入口点。

因此，我想看看每个最好的LLM能否为这个功能生成一个着陆页为此：我构建了一个系统提示，塞满了足够的上下文以一次性解决问题我对每个模型都使用了相同的系统提示我只根据我对前端效果的主观意见来评估模型我从系统提示开始。

2、构建完美的系统提示为了构建我的系统提示，我做了以下几件事：给它提供了我的文章的markdown版本，以便了解该功能的作用提供了生成页面所需单个组件的代码示例列出了一些约束和要求例如，我想能够从着陆页生成报告，并在提示中解释了这一点。

系统提示的最后一部分是详细的对象部分，说明了我们要构建的内容# 目标 构建一个SEO优化的前端页面用于深度挖掘报告 虽然我们已经在资产仪表板上可以生成报告，但我们希望 这个页面能够帮助我们找到搜索股票分析、DD报告等的用户。

- 页面应该有一个搜索栏，并且能够在页面上直接生成报告这是主要的CTA - 当用户点击时，如果他们未登录，会提示他们注册 - 页面应该解释所有的好处并针对寻找股票分析、尽职调查报告等的人进行SEO优化 。

- 优秀的UI/UX是必须的 - 你可以使用package.json中的任何包，但不能添加新的包 - 专注于良好的UI/UX和编码风格 - 生成完整的代码，并将其分成不同的组件，包括主页面

要查看完整的系统提示，我将其公开链接在此Google文档中然后，使用这个提示，我想测试所有最好的语言模型的输出：Grok 3、Gemini 2.5 Pro（实验版）、DeepSeek V3 0324和Claude 3.7 Sonnet。

我按照从差到好的顺序组织了这篇文章。让我们从最差的模型开始：Grok 3。3、测试Grok 3（思考）

由Grok 3生成的深度挖掘报告页面说实话，尽管我对Grok抱有很高的期望，因为它在其他具有挑战性的编码“思考”任务中表现出色，在这个任务中，Grok 3做得非常基础它的输出是我预期GPT-4能做到的我是说，看看这个。

这不是一个SEO优化的页面；谁会用这个？相比之下，O1-Pro做得更好，但也不多。4、测试GPT O1-Pro

由O1-Pro生成的深度挖掘报告页面

样式化的搜索栏O1-Pro在保持与代码示例相同样式方面做得更好特别是搜索栏看起来比Grok好它使用了我正在使用的图标包，格式也总体上相当不错但它绝对不是生产就绪的对于Grok和O1-Pro，输出是你期望一个刚上Intro to Web Development课程的实习生能做的。

其余的模型做得更好。5、测试Gemini 2.5 Pro

由Gemini 2.5 Pro实验版生成的顶部两个部分由Gemini 2.5 Pro模型生成的中间部分我之前生成的所有报告的完整列表Gemini 2.5 Pro第一次尝试就生成了一个令人惊叹的着陆页当我看到它时，我震惊了。

它看起来专业，高度SEO优化，并且完全满足所有要求它重新使用了我的其他一些组件，比如我在现有深度挖掘报告页面上使用的显示组件生成之后，我确实认为它会获胜……直到我看到了DeepSeek V3的表现6、测试DeepSeek V3 0324

由DeepSekk V3实验版生成的顶部两个部分

由DeepSeek V3模型生成的中间部分

由DeepSeek V3生成的结论和号召行动部分DeepSeek V3的表现比我想象的要好得多作为一个非推理模型，我发现结果非常全面它有一个英雄部分，大量的细节，甚至还有一个推荐部分到这个时候，我已经对这些模型的进步感到震惊，并认为Gemini会在这一点上成为无可争议的冠军。

然后我完成了Claude 3.7 Sonnet的测试。哇，我简直无法更震撼了。7、测试Claude 3.7 Sonnet

由Claude 3.7 Sonnet生成的顶部两个部分

由Claude 3.7 Sonnet生成的好处部分

由Claude 3.7 Sonnet生成的样本报告部分和比较部分

由Claude 3.7 Sonnet生成的比较部分和推荐部分

由Claude 3.7 Sonnet生成的最近报告部分和常见问题解答部分由Claude 3.7 Sonnet生成的号召行动部分独树一帜使用完全相同的提示，我生成了一个极其复杂的前端着陆页，它不仅满足了我的具体需求，还超出了预期。

它超额交付了确切地说，它包含了我从未想象过的内容它不仅允许你直接从用户界面生成报告，还包含描述功能的新组件、经过SEO优化的文本、全面描述了好处、包括推荐信部分等更多内容它远远超出了全面性8、超越主观外观的讨论。

虽然这些着陆页的视觉元素都很出色，但我还想简要讨论一下代码的其他方面首先，有些模型在使用共享库和组件方面做得比其他模型更好例如，DeepSeek V3 和 Grok 没有正确实现“OnePageTemplate”，这是负责头部和尾部的部分。

相比之下，O1-Pro、Gemini 2.5 Pro 和 Claude 3.7 Sonnet正确地利用了这些模板此外，所有模型生成的原始代码质量惊人地一致，没有出现任何主要错误所有模型都生成了干净、可读的代码，具有适当的命名约定和结构。

此外，模型使用的组件确保页面在移动设备上友好这一点至关重要，因为它保证了不同设备上的良好用户体验由于我使用的是 Material UI，每个模型都能独立做到这一点最后，Claude 3.7 儿歌因其产生的高质量代码量最大且不牺牲可维护性而应得到认可。

它创建了更多的组件和功能，每个部分仍然保持良好的结构并无缝集成这表明 Claude 在前端开发方面的优越性9、关于这些结果的注意事项尽管 Claude 3.7 Sonnet产生了最高质量的输出，但在选择哪个模型时，开发者应该考虑几个重要的因素。

首先，除了 O1-Pro 外，每个模型都需要手动清理修复导入、更新副本以及获取（或生成）图像大约需要我1到2个小时的手动工作，即使对于 Claude 的综合输出也是如此这证实了这些工具在初稿方面表现出色，但仍需要人类的精炼。

其次，成本性能权衡非常重要O1-Pro 是迄今为止最昂贵的选择，每百万个输入令牌的成本为150美元，每百万个输出令牌的成本为600美元相比之下，第二昂贵的模型（Claude 3.7 儿歌）每百万个输入令牌的成本为3美元，每百万个输出令牌的成本为15美元。

它的吞吐量也相对较低，与 DeepSeek V3 相同，为每秒18个令牌Claude 3.7 Sonnet的吞吐量是 O1-Pro 的3倍，且便宜50倍它还为前端任务生成了更好的代码这些结果表明，对于前端开发，您绝对应该选择 Claude 3.7 儿歌而不是 O1-Pro。

V3 比 Claude 3.7 Sonet便宜超过10倍，使其成为预算友好的项目的理想选择它的吞吐量与 O1-Pro 类似，为每秒17个令牌同时，Gemini Pro 2.5 当前提供免费访问，并以 Claude Sonnet速度的两倍处理最快。

Grok 受其缺乏 API 访问的限制重要的是，值得讨论 Claude 的“继续”功能与其他模型不同，Claude 有一个选项可以在耗尽上下文后继续生成代码——这比其他模型的一次性输出更具优势然而，这也意味着比较并不完全平衡，因为其他模型必须在更严格的令牌限制下工作。

“最佳”选择完全取决于你的优先事项：纯代码质量 → Claude 3.7 Sonnect速度+成本 → Gemini Pro 2.5（免费/最快）大型、预算友好或 API 功能 → DeepSeek V3（最便宜）

最终，尽管 Claude 在这项任务中表现最佳，但最适合您的模型取决于您的需求、项目以及您认为模型最重要的方面10、结论性思考随着大量新语言模型的发布，很难清楚地回答哪个模型是最好的因此，我决定进行头对头比较。

就纯代码质量而言，Claude 3.7 Sonnet在这项测试中脱颖而出，展示了对技术要求和技术美学的卓越理解它能够创建一个完整的用户体验——包括推荐信、比较部分和功能齐全的报告生成器——使其在前端开发任务中领先于竞争对手。

然而，DeepSeek V3 的出色表现表明专有模型和开源模型之间的差距正在迅速缩小话虽如此，本文基于我的主观意见现在是时候同意或不同意 Claude 3.7 Sonnet是否做得很好，以及最终结果是否合理了。

请在下面评论并告诉我您最喜欢哪个输出原文链接：5个最强前端代码生成AI模型对比 - 汇智网