Bolt.new 第一个应用
先别急着做“完美工程”。我们这页的目标很简单：在 30-60 分钟内做出一个能演示的版本。这个版本不需要复杂权限，不需要完美架构，只要把核心流程跑通就够了。
为什么要这样做？因为第一次用 Bolt.new，最容易卡在“做得太多”。你一旦把目标压到最小，节奏就会顺，输出也会稳定（经验推断）。
举个常见目标（经验推断，2026-02）：“报名页 + 表单提交 + 列表展示”。通常 2-3 轮 Prompt 就能完成雏形，但最容易出问题的是依赖版本冲突和 API Key 未配置。处理方式很直接：锁定版本，先生成 .env.example，再补真实 .env。
TL;DR
- 首个应用目标：1 个页面 + 1 个核心流程。
- 先跑通，再优化 UI 和工程化。
- 遇到报错，优先让 Bolt 解释原因，再做最小修复。
你要做出什么
先给你一个明确的目标：
- 一个表单页面。
- 一个列表展示区域。
- 一个可以新增并看到结果的流程。
这三件事做完，你就具备了“可演示”的最小能力。
1. 开启你的第一个项目
访问 bolt.new，你会看到一个极其简洁的界面。
在开始之前，花 5 分钟做两件事：
- 写下“这个应用最重要的一件事是什么”。
- 决定“第一版只做 1 个页面”。
这两句话写清楚，后面的 Prompt 会顺很多。如果这一步你没想清楚，后面很容易被“需求增殖”拖着跑。
步骤 A：描述你的需求
在中间的输入框中，用自然语言描述你想构建的应用。
创建一个现代化的报名页，使用 React + Tailwind。
功能：填写姓名和邮箱，点击提交后在右侧列表展示。
要求：移动端优先，按钮有 hover 状态。
步骤 B：观察生成过程
Bolt 会自动执行以下操作：
- 初始化环境：配置 WebContainer（在浏览器中运行 Node.js）。
- 创建文件：生成
package.json,tailwind.config.js,App.tsx等。 - 安装依赖：自动运行
npm install。 - 启动开发服务器：运行
npm run dev。
到这里为止，你应该能看到预览页面跑起来。如果你还没看到预览，就别继续加需求，先把这一步解决。
2. 实时预览与调试
在右侧面板，你会看到应用的实时预览界面。
这一步是“验证点”。只要能看到页面正常渲染，你就知道方向没跑偏。
如果页面没有渲染出来，别急着重做。先看终端日志，通常是依赖安装失败或端口冲突（经验推断）。把错误贴回去，并要求“最小改动修复”，成功率会更高。
3. 协作式开发
你可以不断通过对话来完善你的应用。
这时候的原则是“一次只改一件事”。做完一轮就确认预览，再进入下一轮。你会发现，节奏一旦慢下来，结果反而更稳。
- 添加功能："给列表添加删除按钮"。
- 修复 Bug："修复点击删除按钮时没有弹窗确认的问题"。
- 调整 UI："将整体配色改为浅色，按钮圆角 12px"。
4. Bolt.new 的独特优势
| 特性 | 传统 AI 编程 (如 ChatGPT) | Bolt.new |
|---|---|---|
| 代码生成 | 仅提供代码片段 | 生成完整项目结构 |
| 环境配置 | 需要用户本地配置环境 | 零配置，浏览器即开发环境 |
| 实时预览 | 无 | 内置预览窗口 |
| 依赖管理 | 用户手动安装 | AI 自动管理并运行 |
5. 常见坑与修复
下面这些问题几乎每个人都会遇到：
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 项目改着改着变乱 | 需求堆叠 | 每轮只改 1 件事 |
| 报错看不懂 | 直接重做 | 让 Bolt 解释原因 |
| 环境变量缺失 | 没 .env.example | 先生成模板再补真实值 |
6. 行动清单
- 写下 3 条验收标准（例如：可新增、可删除、可持久化）。
- 第 1 轮 Prompt 只做“能跑起来的原型”。
- 第 2 轮 Prompt 再做 UI 与交互细化。
- 第 3 轮 Prompt 做部署或导出。
做到这里，你就可以向别人演示你的项目了。
6.5 导出后怎么整理（可选）
当你打算长期维护时，建议把项目迁移到本地工程，然后做三件事：
- 把组件拆到
components/，把页面放到pages/或app/。 - 把环境变量集中到
.env.example。 - 写一个
README.md记录启动命令和已实现功能。
做完这些，团队协作会舒服很多。
7. 常见问题
- 它使用的是什么模型？ 模型可能会随版本调整，建议以官网信息为准。
- 我可以导出代码吗？ 点击右上角的 "Download" 按钮，可以将整个项目下载为 ZIP 包，然后在本地 VS Code 中继续开发。
一个更稳的首轮 Prompt
请生成一个“报名页原型”：
技术栈：React + Tailwind + 本地存储。
功能：新增报名、删除报名、列表展示。
结构：App + Form + List 三个组件。
要求：移动端优先、按钮有 hover 状态。
第二轮迭代的说法
在现有项目上迭代：
1) 把表单验证补齐（姓名必填、邮箱格式）。
2) 列表加一个“最近新增”排序。
3) 给提交按钮加 loading 状态。
遇到错误时怎么说更有效
你可以直接把错误贴回去，但最好加一句“最小改动修复”：
我遇到以下报错：
xxx。请先解释原因，再用“最小改动”修复，不要大改结构。
小结
这一页解决的是“如何跑通第一个可演示版本”。下一步请去看 Prompt 技巧，把结构写清楚，你会省很多时间。
