13. 2024—2025：从生成内容到生成应用，Vibe Coding 走向普及

来源：大模型技术演进

2024 年夏天，AI 对话框旁边多出了一块值得注意的区域。

随着 Claude 3.5 Sonnet 发布，Anthropic 在 6 月推出 Artifacts 功能预览。Claude 写出的代码、网页设计等内容，可以出现在独立窗口里，供用户查看和继续修改。到了 8 月，Artifacts 向免费版、Pro 和 Team 用户全面开放，交互原型、网站和可视化成为官方列举的典型用途。Claude 3.5 Sonnet 发布公告、Artifacts 全面开放公告

这块区域改变了“让 AI 写代码”给人的直观感受。过去，对不熟悉开发的人来说，一长段代码意味着新的问题：存在哪里，怎么启动，缺了什么软件？现在，一部分网页作品可以直接呈现出来，按钮能按，内容能变，用户可以围绕眼前的结果继续提出修改。

这种变化很快有了具体记录。2024 年 10 月 21 日，开发者 Simon Willison 回顾自己过去一周用 Artifacts 制作的小工具，包括二维码解码器、模型费用计算器、文本格式转换器。他也如实留下了相机参数模拟器效果不佳的尝试。生成软件开始进入一种新的日常：遇到一个小问题，就尝试做一个专门解决它的工具。当时的使用记录与代码

这些案例来自有经验的开发者，不能直接证明完全不懂技术的人也能得到同样结果。但它们揭示了一条重要变化：从想法到可操作作品的距离正在缩短。同年秋季前后，Replit Agent、Bolt、Lovable 等产品也陆续把运行环境和应用配套接入进来。到 2025 年，“Vibe Coding”又为这种开发体验提供了一个传播很快的名字。

上一篇讲推理模型，本篇则回到与之并行的产品路线。这轮变化在 R1 发布前已经展开，需要把模型进步和开发工具的进步放在一起理解。

一段代码怎样变成眼前的作品

模型能够生成代码，只是第一步。让普通用户完成一个小项目，还需要把代码放进合适的文件，准备程序所依赖的软件，运行程序，并把结果展示出来。

这里的“依赖”，可以理解为程序使用的现成工具。比如，一个网页借助图表库画折线图，开发环境就需要取得这个库，并知道怎样加载它。代码写得正确，依赖没有准备好，网页仍然可能打不开。

2024 年前后的产品进展，发生在这些环节的连接处。

一方面，模型写代码、理解修改要求的能力继续改善。Claude 3.5 Sonnet 发布时，Anthropic 报告了编程与视觉理解方面的提升；这些能力有助于根据需求编写界面、结合图像理解设计意图。厂商评测不能保证所有项目都成功，但为这类产品提供了更好的基础。模型公告中的能力说明

另一方面，产品开始替用户承担更多衔接工作：展示作品、保留文件、执行程序、收集错误，再让模型继续修改。对于用户，开发可以变成“描述需求—看到结果—指出问题—再看结果”的连续过程。

这一过程还受成本和等待时间影响。做出一个满意的界面，可能需要反复修改十几次；每次都要让模型阅读已有内容并生成改动。前面讨论过的效率改善，让频繁迭代更有机会成为可接受的产品体验。不过，某款产品采用什么模型、怎样收费，需要分别核实，不能把整个行业的降价自动当成它的成本变化。

模型能力、运行工具和交互设计共同决定了门槛。只看模型排行榜，很难解释为什么某个时期突然出现一批“聊天做应用”的产品。

Artifacts 与 Canvas：作品成为持续编辑的对象

Artifacts 的意义，首先体现在作品与对话之间的关系。

普通聊天里，用户说“改一下”，模型可能又输出一整段代码。很快，聊天记录里就出现多个版本，用户还要判断究竟该复制哪一份。独立作品区域则让双方围绕一个可见对象迭代：讨论在一边，当前作品在另一边。

这也改变了沟通方式。一个人未必知道怎样描述某种布局，却能够在看到页面后说“这一块太挤”“结果应该放在输入框下面”。预览把抽象需求变成了可以讨论的具体东西。这个反馈过程本身，就能帮助用户逐步弄清自己想做什么。

2024 年 10 月 3 日，OpenAI 推出 Canvas 测试版，也把共同编辑的对象放进独立窗口。初期功能围绕写作和代码协作：选中局部内容提出修改、获得行内建议、直接编辑，以及恢复先前版本。它使用经过相关后训练的 GPT-4o，最初向 Plus 和 Team 用户推出。Canvas 发布公告

两者在这里解决了相近的问题：让 AI 参与持续创作。各自当时的功能边界仍有区别，不能把 Canvas 的编辑窗口理解为已经具备完整应用托管，也不能把早期 Artifacts 的网页预览理解为任意后端程序都能运行。

这种边界会直接影响项目。Willison 在 2024 年的记录中提到，涉及外部 API 的一些工具，需要把生成代码移到其他托管环境后继续完成。能在对话里生成相关代码，与能在对话产品的受限环境里执行，是两回事。当时对 Artifacts 运行限制的说明

v0 的前史：先把界面做出来

自然语言生成界面的路线，其实在 2023 年就已经有代表产品。

Vercel 在 2023 年 10 月 11 日宣布 v0 从 Alpha 转入 Beta；公告同时说明，更早几周就已推出初期版本。它当时的定位是 Generative UI，也就是生成式用户界面：用户描述页面，系统生成基于 React、Tailwind CSS、shadcn/ui 等工具的代码，用户继续挑选和修改，再把代码带进自己的应用。v0 当年的公告

这些名称暂时不需要记住。可以把 React 理解为组织交互界面的工具，把样式工具和组件库理解为已经准备好的排版、按钮、表单等材料。模型利用这些材料拼出界面，比完全从零设计每个部件更容易形成一致的结果。

这解释了为什么网页成为 AI 生成应用的重要入口。界面效果容易看见，常见页面结构具有可复用性，修改结果也容易立即比较。把一段模糊需求转成首页、列表和表单，可以迅速推动项目讨论。

但界面只是应用的一部分。用户看见并操作的部分通常叫“前端”；在服务器上处理请求、调用服务的部分通常叫“后端”；需要长期保留的记录往往放在数据库里。一个登录页面画得再完整，也还需要验证用户身份的实际机制。

早期 v0 的价值因此很清楚：帮助开发者跨过第一版界面的空白阶段。后来产品能力不断扩展，但回顾这段历史，应保留最初的具体突破，而不是用今天的功能列表覆盖当年的定位。

2024 年秋天，运行环境也开始进入对话

要让非专业开发者做得更远，下一道门槛是把应用跑起来。

2024 年 9 月，Replit 推出 Replit Agent。它把 AI 放进已有的在线开发平台，让 Agent 配置开发环境、安装依赖和执行代码，并支持从想法走向部署。当时官方仍明确把它称为早期访问的 Alpha 软件。Replit Agent 早期介绍

这里的“部署”，指把程序放到能够提供访问的环境中，让别人也能打开使用。Replit 这条路线的重要之处，在于模型已经有工具可以操作开发过程中的真实对象：文件、软件包和运行中的程序。用户不必自己转述每一步操作，但平台仍需要实际完成这些步骤。

同年 10 月，StackBlitz 在 ViteConf 推出 Bolt，把 AI 与 WebContainers 结合起来，让描述应用、生成代码和运行项目出现在同一套体验中。官方在当月的大会回顾中确认了这次发布。ViteConf 2024 回顾

WebContainers 是理解 Bolt 的关键。StackBlitz 早在 2021 年就介绍过这项技术：让 Node.js 开发环境在浏览器内部运行，包含终端和安装软件包等能力。Node.js 是运行 JavaScript 程序的一种环境。借助这类基础设施，网页开发工具能够把运行和预览直接放到浏览器里。WebContainers 原始介绍

这并不意味着大模型也在用户浏览器里运行。模型生成代码、开发环境执行代码、发布后的应用处理访问，可能分别发生在不同位置。浏览器内的运行环境也有支持范围，不能把它理解为可以执行所有语言和所有系统程序的通用电脑。

Replit 与 Bolt 展示了不同的技术路径，却都在减少同一种阻力：生成出来的代码，不再完全依赖用户手工搬运到另一个工具才能验证。代码出错后，错误信息也有机会更直接地回到修改过程里。

这一点还说明，2024 年的应用生成产品已经包含 Agent 式行动。后面把 2025 年单列为 Coding Agent 的重要阶段，是为了讨论那一轮集中发展，并非说此前没有能执行代码的 Agent。

Lovable：把数据库与用户系统接到作品后面

当用户开始要求“保存记录”“让朋友注册使用”，产品就必须处理界面背后的问题。

Lovable 的来路很有代表性。团队先在 2023 年推出开源命令行项目 gpt-engineer，随后提供面向更广泛用户的商业 Web 产品 gptengineer.app，之后将其更名为 Lovable。开源项目与商业平台存在历史联系，但不是同一个交付物。团队对产品沿革的说明

到 2024 年末，官方介绍 Lovable 时，已经把 Supabase 集成作为构建完整应用的重要部分。Supabase 提供数据库、身份认证等后端服务，帮助应用保存数据和识别用户。2025 年 2 月 10 日，Lovable 又发布这一集成的 2.0 版本，改进日志读取、登录流程和数据访问规则的处理。2024 年末产品介绍、Supabase 集成 2.0

这些细节比一句“可以生成完整应用”更能说明进展。页面上的按钮，开始有机会接到实际的数据操作；用户填写的内容，可以进入数据库；不同用户能拥有各自的记录。前端、后端和数据层一起工作，通常就被称为“全栈”应用。

配套服务并没有让工程问题消失。比如，某条学习记录属于谁，谁有权读取或修改，必须落实到实际访问规则里。登录成功只能证明系统识别了用户，不能自动证明它正确限制了这个用户可以读取的数据。

从 v0 的界面生成，到集成运行环境，再到连接数据库与用户系统，可以看出产品努力补齐的链条。它们的能力会交叉和演进，历史上的主要切入点却不相同。

2025 年，“Vibe Coding”给体验起了名字

2025 年 2 月，Andrej Karpathy 用“Vibe Coding”描述一种很放松的开发方式：通过 Cursor Composer 和语音输入表达要求，接受生成的改动，遇到错误再把信息交给模型，较少阅读代码。他讨论的场景包括周末随手做的小项目。原始帖文、帖文中所用语音工具保留的原文

这个名字抓住了此前已经出现的体验：开发者的注意力可以长时间停留在需求与结果上，而不必亲手输入每一行代码。对很多小项目来说，第一版因此变得值得尝试。

它也迅速引发了含义上的讨论。Simon Willison 在 2025 年 3 月专门指出，不应把所有 AI 辅助编程都称为 Vibe Coding；如果开发者仍然审阅、理解和测试代码，那属于另一种更有控制的使用方式。当时关于术语的讨论

所以，阅读这一阶段的新闻，需要留意作者使用的是哪种含义：一种是更广义的“通过自然语言开发”，另一种更接近最初那种不太关注代码细节的尝试方式。本教程讨论前者怎样降低门槛，同时保留后者带来的提醒：快速做出结果之后，仍需要知道结果是否符合要求。

Vibe Coding 也不是一种特定模型、软件或编程语言。AI 编辑器可以提供这种体验，浏览器里的应用生成平台也可以。它为一组正在形成的工作方式起了名字，没有凭空创造此前不存在的全部能力。

用复习助手看清：AI 写应用，和应用里有 AI

下面用一个教学构造的例子，把这些产品变化放进同一个项目。它不是对某款工具实际运行结果的记录。

假设你要做一个复习助手：输入笔记，生成题目，答题后记录错题。

第一版可以很简单：页面里先放五道示例题，用户点选答案，系统计算分数。AI 可以帮你写出这个程序，程序运行时却完全不必再次调用大模型。判断选项、累加分数，都可以由普通代码完成。

这一版已经能验证重要问题：用户看不看得懂题目，答题流程是否顺畅，错题应该怎样呈现。它是有价值的原型，能够帮助你决定要不要继续投入。

如果接下来要求“根据每次输入的不同笔记自动出题”，情况就变了。应用需要在使用过程中调用模型，把笔记作为输入，取得题目，再检查题目格式并显示。这时，应用的运行成本、响应等待和失败处理都要纳入设计。

2025 年 6 月 25 日，Anthropic 为 Artifacts 推出内嵌 AI 能力的测试功能，官方正是用类似区别说明变化：从生成某个主题的一套学习卡片，走向让使用者选择主题、动态生成卡片的应用。这是后来的新增能力，不能算作 2024 年初期预览就具备的功能。AI-powered Artifacts 公告

再往前一步，朋友希望下周还能看到自己的错题，项目就需要长期保存记录。若要跨设备使用，通常需要服务端存储和用户身份；若只是自己在一台设备上练习，本地保存也可能足够。项目需要什么基础设施，要由具体用途决定。

这里有两条独立的成本线：一条是开发时让 AI 生成和修改代码的费用；另一条是应用发布后，托管、数据库以及运行时模型调用的费用。平台可能把部分费用合并到套餐里，但“已经付了开发工具订阅”不能代替对实际运行用量的了解。

对于面向他人的应用，调用模型所需的服务端密钥也应由可信后端保管，不能直接写进发给所有访问者的网页代码。这是把原型接到真实服务时，需要理解的具体工程边界。

原型与交付之间，隔着可核对的结果

当一个页面已经很好看时，人很容易把它当成已经完成的软件。真正的差距常常藏在再次使用和条件变化时。

仍以复习助手为例，可以用几件具体事情判断当前成果走到了哪里：

• 把笔记换成全新内容，题目是否随之变化，还是一直显示写死的示例题？
• 答完题后关闭页面再打开，承诺保存的错题是否还在？
• 用两个不同账号查看记录，各自是否只能取得自己有权访问的内容？
• 模型请求失败时，页面是否给出可理解的提示，而不是一直显示“生成中”？

这些检查要对应你实际承诺的功能。一个只在本机运行的计算器，不必为了显得完整而加上账户系统；一个供多个人长期使用的学习服务，则不能只靠首页截图证明完成。

如果出现问题，也要逐渐学会定位它所在的环节。刷新后数据丢失，先看记录保存在哪里；页面始终显示旧题，先看按钮是否真正触发了请求；用户能读取别人的记录，先检查数据访问规则。这样的判断能让反馈从“帮我修好”变成可验证的要求。

修改过程中，版本记录同样有用：保留上一次已经验证可用的状态，每次围绕一个明确问题改动，再重复相关检查。即使代码主要由 AI 生成，你仍然可以掌握项目在做什么、哪里已经确认、哪里尚未确认。

2024—2025 年这批产品带来的历史变化，是让更多人有机会先做出作品，再通过作品理解软件。一个原本不值得专门开发的小工具，可能因此变成可行项目；一个停留在文字里的想法，也更容易拿给真实用户尝试。

当项目继续长大，需求会从“帮我生成第一版”变成“理解已有项目，修改正确的位置，执行程序，并验证没有破坏原来的功能”。下一篇将转向 Coding Agent，讨论这套工作方式怎样在 2025 年进一步发展，以及 Claude Code、Codex 等产品把开发循环推进到了哪里。

---

上一篇：12｜2024 年末—2025 年初：投入更多计算求解，推理模型带来变化

下一篇：14｜2025：从修改代码到执行和验证，Coding Agent 发展起来

返回：第 0 部分大纲