如何用 Bolt.new 快速原型开发
# 如何使用 Bolt.new 进行快速原型开发
作为一名花费多年时间与配置设置和样板代码斗争的开发者，当我第一次听说 Bolt.new 时，我持怀疑态度。但在用一个下午用原型开发了三个不同的应用程序后，我可以告诉你：这真是一个改变游戏规则的工具。以下是我将想法在几分钟内转化为可用原型的实用指南。
## 前提条件
在开始之前，请确保你具备：
- **现代网络浏览器**（推荐 Chrome 90+ 或 Firefox 90+）
- **GitHub 账户**（免费版即可）
- **本地安装 Node.js 18+**（用于测试导出的项目）
- **对 React 或 Vue 的基本了解**（Bolt.new 生成基于组件的代码）
- **耐心**——AI 并不完美，但它出奇地好用
> **警告：** Bolt.new 不能替代对代码的理解。你仍然需要调试和调整生成的输出。
## 第一步：访问平台
在浏览器中导航至 [bolt.new](https://bolt.new)。你会看到一个简洁、极简的界面，只有一个提示输入框。
界面由三个主要区域组成：
- 顶部的**提示输入框**
- 左侧的**代码编辑器**（初始为只读）
- 右侧的**实时预览**
## 第二步：编写你的第一个提示
这是魔法发生的地方。我发现具体、详细的提示能产生最佳结果。以下是我常用的模板：
```
创建一个具有以下功能的[应用类型]：
1. [功能 1]
2. [功能 2]
3. [功能 3]
前端使用[框架/库]，数据持久化使用[数据库/后端]。
包括：
- 响应式设计
- 错误处理
- 加载状态
```
例如，当我构建一个任务管理应用时：
```
使用 React 和 Tailwind CSS 创建一个看板风格的任务管理应用。
功能：
1. 三列：待办、进行中、已完成
2. 列之间拖放
3. 添加带有标题和描述的新任务
4. 通过确认对话框删除任务
5. 本地存储持久化
包括加载动画和错误状态。
```
## 第三步：生成初始原型
按**回车键**或点击**生成**按钮。Bolt.new 将：
1. 分析你的提示
2. 生成项目结构
3. 编写所有必要文件
4. 安装依赖项
5. 启动开发服务器
这个过程通常需要 30–60 秒。你将在底部的控制台面板中看到进度。
```bash
# 幕后发生了什么（你将在控制台中看到）：
> 正在创建项目结构...
> 正在安装依赖项（react、react-dom、tailwindcss 等）
> 正在设置配置文件
> 正在启动开发服务器，地址为 http://localhost:5173
```
## 第四步：通过后续提示进行迭代
初始输出很少完美。这正是 Bolt.new 的亮点——你可以迭代改进。以下是我处理常见问题的方法：
**修复布局问题：**
```
标题太大了。将内边距减少到 py-2，并缩小 logo。
```
**添加缺失功能：**
```
添加一个搜索栏，按标题过滤任务。在用户输入时显示结果。
```
**修复错误：**
```
拖放功能不工作。检查 onDragEnd 处理程序，确保状态更新正确。
```
> **警告：** 避免一次要求太多更改。每个提示一两个修改能让 AI 保持专注。
## 第五步：导出你的项目
一旦你对原型满意，导出它：
1. 点击右上角的**导出**按钮
2. 选择**下载 ZIP** 用于本地开发
3. 或选择**部署到 GitHub** 进行版本控制
```bash
# 下载后，在本地设置：
unzip prototype.zip
cd prototype
npm install
npm run dev
```
## 第六步：打磨和部署
导