Bolt.new AI 全栈开发技能指南

概述

Bolt.new 是 StackBlitz 推出的 AI 全栈开发平台，完全运行在浏览器中。基于 WebContainer 技术，无需本地安装任何工具，输入一句话描述即可生成、预览、部署一个完整的 Web 应用。

核心功能

浏览器内全栈开发（WebContainer）

WebContainer 是 StackBlitz 的核心技术，让 Node.js 直接在浏览器中运行：

• - 零配置：不需要安装 Node.js、npm 或任何开发工具
• 完整运行时：支持 npm install、文件系统操作、HTTP 服务器
• 实时预览：代码修改后即时在右侧预览窗口看到效果
• 隔离环境：每个项目独立运行，互不干扰

AI 项目生成与一键部署

• - 用自然语言描述应用，AI 自动生成完整项目结构
• 支持多轮对话迭代，生成后可继续修改、添加功能
• 点击 Deploy 按钮直接部署到 Netlify，获得公网 URL，无需配置 CI/CD

支持的技术栈

提示词技巧

推荐的 prompt 结构

创建一个 [应用类型]，使用 [技术栈]。

功能需求：

1. 1. [核心功能1]
2. [核心功能2]

UI 要求：

• - [设计风格]
• [配色方案]
• [响应式要求]

实战示例

创建一个个人记账应用，使用 React + TypeScript + Tailwind CSS。

功能：

1. 1. 添加收入/支出记录（金额、分类、备注、日期）
2. 按月查看收支统计图表（用 recharts）
3. 数据存储在 localStorage

UI：现代简洁风格，蓝色系主色调，移动端优先

关键技巧

1. 1. 明确技术栈：不指定的话 AI 会自己选，可能不是你想要的
2. 分步迭代：先生成基础版本，再逐步添加功能
3. 指定存储方案：浏览器环境限制多，提前说明用 localStorage 还是 SQLite
4. 描述 UI 风格：给出具体设计偏好，否则生成的界面可能很朴素
5. 遇到报错直接粘贴：把错误信息发给 AI，它通常能自动修复

限制和注意事项

• - 不支持原生二进制：C/C++ 扩展、Python、Go 等无法运行
• 数据库受限：不能用 MySQL/PostgreSQL，只能用 SQLite 或内存方案
• 无 Docker 支持：WebContainer 不是虚拟机，不能运行容器
• 文件大小限制：不适合处理大文件或大量静态资源
• 网络请求：浏览器 CORS 策略仍然生效
• 持久化：项目数据存在 StackBlitz 云端，免费账户有存储限制
• 性能：复杂项目在浏览器中运行可能比本地慢

与其他工具对比

Bolt.new 适合5 分钟出一个能跑的 demo，Cursor/Windsurf 适合认真写要上线的项目。

使用场景和最佳实践

适合场景：快速原型验证、技术演示、学习新框架、黑客松、临时开发

最佳实践：

1. 1. 先用简单 prompt 生成骨架，再分步迭代添加功能
2. 生成后检查 package.json，确认依赖版本合理
3. 重要项目及时导出代码到本地 Git 仓库备份
4. 利用 Bolt 生成原型后，迁移到本地 IDE 做正式开发
5. 复杂状态管理建议在 prompt 中指定方案（Zustand、Jotai 等）
6. 部署前检查环境变量和 API 密钥，避免泄露到前端代码中