本小节目标：用 5 分钟确认你的 AI IDE 已准备就绪
如果你跟着第一章学习，应该已经选择并安装了一个 AI IDE。
还没安装？请先回顾 1.3 工具选型指南，完成安装后再继续。
本章使用本地安装的 AI IDE 进行开发。请确保你的电脑上已经安装好工具。
无论你使用哪款 AI IDE，它们都有相似的界面结构：
┌────────────────────────────────────────────────────────────┐
│ AI IDE 通用布局 │
├──────────────┬─────────────────────┬───────────────────────┤
│ │ │ │
│ 文件区 │ 代码区 │ 预览区 │
│ (项目文件) │ (AI生成的代码) │ (实时效果) │
│ │ │ │
├──────────────┴─────────────────────┴───────────────────────┤
│ 对话区 │
│ (你输入 Prompt 的地方) │
└────────────────────────────────────────────────────────────┘这是最重要的区域。你在这里输入 Prompt（也叫指令、需求描述），AI 会理解你的意图并生成代码。
找到它：通常在界面底部或侧边，有一个输入框，可能标注着 "Ask AI"、"Chat"、"Composer" 等字样。
AI 生成的代码会显示在这里。你通常不需要直接编辑这些代码，但可以查看。
找到它：通常在界面中央，显示着类似 index.html、app.js 这样的文件内容。
这里显示项目中的所有文件和文件夹。随着开发推进，你会看到越来越多的文件出现在这里。
找到它：通常在界面左侧，是一个树状的文件列表。
这是最有成就感的区域。你的网页会在这里实时显示。
找到它：通常在界面右侧，可能需要点击 "Preview"、"Run" 或类似按钮才会出现。有些 AI IDE 也支持在浏览器中打开预览。
在开始之前，建议在你的电脑上创建一个专门的项目文件夹：
vibe-coding-projectstodo-list（待办清单项目）文件夹结构如下：
文档/
└── vibe-coding-projects/
└── todo-list/ ← 本章项目放这里把项目放在固定位置，方便你以后找到。AI IDE 生成的文件都会保存在这个文件夹里。
todo-list 文件夹现在，你的 AI IDE 应该显示一个空的项目。
在对话区输入以下 Prompt，测试工具是否正常工作：
请帮我创建一个简单的网页，显示"Hello, Vibe Coding!"这句话，文字居中，使用蓝色。你应该看到：
index.html 文件）恭喜！你的工具已经准备好了。可以直接跳到 4.1.4 最终检查清单。
| 问题 | 可能原因 | 解决方法 |
|---|---|---|
| 对话区没反应 | 网络问题或未登录 | 检查网络连接，确认已登录账号 |
| AI 回复很慢 | 网络延迟 | 耐心等待，或检查网络状况 |
| 代码生成了但看不到预览 | 预览未开启 | 找到 "Preview" 或 "Run" 按钮，或在浏览器中打开生成的 HTML 文件 |
| 提示额度用完 | 免费额度耗尽 | 查看是否可以购买额度，或等待月度额度刷新 |
| 界面全是英文 | 语言设置 | 不影响使用，AI 可以理解中文 Prompt |
大多数 AI IDE 都提供免费额度或试用期。对于本教程的待办清单项目，免费额度通常足够。
如果额度不够：
✓ 工具已安装：你的电脑上有一个可用的 AI IDE
✓ 界面已熟悉：知道对话区、代码区、文件区、预览区在哪里
✓ 项目已创建：有一个专门的项目文件夹，AI IDE 已打开这个文件夹
✓ 测试已通过：用 "Hello, Vibe Coding!" 验证了工具正常工作
工具确认可用后，我们来做最后的环境检查。