- name
- Bolt.new
- version
- 1.0.0
- description
- Bolt.new AI 全栈开发助手，精通浏览器内开发、WebContainer、一键部署
- tags
- ["ai-coding", "fullstack", "bolt", "webcontainer"]
- author
- ClawSkills Team
- category
- developer-tools
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
支持的技术栈
| 类别 | 支持的技术 |
|---|---|
| 前端框架 | React、Vue 3、Svelte、Solid、Astro、Next.js、Nuxt |
| 样式方案 | Tailwind CSS、CSS Modules、Styled Components、UnoCSS |
| 构建工具 | Vite（默认）、Webpack |
| 后端框架 | Express、Fastify、Hono |
| 数据库 | SQLite（better-sqlite3）、内存数据库、localStorage |
| 包管理 | npm、pnpm |
| 语言 | TypeScript 完全支持 |
提示词技巧
推荐的 prompt 结构
创建一个 [应用类型]，使用 [技术栈]。
功能需求：
1. [核心功能1]
2. [核心功能2]
UI 要求：
- [设计风格]
- [配色方案]
- [响应式要求]实战示例
创建一个个人记账应用，使用 React + TypeScript + Tailwind CSS。
功能：
1. 添加收入/支出记录（金额、分类、备注、日期）
2. 按月查看收支统计图表（用 recharts）
3. 数据存储在 localStorage
UI：现代简洁风格，蓝色系主色调，移动端优先关键技巧
- 明确技术栈：不指定的话 AI 会自己选，可能不是你想要的
- 分步迭代：先生成基础版本，再逐步添加功能
- 指定存储方案：浏览器环境限制多，提前说明用 localStorage 还是 SQLite
- 描述 UI 风格：给出具体设计偏好，否则生成的界面可能很朴素
- 遇到报错直接粘贴：把错误信息发给 AI，它通常能自动修复
限制和注意事项
- 不支持原生二进制：C/C++ 扩展、Python、Go 等无法运行
- 数据库受限：不能用 MySQL/PostgreSQL，只能用 SQLite 或内存方案
- 无 Docker 支持：WebContainer 不是虚拟机，不能运行容器
- 文件大小限制：不适合处理大文件或大量静态资源
- 网络请求：浏览器 CORS 策略仍然生效
- 持久化：项目数据存在 StackBlitz 云端，免费账户有存储限制
- 性能：复杂项目在浏览器中运行可能比本地慢
与其他工具对比
| 维度 | Bolt.new | Cursor/Windsurf | v0 (Vercel) |
|---|---|---|---|
| 运行环境 | 浏览器 | 本地 IDE | 浏览器 |
| 全栈能力 | 前后端都支持 | 前后端都支持 | 仅前端组件 |
| 配置成本 | 零配置 | 需安装 IDE | 零配置 |
| 部署 | 一键 Netlify | 需自行配置 | 一键 Vercel |
| 适合场景 | 快速原型、演示 | 正式项目开发 | UI 组件生成 |
| 代码可控性 | 中等 | 高 | 低 |
| 离线使用 | 不支持 | 支持 | 不支持 |
| 项目复杂度 | 中小型 | 不限 | 小型组件 |
Bolt.new 适合"5 分钟出一个能跑的 demo"，Cursor/Windsurf 适合"认真写要上线的项目"。
使用场景和最佳实践
适合场景：快速原型验证、技术演示、学习新框架、黑客松、临时开发
最佳实践：
- 先用简单 prompt 生成骨架，再分步迭代添加功能
- 生成后检查 package.json，确认依赖版本合理
- 重要项目及时导出代码到本地 Git 仓库备份
- 利用 Bolt 生成原型后，迁移到本地 IDE 做正式开发
- 复杂状态管理建议在 prompt 中指定方案（Zustand、Jotai 等）
- 部署前检查环境变量和 API 密钥，避免泄露到前端代码中