Bolt.new AI编程助手——全栈应用生成器使用教程：从入门到精通

从选型到落地的可执行指南，适合个人与团队快速上手。

教程正文

从选型到落地的实战步骤。

1. 什么是Bolt.new？

Bolt.new 是一个革命性的AI编程助手，它能够根据你的自然语言描述，自动生成完整的全栈应用。无论是简单的静态网站，还是复杂的带有数据库和API的Web应用，你只需要用一句话描述想法，Bolt.new就能在几秒内生成可运行的代码，并提供一个在线预览环境。本教程将带你从零开始掌握Bolt.new的使用技巧，从基础操作到高级定制，让你成为AI编程达人。

2. 快速上手：第一个全栈应用

2.1 准备工作

你只需要一个浏览器和网络连接。访问 https://bolt.new，无需注册即可体验基础功能。推荐使用Chrome或Edge以获得最佳体验。

2.2 生成一个Todo应用

在主页的输入框中，输入以下提示词：

创建一个全栈Todo应用，使用React前端和Node.js后端，数据库用SQLite。支持添加、删除、标记完成功能，界面要简洁美观。

点击“生成”按钮（或按回车）。等待约10-20秒，你会看到代码分屏展示，左侧是文件树，右侧是编辑器，下方还有一个实时预览窗口。

2.3 预览与交互

点击预览窗口中的“+添加任务”按钮，输入“学习Bolt.new”，点击确认。你会发现任务被添加到列表中。点击复选框可标记完成，点击删除按钮可移除。所有数据持久化在SQLite中。

技巧Tip： 如果预览窗口加载很慢，可以点击右上角的“刷新”按钮重新加载。也可以点击“打开在新标签页”来获得独立窗口。

3. 核心功能详解

3.1 多轮对话修改

你可以在右侧的聊天面板中继续输入新需求，Bolt.new会智能地修改现有代码。例如输入“将任务标题字体改为蓝色”，它会自动更新CSS。这种迭代式开发大大减少了手动编码时间。

实操步骤：

在聊天框输入“在任务列表下方添加一个计数器，显示总任务数和已完成数”。
等待几秒，你会看到代码自动更新，预览区出现计数器。
如果不满意，可以继续要求“把计数器放到顶部”。

3.2 导出与部署

完成开发后，你可以点击右上角的“导出”按钮。Bolt.new提供两种方式：

下载ZIP包： 包含完整的项目文件，适合在本地继续开发。
一键部署： 连接到Vercel或Netlify，输入项目名称即可部署到生产环境。

4. 进阶技巧

4.1 使用模板与示例

Bolt.new内置了丰富的模板库，包括电商、博客、管理后台等。点击主页的“模板”标签页，选择一个模板，然后直接修改即可。这比从零开始更快。

技巧Tip： 如果你想要一个复杂的应用，可以先选择一个最接近的模板，然后通过聊天逐步调整。

4.2 指定技术栈

在提示词中明确技术栈能获得更精确的结果。例如：

“使用Next.js 14 + Prisma + PostgreSQL”
“使用Vue 3 + Pinia + Firebase”

Bolt.new支持几乎所有主流框架，从React、Vue到Svelte，后端从Express、FastAPI到Golang。

4.3 代码审查与手动修改

虽然AI生成代码，但你仍然可以直接在编辑器里修改任何文件。点击文件树中的文件，右侧会打开代码编辑器，你可以像使用VS Code一样直接编辑。修改后，预览会自动更新。

实操步骤：

点击文件树中的 src/App.jsx。
找到 function App() 里面的 return 语句，在
中添加 style={{background: '#f0f0f0'}}。
观察预览区背景颜色变化。

5. 最佳实践

5.1 提示词工程

好的提示词是成功的一半。遵循以下原则：

具体清晰： 不要只说“做个博客”，而要“一个个人博客，支持Markdown文章，分类标签，评论功能，用React + TypeScript”。
分步描述： 第一次先生成基础框架，然后逐步添加功能。
包含样式要求： 如“Modern卡片式布局，主色调蓝色，响应式设计”。

5.2 处理错误

如果生成的代码报错，不要慌张。Bolt.new会在预览区红色标出错误信息。你可以：

截图错误信息并在聊天框中输入“修复这个错误”。
手动查看控制台，找到报错行并修正。
如果问题复杂，可以重新生成，有时多次尝试会得到不同结果。

6. 常见问题FAQ

Q1: 生成的代码能商用吗？

Bolt.new生成的代码没有版权限制，你可以自由使用，包括商业项目。但请注意依赖的开源库的许可证。

Q2: 免费版有什么限制？

免费版每天可生成10次，每次生成的应用预览有效期为24小时。付费版无限生成，且支持更长的上下文。

Q3: 能生成移动端应用吗？

目前Bolt.new主要针对Web应用，但你可以通过提示“使用React Native”来生成移动端代码，但预览只能在Web模拟器中。

7. 总结

Bolt.new将AI编程的门槛降到了最低，无论你是没有编程经验的创业者，还是想快速验证想法的开发者，都能用它大幅提升效率。记住：写好提示词，善于迭代修改，你就能用Bolt.new打造出令人惊艳的全栈应用。开始你的第一个项目吧！