# Vibe Coding 教程设计文档

**日期：** 2026-02-20
**状态：** 已批准

## 概述

为零编程基础的小白用户编写一份完整的 Vibe Coding 中文图文教程。教程采用"学习旅程式"结构，循序渐进地引导读者理解 vibe coding 的原理，掌握与 AI 对话生成代码的核心技能，并能跟着示例完成自己的项目。

## 目标读者

- 没有任何编程基础的普通用户
- 对 AI 编程感兴趣，想用 AI 做出自己想要的东西
- 不打算成为专业程序员，但希望能用 AI 工具实现自己的想法

## 关键决策

| 决策项 | 选择 | 理由 |
|--------|------|------|
| 结构方式 | 学习旅程式 | 最适合零基础读者，循序渐进 |
| 输出形式 | 图文教程（Markdown） | 发布在 GitHub，开源共享 |
| AI 工具 | 多工具对比介绍 | 让读者根据自身情况选择 |
| 示例项目 | 教方法论，读者自定义 | 授人以渔而非授人以鱼 |
| 语言 | 中文 | 面向中文读者群体 |
| 篇幅 | 3 万字+ | 长篇系列，覆盖面广 |
| 成功标准 | 理解原理 + 能跟着做示例 | 不要求独立做复杂项目 |

## 教程结构

### 阶段一：认识篇

#### 第 1 章：什么是 Vibe Coding（2000-3000 字）

**核心目标：** 让读者理解 vibe coding 是什么，消除"编程很难"的心理障碍

**内容要点：**
- 开篇故事：Andrej Karpathy 2025 年初提出 "vibe coding" 概念
- 类比解释：你是"产品经理"，AI 是你的"程序员"
- 与传统编程的对比表
- 适合 / 不适合用 vibe coding 做什么（诚实说明局限性）
- 真实案例：展示几个用 vibe coding 做出来的项目截图

#### 第 2 章：你需要准备什么（2500-3500 字）

**核心目标：** 让读者零门槛开始，并为不同工具路线做好环境准备

**内容要点：**
- 心态准备：不需要"学会编程"，而是"学会和 AI 沟通"
- 硬件要求：一台能上网的电脑 + 浏览器
- 账号准备：AI 编程工具账号 + GitHub 账号（附注册步骤截图）
- 费用说明：免费/付费工具透明对比
- 终端/命令行初识：什么是终端（类比为"用文字和电脑对话"），Mac 打开终端的方法，Windows 打开 PowerShell 的方法，不需要害怕它
- 按路线准备环境：
  - 网页端路线（Bolt/v0）：不需要安装任何东西，跳过本节
  - 编辑器端路线（Cursor）：安装 Homebrew（Mac）、安装 Node.js、安装 VS Code/Cursor，每步配截图和验证命令
  - 说明：不确定选哪条路线？先跳过，第 4 章会帮你决定，届时再回来
- 可选进阶：Python 安装（如果想做非网页类项目）

### 阶段二：工具篇

#### 第 3 章：AI 编程工具全景（4000-5000 字）

**核心目标：** 让读者了解市面上有哪些工具及各自的特点

**内容要点：**
- 工具分类框架（三大类）：
  - 网页端工具（零安装）：Bolt.new、v0.dev、Lovable、Replit Agent
  - 编辑器/IDE 端：Cursor、Windsurf、GitHub Copilot
  - 命令行端：Claude Code、Aider
- 每个工具统一格式介绍：一句话定位、适合做什么、优缺点、价格、界面截图
- 横向对比表格
- 对新手的重点推荐

#### 第 4 章：选择你的第一个工具并上手（4000-5000 字）

**核心目标：** 读者选定一个工具，完成环境配置，并成功跑通第一次体验

**内容要点：**
- 按场景推荐决策树
- 以 Bolt 和 Cursor 为主要示例的上手指南：
  - 路线 A（Bolt）：注册即用，零配置
  - 路线 B（Cursor）：环境检查清单（Node.js 是否已装？没装的话回第 2 章），安装 Cursor，创建第一个项目文件夹
  - 两条路线都包含：界面认识、第一次对话、"Hello World" 时刻
- 环境验证：确认一切就绪的检查步骤（运行一个简单命令验证）
- 常见上手问题 FAQ（包含环境配置相关：brew 安装失败怎么办、Node.js 版本问题、权限问题等）

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

#### 第 5 章：学会和 AI 对话 —— Prompt 的艺术（4000-5000 字）

**核心目标：** 教程最核心章节——教读者如何有效地向 AI 描述需求

**内容要点：**
- 核心原则：AI 不会读心，你说得越清楚，结果越好
- 需求描述框架（可复用模板）：目标 + 外观 + 功能 + 风格
- 好 prompt vs 坏 prompt 对比示例（5-6 组，配 AI 生成结果截图）
- 迭代对话技巧：追加修改、用截图辅助、何时重新开始 vs 继续
- 常见错误：一次说太多、描述太模糊、不验收就继续

#### 第 6 章：从零开始做一个项目（5000-6000 字）

**核心目标：** 引导读者用自己的想法走一遍完整的 vibe coding 流程

**内容要点：**
- 不给固定项目，教方法论：引导想法 → 具体需求描述
- 完整流程演示（示例项目走一遍，强调替换为自己的想法）：
  - Step 1：初始需求 → 第一版输出
  - Step 2：审视结果 → 提出修改
  - Step 3：逐步添加功能
  - Step 4：调整样式和细节
- 通用技巧穿插：拆解大需求、每次只改一件事、满意再做下一步
- 最终成果展示

#### 第 7 章：当 AI 搞砸了怎么办（3000-4000 字）

**核心目标：** 教读者如何应对 AI 出错的情况

**内容要点：**
- 正常化失败：AI 出错是常态
- 常见问题类型及应对：界面不对、功能不对、代码报错、越改越乱
- 调试基本思路（不需要懂代码）：浏览器 console、截图给 AI、撤销和版本回退
- 心态建议：耐心迭代，一次解决一个问题

#### 第 8 章：进阶技巧（4000-5000 字）

**核心目标：** 为想进一步提升的读者提供更多工具和方法

**内容要点：**
- 版本管理入门（Git 极简教程）：为什么需要、GitHub Desktop 基础操作、回退场景
- 拆分复杂需求：先骨架再内容再样式、多会话管理不同模块
- 设计参考技巧：参考网站描述风格、设计灵感网站推荐、模仿风格
- 部署上线基础：Vercel/Netlify 一键部署、自定义域名

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

#### 第 9 章：实战案例展示（5000-7000 字）

**核心目标：** 用真实案例展示不同复杂度的 vibe coding 过程

**内容要点：**
- 案例 1（简单）：个人作品集页面
  - 工具：v0 或 Bolt
  - 完整对话过程 + 每轮迭代截图
- 案例 2（中等）：互动式小工具（倒计时器/记账本/习惯打卡）
  - 工具：Cursor
  - 展示复杂交互和 bug 修复过程
- 案例 3（进阶）：带数据存储的小应用
  - 工具：Cursor + Supabase
  - 展示后端接入和部署上线
- 每个案例结尾总结用到的技巧

#### 第 10 章：下一步去哪里（1500-2000 字）

**核心目标：** 让读者知道学完教程后如何继续成长

**内容要点：**
- 继续 vibe coding 方向：更复杂项目、更多工具、社区参与
- 可选：学一点基础编程知识（HTML/CSS 推荐）
- 社区和资源推荐
- 鼓励动手实践的结语

## 篇幅预估

| 章节 | 预估字数 |
|------|----------|
| 第 1 章：什么是 Vibe Coding | 2,000 - 3,000 |
| 第 2 章：你需要准备什么 | 2,500 - 3,500 |
| 第 3 章：AI 编程工具全景 | 4,000 - 5,000 |
| 第 4 章：选择你的第一个工具 | 4,000 - 5,000 |
| 第 5 章：Prompt 的艺术 | 4,000 - 5,000 |
| 第 6 章：从零开始做一个项目 | 5,000 - 6,000 |
| 第 7 章：当 AI 搞砸了怎么办 | 3,000 - 4,000 |
| 第 8 章：进阶技巧 | 4,000 - 5,000 |
| 第 9 章：实战案例展示 | 5,000 - 7,000 |
| 第 10 章：下一步去哪里 | 1,500 - 2,000 |
| **总计** | **36,000 - 47,500** |

## 项目结构

```
vibe-coding-guide/
├── README.md                    # 项目介绍和目录
├── docs/
│   └── plans/
│       └── 2026-02-20-vibe-coding-tutorial-design.md
├── chapters/
│   ├── 01-what-is-vibe-coding.md
│   ├── 02-what-you-need.md
│   ├── 03-ai-tools-landscape.md
│   ├── 04-your-first-tool.md
│   ├── 05-art-of-prompting.md
│   ├── 06-build-your-first-project.md
│   ├── 07-when-ai-goes-wrong.md
│   ├── 08-advanced-techniques.md
│   ├── 09-real-world-examples.md
│   └── 10-whats-next.md
└── images/                      # 截图和配图
```

## 写作原则

1. **用大白话**：避免任何专业术语，必须用时一定要解释
2. **多用类比**：用读者熟悉的事物解释新概念
3. **配图优先**：关键步骤必须配截图，结果展示用前后对比
4. **鼓励而非吓退**：强调"你也可以做到"，遇到问题是正常的
5. **诚实面对局限**：不夸大 AI 能力，坦诚说明什么做不到