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 结构#

text

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

功能需求：
1. [核心功能1]
2. [核心功能2]

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

实战示例#

text

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

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

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

关键技巧#

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

限制和注意事项#

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

与其他工具对比#

维度Bolt.newCursor/Windsurfv0 (Vercel)运行环境浏览器本地 IDE浏览器全栈能力前后端都支持前后端都支持仅前端组件配置成本零配置需安装 IDE零配置部署一键 Netlify需自行配置一键 Vercel适合场景快速原型、演示正式项目开发UI 组件生成代码可控性中等高低离线使用不支持支持不支持项目复杂度中小型不限小型组件

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

使用场景和最佳实践#

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

最佳实践：

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