---
title: "4.1.2 准备你的 AI IDE"
order: 3
---


![04-practice-0-to-1_4.1-before-start_4.1.2-prepare-ai-ide.png](/images/Basic/04-practice-0-to-1_4.1-before-start_4.1.2-prepare-ai-ide.png)
# 4.1.2 准备你的 AI IDE

> **本小节目标**：用 5 分钟确认你的 AI IDE 已准备就绪

## 确认工具已安装

如果你跟着第一章学习，应该已经选择并安装了一个 AI IDE。

还没安装？请先回顾 [1.3 工具选型指南](../../01-awakening/1.3-tools-guide/)，完成安装后再继续。

::: warning 重要
本章使用本地安装的 AI IDE 进行开发。请确保你的电脑上已经安装好工具。
:::

## 熟悉 AI IDE 的界面布局

无论你使用哪款 AI IDE，它们都有相似的界面结构：

```
┌────────────────────────────────────────────────────────────┐
│                        AI IDE 通用布局                      │
├──────────────┬─────────────────────┬───────────────────────┤
│              │                     │                       │
│   文件区      │      代码区          │       预览区          │
│  (项目文件)   │   (AI生成的代码)      │   (实时效果)          │
│              │                     │                       │
├──────────────┴─────────────────────┴───────────────────────┤
│                        对话区                               │
│               (你输入 Prompt 的地方)                         │
└────────────────────────────────────────────────────────────┘
```

### 对话区：你和 AI 沟通的地方

这是最重要的区域。你在这里输入 Prompt（也叫指令、需求描述），AI 会理解你的意图并生成代码。

**找到它**：通常在界面底部或侧边，有一个输入框，可能标注着 "Ask AI"、"Chat"、"Composer" 等字样。

### 代码区：AI 生成代码的地方

AI 生成的代码会显示在这里。你通常不需要直接编辑这些代码，但可以查看。

**找到它**：通常在界面中央，显示着类似 `index.html`、`app.js` 这样的文件内容。

### 文件区：管理项目文件的地方

这里显示项目中的所有文件和文件夹。随着开发推进，你会看到越来越多的文件出现在这里。

**找到它**：通常在界面左侧，是一个树状的文件列表。

### 预览区：看到效果的地方

这是最有成就感的区域。你的网页会在这里实时显示。

**找到它**：通常在界面右侧，可能需要点击 "Preview"、"Run" 或类似按钮才会出现。有些 AI IDE 也支持在浏览器中打开预览。

## 创建项目文件夹

在开始之前，建议在你的电脑上创建一个专门的项目文件夹：

1. 打开"文档"或"桌面"文件夹
2. 创建一个新文件夹，命名为 `vibe-coding-projects`
3. 在里面再创建一个子文件夹 `todo-list`（待办清单项目）

文件夹结构如下：

```
文档/
└── vibe-coding-projects/
    └── todo-list/        ← 本章项目放这里
```

::: info 💡 为什么要这样做
把项目放在固定位置，方便你以后找到。AI IDE 生成的文件都会保存在这个文件夹里。
:::

## 在 AI IDE 中打开项目文件夹

1. 打开你的 AI IDE
2. 找到"打开文件夹"或"Open Folder"选项
3. 选择刚才创建的 `todo-list` 文件夹
4. 确认打开

现在，你的 AI IDE 应该显示一个空的项目。

## 验证工具正常：一个简单测试

在对话区输入以下 Prompt，测试工具是否正常工作：

```
请帮我创建一个简单的网页，显示"Hello, Vibe Coding!"这句话，文字居中，使用蓝色。
```

### 预期结果

你应该看到：
1. AI 开始生成代码（通常是一个 `index.html` 文件）
2. 代码区显示生成的 HTML 代码
3. 文件区出现新的文件
4. 预览区显示一个网页，上面有蓝色居中的 "Hello, Vibe Coding!" 文字

### 如果一切正常

恭喜！你的工具已经准备好了。可以直接跳到 [4.1.4 最终检查清单](./4.1.4-checklist.md)。

### 如果遇到问题

| 问题 | 可能原因 | 解决方法 |
|------|---------|---------|
| 对话区没反应 | 网络问题或未登录 | 检查网络连接，确认已登录账号 |
| AI 回复很慢 | 网络延迟 | 耐心等待，或检查网络状况 |
| 代码生成了但看不到预览 | 预览未开启 | 找到 "Preview" 或 "Run" 按钮，或在浏览器中打开生成的 HTML 文件 |
| 提示额度用完 | 免费额度耗尽 | 查看是否可以购买额度，或等待月度额度刷新 |
| 界面全是英文 | 语言设置 | 不影响使用，AI 可以理解中文 Prompt |

## 关于免费额度

大多数 AI IDE 都提供免费额度或试用期。对于本教程的待办清单项目，免费额度通常足够。

如果额度不够：
1. 查看工具是否有付费选项
2. 优化你的 Prompt，减少不必要的对话
3. 等待月度额度刷新

## 本小节要点

✓ **工具已安装**：你的电脑上有一个可用的 AI IDE

✓ **界面已熟悉**：知道对话区、代码区、文件区、预览区在哪里

✓ **项目已创建**：有一个专门的项目文件夹，AI IDE 已打开这个文件夹

✓ **测试已通过**：用 "Hello, Vibe Coding!" 验证了工具正常工作

::: tip 下一步
工具确认可用后，我们来做最后的环境检查。
:::

→ [4.1.3 工具准备与环境检查](./4.1.3-environment-check.md)