Vibe session · Learning mode阅读、尝试、提问都留在同一个工作区
Course Map
练习进度 0/55
Learning Guide
Build session

Browser 工具 — 零安装的 AI 编程体验

beginner · 8-10 min · 步骤 1/3

你有没有想过,写代码不需要装任何东西?

我第一次用 Bolt.new 的时候,真的被震到了。打开一个网页,输入"帮我做一个 Todo App",30 秒以后——一个完整的 React 应用就在浏览器里跑起来了。不需要装 Node.js,不需要 npm install,不需要配 VS Code,甚至不需要终端。

这就是 Browser AI 编程工具的魔力。2024 年以来,这个赛道爆发了好几个产品,每个都有自己的特色。来看看主要选手:

AI 编程工具全景图——网页版 AI 编程工具区域:Bolt.new、v0、Lovable 等

四大 Browser 工具

工具定位最强能力背后公司
Bolt.new全栈快速原型从 prompt 到部署一条龙StackBlitz
Lovable设计感优先生成的 UI 好看,接近设计稿Lovable (前 GPT Engineer)
v0UI 组件生成shadcn/ui 生态,组件质量高Vercel
Firebase StudioGoogle 全家桶Firebase 集成、Gemini 驱动Google
说实话,它们干的事情看起来很像——都是"你说需求,我给你一个能跑的应用"。但用下来你会发现差异很大。

v0 界面——Vercel 出品的 UI 组件生成工具,输入描述即可生成高质量组件

Bolt.new 的优势是速度和完整性。它用 WebContainer 技术在浏览器里跑了一个完整的 Node.js 环境,所以你得到的不只是前端,后端也有。想做个全栈小项目?Bolt 可能是最快的。

Bolt.new 实际界面截图——电影 App 示例,展示从 prompt 到全栈应用的一条龙体验Lovable(Stitch)界面——设计感优先的 AI 编程平台,生成高保真 UI

Lovable 的卖点是设计感。同样一句"做一个着陆页",Lovable 生成的页面通常比 Bolt 好看。如果你是产品经理或设计师,想快速出一个高保真原型给团队看,Lovable 可能更适合。

Lovable 实际界面截图——Global Cuisine Explorer 应用,展示设计感优先的 AI 编程体验

v0 的特点是和 Vercel + shadcn 生态深度绑定。生成的组件可以直接 copy 到你的 Next.js 项目里用。不是做完整应用,而是做高质量的 UI 组件。

v0 工具实际界面截图——Vercel 出品,输入描述即可生成高质量 shadcn/ui 组件Firebase Studio 界面——Google AI Studio 与 Gemini 驱动的开发环境

Firebase Studio 是 Google 的新入场选手,用 Gemini 模型驱动,和 Firebase 后端服务无缝集成。如果你的项目本来就在 Google Cloud 上,这可能是最顺手的选择。

Vibe Workspace
Live build context

Browser 工具全景——打开网页就能写代码

认识 Bolt.new、Lovable、v0、Firebase Studio 等主流 Browser AI 编程工具

自动保存在此设备
了解主流 Browser AI 编程工具的能力和定位理解零安装开发的优势和天花板能根据项目需求判断该用 Browser 工具还是本地 IDE
Home| Vibe Lab
草稿自动保存