Bolt 快速生成 Web 应用

说实话，第一次打开 Bolt.new 的时候我以为是个玩具。输入一句话，30 秒后一个完整的 React 应用跑在浏览器里——带路由、带样式、能点击交互。这体验太离谱了，离谱到你会怀疑："这东西生产能用吗？"

答案是：看情况。Bolt 在特定场景下是目前最快的原型工具，没有之一。但它不是万能的，你得知道它的边界在哪。

---

Bolt.new 到底是什么

一句话解释：Bolt 是一个浏览器内的 AI 全栈开发环境，你用自然语言描述需求，它生成完整可运行的 Web 应用。

生活类比：就像你走进一家餐厅，跟服务员说"我想吃辣的、有肉的、米饭配的"，厨房直接端出一盘菜。你不需要知道厨房长什么样，也不需要自己切菜。

工作中怎么用：产品经理要验证一个想法、设计师要做交互原型、开发者要快速搭个内部工具——打开 bolt.new，描述需求，3 分钟出成品。

最常踩的坑：以为 Bolt 能处理复杂后端逻辑。它的强项是前端，后端能力非常有限。我们团队有人用 Bolt 做了一个"看起来完整"的 SaaS，结果发现数据只存在浏览器内存里，刷新就没了。

---

技术底层：StackBlitz WebContainers

Bolt 不是在远程服务器跑你的代码。它用的是 StackBlitz 的 WebContainers 技术——直接在浏览器里运行 Node.js 环境。

这意味着：

• 零配置：不需要安装任何东西，打开网页就能写代码
• 即时预览：改了代码，右边预览窗口实时更新
• 离线友好：大部分操作不需要网络（AI 生成除外）

但也意味着：

• 不能跑 Python、Go 或其他非 Node.js 后端
• 不能连真正的数据库（除非用外部 API）
• 浏览器的内存和性能有天花板

---

从零到部署：完整流程

Step 1：打开 bolt.new

直接访问 bolt.new，不需要注册就能开始（免费额度有限）。界面很简单：一个输入框，一个预览区。

Step 2：写你的第一个 Prompt

这是最关键的一步。Prompt 质量直接决定产出质量。

反面教材（别这么写）：

帮我做一个应用

这种 prompt 就像去餐厅说"给我来点吃的"。AI 会给你生成一个 generic 的 todo app，跟你想要的八竿子打不着。

正面教材（这么写）：

Build a personal expense tracker with the following requirements:

Tech stack: React + TypeScript + Tailwind CSS

Pages:
1. Dashboard - shows total expenses this month, a pie chart by category, and recent transactions list
2. Add Expense - form with fields: amount (number), category (dropdown: Food, Transport, Entertainment, Bills, Other), date (date picker), note (optional text)
3. History - searchable/filterable table of all expenses, sorted by date descending

Data: Store in localStorage with a clear data structure. Use a custom hook useExpenses() for all CRUD operations.

UI: Clean, modern design. Use a bottom navigation bar for mobile. Color scheme: white background, indigo-600 as primary color.

Must include: loading states, empty states, form validation, responsive design.

Step 3：Review 和迭代

Bolt 生成代码后，右边会出现实时预览。这时候你需要：

1. 点一遍所有功能——看有没有报错
2. 检查响应式——缩放浏览器窗口，看移动端效果
3. 看代码结构——左边可以浏览文件树

发现问题？直接在聊天框里追加修改：

The pie chart is not showing. Fix it and also:
- Add a "delete expense" button with confirmation dialog
- Make the category dropdown have colored dots next to each option
- Add a dark mode toggle in the header

Step 4：部署

Bolt 内置 Netlify 部署。点击 "Deploy" 按钮，几秒钟就能拿到一个公开 URL。

直接给结论：如果只是演示用，Bolt 自带的 Netlify 部署够了。如果要长期维护，建议把代码下载下来，推到自己的 GitHub repo。

---

好 Prompt vs 烂 Prompt

我们踩过很多坑，总结出一个规律：Bolt 的产出质量 80% 取决于你的 prompt。

热知识：Bolt 用英文 prompt 效果比中文好很多。不是歧视，是因为它的训练数据大部分是英文技术文档。中文 prompt 容易产生歧义，生成的代码质量明显下降。

---

Bolt 的强项

1. 速度无敌：从想法到可交互原型，3-5 分钟。没有任何工具比它更快
2. 零环境配置：不用装 Node.js、不用 npm install、不用配 ESLint。打开浏览器就干活
3. 即时预览：改一行代码，右边立刻更新。这个反馈循环是 Cursor 给不了的
4. 部署简单：一键 Netlify，连 CI/CD 都省了
5. 版本切换：可以回退到之前的版本，不怕改废

---

Bolt 的短板（说实话）

这里必须坦诚。我们团队在实际项目中发现了这些问题：

1. 后端能力约等于零

Bolt 生成的"后端"其实是浏览器里的 mock。你看到的 API 调用，数据全在内存里。刷新页面，数据就没了。

如果你需要：用户登录、数据持久化、文件上传、第三方 API 调用——Bolt 搞不定，换 Lovable 或 Replit Agent。

2. 复杂状态管理容易崩

超过 5-6 个相互关联的 state，Bolt 生成的代码就开始出现逻辑 bug。它不擅长处理复杂的 useEffect 依赖链、Context 嵌套、或者跨组件通信。

3. 代码质量参差不齐

Bolt 生成的代码能跑，但不一定好维护。常见问题：

• 所有逻辑堆在一个组件里（几百行的 god component）
• CSS 类名随机生成，可读性差
• 没有错误边界
• TypeScript 类型定义敷衍（大量 any）

4. 大型项目会迷路

文件超过 15-20 个，Bolt 开始"忘记"之前的代码。你让它改 A 页面，它可能把 B 页面的逻辑搞坏。这是 context window 的限制。

---

定价（2025 年数据）

我的建议：先用免费额度试一两个项目。如果觉得好用，$20/月的 Pro 性价比不错。但如果你的项目需要后端，这 $20 不如花在 Lovable 上。

---

完整 Prompt 模板：可直接复制

下面是一个经过多次迭代验证的 prompt 模板，你可以直接套用：

Build a [应用类型] with the following specifications:

## Tech Stack
- React 18+ with TypeScript
- Tailwind CSS for styling
- React Router for navigation
- localStorage for data persistence

## Pages & Features

### Page 1: [页面名]
- [具体功能 1]
- [具体功能 2]
- [具体功能 3]

### Page 2: [页面名]
- [具体功能 1]
- [具体功能 2]

## Data Model
```typescript
interface [EntityName] {
  id: string;
  [field]: [type];
  createdAt: string;
}

UI Requirements

• Color scheme: [主色] background, [强调色] as primary
• Mobile-first responsive design
• Bottom navigation on mobile, sidebar on desktop
• Include: loading states, empty states, error handling
• Smooth transitions between pages

Must Include

• Form validation with helpful error messages
• Search and filter functionality where appropriate
• Confirm dialogs for destructive actions
• Toast notifications for success/error feedback

---

## 什么时候用 Bolt，什么时候该换工具

| 场景 | 推荐工具 | 原因 |
|------|---------|------|
| 快速验证 UI 想法 | **Bolt** | 最快，零配置 |
| Landing page / 展示页 | **Bolt** 或 **v0** | 纯前端，Bolt 擅长 |
| 需要用户登录的 SaaS | **Lovable** | Supabase 集成 |
| 需要复杂后端 API | **Replit Agent** | 真正的服务器环境 |
| 已有项目加 UI 组件 | **v0** | 组件级别生成 |
| 大型项目迭代开发 | **Cursor / Claude Code** | 完整 IDE 体验 |
| Python / 数据项目 | **Replit Agent** | 支持 Python |

---

## 实战 SOP：我们团队的工作流

经过几个月的摸索，我们总结出这个 SOP：

1. **用 Bolt 做原型**（30 分钟内）
   - 写好 prompt，生成初版
   - 快速迭代 2-3 轮，确认 UI 和交互

2. **截图 + 录屏给团队看**
   - Bolt 生成的原型比 Figma 更直观，因为能点击

3. **决定是否升级**
   - 如果只是内部工具 / 展示用 → 直接 Bolt 部署
   - 如果要上生产 → 代码导出，用 Cursor 继续开发

4. **代码清理**
   - Bolt 导出的代码需要重构：拆分组件、加类型、写测试
   - 这一步省不了，但比从零开始快 10 倍

---

## 踩坑日记

我们遇到过一个典型的情况：PM 用 Bolt 做了一个 dashboard 原型，展示给客户看，客户很满意说"就这样上线"。PM 转头跟开发说"Bolt 已经做好了，你们部署一下就行"。

结果开发一看：数据全是写死的 mock、没有 API 对接、没有错误处理、移动端一打开全乱了。

教训：**Bolt 生成的是原型，不是产品**。从原型到产品之间，还有大量工作。提前跟 stakeholder 说清楚这一点，能省掉很多扯皮。

---

## 小结

Bolt 是 2024-2025 年最让人兴奋的原型工具之一。它把"想法到可交互产品"的时间从几天压缩到几分钟。但它的定位是**快速原型 + 简单前端应用**，不是全栈开发工具。

最省事的做法：
- 原型验证 → Bolt
- 加上后端 → Lovable
- 复杂项目 → Cursor + Claude Code

知道每个工具的边界，比"哪个工具最好"这个问题更有价值。