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

写作原则（所有章节必须遵守）：

用大白话，避免专业术语，必须用时一定要解释
多用类比，用读者熟悉的事物解释新概念
用 `` 标记需要配截图的位置
鼓励而非吓退，强调"你也可以做到"
诚实面对局限，不夸大 AI 能力
每章开头有一句话说明"本章你将学到什么"
每章结尾有"本章小结"和"下一步预告"

设计文档： 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，按以下结构撰写：

开篇引言（200 字）
- 用一个生活化的场景引入：想象你有一个想法，想做成网站...
- 引出 vibe coding 概念
Vibe Coding 的由来（300-400 字）
- Andrej Karpathy 的故事和原始推文引用
- "vibes" 的含义：凭感觉、凭直觉
用类比解释 Vibe Coding（300-400 字）
- 类比 1：你是产品经理，AI 是程序员
- 类比 2：像和一个全能助手说话，描述你想要什么，它帮你做出来

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

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

Vibe Coding 能做什么（300-400 字）
- 适合：个人网站、小工具、原型验证、自动化脚本、学习项目
- 真实案例展示（2-3 个，配截图占位符）
诚实说说局限性（300-400 字）
- 不适合大型团队协作项目
- 不适合对安全要求极高的场景
- AI 会犯错，需要你验收
- 复杂项目需要更多耐心和技巧
本章小结 + 下一步预告（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，按以下结构撰写：

开篇（100-200 字）
- 好消息：你需要准备的东西很少
- 本章概览
- 提示：如果你只想用网页端工具（Bolt/v0），大部分准备工作可以跳过
心态准备：最重要的事（300-400 字）
- 你不是在"学编程"，而是在"学和 AI 沟通"
- 就像学会使用搜索引擎一样，核心是学会提问
- 不需要完美，只需要迭代
硬件要求（100-200 字）
- 一台能上网的电脑（Windows / Mac / Linux 均可）
- 一个现代浏览器（Chrome 推荐）
- 就这么多。真的。
需要注册的账号（400-500 字）
- AI 编程工具账号（具体在第 4 章详细教，这里先列清单）
- GitHub 账号：什么是 GitHub（用云端硬盘类比），为什么需要，注册步骤
- 截图占位符
费用说明（300-400 字）
- 完全免费就能开始：列出免费工具和额度
- 付费方案：什么时候值得付费，各工具价格区间
- 建议：先用免费额度体验，确认适合自己再考虑付费
认识终端/命令行（400-500 字）
- 什么是终端：类比为"用文字和电脑对话"，就像发微信一样，你打字发指令，电脑回复你结果
- 别害怕它：虽然看起来像黑客电影，但其实很简单，我们只会用到几个最基本的命令
- Mac 用户：如何打开"终端"应用（截图）
- Windows 用户：如何打开 PowerShell（截图）
- 试一试：输入 echo "Hello" 看看效果（截图）
- 说明：后面章节中，偶尔会用到终端来安装工具或运行命令，遇到时会手把手教
按路线准备环境（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
  - 不确定要不要装？暂时跳过，以后需要时再回来
本章小结 + 下一步预告（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，按以下结构撰写：

开篇（200-300 字）
- 市面上 AI 编程工具很多，不要被吓到
- 分三类帮你理清楚
- 本章目标：了解有哪些选择，为下一章选工具做准备
工具分类总览图（200 字）
- 简要说明三大类的区别
- 用类比：网页端像"外卖点餐"，编辑器端像"在家做饭"，命令行端像"专业厨房"
网页端工具：打开浏览器就能用（800-1000 字）
- 共同特点：零安装、即开即用、适合快速体验
- Bolt.new：一句话定位 + 适合做什么 + 优缺点 + 价格 + 截图占位
- v0.dev：同上格式
- Lovable：同上格式
- Replit Agent：同上格式
编辑器端工具：功能更强大的选择（800-1000 字）
- 共同特点：需要安装，但功能更全面，适合做较复杂项目
- Cursor：同上格式（重点介绍，是目前最主流的）
- Windsurf：同上格式
- GitHub Copilot：同上格式
命令行端工具：给进阶用户的利器（400-500 字）
- 共同特点：需要一定终端基础，功能最灵活
- Claude Code：同上格式
- Aider：同上格式
- 注：本教程不重点介绍这类，但读者将来可以尝试
横向对比表格（300-400 字）
工具类型入门难度免费额度月费最适合
Bolt.new 网页端 ★☆☆ 有 $X 快速原型
v0.dev 网页端 ★☆☆ 有 $X UI 组件
... ... ... ... ... ...
新手应该选哪个？（300-400 字）
- 推荐路径：先用网页端体验（Bolt 或 v0），再转到 Cursor
- 不要纠结选择，用起来比选对更重要
本章小结 + 下一步预告（100 字）

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

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，按以下结构撰写：

开篇（100-200 字）
- 上一章看了这么多工具，现在选一个开始吧
- 选择恐惧症？别担心，我帮你
决策指南：选哪个？（300-400 字）
- 决策树形式：
  - 想最快体验，不想装东西？→ Bolt.new
  - 想做更完整的项目？→ Cursor
  - 只想看看 UI 效果？→ v0.dev
- 建议：如果拿不定主意，就从 Bolt.new 开始
路线 A：Bolt.new 上手指南（800-1000 字）
- 打开网站 → 注册账号（截图）
- 界面认识：输入框在哪、预览在哪、文件在哪（截图 + 标注）
- 你的第一次对话：输入"帮我做一个简洁的个人介绍页面"
- 看 AI 工作：它在做什么（截图）
- Hello World 时刻：你的第一个页面出来了！（截图）
- 试着修改："把背景色改成浅蓝色"（截图对比）
路线 B：Cursor 上手指南（1200-1500 字）
- 环境检查（先确认第 2 章的准备工作完成了）：
  - 检查 Node.js 是否已安装：node --version
  - 如果没有，回到第 2 章"路线 B"按步骤安装
- 下载安装 Cursor（截图）
- 打开 Cursor，界面认识（截图 + 标注）
- 创建你的第一个项目文件夹：
  - 在桌面或文档里新建一个文件夹（比如叫 "my-first-project"）
  - 用 Cursor 打开这个文件夹
- 打开 AI 对话面板（Composer）
- 第一次对话：同样的需求
- 看 AI 生成代码 + 自动创建文件（截图）
- 预览效果：如何在浏览器中查看你做的网页
- 修改迭代
环境验证：确认一切就绪（200-300 字）
- 路线 A 验证：能打开 Bolt 并看到 AI 生成的预览 → 你已经准备好了
- 路线 B 验证：Cursor 能打开、能和 AI 对话、能预览网页 → 你已经准备好了
- 出问题了？看下面的 FAQ
常见问题 FAQ（600-800 字）
- 注册时需要信用卡吗？
- 免费额度用完了怎么办？
- 网页打不开 / 下载很慢怎么办？
- AI 生成的结果和教程不一样，正常吗？
- 我可以两个都试试吗？
- brew 安装失败/很慢怎么办？（提供国内镜像方案）
- Node.js 安装后 node 命令找不到？（PATH 问题简单解释和解决方法）
- 安装时提示需要管理员权限怎么办？
本章小结 + 下一步预告（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，按以下结构撰写：

开篇（200-300 字）
- Vibe coding 的核心技能不是写代码，是"说清楚你要什么"
- 这章是整个教程最重要的一章，值得反复看
核心原则：AI 不会读心（300-400 字）
- AI 只能根据你说的话来工作
- 就像给不认识你的人打电话叫外卖：说得越具体，送来的东西越接近你想要的
- 关键词：具体、明确、分步
需求描述框架：WAFS 模板（500-600 字）
- What - 我要做什么（目标）
- Appearance - 它长什么样（外观/布局）
- Function - 有什么功能（交互/行为）
- Style - 什么风格（颜色/字体/氛围）
- 不需要每次都写全，但写得越全，结果越好
- 一个完整的模板示例
好 Prompt vs 坏 Prompt：6 组对比（1000-1200 字）
- 每组包含：坏 prompt → 好 prompt → 为什么好的更好 → AI 结果截图占位
- 对比 1：太模糊 vs 具体描述
- 对比 2：没说布局 vs 说清楚了布局
- 对比 3：没提风格 vs 提了参考风格
- 对比 4：一次说太多 vs 分步来
- 对比 5：只说"改一下" vs 说清楚改什么
- 对比 6：没给上下文 vs 给了背景信息
迭代对话技巧（600-800 字）
- 怎么追加修改：直接说要改什么，不需要重复之前的内容
- 怎么用截图辅助：截一张参考网站的图，说"我想要类似这样的效果"
- 什么时候继续迭代 vs 重新开始：
  - 小修改（颜色、字号、位置）→ 继续
  - 整体方向偏了 → 重新开始一个对话
五个常见错误（500-600 字）
- 错误 1：一次提太多需求
- 错误 2：描述太模糊
- 错误 3：不看结果就继续提需求
- 错误 4：AI 说的话看不懂就跳过
- 错误 5：完全不修改 AI 的第一版输出
- 每个错误配正确做法
本章小结 + 下一步预告（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，按以下结构撰写：

开篇（200-300 字）
- 前面学了理论，现在动手
- 重要声明：我会用一个示例项目演示，但你应该做自己想做的东西
- 跟着方法走，不要照抄具体内容
第一步：想清楚你要做什么（500-700 字）
- 不要着急打开工具，先想一想
- 思路启发列表：
  - 你有没有一个想给朋友看的个人主页？
  - 你有没有一个小工具的想法？（生日倒计时、记账、打卡）
  - 你有没有想给自家店做一个简单的展示页？
- 把模糊的想法变具体：用 WAFS 框架整理
- 示例：我要做一个"每日一句"的网页（展示每天随机一句励志名言）
第二步：写出你的第一条 Prompt（500-700 字）
- 用 WAFS 框架写出完整的第一条描述
- 示例 prompt 展示
- 鼓励读者先写好再输入
- 展示 AI 的第一版输出（截图占位）
第三步：审视结果，提出修改（600-800 字）
- 看到第一版后不要急着改，先整体看看
- 哪些地方满意？记下来
- 哪些地方不满意？列一个修改清单
- 每次只改一件事
- 示例：3 轮修改的对话过程和截图
第四步：逐步添加功能（600-800 字）
- 基础版满意后，开始加功能
- 示例：添加"收藏"按钮、添加分享功能
- 每加一个功能就测试验收
- 展示迭代过程
第五步：调整样式和细节（400-600 字）
- 功能完成后打磨外观
- 调颜色、调字体、调间距
- 移动端适配
通用技巧总结（500-600 字）
- 黄金法则 1：先做骨架，再加功能，最后调样式
- 黄金法则 2：每次只改一件事
- 黄金法则 3：满意一个部分，再做下一个
- 黄金法则 4：随时可以问 AI"这个能不能做"
你的成果时刻（200-300 字）
- 如果你跟着做了，现在你应该有了自己的第一个 vibe coding 作品
- 截图展示最终成品（示例项目）
- 不完美没关系，重要的是你做出来了
本章小结 + 下一步预告（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，按以下结构撰写：

开篇（200-300 字）
- 如果你做到这一步还没遇到问题，那太幸运了
- AI 会犯错，这完全正常
- 本章教你怎么应对
正常化失败（300-400 字）
- 连专业程序员写的代码也有 bug
- AI 也一样，它不完美
- 重要的不是不犯错，而是知道怎么修
问题类型 1：界面和你想的不一样（400-500 字）
- 原因：你的描述可能不够具体
- 解决：更精确地描述你想要的效果
- 技巧：截一张你想要的效果图给 AI
- 示例对话
问题类型 2：功能不对（400-500 字）
- 原因：AI 理解错了你的意思
- 解决：用"当我做 X 的时候，应该发生 Y，但实际发生了 Z"的句式
- 示例对话
问题类型 3：代码报错 / 页面崩了（400-500 字）
- 原因：AI 写的代码有 bug
- 解决：直接把报错信息复制给 AI
- 如何找到报错信息：浏览器 F12 → Console（截图说明）
- 示例对话
问题类型 4：越改越乱（400-500 字）
- 原因：修改太多次，AI 可能丢失上下文
- 解决方案 A：在当前对话里让 AI 重新整理一遍
- 解决方案 B：开一个新对话，把当前代码和需求重新描述
- 什么时候该"推倒重来"：整体方向偏了，不如从头开始
简易调试工具箱（300-400 字）
- 浏览器开发者工具（只需要会看 Console 错误）
- 截图大法：截图给 AI 说"这里不对"
- 撤销和版本回退（各工具的撤销方式）
心态建议（200-300 字）
- 每次只解决一个问题
- 进步比完美更重要
- 遇到搞不定的，暂时跳过也行
本章小结 + 下一步预告（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，按以下结构撰写：

开篇（100-200 字）
- 你已经能用 vibe coding 做基本项目了
- 这章的技巧会让你更高效、做得更好
版本管理入门：给你的代码买保险（1000-1200 字）
- 为什么需要：改坏了能回去，就像游戏里的存档点
- Git 是什么：用"时光机"类比
- GitHub Desktop 使用教程（选它是因为有图形界面，对新手友好）：
  - 下载安装（截图）
  - 基本操作：保存一个版本（commit）
  - 回到之前的版本
  - 不需要学命令行 Git
- 实际场景演示：做到一半改坏了，怎么回到之前的版本
拆分复杂需求：大象要一口一口吃（800-1000 字）
- 问题：你想做一个"功能完整的记账应用"，直接一句话让 AI 做 → 效果差
- 方法：像盖房子一样分步
  - 第一步：先做骨架（页面布局，没有真实功能）
  - 第二步：再加核心功能（记一笔账、显示列表）
  - 第三步：然后加次要功能（分类、统计图表）
  - 第四步：最后调样式
- 多会话管理：每个大功能模块用一个独立对话
- 示例对话展示
设计参考技巧：让你的作品更好看（600-800 字）
- 你不是设计师，但可以借鉴
- 如何用参考网站描述风格："我想要类似 XX 网站的那种风格"
- 推荐灵感网站：Dribbble、Pinterest、Awwwards（各一句话介绍）
- 配色工具推荐：直接让 AI 推荐配色方案也行
部署上线：让你的作品能被别人看到（800-1000 字）
- 什么是"部署"：把你做的东西放到互联网上
- Vercel 一键部署（最简单的方式）：
  - 注册 Vercel（截图）
  - 连接 GitHub 仓库
  - 自动部署
  - 得到一个可以分享的链接
- 自定义域名（可选，简要提及）
- 或者直接让 AI 帮你部署（Bolt 等工具内置部署功能）
本章小结 + 下一步预告（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，按以下结构撰写：

开篇（200-300 字）
- 前面学了理论和方法，这一章看看完整的实战
- 三个案例由简到难
- 关注过程，不是结果
案例 1：个人作品集页面（简单）（1500-2000 字）
- 使用工具：Bolt.new（或 v0）
- 需求背景：想做一个展示自己作品的单页面
- 完整对话过程：
  - 第 1 轮：初始描述 → AI 输出（截图占位）
  - 第 2 轮：修改布局 → 效果（截图占位）
  - 第 3 轮：调整配色 → 效果（截图占位）
  - 第 4 轮：添加响应式 → 效果（截图占位）
  - 第 5 轮：最终微调 → 成品（截图占位）
- 用时：约 15-20 分钟
- 技巧回顾：这个过程中用了哪些前面学过的技巧
案例 2：习惯打卡小工具（中等）（1500-2000 字）
- 使用工具：Cursor
- 需求背景：想做一个每天记录习惯完成情况的工具
- 完整对话过程：
  - 第 1 轮：描述核心需求 → 基础版（截图占位）
  - 第 2 轮：添加"打卡"交互 → 功能完善（截图占位）
  - 第 3 轮：遇到 bug —— 打卡后刷新数据丢失
  - 第 4 轮：让 AI 加上本地存储 → bug 修复（截图占位）
  - 第 5 轮：添加统计功能 → 最终版（截图占位）
- 用时：约 30-45 分钟
- 重点展示：遇到 bug 时如何用第 7 章的方法解决
- 技巧回顾
案例 3：带数据存储的记事本应用（进阶）（1500-2000 字）
- 使用工具：Cursor + Supabase（免费后端服务）
- 需求背景：想做一个多设备同步的记事本
- 完整对话过程：
  - 第 1 轮：做基础的记事本界面
  - 第 2 轮：让 AI 帮忙接入 Supabase（解释什么是后端）
  - 第 3 轮：实现登录功能
  - 第 4 轮：实现数据同步
  - 第 5 轮：部署上线
- 用时：约 1-2 小时
- 重点展示：如何用第 8 章的"拆分复杂需求"方法、如何部署
- 技巧回顾
三个案例的共性总结（300-400 字）
- 都是从简单描述开始
- 都经历了多轮迭代
- 都遇到了需要修改的地方
- 最终都做出了可用的东西
本章小结 + 下一步预告（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，按以下结构撰写：

开篇（100-200 字）
- 恭喜你走到了这里
- 你已经掌握了 vibe coding 的核心技能
- 接下来的路，有很多方向
方向 1：继续用 Vibe Coding 做更多东西（300-400 字）
- 做更复杂的项目：全栈应用、移动端适配
- 尝试更多工具：每个工具都有不同的优势
- 挑战自己：试试做一个"别人也能用"的工具
方向 2：学一点基础知识（可选）（300-400 字）
- 为什么学一点基础能让 vibe coding 更高效
- 推荐从 HTML/CSS 开始（最直观、最容易上手）
- 推荐的免费学习资源（2-3 个）
- 不需要系统学习，遇到不懂的查一下就行
社区和资源推荐（300-400 字）
- 中文社区推荐
- 英文社区推荐
- 推荐关注的人 / 频道
- 获取 AI 工具最新动态的渠道
结语（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 互不依赖，可以并行执行。

Vibe Coding 教程实施计划 ​

Task 0: 项目脚手架 ​

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

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

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

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

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

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

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

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

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

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

Task 11: 最终检查和完善 ​

执行顺序总结 ​

Vibe Coding 教程实施计划

Task 0: 项目脚手架

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

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

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

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

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

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

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

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

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

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

Task 11: 最终检查和完善

执行顺序总结