Bolt.new 快速入门

一句话卖点:浏览器里直接生成、运行、部署全栈 Web 应用,不用装 Node、不用配环境,prompt 出代码。

这是什么?适合谁?

Bolt.new 是 StackBlitz 在 2024 年推出的浏览器内 AI 全栈开发平台(bolt.new)。它跟 v0、Lovable、Replit Agent、Windsurf 属于同梯队产品——主打「用自然语言生成完整 Web 应用」,但 Bolt.new 的核心差异点是完全跑在浏览器里。

具体说:

• 基于 StackBlitz 的 WebContainer 技术,Node.js 运行时直接在浏览器里跑;
• 你不需要装 Node、npm、Python、数据库;
• AI 生成的代码直接在浏览器里运行、预览;
• 一键部署到 StackBlitz 的云平台,生成可分享的链接;
• 支持 React / Vue / Svelte / Next.js 等前端框架,也支持 Node 后端 + 数据库(SQLite / Postgres);
• 文件系统、AI、终端、包管理都在浏览器里。

适合谁?前端 / 全栈开发者想快速验证原型、产品经理想快速出 MVP、教学场景(学生不用装环境)、企业内部工具快速搭建。

不适合需要重后端 / 复杂运维 / 大规模生产环境的项目——Bolt.new 主打「快速原型 + 演示」,不是替代正式开发流程。

准备工作

1. 一个现代浏览器(Chrome / Edge / Firefox 最新版);
2. 一个 StackBlitz 账号(GitHub 登录最快);
3. 一段想做的应用的描述词;
4. 可选:付费升级(免费版有生成次数和项目数限制)。

3 步快速上手

第 1 步:打开 Bolt.new 并登录

访问 https://bolt.new,点「Sign In」用 GitHub 账号登录(也支持邮箱)。

首次进入会让你看一个简短引导,告诉你「AI 在这里」「代码在这里」「预览在这里」「终端在这里」。

第 2 步:输入第一个 prompt

中央有一个大输入框,输入:

帮我做一个简单的 Todo App:React + TypeScript,支持添加任务、标记完成、删除,UI 用 Tailwind CSS,数据存 localStorage。

回车后,AI 会:

• 自动创建项目结构(package.json、src/、index.html 等);
• 安装依赖(Tailwind、React 等);
• 生成完整的组件代码;
• 在右侧预览窗口实时跑起来。

整个过程 1~3 分钟。

第 3 步:继续对话,迭代功能

看到第一版跑起来后,继续在输入框追问:

给 Todo 加个「分类」字段,支持工作 / 生活 / 学习三种分类,用不同颜色标签显示。

AI 会自动改 App.tsx、加新组件、调整样式,预览实时刷新。

满意后点右上角「Deploy」,选「StackBlitz Deployment」,几秒后会生成一个公开链接 https://xxx.stackblitz.app,可以直接发给任何人访问。

常见踩坑

1. 依赖装失败:Bolt.new 受限于 WebContainer,部分 npm 包(如原生 node-gyp 依赖)不支持,报错时换替代实现;
2. 数据库限制:免费版支持 SQLite,Postgres 需付费;大规模生产数据库请用外部服务;
3. 预览空白:偶尔浏览器缓存导致预览空白,F5 刷新或点「Restart Dev Server」;
4. AI 改了不该改的文件:AI 有时会动到配置文件,出问题点「Revert」回滚;
5. 部署链接偶尔失效:免费部署链接一段时间不用会被回收,长期使用建议绑自定义域名(付费);
6. 大项目变慢:文件超过 100 个后 AI 响应变慢,建议拆成多个小项目。

初级用法

• Todo App:经典入门项目,React + TypeScript + Tailwind,10 分钟出活;
• Landing Page:做一个产品落地页,Hero + Features + Pricing + Footer;
• 个人博客:Next.js + Markdown,几分钟出博客骨架;
• 简单计算器:HTML + CSS + JS,练手最快。

高级玩法

• 接入第三方 API:在 prompt 里说「调用 OpenAI API」,AI 会自动加 fetch 代码并让你填 API Key;
• 数据库 + CRUD:prompt 里说「用 SQLite 存用户表」,AI 会自动建表 + 写查询;
• 部署到 Vercel / Netlify:点 Deploy → 选外部平台,授权后即可部署;
• 导入 GitHub 仓库:用 GitHub 集成,把 Bolt 项目推到自己仓库,继续本地开发。

小技巧

1. prompt 写明技术栈:「React + TypeScript + Tailwind」比「做一个网站」AI 生成质量高 10 倍;
2. 小步迭代:每次只让 AI 改一个功能,不要一次让 AI 重写整个项目;
3. 善用「Revert」:AI 改坏了随时点 Revert,不用担心;
4. 关注「文件树」:左侧文件树是项目的真实状态,AI 改了什么一目了然;
5. 保存重要版本:每完成一个大功能,点「Save」或推 Git,留个里程碑。

常见问题 FAQ

Q1: Bolt.new 适合哪些编程语言?

A: Bolt.new 通常支持主流编程语言(Python、JavaScript/TypeScript、Java、Go、C++、Rust 等)。支持程度因语言而异:Python/JavaScript/TypeScript 最佳,小众语言(如 Haskell、Elixir)可能较弱。

Q2: Bolt.new 生成的代码可以直接用吗?

A: 简单的 CRUD、工具函数、单元测试可以直接用;复杂的业务逻辑、算法实现需要人工 review。永远不要盲目复制 AI 生成的代码——先理解再使用。

Q3: Bolt.new 怎么收费?

A: 通常分免费版(基础功能,有限次数)、付费版(高级模型、无限次数、团队协作)。个人开发者 Pro 版约 $10-20/月,企业版 $30-50/用户/月。具体以 https://bolt.new 定价为准。

Q4: Bolt.new 会上传我的代码到云端吗?有隐私问题吗?

A: 大部分 AI 编程工具会保存你的代码用于服务提供(模型推理)和模型改进(除非关闭)。敏感代码(企业核心、商业秘密)建议:1) 使用本地部署版本;2) 关闭”使用我的代码改进模型”选项;3) 考虑企业版(有更强隐私保护)。

Q5: 怎么让 Bolt.new 生成更高质量的代码?

A: 关键技巧:1) 写清晰的 prompt,说明输入输出和约束;2) 提供代码示例(让 AI 学习你的风格);3) 拆分任务,不要一次生成太多;4) 用 TODO 注释让 AI 补充具体实现;5) review + 单元测试保证质量。

进阶学习建议

如果想进一步用好 Bolt.new,建议按以下路径学习:

第 1 周:熟练基础

• 完成 3 步快速上手,跑通第一个任务
• 试 2-3 个不同场景的真实任务
• 记录”哪些操作有效、哪些没用”——形成自己的笔记

第 2 周:探索功能

• 把界面上的按钮/菜单都点一遍
• 找到最常用的 3-5 个功能
• 配置个性化设置(主题、快捷键、默认参数)

第 3-4 周:融入工作流

• 找到 Bolt.new 与你现有工具的结合点
• 用快捷键/模板/批处理提高效率
• 考虑付费升级(如果免费版够用就不必)

长期:进阶玩法

• 探索 Bolt.new 的 API/SDK 集成
• 写自己的脚本/扩展/插件
• 关注官方博客/更新日志,第一时间用上新功能

推荐资源:

• 官方文档:https://bolt.new
• 官方 YouTube/B 站频道(看产品演示)
• 国内社区:CSDN/掘金/知乎搜 “Bolt.new 教程”
• 国外社区:Reddit、Product Hunt 评论区

避免的坑:

• 不要追求”全能工具”——Bolt.new 不可能满足所有需求
• 不要盲目订阅付费版——先用免费版验证价值
• 不要忽略数据备份——重要内容定期导出
• 不要被新功能冲昏头脑——核心功能用熟再拓展

参考链接

• Bolt.new 官方主页:https://bolt.new
• StackBlitz:https://stackblitz.com
• Bolt.new 文档:https://support.bolt.new
• v0.dev 对比:https://v0.dev
• Lovable 对比:https://lovable.dev

本文基于官方文档和公开资料整理，AI辅助生成，MagicNetWorld 尚未完成独立实测。如有错误或过时信息，请通过 contact@magicnetworld.com 反馈。