Code Agent

AI 怎么写代码、跑测试、修 Bug？从 Copilot 到 Claude Code

Code Agent 自主编程 Claude Code
阅读时间约 10 分钟
Chapter 01

代码补全 vs 代码 Agent — 三代进化

AI 辅助编程经历了三个截然不同的阶段。每一代都大幅提升了 AI 的自主性和能力边界，也改变了人类开发者在编程中的角色。

// 互动演示：三代 AI 编程的进化

点击每张卡片了解详情。注意"自主性条"的长度变化：

Gen 1 — 补全时代
代码自动补全

基于上下文预测下一行代码。代表产品：GitHub Copilot（早期）。

人类驱动，AI 辅助
Gen 2 — 对话时代
对话式编程

向 AI 提问、描述需求生成函数、解释代码。代表：ChatGPT、Copilot Chat。

人类指挥，AI 执行
Gen 3 — Agent 时代
自主编程 Agent

AI 读代码库、规划改动、写代码、跑测试、修 bug、提 PR。代表：Claude Code、Cursor Agent、OpenAI Codex。

AI 驱动，人类审核

从拼写检查（Gen 1）到翻译助手（Gen 2）到同声传译员（Gen 3）——AI 在编程中的角色越来越主动。

Chapter 02

Code Agent 的工作循环

Code Agent 不是一次性生成代码，而是遵循一个迭代循环——就像一个资深开发者的日常工作流。它会反复执行"读 - 规划 - 写 - 测试 - 修复"，直到任务完成。

// 互动演示：Agent 工作循环

点击每个步骤查看 Agent 在该阶段做了什么：

📖
Read
→
🧠
Plan
→
✏️
Code
→
✅
Test
→
🔧
Fix
Read（读取）：理解代码库结构，读取相关文件，搜索模式和依赖关系。Agent 先建立对项目的整体理解。

Code Agent 的循环就像一个资深开发者的工作流——先读代码理解上下文，再规划方案，写代码，跑测试，修 bug。区别在于 Agent 不知疲倦，可以反复迭代。

Chapter 03

工具箱 — Code Agent 能做什么？

Code Agent 的强大之处在于它不只是"生成文本"——它可以调用工具与真实的开发环境交互。文件系统、终端、浏览器、Git……这些工具赋予了 Agent 真正的"动手能力"。

// 互动演示：Agent 工具面板

点击工具卡片查看示例：

📁
File
读取、写入、编辑文件
🔍
Search
Glob 匹配、Grep 搜索
💻
Shell
执行命令、安装依赖
🔀
Git
status、diff、commit、push
🧭
Code Intel
跳转定义、查找引用
🌐
Web
搜索文档、获取 API

Code Agent 的工具就像开发者的 IDE + Terminal + Browser——只不过 AI 在操作它们。工具越多，Agent 能力越强。

Chapter 04

Claude Code 实战 — 从需求到 PR

让我们看一个真实的例子：用户告诉 Claude Code "给设置页面加上暗色模式"。观察 Agent 如何一步步完成从理解需求到提交代码的全过程。

// 互动演示：终端日志回放

点击"开始"观看 Claude Code 的工作过程：

$ claude "给设置页面加上暗色模式"
▶ Read 扫描项目结构... 找到 src/pages/settings.tsx
▶ Read 读取 settings.tsx, theme.config.ts, globals.css
▶ Plan 需要：CSS 变量、Toggle 组件、状态管理、localStorage 持久化
▶ Code 创建 CSS 变量：--bg, --text, --surface（明/暗两组）
▶ Code 新增 ThemeToggle 组件 + useTheme hook
▶ Code 在 settings.tsx 中集成 Toggle
▶ Test npm run test... 1 FAILED SettingsPage.test.tsx
▶ Read 读取错误：找不到 ThemeToggle 的 data-testid
▶ Fix 在 ThemeToggle 中添加 data-testid="theme-toggle"
▶ Test npm run test... ALL PASSED
▶ Commit "feat: add dark mode toggle to settings page"
✓ Done 改动了 4 个文件，新增 1 个组件，修复 1 个测试

注意这个流程的关键：Agent 发现测试失败后没有放弃，而是读取错误信息、诊断原因、修复代码、重新跑测试——这正是"Agent"区别于"代码生成器"的核心。

Agentic coding 正在改变软件的构建方式——开发者的角色从逐行编写代码转变为审查 AI 生成的改动。

Claude Code 就像一个不知疲倦的初级开发者——你描述需求，它写代码、跑测试、修 bug，你负责 review。

Chapter 05

挑战与未来

Code Agent 虽然强大，但并非完美。了解它的局限性，才能更好地与它协作。同时，这个领域正在飞速进化。

⚠️ 当前挑战

循环陷阱

Agent 可能在"修 bug - 引入新 bug"的循环中打转，浪费大量 Token 和时间。

上下文窗口限制

大型代码库无法完全放入上下文，Agent 可能遗漏重要的依赖关系。

过度修改

有时会覆盖正常运行的代码，或做出超出需求范围的改动。

安全边界

需要沙箱执行、权限系统、破坏性操作需人类审批。

🔭 未来方向

多 Agent 协作

多个 Agent 分工合作——一个写前端，一个写后端，一个做测试。

自我改进

Agent 从历史错误中学习，逐步减少重复犯错，变得越来越高效。

端到端项目生成

从需求文档直接生成完整项目，包括架构、代码、测试、部署。

人类角色转变

从"写代码"到"审代码"和"定义需求"——开发者成为 AI 的导航员。

Chapter 06

总结

🚀

三代进化：补全 → 对话 → 自主

AI 编程从被动补全到主动驱动，每一代都赋予 AI 更大的自主权。

🔄

循环：读 → 规划 → 写 → 测 → 修

Code Agent 通过迭代循环完成任务，而不是一次性生成代码。

🧰

工具扩展 = 能力扩展

Agent 的能力取决于它能调用的工具——文件、终端、Git、浏览器。

👥

人类角色：从写代码到审代码

开发者的核心价值转向需求定义、架构决策和代码审查。

Code Agent 不会取代程序员——它会取代不用 Code Agent 的程序员。

回到学院首页