AI Agent 自主工作流：把活丢给 AI 自己跑

AI 学习系列第五篇 · 进阶教程 前置阅读：如何学习 AI 基础 → Vibe Coding 实战教程 → MCP 与 Skills 指南 → AI 辅助调试与测试 → 本篇

写在前面

到目前为止，你和 AI 的协作方式大概是这样的：

你：帮我写一个 Header 组件
AI：好的，这是代码...
你：不错，但加个暗色模式切换按钮
AI：好的，已添加...
你：样式有点问题，按钮靠右对齐
AI：好的，已调整...

这是对话模式——你说一句，AI 做一步。就像开手动挡的车，每个动作你都要操控。

但你有没有想过：有些任务，你能不能直接告诉 AI"把这件事做完"，然后去忙别的？

这就是 Agent 模式——给 AI 一个完整的任务描述，它自己规划步骤、读代码、写代码、测试、修复，跑完整个流程再把结果交给你。

小公司人少活多，学会用 Agent 模式，一个人真的能干三个人的活。

第一章 · 理解 AI Agent：从助手到自动驾驶

1.1 两种模式的区别

维度	对话模式	Agent 模式
类比	手动挡汽车	自动驾驶
交互方式	你说一步，AI 做一步	你给终点，AI 自己开
你的角色	司机（控制每个动作）	乘客（给目的地 + 必要时纠偏）
适合的任务	探索性的、需要频繁决策的	目标明确、步骤相对标准化的
风险	低（每步你都看着）	中等（AI 可能跑偏）

1.2 什么任务适合 Agent 模式？

适合（任务清晰、可描述、有标准做法）：

"给项目加一个用户反馈表单页面，包含表单、验证和提交"
"把项目从 Webpack 迁移到 Vite"
"给 /api 下所有接口加上错误处理和日志"
"把这 20 个 JS 文件转成 TypeScript"
"为 UserService 类的所有方法写单元测试"

不适合（需要创造性判断、频繁权衡、安全敏感）：

"设计一个新的产品方案"（需要商业判断）
"优化这个页面的用户体验"（"好"的标准很主观）
"修复这个间歇性的诡异 bug"（需要反复试探）
"实现支付功能"（安全敏感，不能全权交给 AI）

判断标准：问自己两个问题——①我能不能用一段话把任务描述清楚？②做完后我能不能明确判断"对不对"？如果两个都是"能"，就适合 Agent 模式。

第二章 · Claude Code 的 Agent 能力

Claude Code 天然就是 Agent 模式——它在终端里运行，你给它一个任务，它自主完成。这是它和 IDE 类工具最大的区别。

2.1 基本用法：给一个完整任务

不要一句一句地对话，直接给一个完整的任务描述：

bash

claude "在现有的 Vue 3 项目中，新增一个用户反馈功能：

1. 创建 /feedback 路由和对应的 FeedbackPage.vue 页面
2. 页面包含一个表单：反馈类型（下拉选择：Bug/建议/其他）、描述（多行文本）、联系方式（可选）
3. 前端表单验证：描述至少 10 个字
4. 提交后调用 POST /api/feedback 接口
5. 提交成功后显示感谢弹窗，3 秒后跳回首页
6. 样式和现有页面保持一致，使用项目中已有的组件库

参考项目现有的页面写法和组件风格。"

Claude Code 会自己：

读项目结构，理解你用了什么技术栈和组件库
找到现有页面的写法作为参考
创建路由配置
写页面组件代码
添加表单验证
写 API 调用逻辑
匹配现有样式

整个过程可能需要几分钟，中途它可能会问你一些确认性的问题（比如"你的 API 地址是 /api/feedback 还是 /api/v1/feedback？"），但大部分时候它能自主跑完。

2.2 Claude Code 是怎么工作的

当你给 Claude Code 一个任务，它的内部流程大致是：

接到任务
  ↓
读取项目文件（package.json、目录结构、现有代码）
  ↓
制定计划（"我需要创建这些文件、修改这些配置"）
  ↓
逐步执行：
  ├── 创建/修改文件
  ├── 如果遇到问题 → 自我修正
  ├── 如果需要确认 → 问你
  └── 如果需要验证 → 运行命令（比如 npm run build 检查编译是否通过）
  ↓
完成，汇报结果

关键点：Claude Code 会读你项目的 CLAUDE.md 文件来理解项目约定。所以 CLAUDE.md 在 Agent 模式下比对话模式更重要——你不在旁边盯着的时候，CLAUDE.md 就是你的"替身"。

2.3 后台运行

有时候你希望 Claude Code 在后台跑，不占用你当前的终端：

bash

# 后台模式：给任务后你可以继续干别的
claude --background "为 src/utils 目录下所有工具函数补充 JSDoc 注释"

# 无头模式：完全非交互，适合自动化脚本
claude --headless "运行 npm test 并修复所有失败的测试"

后台模式特别适合那些"不需要我看着但确实需要做"的任务。

2.4 实际演示：一个完整的 Agent 任务

假设你接到一个需求：给现有项目加一个"数据导出为 CSV"的功能。

bash

claude "给 /dashboard 页面加一个数据导出功能：

背景：
- 现有的 /dashboard 页面显示了一个数据表格（src/views/Dashboard.vue）
- 表格数据来自 GET /api/tasks 接口
- 需要新增一个'导出 CSV'按钮

要求：
1. 在表格右上方添加一个'导出 CSV'按钮，样式和旁边的'新增任务'按钮一致
2. 点击后把当前表格的数据导出为 CSV 文件并下载
3. CSV 的列名用中文（任务名称、状态、创建时间、负责人）
4. 文件名格式：任务数据_2026-03-26.csv
5. 不需要后端支持，纯前端实现

技术约束：
- 不要引入新的第三方库，用原生的 Blob + URL.createObjectURL 实现
- 参考项目现有的按钮组件和样式"

这个任务描述不到 200 字，但包含了 AI 自主完成所需的全部信息。Claude Code 大约 3-5 分钟就能跑完。

第三章 · Trae 的 Builder Mode 进阶

3.1 Builder Mode 本质上也是 Agent

Trae 的 Builder Mode 和 Claude Code 的 Agent 模式本质相同——你给一段描述，AI 自主生成整个项目或功能。只是交互方式不同：Trae 是 GUI，Claude Code 是终端。

3.2 写出高成功率 Prompt 的技巧

Builder Mode 是"一锤子买卖"——它根据你的描述一次性生成结果，不像 Chat 模式可以反复调整。所以 prompt 的质量直接决定结果。

差的 prompt：

做一个博客系统

AI 生成的结果可能完全不符合你的预期——技术栈选错了、风格不对、功能不全。

好的 prompt：

用 Vue 3 + Vite + Tailwind CSS 创建一个个人博客系统。

页面列表：
1. 首页：文章列表，每篇显示标题、摘要（前 100 字）、发布日期，按时间倒序
2. 文章详情页：Markdown 渲染、返回按钮
3. 关于页：简单的个人介绍

风格：
- 简洁、大量留白，类似 Medium 的阅读体验
- 只用黑白灰 + 一个强调色（蓝色 #2563EB）
- 正文字号 18px，行高 1.8

数据：
- 文章暂时用本地 JSON 文件存储（src/data/posts.json）
- 不需要后端，不需要 CMS

技术要求：
- Vue Router 管理路由
- 响应式布局（手机和桌面都要能看）
- 使用 markdown-it 解析 Markdown

3.3 大任务拆小任务

Builder Mode 不适合一次做太大的东西。如果你的项目比较复杂，分步来：

第一次：生成项目骨架 + 首页
第二次（Chat 模式）：加文章详情页
第三次（Chat 模式）：加搜索功能
第四次（Chat 模式）：优化移动端样式

原则：Builder Mode 做初始框架，Chat 模式做增量开发。就像盖房子——先用 Builder 搭骨架，再用 Chat 一间一间装修。

第四章 · 写好"任务书"：让 Agent 不跑偏

4.1 一个好的任务描述包含什么

不管你用 Claude Code 还是 Trae，一个让 AI 不跑偏的任务描述需要五个要素：

1. 目标：做什么？（一句话说清楚）
2. 上下文：现有项目是什么样？（技术栈、已有的代码）
3. 具体要求：有哪些功能点？（越细越好）
4. 约束条件：不能做什么？（技术限制、风格限制）
5. 验收标准：怎么算完成？（能跑、能通过测试、样式一致）

4.2 对比：好任务 vs 坏任务

坏任务	好任务
"加一个搜索功能"	"在文章列表页顶部加搜索框，实时筛选标题包含关键词的文章，用 lodash debounce 300ms 做防抖"
"优化性能"	"首页 Largest Contentful Paint 超过 3 秒，主要原因是加载了 20 张全尺寸图片。请用 lazy loading + WebP 格式优化"
"代码重构一下"	"把 src/views/Dashboard.vue 中 400 行的 setup 函数拆分为 composable，按功能拆出 useTaskList、useFilters、useExport 三个 hooks"

4.3 CLAUDE.md 的重要性

在 Agent 模式下，CLAUDE.md 就是你的替身。

当你和 AI 一对一对话时，你可以随时纠正它。但在 Agent 模式下，AI 独自工作，它参考的就是 CLAUDE.md 里的项目约定。

一个好的 CLAUDE.md 至少应该包含：

markdown

# 项目说明
这是一个 Vue 3 + Vite + Tailwind 的内部管理系统。

# 技术栈
- 前端：Vue 3 (Composition API, <script setup>)
- 状态管理：Pinia
- HTTP 请求：axios，封装在 src/api/ 目录下
- 路由：Vue Router 4

# 开发规范
- 组件文件名用 PascalCase（如 UserCard.vue）
- 工具函数放 src/utils/，composable 放 src/composables/
- CSS 用 Tailwind 类，避免自定义 CSS
- API 请求统一走 src/api/ 的封装，不要裸调 axios

# 常用命令
- npm run dev  → 启动开发服务器
- npm run build → 构建生产版本
- npm test → 运行测试

有了这个文件，AI 在 Agent 模式下自主工作时，就知道"组件应该放哪"、"样式该怎么写"、"API 该怎么调"。

关键洞察：你在 CLAUDE.md 上花的每一分钟，都会在 Agent 模式下帮你省回来十倍的调整时间。

第五章 · 多任务并行：一个人当三个人用

5.1 为什么要并行？

你有三件事要做：

给用户管理页面加一个批量删除功能
为现有的 API 工具函数写单元测试
把旧的 CSS 样式迁移到 Tailwind

这三件事互不依赖。如果一件一件做，要花一整天。但你可以同时开三个终端，让三个 Claude Code 实例分别处理。

5.2 Git Worktree：并行的基础

多个 AI 同时修改同一套代码会冲突。解决方案是 Git Worktree——给每个任务创建一个独立的工作目录，它们共享 Git 历史但互不干扰。

bash

# 为每个任务创建独立的工作分支和目录
git worktree add ../my-project-batch-delete  -b feature/batch-delete
git worktree add ../my-project-unit-tests    -b feature/unit-tests
git worktree add ../my-project-tailwind      -b feature/tailwind-migration

# 在三个终端分别进入对应目录
# 终端 1：
cd ../my-project-batch-delete
claude "给用户管理页面加批量删除功能..."

# 终端 2：
cd ../my-project-unit-tests
claude "为 src/api/ 下的所有工具函数写单元测试..."

# 终端 3：
cd ../my-project-tailwind
claude "把 src/styles/ 下的 CSS 迁移到 Tailwind 类..."

三个任务同时跑，完成后分别 review，然后合并回主分支。

5.3 并行的注意事项

注意事项	说明
任务必须独立	两个任务改同一个文件 → 合并时冲突
先小后大	第一次并行先开 2 个，熟练后再开 3 个
成本意识	3 个并行 = 3 倍 token 消耗 = 3 倍费用
合并要审查	每个分支合并前都要 review，不要盲合

5.4 不用 Worktree 的简单并行

如果你觉得 Git Worktree 太复杂，有个更简单的方式：按顺序让 AI 做不相关的事。

bash

# 先让 AI 做任务 A（改文件组 A）
claude "把 src/components/ 下所有组件的 props 加上 TypeScript 类型"

# 完成后，提交

# 再让 AI 做任务 B（改文件组 B）
claude "为 src/api/ 下的接口加上错误处理"

虽然不是真正并行，但每个任务 AI 自主跑完，你只在中间做 review 和 commit，效率也比对话模式高很多。

第六章 · 自动化日常杂活

Agent 模式最爽的地方不是写新功能，而是处理那些你一直拖着不想做的杂活。

6.1 批量重命名 / 重构

bash

claude "项目中所有 API 请求函数的命名不统一，有的叫 getXXX，有的叫 fetchXXX，有的叫 queryXXX。
统一改为：
- 查询用 fetchXXX
- 创建用 createXXX
- 更新用 updateXXX
- 删除用 deleteXXX

涉及到的文件包括 src/api/ 目录下的所有文件，以及所有调用这些函数的地方。
确保改完后 npm run build 不报错。"

这种全局重命名你手动做要小心翼翼改半天，AI 十分钟搞定。

6.2 给旧项目加 TypeScript 类型

bash

claude "把 src/utils/ 目录下的 6 个 JS 文件转成 TypeScript：
1. 文件后缀从 .js 改为 .ts
2. 给所有函数参数和返回值加上类型注解
3. 把 module.exports 改成 ES Module 的 export
4. 确保 tsconfig.json 配置正确
5. 确保 npm run build 通过"

6.3 批量生成 API 文档

bash

claude "读取 src/api/ 下所有接口函数，生成一份 API 文档 docs/api.md。
格式：
- 每个函数一个章节
- 包含：函数名、参数说明、返回值说明、使用示例
- 参考代码中的注释和实际用法来写说明"

6.4 依赖升级

bash

claude "把项目从 Vue 3.3 升级到 Vue 3.5：
1. 更新 package.json 中的 vue 相关依赖版本
2. 运行 npm install
3. 检查是否有 breaking changes 需要处理
4. 确保 npm run build 通过
5. 列出所有你做的修改和需要注意的变化"

6.5 代码规范统一

bash

claude "整理项目代码风格：
1. 安装并配置 ESLint + Prettier（如果还没有的话）
2. 配置规则：单引号、无分号、2 空格缩进、尾逗号
3. 对 src/ 下所有文件运行 auto-fix
4. 确保 npm run build 通过"

这些杂活的共同特点：目标明确、做法标准、但工作量大、手动做很无聊。这正是 Agent 模式的甜蜜点。

第七章 · Agent 的局限性与"兜底"策略

7.1 Agent 不是万能的

别把 Agent 模式神化了。以下场景它大概率会翻车：

复杂业务逻辑

"实现一个多级审批流程，要处理并行审批、会签、驳回重新发起、
超时自动升级、代理审批等 12 种场景"

这种逻辑复杂度不适合 Agent——AI 会漏掉边界情况，你事后排查比自己写还累。

涉及多个系统的联调

"对接微信支付，包含下单、回调、退款、对账"

涉及外部系统、安全凭证、沙箱/生产环境切换——太多你需要手动确认的环节。

"感觉"类的优化

"让这个页面的体验更好一点"

什么叫"更好"？Agent 无法判断。这类任务需要你自己做决策，AI 辅助执行。

7.2 怎么发现 Agent 跑偏了

Agent 完成任务后，你需要检查：

先跑一下：npm run dev 看看能不能正常启动
编译检查：npm run build 有没有报错
功能验证：手动或用 AI 测试（参考上一篇）关键功能是否正常
代码审查：用 git diff 看看 AI 改了什么，有没有意外的修改
范围检查：AI 有没有改了不该改的文件？有没有过度设计？

7.3 "信任但验证"

Agent 模式的正确心态：

❌ 完全信任 AI → 上线后发现 bug
❌ 完全不信任 AI → 那还不如自己写
✅ 信任 AI 能完成 80% → 花 20% 时间 review 和调整

7.4 成本意识

大模型按 token 计费。一个复杂的 Agent 任务可能涉及：

读取几十个项目文件（输入 token）
生成大量代码和解释（输出 token）
多次自我修正（额外 token）

一个大任务可能花费 $1-5。如果你同时跑 3 个并行任务，就是 $3-15。

控制成本的方法：

任务描述越精确，AI 越不需要"试错"，token 消耗越少
不要让 AI 反复重做——一次描述清楚比改三遍省钱
简单任务用对话模式（更便宜），复杂任务用 Agent 模式（虽贵但省时间）

附录 · Agent 任务模板

模板 1：新增功能

在现有项目中新增 [功能名]：

背景：[简述现有项目和相关代码]

要求：
1. [功能点 1]
2. [功能点 2]
3. [功能点 3]

技术约束：
- [约束 1：如使用的组件库、API 规范]
- [约束 2：如不引入新依赖]

验收标准：
- npm run build 通过
- [功能是否可用的检查方式]
- 和现有代码风格保持一致

模板 2：代码迁移/重构

对 [目标目录/文件] 进行 [迁移/重构]：

目标：[从什么变成什么]
范围：[涉及哪些文件]

规则：
1. [具体的转换规则]
2. [需要保持不变的部分]

完成标准：
- npm run build 通过
- 所有调用方正常工作
- 列出所有修改的文件清单

模板 3：批量生成

为 [目标范围] 生成 [文档/测试/类型]：

格式要求：[具体格式说明]
参考示例：[如果有的话]
输出位置：[文件路径]

注意：
- [特殊处理要求]
- [质量标准]

模板 4：日常杂活

[动作] 项目中的 [对象]：

当前状态：[现在是什么样的]
目标状态：[改成什么样的]
范围：[涉及哪些文件/目录]

完成后：
- 确保 npm run build 通过
- 列出所有修改

AI Agent 自主工作流：把活丢给 AI 自己跑 ​

写在前面 ​

第一章 · 理解 AI Agent：从助手到自动驾驶 ​

1.1 两种模式的区别 ​

1.2 什么任务适合 Agent 模式？ ​

第二章 · Claude Code 的 Agent 能力 ​

2.1 基本用法：给一个完整任务 ​

2.2 Claude Code 是怎么工作的 ​

2.3 后台运行 ​

2.4 实际演示：一个完整的 Agent 任务 ​

第三章 · Trae 的 Builder Mode 进阶 ​

3.1 Builder Mode 本质上也是 Agent ​

3.2 写出高成功率 Prompt 的技巧 ​

3.3 大任务拆小任务 ​

第四章 · 写好"任务书"：让 Agent 不跑偏 ​

4.1 一个好的任务描述包含什么 ​

4.2 对比：好任务 vs 坏任务 ​

4.3 CLAUDE.md 的重要性 ​

第五章 · 多任务并行：一个人当三个人用 ​

5.1 为什么要并行？ ​

5.2 Git Worktree：并行的基础 ​

5.3 并行的注意事项 ​

5.4 不用 Worktree 的简单并行 ​

第六章 · 自动化日常杂活 ​

6.1 批量重命名 / 重构 ​

6.2 给旧项目加 TypeScript 类型 ​

6.3 批量生成 API 文档 ​

6.4 依赖升级 ​

6.5 代码规范统一 ​

第七章 · Agent 的局限性与"兜底"策略 ​

7.1 Agent 不是万能的 ​

7.2 怎么发现 Agent 跑偏了 ​

7.3 "信任但验证" ​

7.4 成本意识 ​

附录 · Agent 任务模板 ​

模板 1：新增功能 ​

模板 2：代码迁移/重构 ​

模板 3：批量生成 ​

模板 4：日常杂活 ​

AI Agent 自主工作流：把活丢给 AI 自己跑

写在前面

第一章 · 理解 AI Agent：从助手到自动驾驶

1.1 两种模式的区别

1.2 什么任务适合 Agent 模式？

第二章 · Claude Code 的 Agent 能力

2.1 基本用法：给一个完整任务

2.2 Claude Code 是怎么工作的

2.3 后台运行

2.4 实际演示：一个完整的 Agent 任务

第三章 · Trae 的 Builder Mode 进阶

3.1 Builder Mode 本质上也是 Agent

3.2 写出高成功率 Prompt 的技巧

3.3 大任务拆小任务

第四章 · 写好"任务书"：让 Agent 不跑偏

4.1 一个好的任务描述包含什么

4.2 对比：好任务 vs 坏任务

4.3 CLAUDE.md 的重要性

第五章 · 多任务并行：一个人当三个人用

5.1 为什么要并行？

5.2 Git Worktree：并行的基础

5.3 并行的注意事项

5.4 不用 Worktree 的简单并行

第六章 · 自动化日常杂活

6.1 批量重命名 / 重构

6.2 给旧项目加 TypeScript 类型

6.3 批量生成 API 文档

6.4 依赖升级

6.5 代码规范统一

第七章 · Agent 的局限性与"兜底"策略

7.1 Agent 不是万能的

7.2 怎么发现 Agent 跑偏了

7.3 "信任但验证"

7.4 成本意识

附录 · Agent 任务模板

模板 1：新增功能

模板 2：代码迁移/重构

模板 3：批量生成

模板 4：日常杂活