A16Z：从提示到产品-AI驱动的Web应用构建工具的崛起

本文链接：https://blog.csdn.net/hfahe/article/details/145606076

原文地址：From Prompt to Product: The Rise of AI-Powered Web App Builders | Andreessen Horowitz

作者：

Justine Moore（A16Z合伙人，专注于AI）、Yoko Li（A16Z合伙人，负责企业和基础设施）、Gabriel Vasquez（A16Z合伙人，专注金融科技投资）、Marco Mascorro（A16Z基础设施团队合伙人，负责AI、基础设施、开源和自动化）和Bryan Kim（A16Z合伙人，专注于消费技术和AI应用投资）

译者：蒋宇捷信天创投管理合伙人专注AI应用的孵化和投资

当前格局
工作原理
为什么这些产品现在会大受欢迎？
用户如何选择使用哪种工具？
它们有用吗？
人们用这些工具构建什么？
接下来会发生什么？
长期展望

在过去的几个月里，成千上万的开发者使用Bolt、Lovable和v0等工具创建了网站和Web应用。这些成果在X、Reddit和YouTube上分享，看起来简直就是魔法：人们无需编码即可构建交互式、动态产品，甚至还能产生收入。

Ammaar Reshi：刚刚使用Gemini 2.0和Grounding构建了一个Perplexity的克隆版，最不可思议的是Replit的Agent在两小时内就写出了所有代码！

r/boltnewbuilders：最近我制作Canva演示文稿时，发现他们生成渐变的方法让我很失望。所以，我用Bolt创建了自己的自定义工具。仅仅输入几个指令后，我在五分钟内就得到了一个功能完备的产品！

人们仅通过与聊天机器人对话，就能创建功能完备的产品，这一能力已经引起了技术和普通用户的注意，推动了这一领域初创企业的显著增长。根据公开数据，Bolt的年化收入达到了2000万美元，而Lovable在开始盈利仅2个月之后，收入就增长到了1000万美元。

一种基于大语言模型的新应用栈正在兴起。在出现网站生成解决方案之前，如果你问一个技术人员“你的技术栈是什么？”，他们的回答会是一系列的库。但是，这种新的通过文本创建应用程序的方式引入了一个新的抽象层次。不常编码的用户不再依赖库，而是使用一套基于像素的设计生成、图像生成、网站生成和托管工具。对于这个快速增长的用户群体来说，新的抽象层是像素和自然语言，而对于开发者来说则是SDK和框架。

开发者们用哪些产品借助人工智能创建网站和网页应用？主要的用例有哪些，它们吸引了哪些类型的用户？下面，我们将深入探讨这些产品的工作原理、技术局限以及即将推出的功能。

当前格局

注意：此市场地图仅限于专注于将文本转化为Web应用或网站的公司，包含网站生成、Web应用生成、支持代码导出的Web应用这几类。下面我们将介绍更广泛的辅助产品—如基于IDE的代码生成和编辑、设计迭代等产品。

这里有两个核心产品区别：

静态网站与应用程序生成：我们将静态网站定义为主要用于传达信息并具有基本交互性（例如提交联系表单或预约）的网页。应用程序更加动态—用户可以执行更复杂的操作。静态网站更容易生成，并且可以基于模板创建。动态应用程序更具状态性，这类应用需要数据库和身份验证系统等第三方工具来支持CRM、表单提交和用户登录等用例。可以想想小型实体店的网站（你或许能够查看信息并预约咨询）和像YouTube这样的网络应用（你可以点赞、评论甚至上传自己的内容）之间的区别。
是否支持代码导出：所有生成Web应用的产品以及部分生成网站的产品都会生成代码。但有些允许你导出代码到其它应用程序中进行编辑，而另一些则不提供，而是要求你通过以下两种方式之一进行部署：（1）通过他们的平台;或（2）通过集成合作伙伴。对于开发人员来说，能够下载、查看和编辑代码很重要。大多数开发者不会直接发布在Web应用构建工具中生成的产品，而会在自己的IDE中进行构建或编辑。而对于非技术用户，导出代码的能力可能没那么重要。

工作原理

使用大语言模型生成网站涉及许多要素。此类产品大多遵循类似（高度简化）的架构图：

从核心来看，大语言模型根据用户在用户界面中的输入生成代码示例。然后，生成的代码会通过中间件逻辑进行处理，该逻辑会跟踪文件、代码更改和第三方API调用。这通常是一个长时间运行的系统过程，我们已经看到像Inngest这样的智能体运行时被用作技术栈的一部分。

这个系统中最关键的部分之一是第三方组件调用。就像人类开发者一样，编码智能体需要利用现有的封装库来发送电子邮件、在数据库中存储有状态数据、缓存数据或添加身份验证组件。但与人类开发者不同，编码智能体不是通过查阅文档来发现新组件，而是通过llms.txt来探索使用工具的方法。

为什么这些产品现在会大受欢迎？

基于大量高质量编码和推理数据训练的模型使生成可执行代码成为可能。鉴于JavaScript和TypeScript在Web开发中的广泛使用，它们在公开可用的应用程序代码中占据主导地位。因此，模型特别适合生成Web应用代码。

Web框架的成熟也使智能体能够更快地创建新元素。浏览器运行时是网站生成产品天然的轻量级“环境”，而不是需要在服务之间进行更多计算和状态管理的重型分布式应用程序。在过去几年，应用程序的业务逻辑也更多的转移到客户端，这使得在浏览器中运行所有内容变得更加容易。

因此，渲染和测试生成的应用程序变得更加容易。例如，一个基于Vite和React的应用程序可以实时生成并展示给终端用户。在许多方面，网站生成工具已经演变成动态的、不确定性较低的脚手架工具，它们始终如一地提供意想不到但有用的结果，帮助用户更接近他们想要的应用程序。

最后，Resend、Clerk、Supabase、Upstash等公司开发的优秀库和SDK现在可以满足长尾集成需求。让大语言模型从头生成一个身份验证系统或电子邮件发送API时，错误率很高。然而，如果将任务重新定义为选择和集成现有库，而不是从头开始构建所有内容，解决方案会变得更快、更可靠。

用户如何选择使用哪种工具？

我们浏览了数千篇关于文本生成Web应用工具的帖子，并与数十位用户进行了交流，他们既有技术精湛的开发人员，也有普通用户。

我们制作了一个简单的流程图来说明我们的发现—从用户希望从哪里开始的问题开始。

如果你是想从代码开始的技术用户，可能会选择像Cursor或Windsurf等AI驱动的代码生成和编辑工具。但是，如果你想从文本指令开始，可能会探索另一组用于网站或Web应用生成的工具。

值得一提的是，这张图表包括一类我们没有深入探讨的产品：以设计为优先的UI生成器。Bolt和Lovable等工具允许你通过迭代文本指令来编辑设计，但不像Relume或Uizard那样支持对元素进行精细控制（比如移动元素）。

最后，许多技术用户最终会组合使用这些产品。他们可能会先在Lovable等产品中生成一个基本的Web应用，将代码导出到Cursor，然后从更面向设计的工具（如21st）添加组件。或者，他们可能从Magic Patterns等设计产品开始，然后将代码移动到Bolt等工具中（示例见此) 。

它们有用吗？

对于以前由于缺乏编码技能而无法开发应用程序的用户来说，这些产品感觉就像魔法一样。技术用户则喜欢这些产品能让他们快速上手，并将数小时的开发时间简化为几个简单指令的能力。

人们对这些产品赞不绝口的情况并不罕见：

Aarthi Ramamurthy：又一天，直接通过代码（无需草图/Figma设计稿）构建另一个应用程序，这次使用的是@boltdotnew。大约一个小时就完成了（相当复杂的）前端70%的构建。真是疯狂的时代。

Hank Taylor：你可以直接动手做事情，这让我大为震惊。我完全通过指令制作了一个应用程序。最后一个指令是“部署这个应用程序”，我所做的最具技术含量的事情就是配置DNS记录，哈哈。

Nour：上周末我使用@lovable dev和@supabase构建了我梦想中的网页应用！Lovable的人工智能驱动开发加上Supabase的内置身份验证、数据库和存储功能，完美组合。过去需要几周时间的工作，现在几个小时就完成了。这两个工具之间的无缝集成简直太神奇了！

Jaime Edid IV：Bolt.New是我最近见过的最疯狂的东西之一！我一直想开发一款游戏（但我不是程序员），昨天，仅仅用了几个小时，在想象力和指令的帮助下，我就做出了几款有趣的游戏。

Rota：刚刚体验了新的Replit人工智能应用创建器，说实话，简直难以置信。我用了大约10分钟就制作了一个包含我想要的所有独特内容（大多数人可能并不在意这些）的Anki记忆卡片组。这将赋予技术水平较低的人更多创造力。

ashish：刚刚签下了我的第一个客户，为其构建最小可行产品（MVP）（不过客户希望我构建完整的网页应用，而不仅仅是MVP！）。感谢@supabase和@lovable_dev，公开使用这些工具进行开发是我做过的最正确的决定，是时候开始努力工作了。

Aleks：我需要去除一张图片的背景，试了几个工具，要么效果不够好，要么要求我登录，所以我决定用@v0自己做一个。我收回之前的话，这个工作流程感觉真的很不错。

matt palmer：收到前棒球队队友在Facebook上的消息。他完全不懂技术，正在Replit上为他的私人教练业务构建一个应用程序。

Nate：@v0真的太厉害了，它基本上能在15分钟内一次性创建出一个推特克隆版应用，包括小的用户界面更改、添加虚拟数据、设置Prisma。

然而，目前这些工具能够可靠地生成的内容是有限的，这类似于与一个懂基础知识，但在项目变得复杂时容易陷入bug“死循环”的初级开发者合作。

像在网站顶部上传一张照片这样简单的事情，可能完美运行，也可能引发一连串错误，让你花45分钟去调试。这些产品的优点是你可以指出错误并要求生成修复方案，但这可能需要一些时间，而且需要尝试多种方法！

为什么调试网站生成智能体很困难呢？首先，找到要调试的正确代码是一个推理和搜索问题：如何定位正确的业务逻辑代码段，需要智能体实现找到正确的文件或代码行进行调试。但这并不总是能确定地实现，尤其是当通过模型加载了很长的上下文时。

调试困难的另一个原因是代码有深度依赖关系。系统中某一部分的更改可能会在多个层面上产生不可预测的连锁反应，当这些依赖关系引入异步执行、竞态条件或其他副作用时，调试（尤其是对大语言模型智能体来说）会变得更加困难。

一些常见的问题包括：

集成很困难。特别是对于非技术用户，添加数据库、身份验证和支付等元素可能会带来重大问题。。从在其他服务（如Stripe、Supabase）上注册账户，到正确插入API密钥，再到排查错误，有很多可能出错的地方，尤其是当对方的流程或文档发生变化时。
错误持续存在。陷入令人沮丧的、无休止的bug循环并不罕见，尤其是当欢快的人工智能助手反复告诉你错误已解决（而显然并没有）的时候。为了摆脱这个“死循环”，这些工具有时需要关于如何解决问题的额外指导，或者你只能让它们从头开始。
代码对于产品来说可能会变得“太大”。当你生成了大量代码，开始超出产品的管理能力时，通常会发生错误。有时，产品会直接告诉你项目太大——但它可能只是开始降低性能，甚至以不符合你预期的方式删除/重写代码。

因此，我们发现这些工具主要用于大幅降低原型设计的成本——这在当下是一个巨大的痛点。在与客户的对话中，我们发现许多人都在试用这些产品，但如果他们计划向大量用户推出网站并实现收入，就不会完全依赖这些工具。很难依靠这些工具一直100%的正常工作，而且通常很难以可预测的方式迭代你创建的内容。一个看似简单的更改可能会在代码库中的其他位置触发难以调试的问题。

然而，与AI生成内容的其他模态（例如图片、视频、音乐）一样，我们预计会看到一个快速的改进曲线。这些工具的功能仍然令人印象深刻，而且每天都在进步。随着它们的成熟，我们预计这些工具将在价值链条上向上攀升。我们也期待看到一种新的、针对这个领域独特挑战的人工智能原生调试流程出现。

人们用这些工具构建什么？

当我们仔细研究人们如何利用这些工具时，发现基于用户背景有不同用例。他们通常分为三类：1）消费者，2）开发人员（新手和有经验的），以及3）顾问。

消费者

日常消费者第一次能够构建真正的交互式Web应用程序，而不仅仅是登录页面或基于模板的系统。我们看到，那些以往需要编码能力才能实现的事情，现在消费者们热情高涨地参与其中。他们构建的应用程序种类繁多，高度个性化，满足特定的兴趣和需求。目前，这些产品通常相对简单，不需要用户认证或支付功能，主要用于娱乐、自我满足或基本实用功能。

几个例子：

一位父亲使用Bolt构建了一个睡前故事生成器，可以根据孩子的信息（例如姓名和年龄）和兴趣编写自定义故事。

一位v0用户构建了自己的个人财务跟踪器，用于分析支出数据并提供见解。

一位设计师使用Replit制作了一个Flappy Bird和青蛙过河玩法的游戏，可以iPhone上玩。

开发者（新手和有经验的）

对于开发者或与开发相关的用户来说，网站生成工具就像是比以往强大10倍的新型脚手架。现在，他们无需运行npx create-react-app命令，而是可以生成自己的定制起始模板，大大降低了编辑代码的门槛。网站生成工具就像图像生成工具简化了艺术家的创作过程一样，解决了开发者面对“空白画布”的难题。

几个例子：

一位用户使用Bolt构建了一款免费的数独游戏。

一位初创公司创始人在v0中为产品创建了专业级音频计；

有人用Bolt构建了一个在浏览器中测试和调试Three.js作品的工具。

顾问/外包机构

在消费者和开发人员之间有一类有趣的用户：顾问/外包机构。这些人通常不是工程师，而是受雇为企业创建网站或Web应用程序，通常是个体创业者和中小企业。

想象一下受雇为你当地的餐馆或税务会计师制作网站的人。在生成式AI之前，他们可能使用像Squarespace或Wix等无代码工具。现在，他们中的一些人正在探索文本生成Web应用工具，以（1）更快地进行原型设计和迭代，并（2）承担更复杂的项目。

虽然大多数顾问不会公开分享他们的作品和使用的工具——但他们可能创建的应用包括：

用Bolt为一家赫尔辛基餐厅构建网站。

用Replit Agent构建的电子商务商店。

利用v0和cursor_ai为拉各斯一家咖啡店创建网站+商店。

接下来会发生什么？

在这个快速发展的领域，我们几乎每天都在见证进步，各团队夜以继日地工作，以实现下一个突破。它可能会在这些方面发展：

针对不同用户群体的差异化产品：目前，这个领域的大多数产品试图“通吃”，服务于从技术精湛的开发者到普通消费者的所有用户。然而，我们认为理想的产品可能因用户群体甚至具体用例而异。例如，最适合消费者的文本生成网页应用工具可能会以移动端优先，设置诸多“限制规则”，并优先与Instagram和Shopify等平台集成。而面向开发者的最佳工具则会大不相同！
开拓高端市场新领域：我们已经看到技术水平较低的用户为企业内部使用生成自己的生产力工具。这些工具通常在公司防火墙内下载和部署，公众很少能看到。鉴于这些工具用于工作场景，网站生成平台有机会添加更多企业级功能，进军高端市场。这很可能与现有的低代码内部工具市场产生交集。
与常见合作伙伴的集成套件：我们听到的最常见抱怨之一就是添加集成很困难。如果你想构建供他人使用的应用，这一点尤为重要。你可能需要接受支付、创建用户登录功能、在数据库中保存信息或从其他网站提取内容。我们预计会看到产品与客户常用的工具构建“一键式”集成，实现真正的无缝衔接，而不是让用户注册多个服务、获取API密钥并研读文档。此外，还会出现针对特定组件的生成工具，或是供智能体在生成应用时使用的必备工具，比如Resend为v0开发的电子邮件生成工具。
像素级设计控制。这些产品通常都有默认的设计和美学风格。你可以通过输入指令进行编辑，但与Figma等产品相比，几乎没有精细的控制权，这对于注重设计的消费者或企业来说是个问题。我们期待看到这些产品为有需求的用户提供更精细的设计编辑功能，并将这些更改转换回代码。
定价透明化与指导。该领域的大多数产品都采用某种基于使用量的定价模式，即你每月支付订阅费用，但仅包含一定数量的Token（或积分）。如果你需要更多，就必须购买或升级套餐。但用户在开始使用时并不知道会消耗多少令牌，这使得估算构建网站的成本变得困难。此外，用户对浪费Token的情况也深感不满，甚至催生了一些课程和内容创作者，专门帮助新用户学习“有效使用Token”的方法。我们预计相关公司可以将这些功能整合到产品内部，更好地引导用户学习如何高效输入指令。