浏览器中AI生成全栈Web应用，从自然语言描述到可运行Demo最快只需几分钟。基于WebContainer技术，无需本地环境，独立开发者和产品经理的原型验证神器。
Bolt.new 是StackBlitz推出的AI全栈应用生成平台，2024年底发布。核心亮点是WebContainer技术——在浏览器中运行完整的Node.js环境，无需安装任何本地开发工具。你只需用自然语言描述需求，AI自动生成前后端代码、安装依赖、启动服务，一键部署到Netlify或Vercel。
自然语言描述需求，分钟级生成可运行全栈应用，从想法到Demo最快3分钟
浏览器中运行完整Node.js环境，无需安装Node/npm/任何工具，打开浏览器即用
生成后一键部署到Netlify/Vercel，获得公开URL，立即分享给任何人
对生成结果不满意？直接对话修改："添加暗黑模式"、"改成下拉选择"
React/Vue/Svelte + Node.js/Express + 数据库，前后端一站式生成
导出代码到GitHub仓库，方便后续本地开发和团队协作
| 方案 | 价格 | 包含 |
|---|---|---|
| Free | $0 | 每日有限生成次数 + 基础模板 |
| Pro | $20/月 | 无限生成 + 优先队列 + 私有项目 |
| Teams | $40/月 | 团队协作 + 共享项目 + 管理后台 |
Bolt.new无需任何本地安装，打开浏览器即可使用。3步开始你的第一个AI生成应用。
# 打开浏览器访问
https://bolt.new/
# 注册方式（任选其一）：
1. GitHub 账号登录（推荐，方便后续导出代码）
2. Google 账号登录
3. 邮箱注册
# 注册后即可免费使用
# 免费版有每日生成次数限制使用GitHub登录后，生成的项目可以一键导出到你的GitHub仓库，方便后续本地开发和版本管理。
# Bolt.new提供多种启动方式：
方式一： 从空白项目开始
→ 直接在输入框描述你的需求
方式二： 选择模板快速启动
→ React + Vite + Tailwind
→ Next.js + Prisma
→ Vue + Nuxt
→ Astro 博客
→ Express API
方式三： 导入GitHub仓库
→ 粘贴仓库URL，AI基于现有代码修改# 在输入框中用自然语言描述你的需求
# 描述越详细，生成效果越好：
👤 创建一个任务管理应用，功能包括：
- 添加、删除、编辑任务
- 任务分类（工作/生活/学习）
- 优先级标记（高/中/低）
- 拖拽排序功能
- 数据持久化到localStorage
- 响应式设计，适配手机和PC
- 使用React + Tailwind CSS
- 深色/浅色主题切换
# 点击发送，AI开始生成
# 通常30秒-3分钟完成描述需求时包含：1）功能清单 2）技术栈偏好 3）UI风格要求 4）数据存储方式。越具体的描述，生成效果越精准。避免模糊的描述如"做一个好看的网站"。
# 生成后不满意？直接对话修改
👤 把任务列表改成看板视图，类似Trello
# AI会重新生成看板布局
👤 添加一个统计面板，显示各分类任务数量
# AI在现有代码基础上添加
👤 添加任务到期日期提醒功能
# AI自动添加日期选择器和提醒逻辑
# 每次修改都会保留历史版本
# 可以随时回退到之前的版本# Bolt.new内置实时预览
1. 右侧面板实时显示应用效果
2. 支持手机/平板/PC尺寸切换预览
3. 控制台输出实时可见
4. 网络请求可在Network面板查看
# 如果预览报错：
• 复制错误信息发给AI，AI自动修复
• 检查终端输出，查看依赖安装状态
• 手动编辑代码后预览自动刷新# 内置代码编辑器
1. 左侧文件树浏览项目结构
2. 点击文件直接编辑代码
3. 保存后预览自动刷新
# 导出代码
方式一： 导出到GitHub
→ 点击 GitHub 图标 → 选择仓库 → 推送
方式二： 下载ZIP
→ 菜单 → Download as ZIP
方式三： 本地开发
→ 下载后 npm install && npm run dev导出代码后建议用Cursor或VS Code继续开发。Bolt.new适合快速原型验证，复杂项目仍需本地IDE深度开发。
# 部署到Netlify
1. 点击右上角 Deploy 按钮
2. 选择 Netlify
3. 授权Netlify账号
4. 获得公开访问URL：https://xxx.netlify.app
# 部署到Vercel
1. 先导出到GitHub
2. 在Vercel导入GitHub仓库
3. 自动构建部署
# 自定义域名
• Netlify/Vercel都支持绑定自定义域名
• 在DNS设置中添加CNAME记录即可跟着这个案例，5分钟从零生成一个完整的任务管理应用。
👤 创建一个现代化的任务管理应用 TaskFlow：
技术栈：React + Vite + Tailwind CSS + localStorage
功能：
1. 任务CRUD（创建/读取/更新/删除）
2. 任务分类：工作、生活、学习、健康
3. 优先级：🔴紧急 🟡重要 🟢普通
4. 搜索和筛选功能
5. 任务完成状态切换
6. 统计面板：各分类数量、完成率
7. 深色/浅色主题切换
UI风格：现代简约，卡片式布局，流畅动画# AI自动执行的步骤：
Step 1: 分析需求，规划项目结构
→ 创建React + Vite项目
→ 安装Tailwind CSS、uuid、date-fns
Step 2: 生成核心代码文件
→ src/App.jsx - 主应用组件
→ src/components/TaskList.jsx - 任务列表
→ src/components/TaskForm.jsx - 新建/编辑表单
→ src/components/Stats.jsx - 统计面板
→ src/hooks/useTasks.js - 任务状态管理
→ src/hooks/useTheme.js - 主题切换
Step 3: 安装依赖并启动
→ npm install
→ npm run dev
→ 预览面板显示应用
# 全程约2-3分钟# 生成后继续对话优化：
👤 添加拖拽排序功能，使用dnd-kit库
# AI安装dnd-kit并实现拖拽
👤 添加任务到期日期，过期的标红显示
# AI添加日期选择器和过期逻辑
👤 添加数据导出为JSON功能
# AI添加导出按钮和下载逻辑
👤 部署到Netlify
# 点击Deploy，30秒获得公开URL1）先让AI生成基础功能，再逐步迭代添加复杂功能 2）每次只提一个修改需求，避免AI混乱 3）生成后先测试核心功能，确认无误再继续 4）复杂项目建议导出到本地IDE继续开发。