有点出乎我的意料兄弟们，在前端应用生成这个赛道，最近很热闹，Lovable当红炸子鸡，国内最近美团Nocode出街，也引起不小的关注，豆包PC的编程模式也发布了“应用创作1.0新模式”，还能在线编辑产物。 正好有时间，对这三个工具简单测试一波，结果完全出我所料，原以为在AI 自然语言应用生成这个赛道国内工具离当前Top 1 Lovable还有距离，没想到实际操作下最惊艳的竟然是一个非独立产品“豆包AI编程” - 豆包主端内的编程功能。
豆包编程、Lovable 、NoCode 实测效果
我计划创建一个英语学习网正的前端页面，采用最简单的Prompt：帮我创建一个 英语知识学习 网站， 包含英语阅读推荐、单词练习互动模块等有趣玩法。 分别看Lovable、NoCode、豆包AI编程的生成结果。我直接做成表格，方便横向比较
| 产品 | AI 交互 | 生成产物 | 比较 | 美观度 | 完整度 | 需求还原度 |
|---|---|---|---|---|---|---|
| Lovable | Lovable生成前，AI 会简单的梳理设计思路和功能。实际执行后，能够完整生成一个网页，包含主要的网页元素。功能上包含阅读推荐、单词练习、学习进度、徽章成就等主要功能，复合需求描述； | ⭐️⭐️⭐️⭐️ | ⭐️⭐️⭐️⭐️ | ⭐️⭐️⭐️⭐️ | ||
| Nocode | NoCode生成前，AI 会相对详细的的梳理设计思路、步骤和功能。但实际执行后，未生成完整网页前端，仅生成了几个功能模块；完整度不够； | ⭐️⭐️⭐️ | ⭐️⭐️ | ⭐️⭐️⭐️ | ||
| 豆包编程 | 豆包编程在生成前，会简单梳理网站功能，然后进入到代码生成状态；经过一段时间的生成后，完整正提供了一个功能丰富、排版合理、UI美观的页面，我对此简直大为震惊；这个作为一个产品 or 功能站点的前端，基本可以直接复制代码使用了； | ⭐️⭐️⭐️⭐️⭐️ | ⭐️⭐️⭐️⭐️⭐️ | ⭐️⭐️⭐️⭐️⭐️ |
Lovable生成前，AI 会简单的梳理设计思路和功能。实际执行后，能够完整生成一个网页，包含主要的网页元素。功能上包含阅读推荐、单词练习、学习进度、徽章成就等主要功能，复合需求描述；
NoCode生成前，AI 会相对详细的的梳理设计思路、步骤和功能。但实际执行后，未生成完整网页前端，仅生成了几个功能模块；完整度不够；
豆包编程在生成前，会简单梳理网站功能，然后进入到代码生成状态；经过一段时间的生成后，完整正提供了一个功能丰富、排版合理、UI美观的页面，我对此简直大为震惊；这个作为一个产品 or 功能站点的前端，基本可以直接复制代码使用了；我看前两天doubao1.6 模型发布，不知道豆包编程底层是不是用的这个模型，效果也太棒了。
更让我震惊的，是豆包编程的这个功能 - 可视化编辑；
（www.doubao.com/chat/coding 需要PC浏览器打开）
豆包编程的巧思 - 可视化编辑
一般通过AI工具，生成前端页面后，往往是不能手工修改的，除非直接copy代码修改代码，对于一些专业开发者其实还好，但对于小白开发者就比较难了：代码找也找不到、改也不会改；但是豆包编程的“可视化编辑”这个功能，算是贴脸开大了；
生成前端产物后，豆包编程提供了“编辑”按钮，点击按钮后进入编辑模式，可以直接点选页面上的区域，做文字修改或者图片替换，而且图片替换应该是接入了 豆包的 文生图 模型，可以直接通过prompt生成自己想要的图片；我录了一段，就像下面这样；
我只能说，字节这一波在大模型和AI产品上，真是齐头并进、遥遥领先； 就拿我们现在这个案例，不但模型生成的效果好，而且在产品上还提供了除模型之外的编辑能力；
当前很多厂商、团队的AI产品，核心竞争力 = 模型能力，产品效果基本完全依赖模型能力；但字节当前很多AI 产品的策略，明显是在模型之上找更优解，提供除模型之外的产品竞争力，在自然语言编程的大叙事下，不光接好模型，还要找到用户场景痛点打磨产品功能，这是豆包编程给我最大的感受。
最后
这轮评测下来，Lovable符合预期，作为全球Top1稳定发挥； Nocode进步空间还有很大，需要继续打磨；豆包编程超出预期，按本次案例效果，称之为“国内前端应用生成效果第一” 也不为过，不知道后面会不会持续保持。话说，要不是看到一篇小红书，我都不知道豆包还能干这个，太全面了；最后分享下我的作品。www.doubao.com/share/code/…
