Bolt.new：浏览器内 AI 全栈开发

什么是 Bolt.new

Bolt.new 是 StackBlitz 推出的 AI 全栈开发工具，最大的特点是：所有开发都在浏览器中完成。不需要安装任何东西，不需要配置环境，打开网页就能开始写代码。

它基于 StackBlitz 的 WebContainer 技术，在浏览器中运行了一个完整的 Node.js 环境。这意味着你可以在浏览器里安装 npm 包、运行开发服务器、甚至执行构建命令。

核心特点

浏览器内运行完整的 Node.js 环境
AI 驱动的代码生成和修改
支持多种前端和全栈框架
实时预览，所见即所得
一键部署到 Netlify 等平台

WebContainer 技术

Bolt.new 的底层是 WebContainer——一个在浏览器中运行的 Node.js 运行时。这不是模拟器，而是真正的 Node.js 环境。

技术架构

浏览器
├── WebContainer（Node.js 运行时）
│   ├── npm / pnpm（包管理器）
│   ├── 文件系统（虚拟）
│   ├── 开发服务器
│   └── 构建工具
├── AI 模型（代码生成）
├── 代码编辑器
└── 实时预览窗口

WebContainer 能做什么

能力	支持情况
npm install	支持
运行 Node.js 脚本	支持
开发服务器 (Vite, Next.js)	支持
文件读写	支持
网络请求	部分支持
原生模块 (C++ addons)	不支持
数据库 (SQLite 等)	部分支持
Docker	不支持

支持的框架

Bolt.new 支持主流的前端和全栈框架：

前端框架

React (Vite)
Next.js
Vue.js
Svelte / SvelteKit
Astro
Solid.js

全栈框架

Next.js (App Router / Pages Router)
Remix
Nuxt.js
SvelteKit

样式方案

Tailwind CSS
CSS Modules
Styled Components
shadcn/ui

从零构建一个项目

我们用 Bolt.new 来构建一个简单的任务管理应用，体验完整的开发流程。

第一步：描述需求

打开 Bolt.new，在输入框中描述：

创建一个任务管理应用，使用 React + Tailwind CSS：

功能需求：
1. 添加任务（标题 + 优先级）
2. 任务列表展示，按优先级排序
3. 标记任务完成 / 删除任务
4. 本地存储持久化
5. 简洁美观的 UI

技术要求：
- React 18 + TypeScript
- Tailwind CSS
- Vite 构建
- localStorage 持久化

第二步：AI 生成项目

Bolt.new 会自动：

创建项目结构
安装依赖（react, tailwindcss 等）
生成组件代码
启动开发服务器
在预览窗口中展示结果

生成的项目结构通常是这样的：

src/
├── components/
│   ├── TaskForm.tsx
│   ├── TaskList.tsx
│   ├── TaskItem.tsx
│   └── PriorityBadge.tsx
├── hooks/
│   └── useLocalStorage.ts
├── types/
│   └── task.ts
├── App.tsx
└── main.tsx

第三步：迭代修改

看到预览结果后，可以继续对话修改：

请做以下修改：
1. 添加一个筛选栏，可以按优先级和完成状态筛选
2. 添加任务数量统计
3. 空状态时显示一个友好的提示

AI 会直接修改已有代码，而不是重新生成。你可以在编辑器中看到每次修改的 diff。

第四步：手动调整

对于 AI 生成不够精确的部分，可以直接在编辑器中手动修改代码。Bolt.new 的编辑器支持语法高亮、自动补全等基本功能。

// 手动调整样式细节
<div className="flex items-center gap-2 p-3 rounded-lg
  hover:bg-zinc-50 transition-colors duration-200
  border border-transparent hover:border-zinc-200">
  {/* ... */}
</div>

部署选项

Bolt.new 支持多种部署方式：

Netlify 部署

最简单的方式，一键部署：

点击 “Deploy” 按钮
连接 Netlify 账号
自动构建和部署
获得一个 .netlify.app 域名

导出到 GitHub

如果需要更多控制：

点击 “Export to GitHub”
选择仓库名称
代码推送到 GitHub
后续可以配置 CI/CD

下载源码

也可以直接下载项目源码到本地：

点击 “Download” 按钮
获得完整的项目文件
本地 npm install && npm run dev 继续开发

与传统开发的对比

开发效率

步骤	传统开发	Bolt.new
环境搭建	10-30 分钟	0 分钟
项目初始化	5-10 分钟	30 秒
基础 UI 开发	2-4 小时	5-15 分钟
功能迭代	修改 → 保存 → 刷新	描述 → 自动修改 → 实时预览
部署	配置 CI/CD	一键部署

适用场景

Bolt.new 最适合的场景：

快速原型：验证想法，不需要完美的代码
Demo 演示：给客户或团队展示概念
学习实验：尝试新框架或新技术
小型项目：个人工具、内部工具
面试准备：快速实现编程题目

不太适合的场景

大型生产项目（性能和可维护性考虑）
需要复杂后端逻辑的应用
需要原生模块的项目
对安全性要求极高的项目

实用技巧

1. 分步描述需求

不要一次性描述所有功能，分步骤来：

第一步：先创建基础的页面布局和导航
第二步：实现核心的数据展示功能
第三步：添加交互功能（增删改查）
第四步：优化样式和响应式

2. 提供技术约束

明确告诉 AI 你想用什么技术栈：

使用 React 18 + TypeScript + Tailwind CSS + shadcn/ui
状态管理用 Zustand
路由用 React Router v6
不要使用 class 组件

3. 参考已有设计

参考 Notion 的侧边栏设计，创建一个可折叠的导航菜单，
支持多级嵌套，每个菜单项有图标和标题

4. 处理报错

当预览出现错误时，可以直接把错误信息发给 AI：

预览报错了：
TypeError: Cannot read properties of undefined (reading 'map')
请修复这个问题

AI 通常能准确定位并修复常见的运行时错误。

Bolt.new vs 其他在线开发工具

特性	Bolt.new	CodeSandbox	StackBlitz	Replit
AI 代码生成	核心功能	有限	有限	有
浏览器内 Node.js	是	部分	是	否（云端）
离线支持	部分	否	部分	否
框架支持	广泛	广泛	广泛	广泛
部署集成	Netlify	Vercel	有限	Replit Hosting
协作功能	有限	好	好	好
免费额度	有限	有限	有限	有限

定价

Bolt.new 采用 Token 消耗制：

方案	价格	Token 额度	适合
Free	$0/月	有限	体验试用
Pro	$20/月	较多	个人开发者
Team	$40/月/人	更多	团队使用

Token 消耗与对话长度和代码生成量相关。复杂项目消耗更多 Token。

总结

Bolt.new 代表了一种新的开发范式：AI + 浏览器 = 即时开发。它不会取代传统的本地开发环境，但在快速原型、Demo 演示、学习实验等场景下，它的效率优势非常明显。

对于我们开发者来说，关键是找到它在工作流中的正确位置。把它当作一个快速启动器，用它来验证想法、生成骨架代码，然后在需要时导出到本地继续深入开发。

最好的工具是让你专注于创造，而不是配置。Bolt.new 让”从想法到原型”的距离缩短到了几分钟。

加载中...