速来学习 Anthropic 官方 Claude Code 教程！1小时掌握 Agentic 编程，设计稿一键生成 Web 应用

AI 写代码，早已不是新鲜事。

从简单的代码补全，到生成函数、编写测试，AI 编程助手已经成为许多开发者的日常工具。

但随着 Agentic Coding (智能体编程) 的兴起，AI 已不再仅仅是「助手」，而是进化成一个能够自主规划、执行、甚至并行处理多项开发任务的「AI 程序员」。

在各家推出的工具和模型中，最受欢迎的无疑是 Claude Code，它以高度的自主性，重新定义了人机协作的边界。

如果你还没有系统学习 Claude Code 的用法，现在，机会来了。

Anthropic 官方亲自下场，其技术教育主管 Elie Schoppik 联手吴恩达的 DeepLearningAI，推出了一门重磅新课：《Claude Code: A Highly Agentic Coding Assistant》。

这门不到 2 小时的短课，浓缩了 Anthropic 内部团队使用 Claude Code 的全套最佳实践。通过三大实战项目，带你彻底掌握与「AI 程序员」高效协作的艺术。

✨ 什么是 Agentic Coding？Claude Code 又强在哪？

在深入课程之前，我们必须先厘清一个核心概念：Agentic Coding。

传统的 AI 编程助手，更像是被动的「工具」。你问一句，它答一句。你需要精确地告诉它要做什么，比如「帮我写一个 Python 函数来计算斐波那契数列」。

而 Agentic Coding 模式下的 AI，则是一个主动执行任务的智能体。

它具备了更高层次的自主决策能力。你可以给它一个模糊的、高层次的目标，比如「修复这个 GitHub issue」或者「给我们的应用增加一个夜间模式」。

接下来，它会像一个真正的人类程序员一样：

• • 规划: 将大任务拆解成一系列具体的、可执行的步骤。
• • 执行: 自主调用各种工具（读写文件、运行代码、执行终端命令）来完成这些步骤。
• • 迭代: 在执行过程中，它能分析结果、调试错误，并根据反馈不断修正自己的方案，直到最终目标达成。

Claude Code 能在代码库中持续工作而无需人类的持续介入。开发者甚至可以同时运行多个 Claude Code 实例，像管理一个小型开发团队一样，让它们并行处理代码库的不同部分。

🚀 三大实战项目，全面覆盖开发工作流

这门课程摒弃了枯燥的理论说教，以实战项目为导向，将带领学员亲手完成三个从易到难、极具代表性的项目。

项目一：探索、开发和测试一个 RAG 聊天机器人

这是课程的入门部分是从一个 RAG 聊天机器人代码库入手。

在这一节，主要是学习 Agentic Coding 的核心循环：

• • 理解代码库: 如何向 Claude Code 提问，让它快速梳理出一个陌生项目的架构、数据流、关键模块和依赖关系？甚至让它直接画出架构图。这对于快速接手新项目或遗留代码至重要。
• • 添加新功能: 从简单的 UI 调整（如给引用来源添加超链接）到复杂的后端功能（如增加一个新的搜索工具），学习如何通过高阶指令引导 Claude Code 完成开发。课程特别强调了「先规划后执行」的重要性，这能显著提升复杂任务的成功率。
• • 测试与调试: 当应用出现 bug 时，如何引导 Claude Code 编写测试用例来定位问题，分析失败的测试，并最终提出修复方案？课程将演示一个真实的 debug 过程，展现 AI 强大的逻辑推理能力。
• • 代码重构: 如何让 Claude Code 将既有代码（例如，原本只支持单次工具调用的 AI 生成器）重构为支持更复杂逻辑（例如，支持多次、连续的工具调用）的健壮代码？

技巧 RAG 系统 通过结合大型语言模型的生成能力和外部知识库的检索能力，能够提供更准确、更具事实性的回答。 通过这个项目，学习与 Claude Code 日常协作的基础技能，学会如何提供清晰的上下文，如何管理它的「记忆」，以及如何利用它的思考模式来解决难题。

项目二：重构 Jupyter Notebook 并创建交互式仪表盘

第二个项目是一个非常贴近数据科学家和分析师日常工作场景的项目。

假设我们接手了一个较为杂乱的 Jupyter Notebook。课程将展示如何利用 Claude Code 将这样一个 EDA.ipynb 文件，系统性地重构为一个结构清晰、代码可复用、文档齐全的专业级分析项目。

核心痛点与解决方案：

1. 1. 从混乱到有序: Claude Code 会自动添加 Markdown 文档、组织代码结构、创建可复用的函数，并将其拆分到独立的 .py 文件中，如 data_loader.py 和 business_metrics.py。
2. 2. 从静态到交互: 课程将引导 Claude Code 使用 Streamlit 框架，将重构后的分析逻辑转化为一个专业的、交互式的数据仪表盘。用户可以在界面上通过筛选器动态查看数据，大大提升了分析结果的可用性。

这个项目展示了 AI 在提升代码质量、自动化文档编写以及快速原型开发方面的巨大价值。

项目三：从 Figma 设计稿直接构建 Web 应用

这是整门课程最重要的部分，也是 Agentic Coding 能力的终极体现。

想象一下，你只需要将一个 Figma 设计稿的链接扔给 Claude Code，它就能自动分析设计、理解布局、组件和样式，然后生成对应的 Next.js 前端代码。

这背后用到 Claude Code 的 MCP 服务器集成功能。

• • 连接 Figma MCP: 通过连接 Figma 的 MCP 服务器，Claude Code 直接访问到设计文件。
• • 连接 Playwright MCP: 通过连接 Playwright MCP 服务器，Claude Code 拥有了「手和眼」，它能启动一个真实的浏览器，访问它刚刚生成的 Web 应用，截取屏幕快照，然后将快照与原始 Figma 设计进行视觉对比，并根据差异自我修正代码，以求像素级的还原。

提示 Design-to-Code 流程的自动化，极大地缩短了从设计到产品上线的周期，是提升开发效率的关键环节。 整个流程将「设计到代码」这一传统开发流程中的痛点环节，压缩到了极致。最后，你还可以让它连接真实的数据 API，为这个应用填充上动态的经济数据，使其成为一个功能完备的 Web App。

🎨 揭秘 Claude Code 的「独门绝技」

要驾驭好 Claude Code，你需要了解它背后的一系列强大机制。这门课程花了大量篇幅来介绍这些「最佳实践」，它们是提升效率的关键。

1. 强大的上下文记忆与管理

AI 的表现力很大程度上取决于它能理解的上下文。Claude Code 在这方面提供了多种精细化的管理工具。

• • CLAUDE.md 文件: 这是 Claude Code 的「项目记忆核心」。你可以通过 /init 命令在项目根目录生成这个文件。它包含了项目的概览、关键命令、架构信息和编码规范。每次启动 Claude，它都会自动加载这个文件，确保它对项目有持续、正确的认知。你可以把不想让 AI 忘记的、最重要的信息（比如「本项目使用 uv 管理依赖」）固化在这里。
• • @ 符号: 在提问时，使用 @ 符号可以快速将一个或多个文件内容引入当前对话的上下文中。例如：请帮我重构 @backend/ai_generator.py 文件。
• • 上下文控制命令:/clear 可以清空当前对话历史，/compact 可以让 Claude 总结并压缩对话历史，而 ESC 键则可以随时打断 Claude 的当前操作，让你有机会进行修正和重定向。

2. 多任务并行：Git Worktrees 的妙用

当你需要同时开发多个不相关的特性时，比如一个 UI 功能、一套测试框架和一个代码质量工具，传统方式需要不断切换 Git 分支。

课程介绍了一种更优雅的方式：git worktree。

你可以使用 git worktree 从同一个仓库中，检出多个分支到不同的工作目录。这意味着你可以同时打开三个 VS Code 窗口，每个窗口对应一个独立的特性开发环境。

你可以在每个窗口的集成终端里，分别启动一个 Claude Code 实例。然后，同时向这三个实例下达不同的开发指令，让它们并行工作。最后，再将它们完成的工作合并回主分支。这简直就像拥有了一个可以 7x24 小时进行并行开发的 AI 团队。

3. 打通生态：MCP 服务器与 GitHub 集成

前文提到的 MCP 服务器是 Claude Code 的超能力来源。它们就像是为 AI 接上了各种外部「传感器」和「执行器」。

• • Figma MCP: 赋予 AI 「设计眼」。
• • Playwright MCP: 赋予 AI 「浏览器交互与视觉审查」的能力。

除了 MCP，Claude Code 还深度集成了 GitHub。通过 /install-github-app 命令，你可以轻松地将 Claude Bot 安装到你的 GitHub 仓库。

安装后，你可以在任何 Pull Request 或 Issue 的评论区 @claude，让它帮你：

• • 修复 Issue: 「@claude fix this」
• • 实现功能: 「@claude implement the feature described above」
• • 审查代码: 「@claude review this PR」

这使得 AI 无缝融入了主流的 DevOps 流程中。

4. 高阶玩法：自定义命令、Hooks 与思考模式

为了满足更个性化的需求，Claude Code 还提供了深度的定制能力。

• • 自定义斜杠命令: 你可以在 .claude/commands 目录下创建 Markdown 文件来定义自己的命令。例如，创建一个 implement-feature.md，就可以拥有一个 /implement-feature 命令，封装一套固定的指令模板。
• • Hooks (钩子): 这是一种高级自动化机制。你可以在 Claude Code 生命周期的特定节点（如工具执行前/后、子任务完成后）触发预定义的 Shell 命令，实现更复杂的自动化流程。
• • 扩展思考模式: 当遇到特别复杂的任务（如大型架构重构、疑难 bug 诊断）时，你可以在提示词中加入「Think」这个词。这会告诉 Claude 分配更多的「思考预算」来分析问题。你甚至可以使用「Think hard」或「Ultrathink」来进一步提升思考深度。
• • 子智能体 (Subagents): 你可以明确要求 Claude Code「use two parallel subagents to brainstorm possible plans」，它会启动两个并行的子智能体，各自探索不同的解决方案，为你提供更多思路。

课上还提供了所有项目的代码库和相关文件，你可以 Fork 到自己的 GitHub 账户，跟着视频一步步操作。

总而言之，这门由 Anthropic 官方出品的课程，是目前学习 Agentic Coding 概念与实践的绝佳资源。它不仅展示了 Claude Code 工具的强大，更重要的是，它在传递一种全新的软件开发思维方式。

在这里，人类开发者的角色正从牛马码农转变为 AI 开发团队的管理者。

这就上手 Claude Code，和你的第一个「AI 程序员」并肩作战了吧！