a16z：从Prompt到Product，AI驱动的网页应用搭建工具正在兴起

图片来源：a16z

Z Highlights

• 从本质上讲，LLM会根据用户从UI的输入生成代码示例。然后，生成的代码会通过中间件逻辑进行处理，根据逻辑跟踪文件、代码更改和第三方API调用。

• 在大量高质量编码和推理数据上训练模型，使得模型生成可执行代码成为可能。

• 他们可能会首先在像Lovable这样的产品中生成一个基本的Web应用程序，将代码导出到Cursor，然后从一个更面向设计的工具中添加组件。

本文为A16Z发布的AI构建网页应用的相关报告，梳理了开发者们正在使用哪些产品来通过AI创建网站和Web应用程序？它们的主要用在什么领域，又吸引了哪些类型的用户？

在过去的几个月里，成千上万的开发者使用Bolt、Lovable和v0等工具创建了网站和Web应用程序。他们在X、Reddit和YouTube上分享的成果堪称奇迹：人们无需编码就能构建交互式、动态的产品，甚至还能创造收入。

图片来源：a16z

通过与机器人聊天就能创建功能性产品的能力，吸引了技术和非技术用户的关注，并推动了该领域初创公司的显著增长。

根据公开的指标，Bolt的收入运行率达到了2000万美元，而Lovable在开始商业化仅仅两个月后就增长到了1000万美元。

一个全新的、基于LLM的应用栈正在兴起。在网站生成解决方案出现之前，如果你问一个技术人员“你的技术栈是什么？”，他们的回答会是一系列库的名称。

但这种新的应用创建形式——通过文本引入一个新的抽象层。不经常编写代码的用户会使用一套基于像素的设计生成、图像生成、网站生成和托管工具，

而不是各种库。对于这个快速增长的用户群体来说，新的抽象是像素和自然语言，而对于开发者来说则是SDK和框架。

开发者们正在使用哪些产品来通过AI创建网站和Web应用程序？它们的主要用在什么领域，又吸引了哪些类型的用户？下面，我们将深入探讨这些产品的工作原理、

它们的技术局限性以及未来的发展方向。

当前text-to-web软件和网站生成器的局势

图片来源：a16z

上图为市场上提供text-to-web应用的公司。此外，还有更广泛的辅助产品范围 —— 用于基于集成开发环境的代码生成和编辑、设计迭代等工具我们将在下面提及。

这里有两个核心的产品差异：

1.静态网站与应用程序生成：我们将静态网站定义为主要用于传达信息并具有基本交互性（例如提交联系表单或预约）的网页。应用程序则更具动态性——用户可以

执行更复杂的操作。静态网站更容易生成，并且可以基于模板。动态应用程序则具有更多的状态，这种类型的应用程序需要第三方工具（如数据库和身份验证系统）

来支持诸如CRM、表单提交和用户登录等用例。可以这样理解两者的区别：一个是小型实体企业的网站（你可能可以查看信息并安排咨询），另一个是像YouTube

这样的Web应用程序（你可以点赞、评论，甚至上传你自己的内容）。

2.准许代码导出：所有生成Web应用程序的产品，以及一些生成网站的产品，都在创建代码。但有些产品允许你导出这些代码并在其他应用程序中进行编辑，

而另一些产品则不公开代码，而是要求你进行以下两种部署之一：（1）通过它们的平台；（2）通过集成合作伙伴。

对于开发者来说，下载、查看和编辑代码的能力非常重要。

大多数开发者都不会直接发布他们在文本到Web应用程序生成器中生成的产品，而是在他们的IDE中进行构建或编辑。

对于非技术用户来说，导出代码的能力可能不那么重要。

text-to-web产品是如何工作的

在使用LLM生成网站时涉及许多元素，这个类型中的大多数产品都遵循类似的（高度简化的）架构：

图片来源：a16z

从本质上讲，LLM会根据用户从UI的输入生成代码示例。然后，生成的代码会通过中间件逻辑进行处理，根据逻辑跟踪文件、代码更改和第三方API调用。

这通常是一个长时间运行的系统进程——我们已经看到像Inngest这样的Agent运行时被采用为技术栈的一部分。

这个系统最关键的部分之一是第三方组件调用。就像人类开发者一样，编码Agent需要利用现有的打包库来发送电子邮件、

在数据库中存储状态数据、缓存数据或添加身份验证组件。但与人类查阅文档来发现新组件不同，编码Agent会参考llms.txt来发现使用工具的方法。

为什么这些产品现在突然流行起来？

主要原因是在大量高质量编码和推理数据上训练模型，使得模型生成可执行代码成为可能。鉴于JavaScript和TypeScript在Web开发中的广泛使用，

它们在公开可用的应用程序代码分布中占主导地位。因此，模型特别擅长为Web生成应用程序代码。

Web框架的成熟也使得Agent能够更快地创建新元素。与需要更多计算和服务之间状态管理的重型分布式应用程序相比，

浏览器运行时是网站生成产品的天然轻量级“环境”。在过去几年中，应用程序的业务逻辑也进一步转移到客户端，使得在浏览器中运行一切变得更加容易。

因此，渲染和测试生成的应用程序变得非常容易。例如，可以实时生成一个Vite + React应用程序并显示给最终用户。在许多方面，网站生成器已经演变成动态的、

不确定性更小的脚手架，它们持续提供意想不到但有用的结果，帮助用户更接近他们想要的应用程序。

最近，来自Resend、Clerk、Supabase、Upstash等公司的库和SDK现在支持长尾集成需求。

如果要求LLM从头开始生成身份验证系统或电子邮件发送API，错误率会很高。

但是，如果我们将任务重新定义为选择和集成现有库，而不是从头开始构建所有内容，那么解决方案就会变得更快、更可靠。

用户如何决定使用哪些工具？

我们搜集了数千篇关于文本到Web应用程序工具的帖子，并与数十位客户进行了交谈，他们包括技术水平很高的开发者和普通消费者。

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

图片来源：a16z

如果你是一位技术用户，并且希望从代码开始，你可能会直接使用AI驱动的代码生成和编辑工具，如Cursor或Windsurf。

但如果你想从文本提示开始，你可能会探索另一组用于网站或Web应用程序生成的工具。

值得一提的是，这张图包含了一类我们没有深入探讨的产品：设计优先的UI生成器。

像Bolt和Lovable这样的工具允许你通过迭代的文本提示来编辑设计，但不像Relume或Uizard那样支持细粒度的控制（可以精确到移动元素）。

最后，许多技术用户最终会结合使用这些产品。他们可能会首先在像Lovable这样的产品中生成一个基本的Web应用程序，将代码导出到Cursor，

然后从一个更面向设计的工具中添加组件。或者，他们可能会从像Magic Patterns这样的设计产品开始，然后将代码移动到像Bolt这样的工具中。

它们起作用吗？

对于那些因为缺乏编码技能而从未能够部署应用程序的用户来说，这些产品可能会让他们感觉像魔法一样。

技术用户则欣赏能够快速上手并将数小时的开发时间简化为几个简单提示的能力。人们对这些产品赞不绝口是很常见的：

图片来源：a16z

然而，它们目前能够可靠生成的内容是有限的——这类似于与一位初级开发人员合作，他了解基础知识，但很容易陷入错误的“厄运循环”，

尤其是在项目变得更加复杂或庞大时。

一些简单的事情，比如上传一张照片作为网站的顶部，可能会完美运行，但也可能触发一系列错误，需要你花费45分钟来调试。

这些产品的优点在于你可以指出错误并要求生成修复，但这可能需要一段时间并需要多种方法！

图片来源：a16z

为什么对于网站生成Agent来说，调试很困难？首先，找到正确的代码进行调试是一个推理和搜索问题：如何定位正确的业务逻辑片段需要Agent实现来图片来源：

a16z定位正确的文件/代码行进行调试。这并不总是确定性地发生，特别是当一个很长的上下文通过模型完全加载时。

调试困难的另一个原因是代码具有很深的依赖关系。系统某一部分的更改可能会以不可预测的方式跨多个层级联，

而当这些依赖关系引入异步执行、竞争条件或其他副作用时，调试（尤其是对于LLM Agent）会变得更加困难。

以下是一些常见的问题：

图片来源：a16z

1. 集成难度大：特别是对于非技术用户，添加数据库、身份验证和支付等元素可能会导致重大问题。

存在许多潜在的故障点——从在另一个服务（例如Stripe、Supabase）上设置帐户，到正确插入API密钥，再到故障排除，

特别是当另一方的流程或文档发生更改时。

2.Bug的持续存在：陷入令人沮丧的、永无止境的Bug循环的情况并不少见——尤其是当一个AI助手反复告诉你错误已解决（而实际上并没有）时。

为了摆脱这种“厄运循环”，这些工具有时需要关于如何解决问题的额外指导，或者你干脆指示它们从头开始。

图片来源：a16z

3.产品代码堆积成山：当你生成了大量代码，开始超出产品的管理能力时，通常会发生错误。

有时产品会直接告诉你项目变得太大了——但也可能只是开始降低性能，甚至以不符合你目标的方式删除或者重写代码。

因此，我们发现这些工具主要用于显著降低原型设计的成本——这是当今的一个巨大痛点。

在我们与客户的对话中，我们发现许多人正在测试这些产品，但如果他们计划向大量受众发布网站和或将其商业化，他们并不会完全转向这些工具。

很难依赖这些工具100%的时间都能正常工作，而且通常很难以可预测的方式迭代你所创建的内容。

一个看似简单的更改可能会在代码库的其他地方触发一个难以调试的问题。

然而，与其他AI生成内容（例如图像、视频、音乐）的模式一样，我们预计会出现一条陡峭的改进曲线。这些功能仍然令人印象深刻，并且每天都在改进。

我们预计这些工具随着成熟度的提高将在价值链中向上移动。我们很高兴看到一种新的AI原生调试流程出现，以应对这一领域的独特挑战。

人们正在用text-to-web的应用工具制作什么？

当我们仔细研究人们如何利用这些工具时，我们根据用户的背景发现了不同的用例。

它们通常分为三类：1）消费者， 2）开发者（包括新手和有经验的开发者） ，3）外包。

消费者

普通消费者第一次能够构建真正的交互式Web应用程序——而不仅仅是登录页面或基于模板的系统。

我们看到那些终于可以制作出以前需要编码能力的东西的人们对此充满热情。他们在构建什么？

我们看到了一系列高度个性化的应用程序，可以满足用户的特定兴趣和需求。

如今，这些产品通常相对简单——它们不需要用户身份验证或支付之类的东西——主要用例是娱乐、满足感或基本实用工具。

几个例子：

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

2nd app with https://t.co/WyTgsP1bDb: Bedtime Story Creator – Because creativity is hard at 9 PM.

Let’s be real—after a long day, the last thing your tired brain wants to do is create an imaginative, original bedtime story for your kid. That’s where Bedtime Story

Creator saves… pic.twitter.com/jdGbAW4UPw

— Daniel Brugger (@_DBrugger) January 12, 2025

一个新手用户创建了她自己的个人财务跟踪器，这个跟踪器能够接收关于她支出的数据并呈现出见解。

wip : personal finance dashboard, “cashflo” ⋆✴︎˚｡⋆

didn’t find a finance tracker i liked last night, decided to try building my own! tinkering w/ @v0 @shadcn @nextjs pic.twitter.com/GewzFBAxMW

— floguo (@floguo) January 14, 2025

一位设计师使用 Replit 制作了一个《飞扬的小鸟》与《青蛙过河》的混合游戏，以便在他的 iPhone 上游玩。

3 sloppy prompts built me this knights adventure side scroller game with fully editable code and files and I can host it at the click of a button.

�� well done @Replit Agents pic.twitter.com/HDSe3GREpR

— Martin (designconquest.com) (@Mar_Vel_) September 6, 2024

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

有各种各样的开发者——从在工作中编写代码的人到对技术概念有高层次理解的用户。

我们发现，对于开发者或与开发者相关的受众，网站生成器被视为一种好10倍的新型脚手架。

现在，这个群体可以通过生成他们自己的定制启动模板来走得更远，这使得编辑代码的门槛比以前低得多，而不是运行npx create-react-app。

正如图像生成器简化了艺术家的创作过程一样，网站生成器也为开发者解决了“空白画布”问题。

几个例子：

一位希望免费玩数独游戏的用户使用Bolt构建的数独游戏。

I got sick of suffering through apps with in app-purchases and websites covered in ads and trackers, all to play a simple game of sudoku. So I got AI to code me

my own with https://t.co/s40gEMoBEV @stackblitz

Play it for free here:https://t.co/6XCGl1SKYq pic.twitter.com/0xgqheluAf

— imOliver (@imolivercom) January 16, 2025

一位初创公司创始人在初始版本的vercel 中为他们的产品创造一款专业级音频仪表。

We used @vercel v0 to ship professional grade audio meters for @sequence_film in a week. Here’s how we went from design to prototype to production build

pic.twitter.com/lHyn3MkJsx

— Luke McGartland (@lucasmcgartland) January 15, 2025

这是一个用 Bolt 构建的、在浏览器中用于测试和调试 Three.js 创作成果的工具。

Love seeing this! Check out the thing I built using @boltdotnew https://t.co/Vohx2Loqek �� https://t.co/kkx2Dh0GnN

— I▲N CURTIS (@XRarchitect) January 24, 2025

外包

在消费者和开发者之间有一个有趣的类别：外包。

这些人通常不是工程师，但被雇来为企业（通常是自由职业者和中小型企业）创建网站或Web应用程序。

想象一下被雇来为你当地的餐馆或税务会计师制作网站的人。

在生成式AI出现之前，他们可能使用的是像Squarespace或Wix这样的无代码工具。

现在，他们中的一些人正在探索文本到Web应用程序工具，作为更快地进行原型设计和迭代，以及承担更复杂项目的一种方式。

大多数外包不会公开分享他们的工作和他们用来制作它的工具——但这里有一些他们可能创建的应用程序类型的例子：

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

https://t.co/rduN4WukOK

Built with @boltdotnew

— Xavier André (@XavAnd32) January 21, 2025

一个使用Replit Agent构建的电商店

Replit agent is ������

Crazy. Built a digital store app with @stripe integration using @replit agent in under an hour! ��

Used 5 prompts

Here’s what the replit agent did

created the database and added the orders and products tables

automatically added the products… pic.twitter.com/8wo7bpuGCb

— Melvin Vivas (@donvito) December 29, 2024

一个位于拉各斯的“互联网+”咖啡店

I built a landing page with an eCommerce section for the café where I work.

The owner and I got along well, and she mentioned struggling with showcasing her products.

I said, say less.

Sat beside her, built it in 2 hours, no single line of code, just @v0 + @cursor_ai

I’ll… pic.twitter.com/2RxKqHOFro

— Damilola Bhadmus (@gbadamosixxl) February 4, 2025

接下来会发生什么？

我们几乎每天都能看到这个快速发展的领域取得进展，各个团队都在夜以继日地工作以实现下一个突破。以下是一些关于它可能如何演变的想法：

1.针对不同用户角色的产品差异化： 今天，这个领域的大多数产品都是“面向所有人”的——它们服务于所有用户，从技术水平最高的开发者到普通消费者。

然而，我们认为理想的产品可能会因每个用户角色甚至用例而异。例如，对于消费者来说，最好的文本到Web应用程序工具可能是移动优先的，

有很多“护栏”，并优先与Instagram和Shopify等平台集成。而面向开发者的最佳工具看起来会非常不同！

2.有可能打开一个新的高端市场：我们已经看到技术水平较低的用户为内部使用生成他们自己的生产力工具。

这些工具通常在公司的防火墙内下载和部署，这意味着它们很少对公众可见。

然而，鉴于这些工具是在工作中使用，网站生成平台有机会添加更多企业功能并向高端市场发展。这可能会与现有的低代码内部工具市场相交叉。

3.与常见合作伙伴的打包集成：我们听到的最常见的抱怨之一是很难添加集成。如果你想构建一个供其他人使用的应用程序，这一点尤其重要。

你可能需要接受付款、创建用户登录、将信息保存在数据库中或从另一个网站提取内容。

我们希望看到产品与客户使用的最常见工具建立“一键式”集成，使其真正无缝，而不是要求用户注册多个服务、获取API密钥并研究文档。

还将有针对特定组件的生成工具，或供Agent在生成应用程序时使用的基本工具——比如Resend构建的这个用于电子邮件的版本。

4.像素级设计控制： 这些产品通常从默认的设计和美学开始。你可以通过提示来编辑它，但没有像Figma这样的产品那样高的控制水平——

这对于面向设计的消费者或企业来说是一个问题。我们渴望看到这些产品为那些需要它的人提供更细粒度的设计编辑功能，然后将这些更改转换回代码。

5.定价透明度和教育。 这个领域的大多数产品都有某种基于使用量的定价模型——你支付月费，但它只包含一定数量的token（或积分）。

如果你想要更多，你必须购买它们或升级。但是用户在开始时不知道他们会使用多少token，这使得估计构建网站的成本变得困难。

围绕浪费的token也存在很多挫败感，并且有一个由课程/内容创建者组成的迷你行业，帮助新用户弄清楚如何“有效使用他们的token”。

我们希望公司能够将这些功能引入内部，并更好地指导用户学习如何有效地进行提示。

从长远来看，text-to-web应用领域会是什么样子？

还有一个值得思考的问题是，这种能力（从文本提示生成Web应用程序）是会保留在独立工具中，还是会集成到用户已经在其中工作的现有产品中。

新的Replit Agent就是一个有趣的例子。当打包在Replit的现有产品中时，Web应用程序的生成变得更加容易——

在生态系统中启动身份验证和数据库是无缝的，你不需要去找第三方提供商。

Whatever you need… make an app for that.

Now on your phone. For everyone. Free. pic.twitter.com/hxFLGaCLmg

— Amjad Masad (@amasad) February 4, 2025

我们可以想象，其他平台也有兴趣探索这个领域，并且在为其现有客户群这样做时具有优势。

例如：像Figma这样的设计工具可以进入代码领域，使设计人员能够从提示词到可编辑的设计界面再到部署的网站。

或者AI编码工具可以添加具有更友好的消费者UI的浏览器界面。

我们也很好奇大型LLM厂商是否会决定进入这个领域。

随着像OpenAI和Anthropic这样的公司越来越关注代码，它们可能会添加界面供用户编程甚至部署简单的应用程序。

今天的text-to-web应用程序工具可能会继续沿着当前的路径扩展，或者我们可能会看到他们专注于现有工具无法很好服务的特定垂直领域。

例如，我们可以想象这个领域的一个产品决定专注于中小型企业并深入到这个工作流程中——

使小企业主可以轻松设置自定义域名、生成营销材料、安排约会或投放搜索广告。

原文：From Prompt to Product: The Rise of AI-Powered Web App Builders

https://a16z.com/ai-web-app-builders/

编译：Moon Ten

文章来自于微信公众号 “ Z Potentials”，作者 ：Moon Ten