# Vibe Coding 教程实施计划

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** 编写一份 3 万字+的中文 Vibe Coding 图文教程，面向零编程基础用户，发布在 GitHub 上。

**Architecture:** 10 个章节分 4 个阶段，按学习旅程式结构组织。每个章节是独立的 Markdown 文件，存放在 `chapters/` 目录下。项目根目录有 `README.md` 作为目录和入口。`images/` 目录存放截图占位符说明。

**Tech Stack:** Markdown、GitHub

**写作原则（所有章节必须遵守）：**
1. 用大白话，避免专业术语，必须用时一定要解释
2. 多用类比，用读者熟悉的事物解释新概念
3. 用 `<!-- screenshot: 描述 -->` 标记需要配截图的位置
4. 鼓励而非吓退，强调"你也可以做到"
5. 诚实面对局限，不夸大 AI 能力
6. 每章开头有一句话说明"本章你将学到什么"
7. 每章结尾有"本章小结"和"下一步预告"

**设计文档：** `docs/plans/2026-02-20-vibe-coding-tutorial-design.md`

---

### Task 0: 项目脚手架

**Files:**
- Create: `README.md`
- Create: `chapters/` (directory)
- Create: `images/` (directory)

**Step 1: 创建项目目录结构**

```bash
mkdir -p chapters images
```

**Step 2: 创建 README.md**

创建 `README.md`，包含：
- 项目标题：Vibe Coding 完全指南
- 一句话描述：零基础也能用 AI 写代码
- 目标读者说明
- 完整的章节目录（链接到各章节文件）
- 贡献指南占位
- License（MIT）

README 模板：

```markdown
# Vibe Coding 完全指南

> 零基础也能用 AI 写代码 —— 一份写给所有人的 Vibe Coding 教程

## 这是什么？

这是一份面向完全没有编程经验的普通人的教程。它会手把手教你如何用 AI 工具，通过自然语言对话的方式，做出你想要的网站、工具和应用。

你不需要学习任何编程语言，不需要理解代码的每一行。你只需要学会如何清楚地告诉 AI 你想要什么。

## 适合谁读？

- 对 AI 编程感兴趣，但完全没有编程基础的人
- 想用 AI 做出自己的网站、小工具的人
- 不打算成为程序员，但想借助 AI 实现想法的人

## 目录

### 阶段一：认识篇

1. [什么是 Vibe Coding](chapters/01-what-is-vibe-coding.md) —— 了解这个让人人都能"编程"的新方式
2. [你需要准备什么](chapters/02-what-you-need.md) —— 零门槛开始你的第一步

### 阶段二：工具篇

3. [AI 编程工具全景](chapters/03-ai-tools-landscape.md) —— 认识市面上的各种 AI 编程工具
4. [选择你的第一个工具](chapters/04-your-first-tool.md) —— 上手你的第一个 AI 编程工具

### 阶段三：核心技能篇

5. [学会和 AI 对话](chapters/05-art-of-prompting.md) —— 掌握与 AI 沟通的核心技巧
6. [从零开始做一个项目](chapters/06-build-your-first-project.md) —— 用你自己的想法完成第一个作品
7. [当 AI 搞砸了怎么办](chapters/07-when-ai-goes-wrong.md) —— 坦然面对问题并学会解决
8. [进阶技巧](chapters/08-advanced-techniques.md) —— 版本管理、需求拆分、部署上线

### 阶段四：实战与拓展篇

9. [实战案例展示](chapters/09-real-world-examples.md) —— 三个真实项目的完整 Vibe Coding 过程
10. [下一步去哪里](chapters/10-whats-next.md) —— 持续成长的方向和资源

## 关于

本教程采用 [MIT License](LICENSE) 开源。欢迎提交 Issue 和 Pull Request。
```

**Step 3: 提交**

```bash
git add README.md
git commit -m "feat: add project README with table of contents"
```

---

### Task 1: 第 1 章 —— 什么是 Vibe Coding

**Files:**
- Create: `chapters/01-what-is-vibe-coding.md`

**目标字数：** 2000-3000 字

**Step 1: 调研**

用 WebSearch 搜索以下信息，确保内容准确：
- Andrej Karpathy 原始推文内容和时间
- "vibe coding" 这个词的起源和传播
- 当前用 vibe coding 做出的知名项目案例（2-3 个）

**Step 2: 撰写章节内容**

创建 `chapters/01-what-is-vibe-coding.md`，按以下结构撰写：

1. **开篇引言**（200 字）
   - 用一个生活化的场景引入：想象你有一个想法，想做成网站...
   - 引出 vibe coding 概念

2. **Vibe Coding 的由来**（300-400 字）
   - Andrej Karpathy 的故事和原始推文引用
   - "vibes" 的含义：凭感觉、凭直觉

3. **用类比解释 Vibe Coding**（300-400 字）
   - 类比 1：你是产品经理，AI 是程序员
   - 类比 2：像和一个全能助手说话，描述你想要什么，它帮你做出来

4. **Vibe Coding vs 传统编程对比表**（300-400 字）

   | 对比项 | 传统编程 | Vibe Coding |
   |--------|----------|-------------|
   | 你需要学什么 | 编程语言语法、算法 | 如何清楚描述需求 |
   | 写代码的人 | 你自己 | AI |
   | 花时间最多的事 | 写代码和调试 | 想清楚要什么、和 AI 沟通 |
   | 入门门槛 | 需要数月学习 | 几分钟即可开始 |
   | 适合做什么 | 任何软件 | 个人项目、原型、小工具 |

5. **Vibe Coding 能做什么**（300-400 字）
   - 适合：个人网站、小工具、原型验证、自动化脚本、学习项目
   - 真实案例展示（2-3 个，配截图占位符）

6. **诚实说说局限性**（300-400 字）
   - 不适合大型团队协作项目
   - 不适合对安全要求极高的场景
   - AI 会犯错，需要你验收
   - 复杂项目需要更多耐心和技巧

7. **本章小结 + 下一步预告**（100-200 字）

**Step 3: 自查清单**

- [ ] 没有使用任何未解释的专业术语
- [ ] 类比是否通俗易懂
- [ ] 截图占位符是否标记完整
- [ ] 有"本章小结"和"下一步预告"
- [ ] 字数在 2000-3000 范围

**Step 4: 提交**

```bash
git add chapters/01-what-is-vibe-coding.md
git commit -m "feat: add chapter 1 - what is vibe coding"
```

---

### Task 2: 第 2 章 —— 你需要准备什么

**Files:**
- Create: `chapters/02-what-you-need.md`

**目标字数：** 2500-3500 字

**Step 1: 调研**

用 WebSearch 确认以下信息的准确性：
- 各 AI 编程工具当前的免费额度和价格
- GitHub 注册流程
- Homebrew 最新安装命令（Mac）
- Node.js LTS 最新版本号和安装方式
- Python 最新稳定版本号
- VS Code / Cursor 下载地址

**Step 2: 撰写章节内容**

创建 `chapters/02-what-you-need.md`，按以下结构撰写：

1. **开篇**（100-200 字）
   - 好消息：你需要准备的东西很少
   - 本章概览
   - 提示：如果你只想用网页端工具（Bolt/v0），大部分准备工作可以跳过

2. **心态准备：最重要的事**（300-400 字）
   - 你不是在"学编程"，而是在"学和 AI 沟通"
   - 就像学会使用搜索引擎一样，核心是学会提问
   - 不需要完美，只需要迭代

3. **硬件要求**（100-200 字）
   - 一台能上网的电脑（Windows / Mac / Linux 均可）
   - 一个现代浏览器（Chrome 推荐）
   - 就这么多。真的。

4. **需要注册的账号**（400-500 字）
   - AI 编程工具账号（具体在第 4 章详细教，这里先列清单）
   - GitHub 账号：什么是 GitHub（用云端硬盘类比），为什么需要，注册步骤
   - 截图占位符

5. **费用说明**（300-400 字）
   - 完全免费就能开始：列出免费工具和额度
   - 付费方案：什么时候值得付费，各工具价格区间
   - 建议：先用免费额度体验，确认适合自己再考虑付费

6. **认识终端/命令行**（400-500 字）
   - 什么是终端：类比为"用文字和电脑对话"，就像发微信一样，你打字发指令，电脑回复你结果
   - 别害怕它：虽然看起来像黑客电影，但其实很简单，我们只会用到几个最基本的命令
   - Mac 用户：如何打开"终端"应用（截图）
   - Windows 用户：如何打开 PowerShell（截图）
   - 试一试：输入 `echo "Hello"` 看看效果（截图）
   - 说明：后面章节中，偶尔会用到终端来安装工具或运行命令，遇到时会手把手教

7. **按路线准备环境**（500-700 字）
   - 先说明：不确定选哪条路线？先跳过，第 3-4 章会帮你选工具，选好后再回来按需安装
   - **路线 A：网页端工具（Bolt / v0 / Lovable）**
     - 恭喜，你什么都不用装！浏览器打开就能用
   - **路线 B：编辑器端工具（Cursor）**
     - Mac 用户需要安装 Homebrew（包管理器，类比为"软件的应用商店"）：
       - 打开终端，粘贴安装命令（给出具体命令）
       - 等待安装完成（可能需要几分钟）
       - 验证：输入 `brew --version`，看到版本号就成功了（截图）
     - 安装 Node.js（JavaScript 运行环境，让你的网页项目能跑起来）：
       - Mac：`brew install node`
       - Windows：从官网下载安装包
       - 验证：`node --version`（截图）
     - 安装 Cursor：
       - 从官网下载安装（截图）
       - 或者先装 VS Code 也行，后续可以切换
   - **可选：安装 Python**
     - 如果你将来想做非网页类的项目（比如数据处理、自动化脚本），可以顺便装上
     - Mac：`brew install python`
     - Windows：从官网下载
     - 验证：`python3 --version`
     - 不确定要不要装？暂时跳过，以后需要时再回来

8. **本章小结 + 下一步预告**（100 字）

**Step 3: 自查清单**

- [ ] 费用信息是否为最新
- [ ] Homebrew、Node.js、Python 安装命令是否为最新
- [ ] 环境配置部分语气是否友好（不吓退读者）
- [ ] 明确标注了"网页端路线可以跳过"
- [ ] 截图占位符标记完整
- [ ] 字数在 2500-3500 范围

**Step 4: 提交**

```bash
git add chapters/02-what-you-need.md
git commit -m "feat: add chapter 2 - what you need to get started"
```

---

### Task 3: 第 3 章 —— AI 编程工具全景

**Files:**
- Create: `chapters/03-ai-tools-landscape.md`

**目标字数：** 4000-5000 字

**Step 1: 调研**

用 WebSearch 搜索以下各工具的最新信息（2026 年 2 月）：
- **网页端：** Bolt.new、v0.dev、Lovable、Replit Agent 的最新功能、价格、截图
- **编辑器端：** Cursor、Windsurf、GitHub Copilot 的最新功能、价格
- **命令行端：** Claude Code、Aider 的最新功能、价格
- 是否有新出现的重要工具需要补充

**Step 2: 撰写章节内容**

创建 `chapters/03-ai-tools-landscape.md`，按以下结构撰写：

1. **开篇**（200-300 字）
   - 市面上 AI 编程工具很多，不要被吓到
   - 分三类帮你理清楚
   - 本章目标：了解有哪些选择，为下一章选工具做准备

2. **工具分类总览图**（200 字）
   - 简要说明三大类的区别
   - 用类比：网页端像"外卖点餐"，编辑器端像"在家做饭"，命令行端像"专业厨房"

3. **网页端工具：打开浏览器就能用**（800-1000 字）
   - 共同特点：零安装、即开即用、适合快速体验
   - Bolt.new：一句话定位 + 适合做什么 + 优缺点 + 价格 + 截图占位
   - v0.dev：同上格式
   - Lovable：同上格式
   - Replit Agent：同上格式

4. **编辑器端工具：功能更强大的选择**（800-1000 字）
   - 共同特点：需要安装，但功能更全面，适合做较复杂项目
   - Cursor：同上格式（重点介绍，是目前最主流的）
   - Windsurf：同上格式
   - GitHub Copilot：同上格式

5. **命令行端工具：给进阶用户的利器**（400-500 字）
   - 共同特点：需要一定终端基础，功能最灵活
   - Claude Code：同上格式
   - Aider：同上格式
   - 注：本教程不重点介绍这类，但读者将来可以尝试

6. **横向对比表格**（300-400 字）

   | 工具 | 类型 | 入门难度 | 免费额度 | 月费 | 最适合 |
   |------|------|----------|----------|------|--------|
   | Bolt.new | 网页端 | ★☆☆ | 有 | $X | 快速原型 |
   | v0.dev | 网页端 | ★☆☆ | 有 | $X | UI 组件 |
   | ... | ... | ... | ... | ... | ... |

7. **新手应该选哪个？**（300-400 字）
   - 推荐路径：先用网页端体验（Bolt 或 v0），再转到 Cursor
   - 不要纠结选择，用起来比选对更重要

8. **本章小结 + 下一步预告**（100 字）

**Step 3: 自查清单**

- [ ] 各工具信息是否为最新（2026 年 2 月）
- [ ] 价格信息是否准确
- [ ] 对比表格是否公正客观
- [ ] 没有使用未解释的技术术语
- [ ] 字数在 4000-5000 范围

**Step 4: 提交**

```bash
git add chapters/03-ai-tools-landscape.md
git commit -m "feat: add chapter 3 - AI coding tools landscape"
```

---

### Task 4: 第 4 章 —— 选择你的第一个工具

**Files:**
- Create: `chapters/04-your-first-tool.md`

**目标字数：** 4000-5000 字

**Step 1: 调研**

用 WebSearch 确认 Bolt.new 和 Cursor 最新的：
- 注册/安装流程
- 界面布局
- 新用户引导流程
- Cursor 创建项目的流程和前置要求

**Step 2: 撰写章节内容**

创建 `chapters/04-your-first-tool.md`，按以下结构撰写：

1. **开篇**（100-200 字）
   - 上一章看了这么多工具，现在选一个开始吧
   - 选择恐惧症？别担心，我帮你

2. **决策指南：选哪个？**（300-400 字）
   - 决策树形式：
     - 想最快体验，不想装东西？→ Bolt.new
     - 想做更完整的项目？→ Cursor
     - 只想看看 UI 效果？→ v0.dev
   - 建议：如果拿不定主意，就从 Bolt.new 开始

3. **路线 A：Bolt.new 上手指南**（800-1000 字）
   - 打开网站 → 注册账号（截图）
   - 界面认识：输入框在哪、预览在哪、文件在哪（截图 + 标注）
   - 你的第一次对话：输入"帮我做一个简洁的个人介绍页面"
   - 看 AI 工作：它在做什么（截图）
   - Hello World 时刻：你的第一个页面出来了！（截图）
   - 试着修改："把背景色改成浅蓝色"（截图对比）

4. **路线 B：Cursor 上手指南**（1200-1500 字）
   - **环境检查**（先确认第 2 章的准备工作完成了）：
     - 检查 Node.js 是否已安装：`node --version`
     - 如果没有，回到第 2 章"路线 B"按步骤安装
   - 下载安装 Cursor（截图）
   - 打开 Cursor，界面认识（截图 + 标注）
   - **创建你的第一个项目文件夹**：
     - 在桌面或文档里新建一个文件夹（比如叫 "my-first-project"）
     - 用 Cursor 打开这个文件夹
   - 打开 AI 对话面板（Composer）
   - 第一次对话：同样的需求
   - 看 AI 生成代码 + 自动创建文件（截图）
   - **预览效果**：如何在浏览器中查看你做的网页
   - 修改迭代

5. **环境验证：确认一切就绪**（200-300 字）
   - 路线 A 验证：能打开 Bolt 并看到 AI 生成的预览 → 你已经准备好了
   - 路线 B 验证：Cursor 能打开、能和 AI 对话、能预览网页 → 你已经准备好了
   - 出问题了？看下面的 FAQ

6. **常见问题 FAQ**（600-800 字）
   - 注册时需要信用卡吗？
   - 免费额度用完了怎么办？
   - 网页打不开 / 下载很慢怎么办？
   - AI 生成的结果和教程不一样，正常吗？
   - 我可以两个都试试吗？
   - brew 安装失败/很慢怎么办？（提供国内镜像方案）
   - Node.js 安装后 `node` 命令找不到？（PATH 问题简单解释和解决方法）
   - 安装时提示需要管理员权限怎么办？

7. **本章小结 + 下一步预告**（100 字）

**Step 3: 自查清单**

- [ ] 注册/安装步骤是否为最新
- [ ] Cursor 路线包含了环境检查步骤
- [ ] FAQ 覆盖了环境配置常见问题
- [ ] 截图占位符是否标注清楚
- [ ] 字数在 4000-5000 范围

**Step 4: 提交**

```bash
git add chapters/04-your-first-tool.md
git commit -m "feat: add chapter 4 - choosing and setting up your first tool"
```

---

### Task 5: 第 5 章 —— 学会和 AI 对话（Prompt 的艺术）

**Files:**
- Create: `chapters/05-art-of-prompting.md`

**目标字数：** 4000-5000 字

**Step 1: 撰写章节内容**

这是整个教程最核心的章节，不需要额外调研，直接基于设计文档撰写。

创建 `chapters/05-art-of-prompting.md`，按以下结构撰写：

1. **开篇**（200-300 字）
   - Vibe coding 的核心技能不是写代码，是"说清楚你要什么"
   - 这章是整个教程最重要的一章，值得反复看

2. **核心原则：AI 不会读心**（300-400 字）
   - AI 只能根据你说的话来工作
   - 就像给不认识你的人打电话叫外卖：说得越具体，送来的东西越接近你想要的
   - 关键词：具体、明确、分步

3. **需求描述框架：WAFS 模板**（500-600 字）
   - **W**hat - 我要做什么（目标）
   - **A**ppearance - 它长什么样（外观/布局）
   - **F**unction - 有什么功能（交互/行为）
   - **S**tyle - 什么风格（颜色/字体/氛围）
   - 不需要每次都写全，但写得越全，结果越好
   - 一个完整的模板示例

4. **好 Prompt vs 坏 Prompt：6 组对比**（1000-1200 字）
   - 每组包含：坏 prompt → 好 prompt → 为什么好的更好 → AI 结果截图占位
   - 对比 1：太模糊 vs 具体描述
   - 对比 2：没说布局 vs 说清楚了布局
   - 对比 3：没提风格 vs 提了参考风格
   - 对比 4：一次说太多 vs 分步来
   - 对比 5：只说"改一下" vs 说清楚改什么
   - 对比 6：没给上下文 vs 给了背景信息

5. **迭代对话技巧**（600-800 字）
   - 怎么追加修改：直接说要改什么，不需要重复之前的内容
   - 怎么用截图辅助：截一张参考网站的图，说"我想要类似这样的效果"
   - 什么时候继续迭代 vs 重新开始：
     - 小修改（颜色、字号、位置）→ 继续
     - 整体方向偏了 → 重新开始一个对话

6. **五个常见错误**（500-600 字）
   - 错误 1：一次提太多需求
   - 错误 2：描述太模糊
   - 错误 3：不看结果就继续提需求
   - 错误 4：AI 说的话看不懂就跳过
   - 错误 5：完全不修改 AI 的第一版输出
   - 每个错误配正确做法

7. **本章小结 + 下一步预告**（100-200 字）
   - 总结 WAFS 框架
   - 下一章就要实战了

**Step 2: 自查清单**

- [ ] WAFS 框架是否清晰易记
- [ ] 6 组对比是否涵盖最常见场景
- [ ] 错误示例是否真实可信
- [ ] 字数在 4000-5000 范围

**Step 3: 提交**

```bash
git add chapters/05-art-of-prompting.md
git commit -m "feat: add chapter 5 - the art of prompting"
```

---

### Task 6: 第 6 章 —— 从零开始做一个项目

**Files:**
- Create: `chapters/06-build-your-first-project.md`

**目标字数：** 5000-6000 字

**Step 1: 撰写章节内容**

创建 `chapters/06-build-your-first-project.md`，按以下结构撰写：

1. **开篇**（200-300 字）
   - 前面学了理论，现在动手
   - 重要声明：我会用一个示例项目演示，但你应该做自己想做的东西
   - 跟着方法走，不要照抄具体内容

2. **第一步：想清楚你要做什么**（500-700 字）
   - 不要着急打开工具，先想一想
   - 思路启发列表：
     - 你有没有一个想给朋友看的个人主页？
     - 你有没有一个小工具的想法？（生日倒计时、记账、打卡）
     - 你有没有想给自家店做一个简单的展示页？
   - 把模糊的想法变具体：用 WAFS 框架整理
   - 示例：我要做一个"每日一句"的网页（展示每天随机一句励志名言）

3. **第二步：写出你的第一条 Prompt**（500-700 字）
   - 用 WAFS 框架写出完整的第一条描述
   - 示例 prompt 展示
   - 鼓励读者先写好再输入
   - 展示 AI 的第一版输出（截图占位）

4. **第三步：审视结果，提出修改**（600-800 字）
   - 看到第一版后不要急着改，先整体看看
   - 哪些地方满意？记下来
   - 哪些地方不满意？列一个修改清单
   - 每次只改一件事
   - 示例：3 轮修改的对话过程和截图

5. **第四步：逐步添加功能**（600-800 字）
   - 基础版满意后，开始加功能
   - 示例：添加"收藏"按钮、添加分享功能
   - 每加一个功能就测试验收
   - 展示迭代过程

6. **第五步：调整样式和细节**（400-600 字）
   - 功能完成后打磨外观
   - 调颜色、调字体、调间距
   - 移动端适配

7. **通用技巧总结**（500-600 字）
   - 黄金法则 1：先做骨架，再加功能，最后调样式
   - 黄金法则 2：每次只改一件事
   - 黄金法则 3：满意一个部分，再做下一个
   - 黄金法则 4：随时可以问 AI"这个能不能做"

8. **你的成果时刻**（200-300 字）
   - 如果你跟着做了，现在你应该有了自己的第一个 vibe coding 作品
   - 截图展示最终成品（示例项目）
   - 不完美没关系，重要的是你做出来了

9. **本章小结 + 下一步预告**（100 字）

**Step 2: 自查清单**

- [ ] 方法论是否通用（不依赖特定项目）
- [ ] 示例项目是否清晰但不喧宾夺主
- [ ] 鼓励读者做自己的项目而非照抄
- [ ] 字数在 5000-6000 范围

**Step 3: 提交**

```bash
git add chapters/06-build-your-first-project.md
git commit -m "feat: add chapter 6 - build your first project from scratch"
```

---

### Task 7: 第 7 章 —— 当 AI 搞砸了怎么办

**Files:**
- Create: `chapters/07-when-ai-goes-wrong.md`

**目标字数：** 3000-4000 字

**Step 1: 撰写章节内容**

创建 `chapters/07-when-ai-goes-wrong.md`，按以下结构撰写：

1. **开篇**（200-300 字）
   - 如果你做到这一步还没遇到问题，那太幸运了
   - AI 会犯错，这完全正常
   - 本章教你怎么应对

2. **正常化失败**（300-400 字）
   - 连专业程序员写的代码也有 bug
   - AI 也一样，它不完美
   - 重要的不是不犯错，而是知道怎么修

3. **问题类型 1：界面和你想的不一样**（400-500 字）
   - 原因：你的描述可能不够具体
   - 解决：更精确地描述你想要的效果
   - 技巧：截一张你想要的效果图给 AI
   - 示例对话

4. **问题类型 2：功能不对**（400-500 字）
   - 原因：AI 理解错了你的意思
   - 解决：用"当我做 X 的时候，应该发生 Y，但实际发生了 Z"的句式
   - 示例对话

5. **问题类型 3：代码报错 / 页面崩了**（400-500 字）
   - 原因：AI 写的代码有 bug
   - 解决：直接把报错信息复制给 AI
   - 如何找到报错信息：浏览器 F12 → Console（截图说明）
   - 示例对话

6. **问题类型 4：越改越乱**（400-500 字）
   - 原因：修改太多次，AI 可能丢失上下文
   - 解决方案 A：在当前对话里让 AI 重新整理一遍
   - 解决方案 B：开一个新对话，把当前代码和需求重新描述
   - 什么时候该"推倒重来"：整体方向偏了，不如从头开始

7. **简易调试工具箱**（300-400 字）
   - 浏览器开发者工具（只需要会看 Console 错误）
   - 截图大法：截图给 AI 说"这里不对"
   - 撤销和版本回退（各工具的撤销方式）

8. **心态建议**（200-300 字）
   - 每次只解决一个问题
   - 进步比完美更重要
   - 遇到搞不定的，暂时跳过也行

9. **本章小结 + 下一步预告**（100 字）

**Step 2: 自查清单**

- [ ] 语气是否鼓励（不要让读者觉得问题很可怕）
- [ ] 解决方案是否具体可操作
- [ ] 字数在 3000-4000 范围

**Step 3: 提交**

```bash
git add chapters/07-when-ai-goes-wrong.md
git commit -m "feat: add chapter 7 - dealing with AI mistakes"
```

---

### Task 8: 第 8 章 —— 进阶技巧

**Files:**
- Create: `chapters/08-advanced-techniques.md`

**目标字数：** 4000-5000 字

**Step 1: 调研**

用 WebSearch 确认以下内容的准确性：
- GitHub Desktop 当前下载地址和界面
- Vercel 和 Netlify 的免费部署流程
- 推荐的设计灵感网站（Dribbble、Awwwards 等是否仍活跃）

**Step 2: 撰写章节内容**

创建 `chapters/08-advanced-techniques.md`，按以下结构撰写：

1. **开篇**（100-200 字）
   - 你已经能用 vibe coding 做基本项目了
   - 这章的技巧会让你更高效、做得更好

2. **版本管理入门：给你的代码买保险**（1000-1200 字）
   - 为什么需要：改坏了能回去，就像游戏里的存档点
   - Git 是什么：用"时光机"类比
   - GitHub Desktop 使用教程（选它是因为有图形界面，对新手友好）：
     - 下载安装（截图）
     - 基本操作：保存一个版本（commit）
     - 回到之前的版本
     - 不需要学命令行 Git
   - 实际场景演示：做到一半改坏了，怎么回到之前的版本

3. **拆分复杂需求：大象要一口一口吃**（800-1000 字）
   - 问题：你想做一个"功能完整的记账应用"，直接一句话让 AI 做 → 效果差
   - 方法：像盖房子一样分步
     - 第一步：先做骨架（页面布局，没有真实功能）
     - 第二步：再加核心功能（记一笔账、显示列表）
     - 第三步：然后加次要功能（分类、统计图表）
     - 第四步：最后调样式
   - 多会话管理：每个大功能模块用一个独立对话
   - 示例对话展示

4. **设计参考技巧：让你的作品更好看**（600-800 字）
   - 你不是设计师，但可以借鉴
   - 如何用参考网站描述风格："我想要类似 XX 网站的那种风格"
   - 推荐灵感网站：Dribbble、Pinterest、Awwwards（各一句话介绍）
   - 配色工具推荐：直接让 AI 推荐配色方案也行

5. **部署上线：让你的作品能被别人看到**（800-1000 字）
   - 什么是"部署"：把你做的东西放到互联网上
   - Vercel 一键部署（最简单的方式）：
     - 注册 Vercel（截图）
     - 连接 GitHub 仓库
     - 自动部署
     - 得到一个可以分享的链接
   - 自定义域名（可选，简要提及）
   - 或者直接让 AI 帮你部署（Bolt 等工具内置部署功能）

6. **本章小结 + 下一步预告**（100 字）

**Step 3: 自查清单**

- [ ] Git 部分是否只教了最必要的操作
- [ ] 部署步骤是否准确且最新
- [ ] 字数在 4000-5000 范围

**Step 4: 提交**

```bash
git add chapters/08-advanced-techniques.md
git commit -m "feat: add chapter 8 - advanced techniques"
```

---

### Task 9: 第 9 章 —— 实战案例展示

**Files:**
- Create: `chapters/09-real-world-examples.md`

**目标字数：** 5000-7000 字

**Step 1: 撰写章节内容**

这章的核心是展示真实的 vibe coding 过程。需要模拟三个不同复杂度的真实项目从 prompt 到成品的完整过程。

创建 `chapters/09-real-world-examples.md`，按以下结构撰写：

1. **开篇**（200-300 字）
   - 前面学了理论和方法，这一章看看完整的实战
   - 三个案例由简到难
   - 关注过程，不是结果

2. **案例 1：个人作品集页面（简单）**（1500-2000 字）
   - 使用工具：Bolt.new（或 v0）
   - 需求背景：想做一个展示自己作品的单页面
   - 完整对话过程：
     - 第 1 轮：初始描述 → AI 输出（截图占位）
     - 第 2 轮：修改布局 → 效果（截图占位）
     - 第 3 轮：调整配色 → 效果（截图占位）
     - 第 4 轮：添加响应式 → 效果（截图占位）
     - 第 5 轮：最终微调 → 成品（截图占位）
   - 用时：约 15-20 分钟
   - 技巧回顾：这个过程中用了哪些前面学过的技巧

3. **案例 2：习惯打卡小工具（中等）**（1500-2000 字）
   - 使用工具：Cursor
   - 需求背景：想做一个每天记录习惯完成情况的工具
   - 完整对话过程：
     - 第 1 轮：描述核心需求 → 基础版（截图占位）
     - 第 2 轮：添加"打卡"交互 → 功能完善（截图占位）
     - 第 3 轮：遇到 bug —— 打卡后刷新数据丢失
     - 第 4 轮：让 AI 加上本地存储 → bug 修复（截图占位）
     - 第 5 轮：添加统计功能 → 最终版（截图占位）
   - 用时：约 30-45 分钟
   - 重点展示：遇到 bug 时如何用第 7 章的方法解决
   - 技巧回顾

4. **案例 3：带数据存储的记事本应用（进阶）**（1500-2000 字）
   - 使用工具：Cursor + Supabase（免费后端服务）
   - 需求背景：想做一个多设备同步的记事本
   - 完整对话过程：
     - 第 1 轮：做基础的记事本界面
     - 第 2 轮：让 AI 帮忙接入 Supabase（解释什么是后端）
     - 第 3 轮：实现登录功能
     - 第 4 轮：实现数据同步
     - 第 5 轮：部署上线
   - 用时：约 1-2 小时
   - 重点展示：如何用第 8 章的"拆分复杂需求"方法、如何部署
   - 技巧回顾

5. **三个案例的共性总结**（300-400 字）
   - 都是从简单描述开始
   - 都经历了多轮迭代
   - 都遇到了需要修改的地方
   - 最终都做出了可用的东西

6. **本章小结 + 下一步预告**（100 字）

**Step 2: 自查清单**

- [ ] 对话过程是否真实可信（不要太理想化）
- [ ] Bug 场景是否体现了第 7 章的方法
- [ ] 三个案例难度是否递进
- [ ] 字数在 5000-7000 范围

**Step 3: 提交**

```bash
git add chapters/09-real-world-examples.md
git commit -m "feat: add chapter 9 - real world examples"
```

---

### Task 10: 第 10 章 —— 下一步去哪里

**Files:**
- Create: `chapters/10-whats-next.md`

**目标字数：** 1500-2000 字

**Step 1: 调研**

用 WebSearch 搜索：
- 当前活跃的 vibe coding / AI 编程社区
- 推荐的中文学习资源和社区
- HTML/CSS 免费学习资源推荐

**Step 2: 撰写章节内容**

创建 `chapters/10-whats-next.md`，按以下结构撰写：

1. **开篇**（100-200 字）
   - 恭喜你走到了这里
   - 你已经掌握了 vibe coding 的核心技能
   - 接下来的路，有很多方向

2. **方向 1：继续用 Vibe Coding 做更多东西**（300-400 字）
   - 做更复杂的项目：全栈应用、移动端适配
   - 尝试更多工具：每个工具都有不同的优势
   - 挑战自己：试试做一个"别人也能用"的工具

3. **方向 2：学一点基础知识（可选）**（300-400 字）
   - 为什么学一点基础能让 vibe coding 更高效
   - 推荐从 HTML/CSS 开始（最直观、最容易上手）
   - 推荐的免费学习资源（2-3 个）
   - 不需要系统学习，遇到不懂的查一下就行

4. **社区和资源推荐**（300-400 字）
   - 中文社区推荐
   - 英文社区推荐
   - 推荐关注的人 / 频道
   - 获取 AI 工具最新动态的渠道

5. **结语**（200-300 字）
   - Vibe coding 让编程不再是少数人的特权
   - 最好的学习方式就是去做
   - 不要追求完美，先做出来，再慢慢改
   - 祝你创造出属于自己的东西

**Step 3: 自查清单**

- [ ] 推荐的资源是否仍然有效
- [ ] 结语是否有力量感和鼓励性
- [ ] 字数在 1500-2000 范围

**Step 4: 提交**

```bash
git add chapters/10-whats-next.md
git commit -m "feat: add chapter 10 - what's next"
```

---

### Task 11: 最终检查和完善

**Files:**
- Review: all `chapters/*.md` files
- Modify: `README.md` (if needed)

**Step 1: 全文通读检查**

检查所有章节：
- 各章节之间的衔接是否流畅（"上一章我们学了 X，这一章..."）
- 术语使用是否一致（同一个概念不要用不同的词）
- 截图占位符是否都有清晰描述
- 是否有遗漏的"本章小结"或"下一步预告"

**Step 2: 统计总字数**

```bash
wc -m chapters/*.md
```

确认总字数在 33,000-43,000 字范围。

**Step 3: 更新 README（如需要）**

如果写作过程中章节有调整，更新 README 的目录。

**Step 4: 最终提交**

```bash
git add -A
git commit -m "chore: final review and polish all chapters"
```

---

## 执行顺序总结

| Task | 章节 | 依赖 | 预估字数 |
|------|------|------|----------|
| 0 | 项目脚手架 | 无 | - |
| 1 | 第 1 章：什么是 Vibe Coding | Task 0 | 2,000-3,000 |
| 2 | 第 2 章：你需要准备什么 | Task 0 | 2,500-3,500 |
| 3 | 第 3 章：AI 编程工具全景 | Task 0 | 4,000-5,000 |
| 4 | 第 4 章：选择你的第一个工具 | Task 2, 3 | 4,000-5,000 |
| 5 | 第 5 章：Prompt 的艺术 | Task 0 | 4,000-5,000 |
| 6 | 第 6 章：从零开始做项目 | Task 5 | 5,000-6,000 |
| 7 | 第 7 章：当 AI 搞砸了 | Task 0 | 3,000-4,000 |
| 8 | 第 8 章：进阶技巧 | Task 0 | 4,000-5,000 |
| 9 | 第 9 章：实战案例展示 | Task 1-8 | 5,000-7,000 |
| 10 | 第 10 章：下一步去哪里 | Task 0 | 1,500-2,000 |
| 11 | 最终检查 | Task 1-10 | - |

**可并行的任务：** Task 1、2、3、5、7、8 互不依赖，可以并行执行。