vibe-coding-课程-干货集训
06 敏捷开发：高效还省Token
一. CLAUDE.md ：项目说明书
解释
一份明确清晰的项目说明书，有了这个说明书，用Claude Code开发项目，它就不用每次都重新熟悉这个项目。开发效率提升了，还能省不少Token。
打个比方：
你招了一个助理，每次交代任务都要先花 10 分钟介绍公司背景、项目情况、你的习惯……很烦
CLAUDE.md 就是你写给 Claude Code的项目手册。写一次，以后每次对话它都自动知道这些背景，不用你重复解释
实际项目例子
没有 CLAUDE.md：
你：帮我写个组件 Claude：请问你用的是 React 还是 Vue？代码风格有什么要求吗？
有了 CLAUDE.md：
你：帮我写个组件 Claude：（已经知道你用 React + 中文注释）好的，这是组件代码……
实操步骤
步骤 1：让 Claude 自动生成
在 Claude Code 中输入：
/init
Claude 会自动扫描你的项目，生成一个 CLAUDE.md 文件。
步骤 2：查看生成的内容
打开项目根目录下的 CLAUDE.md，你会看到类似这样的内容：
# 项目说明这是一个 React 项目，使用 TypeScript 和 Tailwind CSS。## 常用命令- npm run dev - 启动开发服务器- npm run build - 构建项目## 项目结构- /src - 源代码- /public - 静态资源
步骤 3：手动补充规则
/init 生成的内容是起点，你可以让 Claude 补充更多规则：
帮我在 CLAUDE.md 里添加：代码注释用中文，组件文件用大驼峰命名
二. 快速调试
解释
写代码一定会遇到 bug，尽可能帮Claude定位错误，然后把错误信息发给 Claude。
调试的核心公式：
找到错误 → 完整复制 → 发给 Claude → 让它修复
实操步骤
场景 A：浏览器控制台报错（最常见）
步骤 1：打开开发者工具
- Windows：按
F12或Ctrl + Shift + I - Mac：按
Cmd + Option + I
步骤 2：点击 Console（控制台）标签
你会看到类似这样的错误信息（红色文字）：
Uncaught TypeError: Cannot read property 'name' of undefined at App.jsx:23:15
步骤 3：复制错误信息
- 直接选中红色文字复制
- 或者右键点击错误 → Copy message
步骤 4：发给 Claude
浏览器控制台报错了：Uncaught TypeError: Cannot read property 'name' of undefined at App.jsx:23:15我在做用户信息展示功能，帮我看看哪里出问题了
场景 B：终端/命令行报错
步骤 1：找到错误位置
运行命令后（比如 npm run dev），往上滚动找到第一个 Error 或红色文字。
步骤 2：复制完整错误
包括文件路径和错误描述，比如：
SyntaxError: Unexpected token (15:8) 13 | function App() { 14 | return (> 15 | <div | ^
步骤 3：发给 Claude
运行 npm run dev 后报错：SyntaxError: Unexpected token (15:8) 13 | function App() { 14 | return (> 15 | <div帮我修复
场景 C：没报错但功能不对
这种情况需要描述预期和实际：
我希望点击按钮后显示弹窗，但现在点击没有任何反应。相关代码在 Button.jsx，帮我排查一下
调试话术模板
复制这些模板，改一下就能用：
## 模板 1：有明确报错[浏览器/终端] 报错了：[粘贴错误信息]帮我修复## 模板 2：功能不工作我希望 [预期效果]，但实际上 [实际效果]。相关代码在 [文件名]，帮我排查## 模板 3：完全不知道哪里错[描述功能] 不工作了，帮我检查可能的问题
三. 版本控制
解释
你玩游戏会存档吧？打 Boss 前存一个，挂了能读档重来。
写代码也一样：
- 存档 = 把当前代码状态记录下来
- 读档 = 改坏了，回到之前的状态
这就是版本控制
为什么需要？
你让 Claude 重构一个功能，结果改完项目崩了，出了很大的BUG 如果没有版本控制：你得一点点手动改回去 有版本控制：一句"回退"就恢复了
实操步骤
步骤 1：添加版本控制规范（重要！）
把下面这段加到 CLAUDE.md 中，后面版本控制会用到：
## 版本记录规范### 存档（当我说"存档"或"提交"时）1. 运行 git diff 检查本次改动2. 执行 git add . 和 git commit（根据改动自动生成备注）3. 在 CHANGELOG.md 顶部添加记录，格式： ## YYYY-MM-DD HH:mm - 改动内容### 回退（当我说"回退"或"撤销"时）1. 先告诉我会回退到哪个版本（显示上一次的提交信息）2. 等我确认后再执行回退3. 回退后在 CHANGELOG.md 顶部记录： ## YYYY-MM-DD HH:mm - 回退：撤销了 xxx 改动### 查看历史（当我说"历史"或"记录"时）显示最近 5 次提交的简要信息
步骤 2：初始化（只需要做一次）
对 Claude Code 说：
帮我初始化 git 仓库，创建 .gitignore 排除 node_modules，然后创建一个 CHANGELOG.md 文件记录版本历史
完成后你的项目会多几个文件：
你的项目/├── .git/ ← 隐藏文件夹，不用管├── .gitignore ← 告诉 git 忽略哪些文件├── CHANGELOG.md ← 版本记录文档└── 其他代码文件...
步骤 3：第一次存档
存档
Claude 会：
- 检查你改了什么
- 提交代码
- 在 CHANGELOG.md 里记录
步骤 4：日常开发流程
每次完成一个小功能，跟它说：
存档
就这一个词。Claude 会自动处理剩下的事情。
打开 CHANGELOG.md，你会看到这样的记录：
## 2025-01-10 22:30- 添加：用户登录页面- 修复：按钮样式错位## 2025-01-10 15:00- 添加：首页布局- 添加：导航栏组件## 2025-01-10 10:00- 项目初始化
步骤 5：改坏了，回退
如果 Claude 把代码改坏了，跟它说：
回退
Claude 会：
- 告诉你将回退到哪个版本
- 等你确认
- 执行回退
- 在 CHANGELOG.md 记录这次回退
步骤 6：查看历史
想看改过什么，跟它说：
历史
或者直接打开 CHANGELOG.md 文件查看。
什么时候应该存档？
附录：CLAUDE.md 模板
直接复制到你的项目里用：
# 项目说明[简单描述这是什么项目]## 技术栈- [比如：React + TypeScript]## 常用命令- npm run dev - 启动开发服务器- npm run build - 构建项目## 代码规范- 注释使用中文- [其他你的习惯]## 版本记录规范### 存档（当我说"存档"或"提交"时）1. 运行 git diff 检查本次改动2. 执行 git add . 和 git commit（根据改动自动生成备注）3. 在 CHANGELOG.md 顶部添加记录，格式： ## YYYY-MM-DD HH:mm - 改动内容### 回退（当我说"回退"或"撤销"时）1. 先告诉我会回退到哪个版本（显示上一次的提交信息）2. 等我确认后再执行回退3. 回退后在 CHANGELOG.md 顶部记录： ## YYYY-MM-DD HH:mm - 回退：撤销了 xxx 改动### 查看历史（当我说"历史"或"记录"时）显示最近 5 次提交的简要信息