本文通过一个实际案例，对多款AI编程工具及其代码生成模型进行了测评，旨在评估它们在前端代码生成方面的表现。测评结果显示，不同工具和模型在功能实现、UI设计和整体风格上存在差异，其中Claude-4-sonnet和Lovable表现出色，而其他工具的表现则参差不齐。文章还强调了模型的重要性，以及在实际开发中的选择建议。

💻 **测评方法**：作者使用“我的MBTI AI朋友圈”APP的高保真设计原型作为测试用例，要求AI生成HTML代码，并对比不同工具和模型的表现。

🎨 **核心发现**：Claude-4-sonnet模型在Cursor和Trae工具上均表现出色，能生成功能完整、UI美观的代码；Lovable云端工具也获得了高分，展现了强大的代码生成能力。

🤔 **关键差异**：不同工具和模型在功能实现、UI完整度、设计风格等方面存在差异，部分工具未能实现“直接平铺”的界面需求，影响了整体评分。

💡 **实用建议**：对于本地开发，Claude-4-sonnet是最佳选择；对于云端产品，Lovable值得推荐。模型性能对最终结果起决定性作用。

原创 Ace人生 2025-06-28 16:31 浙江

AI编程哪家强？

题记这轮AI浪潮中，AI编程无疑是最火热的赛道。参赛选手众多，包括Cursor、Windsurf、Trae、Replit、Lovable、Bolt.new、v0等一系列编程Agent。而背后的推动力量，是Anthropic Claude、OpenAI GPT、Google Gemini、DeepSeek R1等大模型，它们的代码生成能力是这些编程Agent崛起的核心动能。

那截止2025年6月，这些编程Agent的真实表现如何？不同模型的代码生成能力有什么差异？我通过一个真实的案例，用不同的AI编程产品，以及不同的代码生成模型，比较其结果，让大家能获得一个直观、定性的印象。

需求：Prompt下面是我测试的用例：让AI生成一个叫“我的MBTI AI朋友圈”APP的高保真设计原型。简单讲就是我有一些不同MBTI性格的AI朋友，每当我发帖记录自己的生活，它们就根据自己的性格特征回复我，给我提供情绪价值。下面是Prompt：

我想开发AI个人情感陪伴的中文app,功能如下：
1. 用户可以用这个app来记录自己的想法、计划、todo、情绪、看过的链接等生活点滴。用卡片+时间线来交互。因此它首先是一个AI日记软件。
2. 系统有一系列不同mbti个性的ai agent，他们会对用户的这些记录根据自己的mbti性格做不同的回应。
3. 用户可以加不同的ai agent作为他的关注者。
4. 用户可以分享自己的记录和ai agent的回应。
5. 通过这些回应和分享，给用户提供情感陪伴。
现在需要输出出高保真的原型图,请通过以下方式帮我完成所有界面的原型设计,并确保这些原型界面可以直接用于开发:
1、用户体验分析:先分析这个App的主要功能和用户需求,确定核心交互逻辑
2、产品界面规划:作为产品经理,定义关键界面,确保信息架构合理
3、高保真UI设计:作为Ul设计师,设计贴近真实iOS/Android设计规范色的界面,使用现代化的UI元素,使其具有良好的视觉体验。
4、HTML原型实现:使用HTML+Tailwind CSS (或Bootstrap)生成所有原型界面,并使用FontAwesome(或其他开源UI组件)让界面更加精美、接近真实的App设计。拆分代码文件,保持结构清晰:
5、每个界面应作为独立的HTML文件存放,例如home.html、profile.html、settings.html
- index.html作为主入口,不直接写入所有界面的HTML代码,而是使用iframe的方式嵌入这些HTML片段,并将所有页面直接平铺展示在index页面中,而不是跳转链接。
- 真实感增强:
- 界面尺寸应模拟iPhone 15 Pro,并让界面圆角化,使其更像真实的手机界面。
- 使用真实的Ul图片,而非占位符图片(可从Unsplash、Pexels、Apple官方UI资源中选择)。
- 添加顶部状态栏(模拟iOS状态栏),并包含App导航栏(类似iOS底部TabBar)。
请按照以上要求，在design-trae-DeepSeekR1文件夹中生成完整的HTML代码,并确保其可用于实际开发。

然后我就在不同的AI编程产品、使用不同的模型生成了不同的代码：

使用的产品包括：Cursor、Trae、Replit、Lovable、v0

使用的模型包括：claude-3.5-sonnet、claude-3.7-sonnet、claude-4-sonnet，gemini-2.5-flash、gemini-2.5-flash，o3、gpt-4.1，deepseek-r1

image-20250627170124388下面是其结果展示。

Cursorclaude-3.5-sonnetCursor & claude-3.5-sonnet产品Cursor + 模型claude-3.5-sonnet：

在功能上，能比较准确实现需求。最后一个页面应该没有，但是出现了一个打不开的坏页面。

在UI上，基本界面完整。但图标没有达到要求，需要用网络素材填充。

在设计风格上，简约，朴素。

中规中矩，属于毛坯房，能打60分。

claude-4-sonnetCursor & claude-4-sonnet产品Cursor + 模型claude-4-sonnet，这个厉害了：

在功能上，非常准确实现需求。以“创建”Tab为例，功能非常完整，帖子类型、心情都有。

在UI上，界面完整，素材丰富。

在设计风格上，美观，漂亮。

个人觉得完成度非常高，能直接作为前端实现，妥妥的精装交付。打分90。

Gemini-2.5-pro结果只有一个页面，没有实现需求中的“直接平铺”：

Claude & Gemini-2.5-pro 原图我手动切换页面，展开之后的效果如下：

Claude & Gemini-2.5-pro 展开产品Cursor + 模型Gemini-2.5-pro，一般：

在功能上，实现需求上差强人意。基本功能有，但没有实现“直接平铺”的效果，这个是严重扣分项。

在UI上，基本界面完整，图标OK。

在设计风格上，简朴。

简装，但有重大失误，59分。

o3Cursor o3产品Cursor + 模型o3：

在功能上，能比较准确实现需求。。

在UI上，基本界面完整，图标OK。

在设计风格上，清爽，简素。

非常清爽的简装，比claude-3.5-sonnet效果好，能打70分。

Traeclaude-3.5-sonnetTrae & claude-3.5-sonnet产品Trae + 模型claude-3.5-sonnet，这次厉害了：

在功能上，能准确实现需求。

在UI上，界面完整，素材丰富。

在设计风格上，美观。但设计感逊于claude-4-sonnet

精致简装，能打80分。

claude-3.7-sonnetTrae & claude-3.7-sonnet 原图Trae & claude-3.7-sonnet 展开产品Trae + 模型claude-3.7-sonnet，一般，3.7的效果反而不如3.5

在功能上，没有实现“直接平铺”的效果，严重扣分。

在UI上，界面完整，图标OK。

在设计风格上，美观。

精致简装，但有重大失误，59分。

claude-4-sonnetimage-20250628155207865产品Trae + 模型claude-4-sonnet，这个也厉害：

在功能上，非常准确实现需求。以“创建”Tab为例，功能非常完整，帖子类型、心情都有，还有附件。

在UI上，界面完整，素材丰富。

在设计风格上，美观，漂亮。

跟产品Cursor + 模型claude-4-sonnet，个人觉得完成度非常高，能直接作为前端实现，妥妥的精装交付。打分90。

gemini-2.5-proTrae & gemini-2.5-pro 原图Trae & gemini-2.5-pro 展开产品Trae + 模型Gemini-2.5-pro，非常一般：

在功能上，实现需求上差强人意。基本功能有，但没有实现“直接平铺”的效果，这个是严重扣分项。

在UI上，基本界面完整，图标缺失。

在设计风格上，简朴。

毛坯，且有重大失误，50分。

DeepSeek R1image-20250627174349625没有实现“直接平铺”，本来我打算手动铺开，结果点击Tab出的页面是错的。

产品Trae + 模型DeepSeek R1，糟糕：

在功能上，实现需求上不尽人意。基本功能不全，且没有实现“直接平铺”的效果，这个是严重扣分项。

在UI上，基本界面不完整，图标无。

在设计风格上，简陋。

质量差的毛坯，且有重大失误，40分。

Replit上面的Cursor和Trae，都是在本地安装的IDE（集成开发环境）。下面测评的Replit、Lovable、v0等，都是云端产品，直接在浏览器中操作。Replit的产品界面如下：

Replit界面结果只有一个页面，没有实现需求中的“直接平铺”。我手动展开后，效果如下：

结果展开产品Replit + 模型未知，效果相当一般：

在功能上，没有实现“直接平铺”的效果，严重扣分。

在UI上，界面基本完成，图标OK。

在设计风格上，简陋。

简装，且有重大失误，50分。

LovableLovable，产品如其名，很好很可爱：

Lovable产品界面结果很惊艳：

Lovable结果产品Lovable + 模型未知，惊艳：

在功能上，非常准确实现需求。以“创建”Tab为例，功能非常完整，帖子类型、心情都有，还有隐私设置。

在UI上，界面非常完整，素材丰富。

在设计风格上，美观，漂亮。。

个人觉得比claude-4-sonnet更好，高质量的精装。完成度非常高，能直接作为前端实现。打分95。

v0v0的产品界面如下：

V0产品界面它使用的是自己开发的前端代码生成模型，我测试了默认的v0-1.5-md以及参数更多的v0-1.5-lg。

v0-1.5-mdV0-1.5-md产生的界面没有“直接平铺”，手动展开后如下：

v0-1.5-md结果展开产品v0 + 模型v0-1.5-md，非常一般：

在功能上，实现需求上差强人意。基本功能有，但没有实现“直接平铺”的效果，这个是严重扣分项。

在UI上，基本界面完整，图标缺失。

在设计风格上，简约。

毛坯，且有重大失误，风格尚可，55分。

v0-1.5-lg使用v0-1.5-lg的效果如下：

v0-1.5-lg结果展开产品v0 + 模型v0-1.5-md，与产品Cursor + 模型claude-3.5-sonnet的效果类似：

在功能上，能比较准确实现需求。

在UI上，基本界面完整。但图标没有达到要求，需要用网络素材填充。

在设计风格上，简约，朴素。

中规中矩，属于毛坯房，没有产品Cursor + 模型claude-3.5-sonnet的失误，能打65分。

Bolt.newBolt产品如下：

bolt产品界面没有实现“直接平铺”：

bolt产出原图展开后效果如下：

bolt产出展开产品bolt + 模型未知，非常糟糕：

在功能上，没有实现。

在UI上，缺失、挤压。

在设计风格上，简陋。

质量差的毛坯，且有重大失误，40分。

总结

产品

模型

得分

Cursor

claude-3.5-sonnet

60

claude-4-sonnet

90

gemini-2.5-pro

59

o3

70

Trae

claude-3.5-sonnet

80

claude-3.7-sonnet

59

claude-4-sonnet

90

gemini-2.5-pro

50

deepseek r1

40

Replit

未知

50

Lovable

未知

95

v0

v0-1.5-md

55

v0-1.5-lg

65

Bolt.new

未知

40

上面的测评，因为只有一个用例，侧重前端代码生成，加上只有一次测试，有一些随机性。但它还是帮我在后续的前端开发中指明了方向：

如果在本地开发，claude-4-sonnet是最佳选择。至于产品是Cursor还是Trae，差别不大。最终还是模型决定一切。

如果使用云端产品，Lovable我最爱！

供你参考。

欢迎加入「AI行动派」，"用AI做点什么"。

我在公众号「无人之路」每周更新"AI启示录"，输出"学AI，用AI"的最新实践与心得。不过这只是冰山一角。

在知识星球「AI行动派」中，有更多更丰富"学AI，用AI"的各种资源、技术、心得，每天更新，最近主要集中在AI Agent上💡。欢迎加入，一起行动！

AI行动派

阅读原文

跳转微信打开