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 会：

1. 检查你改了什么
2. 提交代码
3. 在 CHANGELOG.md 里记录

步骤 4：日常开发流程

每次完成一个小功能，跟它说：

存档

就这一个词。Claude 会自动处理剩下的事情。

打开 CHANGELOG.md，你会看到这样的记录：

## 2025-01-10 22:30
- 添加：用户登录页面
- 修复：按钮样式错位

## 2025-01-10 15:00
- 添加：首页布局
- 添加：导航栏组件

## 2025-01-10 10:00
- 项目初始化

步骤 5：改坏了，回退

如果 Claude 把代码改坏了，跟它说：

回退

Claude 会：

1. 告诉你将回退到哪个版本
2. 等你确认
3. 执行回退
4. 在 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 次提交的简要信息