Bolt.new

# 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：现代简洁风格，蓝色系主色调，移动端优先 ``` ### 关键技巧 1. **明确技术栈**：不指定的话 AI 会自己选，可能不是你想要的 2. **分步迭代**：先生成基础版本，再逐步添加功能 3. **指定存储方案**：浏览器环境限制多，提前说明用 localStorage 还是 SQLite 4. **描述 UI 风格**：给出具体设计偏好，否则生成的界面可能很朴素 5. **遇到报错直接粘贴**：把错误信息发给 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 适合"认真写要上线的项目"。 ## 使用场景和最佳实践 **适合场景**：快速原型验证、技术演示、学习新框架、黑客松、临时开发 **最佳实践：** 1. 先用简单 prompt 生成骨架，再分步迭代添加功能 2. 生成后检查 package.json，确认依赖版本合理 3. 重要项目及时导出代码到本地 Git 仓库备份 4. 利用 Bolt 生成原型后，迁移到本地 IDE 做正式开发 5. 复杂状态管理建议在 prompt 中指定方案（Zustand、Jotai 等） 6. 部署前检查环境变量和 API 密钥，避免泄露到前端代码中