DLAI-ClaudeCode-笔记-全-

DLAI ClaudeCode 笔记（全）

001：1.介绍

概述

在本节课中，我们将要学习Claude Code，一个高度主动的编程助手。我们将了解它的基本概念、核心优势以及本课程将要涵盖的实践内容。

欢迎来到Claude Code，这是一个高度主动的编程助手。本课程是与Anthropic合作构建的，旨在分享使用Claude Code的最佳实践。我对这个短期课程感到非常兴奋。

Claude Code目前是我最喜欢的编程助手。它极大地提升了我和许多其他开发者的生产力。这是一个具有深度的工具，因此我们希望与Anthropic合作，系统地教授关于如何使用它的最重要理念。

在过去的几年里，我观察到AI辅助编程发展迅速。它始于人们偶尔向AI询问编码问题，然后是GitHub自动补全，再到各种变得越来越自主的工具。Claude Code的发布在代理程度或编码助手能独立完成的工作量方面，无疑是一个进步。许多人惊讶地发现，你可以设置一个任务，让Claude Code工作数分钟，有时甚至超过几分钟。现在，有些开发者不仅协调单个Claude实例，甚至让多个实例并行处理代码库的不同部分。

协调所有这些工作需要遵循最佳实践，但这些实践并不广为人知。如果你没有接触过这些最佳实践，掌握它们可能会对你的工作效率产生巨大的提升。

核心实践与课程内容

在开始讨论这些最佳实践时，一个关键技巧是为Claude Code提供清晰的上下文，以帮助它高效地完成任务。这意味着需要将Claude Code指向相关文件，清晰地描述你所需的功能，并确保通过MCP服务器和其他工具来正确扩展Claude Code的能力。

在本课程中，你将把这些最佳实践应用到三个不同的示例中。

以下是本课程将要完成的三个实践项目：

  1. 构建RAG聊天机器人：你将从前端到后端实现功能，包括重构代码、编写测试，然后使用GitHub集成来处理拉取请求和修复问题。你将利用许多Claude Code功能，如规划、思考模式、创建并行会话和管理Claude的记忆。
  2. 使用Jupyter Notebook分析电商数据：我们将转换方向，使用Jupyter Notebook探索电商数据。将使用Claude Code重构Notebook，移除冗余代码，并创建带有Web应用程序的强大仪表板。
  3. 基于Figma设计构建前端应用：我们将基于Figma创建一个视觉模型，并使用Claude Code、Figma MCP服务器和另一个MCP服务器来导入设计、迭代、测试并以代理方式构建一个强大的前端应用程序。

如果你目前还不是Claude Code用户，学习这套理念将为你作为现代软件工程师构建系统带来有意义的加速。即使你已经是Claude Code用户，以全面和系统的方式学习这些最佳实践，也希望能让你尝试一些对工作有用的新东西。

Claude Code的架构特点

在下一个视频中，我们将分享Claude Code的底层架构。你可能会惊讶于其架构的简单性。

Claude Code仅依赖少量工具来搜索文件中的模式、查看目录、查看文件以及执行正则表达式操作。它不依赖于将你的代码在代码库中进行语义嵌入或将其转换为可搜索的结构。

我认为使Claude Code有效的一个方面是，它如何以代理方式浏览你的代码，在一个名为cloud-do.md的文件中做笔记，以自主地弄清楚你的代码库中正在发生什么，从而驱动关于如何推进代码的决策。

正因为如此，并且不需要索引代码库，你可以确保代码库保持本地化。我们还将讨论由此带来的一些安全影响。

总结

本节课中，我们一起学习了Claude Code编程助手的基本介绍、核心优势以及本课程的结构。我们了解到，通过提供清晰上下文和利用其代理能力，Claude Code可以显著提升开发效率。接下来的课程将深入其架构和具体实践。

002：什么是 Claude Code

概述

在本节课中，我们将学习 Claude Code 的核心概念、工作流程、使用的工具以及它在会话间保持记忆的方式。我们将了解 Claude Code 如何从一个简单的模型助手转变为一个能够处理复杂编码任务的强大代理系统。

Claude Code 的代理工作流程

上一节我们介绍了课程概述，本节中我们来看看 Claude Code 的代理工作流程。

当我们谈论代理系统时，通常会考虑三个核心组件：一个模型、一组工具以及运行这些工具的环境。模型擅长处理输入并返回输出。但在许多情况下，模型本身并不了解你的代码库，也不知道如何查找文件或处理多个任务。

因此，我们不是直接与模型对话，而是为模型提供一个非常轻量级的“框架”。通过命令行，我们将利用这个框架来发挥模型的智能，以执行复杂的编码任务。我们不是直接将任务交给模型并试图在代码库中查找各种信息，而是提供一组工具、一个环境以及其他一些功能，使模型能够梳理代码库并解决更复杂的问题。

核心功能组件

上一节我们了解了 Claude Code 的基本工作流程，本节中我们来深入探讨其核心功能组件。

以下是构成 Claude Code 代理能力的几个关键功能：

  • 记忆能力：使模型能够记住用户的偏好、正在处理的代码库或当前任务。
  • 环境：为模型提供一个环境，使其能够理解所需数据、制定计划，然后采取行动。
  • 工具使用：通过少量代码，我们就能利用模型的智能取得相当显著的效果。

关于模型选择，Claude Code 提供 Opus 或 Sonnet 模型，具体取决于任务的复杂程度、类型以及你的订阅计划。

Claude Code 的能力范围

Claude Code 的功能远不止编写代码。随着课程的深入，我们将从它最强大的功能之一开始：发现、解释和设计能力。

在你开始用 Claude Code 编写代码之前，可以先用它来快速熟悉一个代码库。我们将详细讨论如何使用 Claude Code 编写代码，同时也会探讨在终端之外的环境（如 GitHub）中使用它的方法。我们还将讨论代码重构、调试错误，以及这个工具真正大放异彩的领域。

Claude Code 不仅对编码有用，在数据分析和任何需要模型智能来创建引人注目的可视化、资源或交付成果的环境中同样适用。

工具使用详解

我们提到为模型提供了一个框架和环境来收集上下文并采取行动，也讨论了为模型提供的记忆功能。现在，让我们详细谈谈我们让模型知晓的工具或附加功能。

为了说明工具的使用，你可以想象用户询问某个特定文件中写了什么代码。模型本身不知道如何导航或查找文件，这时工具使用就派上用场了。

开箱即用的 Claude Code 提供了一个相对较小的工具列表，其中之一就是读取文件的能力。现在模型知道该做什么，可以继续读取该文件，获取文件内容，并将数据返回给用户。这种工具使用能力使模型从一个简单的助手转变为一个极其复杂的工具。

以下是 Claude Code 内置的工具列表：

  • 用于编辑不同类型文件的工具。
  • 用于读取不同文件的工具。
  • 用于执行其他操作的工具，例如查找模式、在网络上搜索内容，甚至创建或运行子代理来处理非常困难和具有挑战性的任务。

最后，由于我们在命令行环境中，需要一个工具来执行 bash 或 shell 命令。工具使用是 Claude Code 收集所需上下文和信息的方式。这使得 Claude Code 能够处理更困难的问题，也意味着它不必索引你的整个代码库，从而避免了潜在的安全问题。

可扩展性与 MCP

Claude Code 具有很高的可扩展性。虽然你刚刚看到了 Claude Code 内置的工具列表，但你也可以通过连接到 MCP 服务器来添加额外的工具。

MCP（模型上下文协议）是一个开源的、与模型无关的协议，允许数据和 AI 系统轻松通信。这些 MCP 服务器可以为 Claude Code 添加各种不同任务的功能，我们将在本课程中探索其中的一些。

非索引化代码库方法

我想花更多时间谈谈“不索引代码库”的含义。与其创建代码库的结构化表示并不断分析它，Claude Code 使用了一个名为 Gen 搜索 的功能。

这种方法不要求将代码库发送到服务器，从而避免了代码离开你所在的生态系统。Claude Code 使用一个或多个不同的代理和工具集，在你的代码库中查找它需要的内容。这使你的代码不必完全添加到上下文中，也不必离开其所在的生态系统，从而避免了某些安全考虑。

记忆功能实现

当我们谈论 Claude Code 的记忆能力，即它记住先前对话或各种操作中发生的事情的能力时，这是通过一个名为 claude.md 的 Markdown 文件实现的。

在你的 claude.md 文件中，你可以定义常见的配置或风格指南。这些文件在启动时会自动加载到上下文中。你与 Claude Code 的对话会本地存储在你的机器上。你可以在对话过程中清除这些记忆，从而开启一个新的上下文窗口。但如果出于某种原因，你需要继续之前的对话或恢复更早的对话，你可以轻松做到。

实践演示

现在，我将切换到 VS Code 内的终端。可以看到我这里有一个名为 demo 的文件夹，里面是空的。

让我们从使用 claude 命令打开 Claude Code 开始。根据文件位置（尤其是第一次运行时），它可能会询问我是否信任此文件夹中的文件，我选择信任。

我们在这里看到了一些很好的入门提示，但我将从一个非常简单的提示开始：

Make a cool visualization for me. I'm just getting started.

我们将看到 Claude Code 开始制定一个待办事项列表。你可以想象这个任务可能是在代码库中搜索、编辑文件、编写测试、提供见解，或者在我们的案例中，创建一个可视化效果。

根据 Claude 的“想法”，这可能涉及粒子效果、烟花或其他东西。我只想向你展示，开箱即用，你能多快地开始看到 Claude Code 带来的变化。

由于我们在 Visual Studio Code 内部进行此操作，并且 Claude Code 与该编辑器有集成，我们将直观地看到正在进行的更改。我将接受这些更改，在未来的操作中，我会让 Claude Code 无需我的许可即可执行。

我们可以看到这里已经构建了一个可视化效果。让我们继续在浏览器中打开它。我将要求 Claude Code 为我执行此操作。它会确认这是要执行的命令。让我们去看看它是什么样子。

这就是我们的可视化效果。我们可以添加一些粒子，让它看起来更好。我们可以切换动画，看看发生了什么，并清除我们已有的内容。我们可以根据需要扩展它，可以更改功能，可以在这里添加任何我们想要的东西。但我只想向你展示，开箱即用，使用这个特定工具启动和运行是多么无缝。

总结

在本节课中，我们一起学习了 Claude Code 的核心概念。我们了解了它的代理工作流程，包括模型、工具和环境三个核心组件。我们探讨了它的关键功能：记忆能力、环境交互和强大的工具使用。Claude Code 的能力远不止编写代码，它还能用于代码库探索、解释、设计、重构和调试。其非索引化的工作方式（通过 Gen 搜索）保障了安全性，而通过 claude.md 文件实现的记忆功能则确保了对话的连续性。最后，我们通过一个简单的可视化创建演示，直观地感受了 Claude Code 的强大和易用性。

在下一课中，我们将探索如何在更大的代码库中使用 Claude Code，并退一步看看它在解释更大、更复杂的代码库方面有多么强大。

003：项目设置与代码库理解 🚀

在本节课中，我们将学习如何利用 Claude Code 来快速理解和上手一个全新的代码库。我们将通过一个端到端的 RAG 聊天机器人项目作为示例，探索 Claude Code 在代码库分析、架构理解、流程可视化以及项目初始化方面的强大能力。

概述：快速理解代码库

上一节我们介绍了 Claude Code 的基本概念。本节中，我们来看看如何利用它来高效地理解一个复杂的代码库。

我们将要处理的第一个示例是一个端到端的 RAG 聊天机器人。在开始让 Claude Code 为我们编写大量代码之前，我们先讨论如何使用这个工具来快速掌握大型代码库。

这里有一个应用程序，我可以与 Claude 就 DeepLearning.AI 的课程材料进行对话。让我们尝试询问一个课程大纲，例如：“MCP 课程‘使用 Anthropic 构建丰富上下文 AI 应用’的大纲是什么？”

我们会得到一个包含大量细节的回复，其中列出了每节课的内容和描述。基于此，让我们看看如何快速理解支撑这个应用程序的底层代码。

回到 VS Code，我在这里打开了终端，准备通过输入 Cla 并按回车键来进入 Claude Code。在这个应用程序中，我可以开始与我的代码库对话。我将从一个高层次的问题开始，以便了解概况。

探索代码库架构

以下是使用 Claude Code 探索代码库架构的步骤：

  1. 提出高层次问题：首先，询问“代码库概述是什么？”。Claude Code 会主动搜索代码库，找出最重要的文件，并描述这个应用程序中正在发生的事情。它不会逐个文件搜索，而是会主动搜索并找到最相关的文件。

  2. 获取关键信息：我们会得到关于架构、关键组件和一些功能的信息。如果我想深入了解特定部分，可以轻松做到。

  3. 询问具体流程：我也可以询问其他高层次问题，例如“在这个应用程序中，文档是如何处理的？”。我们使用检索增强生成来获取有关这些课程的信息。如果我想了解更多关于这个过程的信息，可以提出类似这样的问题。

我们常说 Claude Code 是一个在你身边的出色工程师，但它更是一个优秀的解释者。因此，当你开始接触新的代码库或新的数据集时，首先将其用作向你解释事物的工具。这样，当你要求它编写代码时，你能更好地理解正在发生的事情。

在这里，我们可以看到代码库中实际将文本分割成块、添加上下文课程信息以及存储课程元数据的源代码。这种快速上手代码库的能力，尤其是在你可能不熟悉底层技术或语言的情况下，具有极高的价值。

可视化与流程追踪

上一节我们介绍了如何获取代码库的文本概述。本节中，我们来看看如何通过可视化和流程追踪来加深理解。

我们可以提出更具体的问题，甚至可以获得为我们制作的图表和可视化。因此，我要问 Claude 的第一件事是追踪处理用户查询的流程，从前端到后端。

你可以想象，你可能对技术栈的某一部分知识有限，或者不熟悉这一切是如何发生的。Claude Code 将在这里为我们提供相当有用的信息。

当你看到 Claude Code 工作时，它的一个有用之处是能够给你一个待办事项列表。这样你就可以开始理解在任何时间点正在发生的事情。你可以按 Escape 键并引导 Claude Code 遵循一组不同的待办事项。但在这种情况下，我对它的工作感到满意。

它将从前端开始追踪，遵循 API 端点，分析我们的检索增强生成系统，然后找出如何实际生成响应。它正在读取处理这些特定任务的相应文件，并完成其列表，为我们提供一个强大的总结。

在这个环境中，我们可以留在 VS Code 内，或者在它自己专用的终端实例中打开 Claude Code，这完全取决于你的工作方式。

一旦完成，我们可以看到这里发生的事情的非常详细的路径。我不仅可以逐步阅读这些步骤，甚至可以要求 Claude 将其写入文件。但我在这里看到了相当多的细节：前端发生了什么，使用了一些 JavaScript；一旦请求到达我的后端会发生什么；检索增强生成系统在做什么；我如何生成响应；最后，我如何搜索我的向量数据库，如何过滤必要的内容，获取响应，然后最终将其发送给用户。

这个应用程序中发生了很多事情，我可以使用 Claude 深入探究其中的任何部分。但假设我通过可视化学习效果最好。那么让我们要求 Claude 绘制一个说明此流程的图表。

我们可以要求 Claude 为网络可视化绘制图表，我们可以要求使用 askDR，但让我们看看 Claude 凭借其自身的智能和对应用程序工作原理的了解能提出什么。让我们看看 Claude Code 想出了什么。

我们得到了一个非常漂亮的图表，向我们展示了逐步的过程。我们无法创建这些可视化图表。如果我们想要像 Web 应用程序那样的东西，我们总是可以要求它使用像 D3.js 或 Recharts 这样的工具。但在这里，我们看到了一个非常漂亮的图表：从前端发出请求到后端，调用必要的函数，生成必要的响应（如果涉及任何历史记录），直接与大型语言模型对话（使用我们的系统提示词、工具和查询），找出下一步该做什么，使用 ChromaDB 搜索我们的向量数据库，获取结果，格式化，然后将其发送给模型以产生最终响应。

这其中包含了相当多的细节。如果我们愿意，甚至可以用额外的工具来增强 Claude，以生成我们想要的可视化效果。但开箱即用，快速高效地获取这些信息将帮助我们以比以往花费的时间少得多的时间来上手这个代码库。

项目初始化与运行

基于以上理解，让我们问一个非常简单的问题：“我如何运行这个应用程序？”

你可能处于这样一种情况：这里有一种新技术，一个新想法。很简单，仅仅知道如何启动和运行它就很不错。我可以在这里看到我的 API 文档、我的 Web 界面，以及我需要的任何环境变量。现在你已经了解了如何开始与 Claude Code 对话，让我们谈谈 Claude Code 的一些更强大的功能。

当你开始在 Claude Code 中处理一个应用程序时，我们建议你做的第一件事就是运行一个名为 /init 的命令。你可以在这里的 Claude Code 中看到，当我添加这个斜杠时，我们有一个我可以使用的许多内置命令的列表。/init 允许我使用代码库文档初始化一个 .claude.md 文件。

.claude.md 文件对于为 Claude Code 引入记忆至关重要，这样它就知道如何最好地在你的代码库中工作。.claude.md 文件对于指定你希望如何运行事物非常有用，这可以是你的测试、代码检查，以及你希望 Claude 在你每次处理这个特定项目时拥有的任何长期记忆。

与其从头开始创建这个文件，/init 将分析代码库，以从高层次上弄清楚每次你处理这个应用程序时它应该知道什么。

理解 .claude.md 文件类型

以下是三种不同的 .claude.md 文件类型：

  1. 项目级文件：像用 /init 生成的那个，位于最左边。这个 .claude.md 文件存在于你的应用程序中，你可以在嵌套的子文件夹中有很多个，但它与其他工程师共享并提交到你的版本控制中。

  2. 本地级文件：如果你有个人说明和自定义设置，特定于你的编辑环境和终端环境，你可以将其放在一个 .claude.local.md 文件中。这个文件被 Git 忽略，不与其他工程师共享。

  3. 用户级文件：最后，在你的主目录的 .claude 文件夹中，你可以添加一个 claude.md。你可以将其视为适用于你机器上所有项目的 .zshrc 或 .bashrc。如果你希望 Claude 在你使用 Claude Code 构建的广泛项目范围内遵循指令，这将很有帮助。

我们可以继续允许 Claude Code 查找不同的文件，以便它知道如何最好地创建这个 .claude.md 文件。这个 .claude.md 文件旨在添加到您当前的 Git 项目中，并与团队的其他成员共享。随着更多人在代码库上工作，他们可以添加到这个 .claude.md 文件中，如果你需要更具体的指令，你甚至可以在子目录中嵌套 .claude.md 文件，例如后端、前端或我们这里的文档。

交互式编辑与记忆管理

使用像 Claude Code 这样的工具与 Visual Studio Code 配合的一个真正好处是，当我看到文件更改时，我可以在编辑器中直观地看到它们。每当我使用 Claude Code 中的工具时，它都会请求我的许可。这种关键的人机交互循环在你启动和运行时非常重要。如果你不需要 Claude 每次都问你，总是可以使用第二个选项，我们将自动接受这些编辑。

我们将看到已经为我们创建了一个 .claude.md 文件。为了给你一个快速的演示，我们可以看到它给了我们一个项目概述、关键技术、架构概述、这里的一个漂亮的小图表、一些核心组件等等。如果我们想对这个特定的 .claude.md 进行更改，可以轻松做到。随着它继续搜索代码库，它会对我的 .claude.md 进行额外的编辑，并给我一个已完成工作的总结。

当我在 VSCode 中使用像 Claude Code 这样的工具时，我有能力指定我所在的文件，甚至获取有关特定行的信息。为了设置这个，我将使用 /ide 命令，我可以在这里看到我已经与 Visual Studio Code 连接。现在我在 Visual Studio Code 中，可以在这里看到，在我访问文件的那一刻，它就在这里被标记了正在发生的事情。这为 Claude Code 提供了正确的上下文，知道我所在的文件，如果我有关于该文件的问题，这使 Claude Code 更容易识别。

如果我曾经想对我的 .claude.md 文件进行任何更改，我可以手动编写，或者我可以使用一个方便的命令，直接使用 # 键并直接添加到记忆中。所以我要在这里说：“始终使用 uv 来运行服务器。不要直接使用 pip。” 这是 Python 生态系统中的一个包管理器，我想确保在使用这个快捷方式时 Claude 不会感到困惑。

我们可以看到，这个记忆可以保存在不同的地方。我们提到过，有包含在 Git 中供团队每个人使用的项目记忆；有本地记忆，它被 Git 忽略，但仅对作为开发者的你有用；然后是适用于你使用 Claude Code 的所有项目的用户记忆。对于这一个，我将继续更新项目记忆。我可以在这里看到我已经做了那个更改。如果我查看我的 .claude.md，我会在这里看到一些关于使用 uv 的提及，以确保我正确地做到了这一点。

如果我想更具体，我也可以说“确保使用 uv 来管理所有依赖项”。我将把这个添加到我的 .claude.md 中，我们会在这里看到它已经被添加。如果我快速浏览一下这个特定的文件，我们可以看到任何关于依赖项的提及现在都包括了 uv。

实用命令与 Git 集成

我们稍微谈到了 Claude Code 中内置的一些命令，比如 /init。这里还有几个其他有用的命令我想在这里展示，事实上，我们将在本课程后面看到我们甚至可以创建自己的命令。

以下是几个关键的内置命令：

  1. /help：立即向我显示所有命令的快速描述和摘要。这在您上手 Claude Code 时非常有用。

  2. /clear：这个命令允许你清除对话历史并从头开始。这在您转换任务和构建新功能时非常有帮助，它允许你清除上下文窗口并重新开始。

  3. /compact：如果你想要继续对话，拥有一个较小的上下文窗口，但仍然保留已完成工作的摘要，我们也有这个 compact 命令，它允许你清除历史记录但保留摘要，以便你可以在此基础上继续，让 Claude 了解之前做了什么。

  4. Escape 键：另一个有用的命令是 Escape 键，它允许你退出你所在的任何命令。所以，如果我正在尝试做类似 compact 的事情，并且我想停止那个过程，我总是可以按 Escape。如果我启动了一个让 Claude Code 解释代码库内容的过程，我想停止那个过程，按 Escape 将允许我中断并继续。所以，如果你没有得到你需要的东西，不要觉得你必须等待 Claude Code。

在下一课中，我们将开始使用 Claude Code 来构建功能、添加到文件、修改更改，并确保我们在此过程中做正确的事情。在我们结束之前，Claude Code 最后一个有用的功能是它与 Git 协作的能力。

我已经对这个应用程序做了一些小的更改，我想添加并提交这些更改。与其让我手动编写 Git 命令、编写描述性的提交消息，我们将实际让 Claude Code 为我们做这项工作。Claude Code 能够添加和提交必要命令的能力非常棒。我将继续添加这个特定的文件。

我不仅可以提交，你还可以在这里看到我有一个非常好的描述性提交消息。当我们开始向 Claude Code 询问 Git 的历史更改，以及当我们将其推送到 GitHub 和其他人阅读我们所做的更改时，这非常有用。所以我们将添加并提交，在下一课中，我们将使用 Claude Code 开始为我们编写很多东西。

总结

本节课中，我们一起学习了如何利用 Claude Code 高效地理解和上手一个复杂的代码库。我们探索了如何通过高层次提问获取架构概述，如何追踪从前端到后端的完整流程，以及如何生成可视化图表来辅助理解。我们还深入了解了 .claude.md 文件的作用和类型，学会了使用 /init 初始化项目记忆，并掌握了 /help、/clear、/compact 等实用命令。最后，我们看到了 Claude Code 如何与 Git 集成，自动化提交过程。这些技能将为你后续使用 Claude Code 进行主动编程和功能开发奠定坚实的基础。

004：添加功能

概述

在本节课中，我们将学习如何为现有的聊天机器人代码库添加新功能。我们将重点介绍两个核心工作流程：使用“计划模式”进行结构化开发，以及利用MCP服务器扩展Claude Code的能力。我们将通过实际案例，演示如何为前端添加可点击的引用链接和“新建聊天”按钮，并为后端添加新的工具来获取更详细的课程信息。

理解代码库与功能规划

现在你已经对聊天机器人代码库有了基本了解，让我们为UI添加一些功能，并为聊天机器人实现一个新工具。

我们已经熟悉了这个代码库，现在来讨论一些我们可能想要添加的功能。在这个应用程序中，当我们请求课程大纲时，会得到非常详细的信息，同时还能看到一些被引用的来源。当我们看到这些被引用的来源时，如果能将它们作为链接点击并跳转到原始出处，那将非常有用。因此，我们希望构建一个界面，让前端和后端能够正确渲染链接，以显示数据的来源，而不仅仅是文本。

让我们转到Claude，讨论一下如何开始。

在这里，我们不会直接要求Claude实现必要的功能，而是利用两个重要的部分。第一个是引用正确的文件，第二个是使用计划模式。

引用正确的文件

当谈到引用正确的文件时，Claude Code的能力取决于你提供的上下文。当你要求Claude Code进行更改时，确保我们找出需要修改的正确文件非常重要。我们可以让Claude Code尝试解决这个问题，但如果我们一开始就知道哪些文件需要修改，直接给Claude Code提供这个上下文会使工具效率更高。

让我们看看具体如何操作。

我将打开Claude Code。要引用一个文件，我只需使用 @ 符号并标记该文件。对于一个文件夹，我可以引用其中的文件；对于一个文件，我甚至可以使用Tab键自动补全完整的文件名。

使用计划模式进行开发

考虑到这一点，接下来谈谈构建功能或进行较大更改时的第二个重要部分。我们不会让Claude立即尝试弄清楚需要做什么并编写代码，而是遵循一个略有不同的模式：先做计划。

我们将首先创建一个详细的计划，说明需要做哪些更改。如果我们批准了该计划，然后才会让Claude Code对相当多的文件进行更改。

当你需要进行稍大的更改时，我们总是建议从计划模式开始，这样你可以给Claude机会在需要实际进行更改之前，先弄清楚需要做什么。

要激活计划模式，我将按两次 Shift + Tab 键。我们会看到这里计划模式已开启。

实施引用链接功能

让我们展示一下需要做什么。

我将引入一个我准备好的提示词，并要求它构建一个带有来源引用的界面。你可以注意到，我在这里引用了正确的文件，也引用了其他需要更改的文件。

让我们给Claude机会，为如何解决这个特定问题制定一个计划。和往常一样，它将通读它认为最必要的文件，从前端追踪到后端，并理解需要实现什么。

一旦我们得到了一个计划，我们将有机会批准它，或者给Claude一些反馈，说明可能需要更改什么。但在这里，Claude并没有直接编写任何代码。

我们可以看到这里，我们可以接受，然后继续自动接受编辑，这样我们就不必一直请求许可。我们可以手动批准它们，或者告诉Claude更改计划。

快速浏览一下这个计划，我觉得我们需要做的事情看起来不错，所以让我们使用那个计划，并开启自动接受编辑功能。如果你想单独开启这个功能，可以按一次 Shift + Tab 键。

我们将看到必要的待办事项列表，看到需要做哪些更改。现在，我们将让Claude Code写入它认为必要的文件，然后我们可以测试实现是否正确。

我们将看到文件正在被修改，代码库正在发生变化。由于我们添加了自动接受功能，我们不必一遍又一遍地给予许可。我们看到的非常常见的工作流程是，用户开始时每次都会请求许可。随着人类对Claude Code给予更多信任，自动接受编辑功能会更多地开启。

最后，我们可以看到，我们可以启动应用程序来测试实现。但实际上，服务器已经在运行了。所以我直接告诉Claude：“不，谢谢。”我会直接说，服务器已经在运行，不需要你自己启动。如果我希望Claude Code总是这样做，这也是一个很好的机会，可以将此信息放入 .claude_m 文件中。

现在我已经让Claude Code知道了这一点，它会告诉我已经做了哪些更改。

测试与视觉优化

让我们现在测试一下。尝试问同样的问题。让我们请求一个课程大纲。如果构建正确，我们应该能够看到每个特定功能下面的链接。

如果我在这里看一下，我有链接可以带我跳转到正确的位置，但由于这个蓝色链接颜色，界面有点难以看清。如果我愿意，我可以继续要求Claude Code进行必要的更改。

所以，让我们跟进Claude，要求它让这个界面看起来更舒服一些。

这里我有一个选择，就是直接告诉Claude我想要什么。另一个选择是利用Claude的视觉能力，查看截图并分析需要更改什么。让我们截取这个界面的截图，然后将其粘贴到Claude Code中。

回到Claude Code，当我粘贴截图时，我会说：“这些链接很难阅读，你能让它看起来更美观吗？”我们将让Claude分析该图像，并弄清楚前端需要更改的地方。

我们可以看到这里，我可以看到问题所在：链接使用了默认的蓝色。让我继续做一个更改。当你需要Claude Code进行视觉更改时，截取屏幕截图并向Claude Code展示截图，是一种非常强大的快速迭代方式。

让我们回到浏览器，看看现在是什么样子。我们将再次请求课程大纲。如果这达到了我们的预期，我们应该看到这些链接看起来更舒服一些。

让我们看看我们的来源，看吧，好多了。Claude Code能够查看截图并进行更改，这是我们看到的最常用的功能之一，对于快速构建东西非常有价值。

如果我想查看那些文件的更改，我可以在Vs code中打开它们。在这里的Claude Code中，我注意到我在那个特定的脚本中，我可以提问并获取这些文件所需的信息。

添加“新建聊天”按钮功能

这看起来不错。让我们添加一个新功能。与其在我现有的上下文窗口中继续构建，我将完全从头开始，清除对话历史记录。这将允许我有更长的上下文窗口来工作，并且不会让Claude被之前看到但与我现在构建的内容无关的东西所混淆。

正如我们之前看到的，当我们想要构建新功能时，我们将在这个特定应用程序中使用计划模式。我想在界面中添加启动新聊天的功能。所以，与其每次都必须刷新页面，我希望这里有一个按钮，允许我重置对话并重新开始一个新的聊天。

让我们构建这个功能。我将激活计划模式，然后继续引入我准备好的提示词。我将要求Claude Code添加一个新的聊天按钮，当点击时，它应该清除聊天窗口中的对话，开始一个新会话，并处理必要的清理工作。

如果你需要换行并添加上下文，可以使用反斜杠并按回车键。所以，如果这里有更多我想添加的内容，我可以轻松做到，这样看起来更舒服。

让我们让Claude Code弄清楚这里需要构建什么。正如我们之前看到的，如果前端有需要更改的地方，它会找到必要的文件夹；后端需要更改，也是同样的道理。在这里，它将制定一个全面的计划。

这种在采取行动之前能够计划和思考的想法，对于构建你想要的界面非常有价值。

我可以快速浏览一下这个计划，看看它试图做什么。我觉得不错，所以让我们构建它。如果在任何时候，我不喜欢正在做的事情，我总是可以按 Escape 键，并引导Claude Code走向不同的方向。

和往常一样，我们将看到需要构建的待办事项列表，看到这些文件正在更新，因为我开启了自动接受编辑功能。一旦完成，我们将进入下一步。

我们将开始看到添加一些JavaScript代码来处理点击事件、开始新对话、清除输入框和聚焦，现在正在构建一些样式以匹配现有部分。

我们可以看到这里，它将测试新功能。如果我需要告诉Claude不要运行服务器，我可以这样做。所以在这里，与其运行服务器，我直接告诉Claude不要这样做。由于我发现自己经常这样做，现在是一个好时机，可以说“不要运行服务器，使用 npm run start，我会自己启动它”。我实际上会把这个放到项目内存中，如果我希望所有其他开发者也这样做的话。但也许其他开发者可能想自己运行服务器，所以我会把它放在本地且被忽略的项目内存中。这可能是一个我喜欢自己运行服务器，但其他开发者可能不喜欢的场景，这是 .claude_m 本地文件的一个很好的用例。

现在让我们回到浏览器，看看构建了什么。我将刷新页面，我们在这里有了这个新的聊天按钮。让我们看看它是否有效。再次请求课程大纲。我们可以确保我们的来源链接看起来很棒，如果这达到了预期效果，我们可以点击这个按钮并开始一个新的对话。看起来不错，让我们开始一个新的聊天。

利用MCP服务器进行自动化界面调整

即使这能工作，它看起来仍然不完全是我想要的样子。我可以截取屏幕截图并与Claude来回沟通，或者我可以使用MCP服务器来增强Claude Code开箱即用的工具。

MCP，即模型上下文协议，允许像Claude Code这样的工具获得额外的功能，以连接到外部数据源和系统。

我在这里要做的是为Playwright添加一个MCP服务器，这是一个用于打开浏览器、截取屏幕截图和分析这些截图的流行工具。所以，与其我手动截取屏幕截图并与Claude对话，我们将让Claude自己完成所有工作。

我要做的第一件事是退出Claude Code，并添加必要的MCP服务器。这样做的命令是 claude mcp add，后面跟上我们的MCP服务器名称，即 playwright，然后是启动该MCP服务器的底层命令，即 npx playwright-mcp-server@latest。对于任何你想包含的MCP服务器，你可以参考文档。所有MCP服务器都会指定连接到该特定服务器所需的必要命令。

让我们再次打开Claude，看看我们的MCP服务器是什么样子。我们可以使用 claude mcp list 命令。在这里，我们可以看到我们已经成功连接到Playwright MCP服务器，并且可以看到Playwright服务器提供给我们的可用工具，比如评估JavaScript、上传文件、按键、导航、返回等所有这些我们可能手动测试的事情，Playwright可以为我们以编程方式完成。

我将按几次 Escape 键返回。让我们要求Claude Code导航到我们的页面，找出如何构建必要的内容。

所以，让我们使用Playwright MCP服务器要求Claude Code访问我们所在的页面，查看新的聊天按钮。我希望那个按钮看起来与下面课程的其他链接相同，并尝试要求确保它是左对齐的，并且边框被移除。

在开始采取这个行动之前，它会要求我批准使用这些特定的工具。我们将看到它会访问那个页面，截取屏幕截图，并做必要的事情。

让我们跟随那个，并且不要每次都请求使用这个特定工具的许可。我们可以看到，浏览器已经以编程方式为我们的页面打开了一个新标签页来截取屏幕截图。我们将要求Claude Code截取那个屏幕截图，并分析它看到了什么。

在这里，它可以准确地看到正在发生的问题。与其我们手动截取必要的屏幕截图，它可以以编程方式自我修复。我们也可以有一个更具体的提示词，不断要求Claude Code进行必要的更改。

由于我没有开启自动接受，我可以在Vs code中看到正在进行的更改。开箱即用，我没有看到边框和背景，有了这个新的更改，看起来不错。让我们进行这些更改，并继续做其他更改。我可以看到左对齐看起来不错，这里需要做的任何其他更改。它将截取另一个屏幕截图，以验证它所做的更改看起来是正确的，它使用了正确的图标前缀来匹配其他部分。

考虑到这一点，让我们去看看它做得怎么样。我将刷新页面，看起来不错。它这里多了一个加号。所以，我们为什么不继续要求它去掉那个呢？但它已经左对齐了，并且使用了我们之前喜欢的图标。

所以，让我们继续修复这个问题，并说：“现在有两个加号图标。移除靠近文本‘+ 新建聊天’的那个。”我们可以看到这里，H内容中已经有一个加号了，所以我们将移除那个。

让我们看看这里做了什么。所以，与其添加那个额外的加号，我们可以看到这里做了什么。如果我们需要另一个快照，我们可以访问并截取必要的快照。正如我们在这里看到的，Claude Code看到没有打开的标签页，所以它自我修复，再次打开它，并截取了必要的屏幕截图。

让我们看看现在是什么样子。好多了。正如你可以想象的，使用像MCP Playwright这样的工具构建复杂的界面，使得构建、设计和测试变得轻而易举。

为后端添加新工具

我们需要一些非常好的前端更改，现在让我们去后端看看。像之前一样，我们将重新开始。与其基于这个对话继续构建，我们将开始一个新的对话。所以，让我们清除对话历史记录，重新开始。这次我们想在后台添加一些功能。

我将输入一个提示词，讨论一下这里要做什么。我需要添加另一个工具，允许我访问特定课程，并为每个课程查看课程编号、课程标题以及相关描述。

目前，当我查看一个课程时，我得到的数据相对比较高层。让我们看看我的意思。我们将要求Claude Code在这里做的是更改我们的 search_tools.py 文件。让我们看看那个文件。在这个文件中，我们现在可以看到，我们只有一个用于搜索内容和获取该特定课程详细信息的工具。

这第二个工具将允许我们为这些课程中的每一课获取更具描述性的信息。

所以，让我们看看Claude能做什么。正如我们之前所做的那样，让我们制定一个计划，并确保在开始更改单个文件之前，我们首先同意该计划。

Claude Code可以看到当前的架构，实现大纲工具。由于我们之前有 .claude_m 文件，它将能够更快地理解需要做什么。

我们可以看看需要实现什么，确保我们在正确的文件中做正确的事情。我们可以看到，一旦我们创建了这个工具，我们就更新系统提示词以确保我们获得额外的数据，然后我们在我们的RAG系统中注册该工具。

和往常一样，如果我们想更改或建议任何东西，我们现在就可以做。让我们看看Claude Code能为我们做什么。如果这按预期工作，我们应该能够询问关于课程的问题，并为该课程中的特定课程获得更多细节。

我们可以看到，这里我们不仅修改了底层的Python代码，还修改了系统提示词。在这里，我们注册了我们制作的新工具。一旦我们完成了待办事项列表，我们可以回到浏览器，看看情况如何，如果这已经正确实现，我们将看到已做更改的摘要。我们可以在任何时候更改任何东西。

回到浏览器。让我们尝试请求一些关于课程的信息。如果这按预期工作，我们应该能够获得更详细的信息，包括该特定课程的链接。在这里，我们可以看到课程的名称。如果我们愿意，我们甚至可以构建额外的功能来获取每一个课程的来源。

总结

在本节课中，我们一起学习了如何为现有项目添加功能。我们掌握了两个核心工作流：使用“计划模式”进行结构化、可控的代码修改，以及通过集成MCP服务器（如Playwright）来扩展Claude Code的能力，实现自动化界面测试与调整。我们实践了为前端添加可点击的引用链接和“新建聊天”按钮，并为后端添加了新的数据查询工具。这些技能将帮助你更高效、更可靠地迭代和增强你的软件项目。在下一课中，我们将讨论当出现问题时该怎么办，以及如何使用Claude Code进行调试、编写测试，确保我们对与Claude Code共同编写的软件充满信心。

005：测试、错误调试与代码重构 🐛

在本节课中，我们将学习如何为代码库编写测试，利用这些测试来调试一个聊天机器人的错误，并最终重构聊天机器人处理工具调用的方式。

概述

上一节我们介绍了如何快速熟悉代码库并实现功能。本节中，我们来看看当应用程序运行一段时间后出现问题，我们如何回归并系统地解决问题。我们将从一个错误开始，通过编写测试来定位问题，修复它，并重构代码以支持更复杂的功能。

发现错误与制定策略

当我们回到应用程序并询问第5课的内容时，期望得到一个信息性的回复，但目前出现了错误。

与其直接将错误信息交给Claude并希望它解决问题，我们将采取一种更系统的方法。我们知道应用程序有问题，但我们也知道目前没有足够的测试来程序化地验证这一点。

因此，我们将输入一个提示，不仅提及错误，还指定我们需要为哪些文件编写测试。错误可能来自多个不同的Python文件：

  • ai_generator.py：处理与Anthropic API的交互，提示或逻辑可能存在问题。
  • rag_system.py：检索增强生成（RAG）流程的协调器。
  • search_tools.py：定义底层工具，这里也可能存在问题。

我们将要求Claude为这些特定文件编写测试，然后运行这些测试，通过这个过程来验证问题所在并进行修复。

这种方法的有力之处在于，从测试开始，我们可以为代码库构建一个坚实的基础，以便未来进行更多开发，并理解当出现问题时失败的原因。

实施测试与调试

我们打开Claude并输入提示。由于这个任务更具挑战性，我们还将要求Claude进行深度思考（think a lot），这会触发其扩展思考能力，分配更多计算资源进行推理。我们也会开启计划模式（plan mode），确保Claude在开始编写测试前，先理解需要做什么，我们可以批准这个计划。

Claude分析了情况，认为可能存在配置问题、复杂的工具调用失败点或组件间有限的错误传播。它提出了一个基于这些文件的测试结构，使用pytest框架，并模拟Chroma DB所需的部分，以建立单元测试和集成测试。

以下是Claude创建测试文件的过程：

  • 为search_tools.py创建测试，包括所需的夹具（fixtures）和模拟（mocks）。
  • 为ai_generator.py和rag_system.py创建测试。
  • 在此过程中，它识别出一个关键的配置问题，这可能就是导致错误的原因。

现在我们已经创建了这些测试，让我们使用uv运行它们。运行结果显示，在执行向量搜索时，返回的块数量（max_results）似乎有问题。检查代码后确认，max_results被意外地设置为了0。修复这个值后，我们不仅期望测试通过，还期望得到完整的查询结果。

验证修复与总结发现

修复完成后，Claude提供了一个全面的总结。我们可以回到浏览器，开始一个新的对话，再次询问相同的问题。这次，我们没有看到查询失败，而是获得了关于课程的正确信息。

至此，我们不仅修复了错误，还为自己构建了一个强大的基础设施，可以持续运行应用程序，并确保在进行新更改时，能够知道哪些地方没有出错。

代码重构：支持多轮工具调用

现在应用程序可以工作了，让我们讨论一下代码库中希望进行的一个重构。在ai_generator.py中，我们指定每次查询最多进行一次搜索。虽然这对于相对简单的搜索能产生预期行为，但当我们开始进行更复杂的查询（例如比较不同课程及其大纲）时，我们将需要不止一次的工具调用。

我们需要一种环境，可以迭代地遍历所有必要的工具，或者递归地解决这个问题。当前的AI Generator类虽然简单，但在构建系统提示、确定必要消息和工具时，并没有迭代和来回累积必要工具以进行多轮、多工具对话的逻辑。

因此，让我们重构它。我们创建一个新的Markdown文件来存放一个详细的提示，要求Claude重构后端的ai_generator.py，以支持在单独轮次中进行两次工具调用。提示中描述了当前行为和期望行为，并给出了一个示例流程（例如“搜索一个讨论与另一门课程相同主题的课程”），以明确需要完成的任务。我们还要求Claude编写验证外部行为的测试，而不是担心内部状态细节。

由于我们不确定最佳的代码重构方案是什么，我们要求Claude不要立即实现代码，而是派遣两个子代理（subagents）来并行构思潜在的选项。这让我们有机会在多个方案中选择。

运行提示后，我们看到两个并行子代理被派遣，它们读取文件并提出了两种不同的重构方法。一种方法是迭代式的，另一种更全面。Claude给出了选择建议：选项A（更安全的实现）或选项B（更好的长期可维护性）。从初步判断，方法A看起来更简单，因此我们选择从方法A开始。

在实施方法A之前，我们启用计划模式以获得一个全面的计划。计划包括更新方法签名以支持最大轮次、更新系统提示，以及在handle_tool_execution中进行核心重构。这个重构应该是向后兼容的，并且不改变内部的RAG系统或任何API端点。

我们批准计划并让Claude实施。在实施过程中，我们看到对现有方法的更改，最重要的是，我们看到测试被更新并运行，以验证实现是否正确工作。我们无需切换到浏览器或请他人测试，这一切都可以在Claude Code的终端内完成。

测试重构结果

测试通过后，我们在浏览器中验证新功能。首先，我们询问一个课程某节课的详细信息。我们可以看到，我们不仅获得了信息，还获得了该节课的标题。值得注意的是，仅通过一次工具调用是无法获得标题的：第一次工具调用只给出课程大纲，第二次工具调用才给出特定课程的详细信息（包括标题）。

接下来，我们进行一个更复杂的查询：“有哪些其他课程涵盖了MCP课程第5课相同的主题？”。为了回答这个问题，需要进行多次工具调用来获取关于这个特定MCP课程大纲的信息，然后获取其他课程及其大纲的信息，以查看是否有重叠。结果显示，没有其他课程涵盖构建MCP客户端的主题，这似乎是准确的。

总结

在本节课中，我们一起学习了如何使用Claude Code不仅修复错误，还在整个过程中编写测试。我们为自己构建了一个坚实的编码基础，并进行了一次出色的重构，以恰当地支持更复杂的查询回答。在下一课中，我们将通过运行多个Claude Code会话并使用Git工作树来确保没有重叠或覆盖写入，从而提高我们的工作效率。

006：同时添加多个功能

概述

在本节课中，我们将学习如何使用 Claude Code 同时处理多个功能开发任务。我们将通过 Git 工作树功能，在并行环境中安全地修改代码，避免文件冲突，并最终合并所有更改。

自定义命令的创建与使用

上一节我们介绍了 Claude Code 的基本功能，本节中我们来看看如何创建自定义命令来优化工作流程。

Claude Code 内置了许多斜杠命令，但您也可以创建自己的命令。在 .claude 文件夹内创建一个名为 commands 的新文件夹。在此文件夹中，创建一个以您希望的命令名命名的 Markdown 文件。这里我将创建一个名为 implement_feature 的命令。

创建 Markdown 文件 implement_feature.md 后，您可以在其中放置任何内容。特别之处在于，如果您想向自定义命令传递参数，可以使用 $arguments 变量来引用。

以下是我在该文件中放置的内容：

当使用此命令时，我将指定您正在实现一个新功能。用户可以指定该功能的具体内容。然后，我需要确保 Claude Code 清楚地知道这仅适用于前端功能，并将所做的更改写入名为 `frontend_changes.md` 的文件。

您可以想象自定义命令有许多不同的用例，例如以特定方式运行测试或运行文件。请注意，与 claude.md 文件不同，此处放置的内容不会自动添加到您的上下文中。如果您希望某些内容应用于您创建的每个 Claude Code 实例，请使用 claude.md 文件。但如果您有特定的命令，可能在不同对话中使用或不使用，那么这里是一个很好的存放位置。

我将使用这个自定义命令来开始讨论工作树。但在开始之前，让我们退出 Claude Code 并重新进入，以验证我们可以看到这个自定义命令。现在我可以看到 implement_feature 命令，其描述来自 Markdown 文件的第一部分。

添加此自定义命令后，让我们继续添加并提交更改。我可以从命令行执行此操作，但我将要求 Claude 为我完成。

以下是 Claude 执行的命令：

git add .claude
git commit -m "Add custom command for implementing features"

这很好，因为 Claude Code 可以创建带有描述性信息的提交消息，说明所做的更改。我们可以看到它已添加到仓库中。由于我们已经授予了权限，因此无需再次确认。

如果您好奇这些权限设置存储在哪里，可以在 .claude 文件夹内的 settings.local.json 文件中找到。在此文件中，我们可以指定已允许的命令，这样我们就不需要每次都进行确认。您也可以看到，当我们使用 Playwright 时，我们授予了权限。如果您想添加自己的权限，可以轻松地在此文件中添加，或者使用方便的 /permissions 命令。

使用 Git 工作树进行并行开发

现在我们已经设置了自定义命令，让我们讨论一下如何与 Claude Code 并行工作。我们将使用 Git 来确保在拥有多个 Claude Code 实例时不会覆盖现有文件。

我可能有两个不同的 Claude Code 实例操作同一个文件。如果我使用当前环境这样做，将会导致覆盖错误和相当多的混乱。幸运的是，Git 在这里提供了一个极好的选项，即使用称为“工作树”的功能。工作树允许我创建代码库的副本，在隔离环境中操作，然后在最后合并在一起。实际上，我可以使用 Claude 来帮助合并和管理我的工作树。

要开始使用工作树，我首先创建一个名为 .trees 的文件夹。在此工作树文件夹中，我将添加几个工作树。

以下是创建三个工作树的命令：

git worktree add .trees/ui_feature
git worktree add .trees/testing_feature
git worktree add .trees/quality_feature

为了确认我已创建所有这些工作树，我可以查看一下。我可以看到我当前在主分支上，并且已经创建了三个独立的工作树。为了在每个环境中正确设置，我将打开 trees 文件夹，并为每个工作树打开一个终端。

我将从我的 UI 功能开始，并将其移到这里。然后我将引入我的测试功能，并将其移到右侧。最后，让我们引入我们的质量功能，并将其移到上方以给我们更多空间。我们将使其稍微小一些。现在我们有了三个专用的终端窗口，并隐藏了资源管理器。

现在，让我们为每个环境打开 Claude。我们现在可以并行运行 Claude Code，并确保如果修改了相同的文件，我们不会覆盖它们。我们可以在稍后合并这些工作树时修复任何冲突。

并行实现多个功能

我将使用 implement_feature 命令，然后输入一个我想要的具体功能。该功能允许我添加一个切换按钮来在深色和浅色主题之间切换。让我们继续创建一个切换按钮，定位它，并确保我可以为此特定切换按钮进行导航。我们将从这部分开始，然后添加浅色主题变体。

当这个运行时，我现在可以移动到另一个工作树。在这个第二个工作树中，让我们开始考虑一下我想为这个测试框架做什么。我将在这里传递一个提示，以增强现有的测试框架并为 FastAPI 端点添加额外的测试。

当那个运行时，让我们为我们的开发工作流程添加一些必要的代码质量工具。当我们这样做时，我们可以开始看到正在请求更改。让我们继续在这些环境之间切换，并确认我们想要的更改。我们的测试正在编写，我们用于分析代码库结构和格式化的额外开发依赖项也正在添加。

我们将看到我们正在修改一个名为 pyproject.toml 的文件，并且还将看到正在请求编辑该特定文件。随着我们继续，这些选项将对这些文件进行编辑，我们将同时看到我们的前端代码正在按预期完成。

我们可以并行工作，并确保这些特定更改不会被代码库的其他部分覆盖。如果碰巧我们对类似文件进行了更改，我们可以确保修复这些合并冲突，并且我们可以使用 Claude 来完成。我们的前端更改正在写入，我们正在添加更多测试，并且我们正在为质量检查添加一些格式化工具和开发脚本。

我们将按预期进行，确保质量脚本正在完成，并且看起来我们的前端功能正在添加。现在以我们之前相同的方式添加浅色主题。我们将使用我们的 implement_feature 自定义命令来确保我们正在写入更改日志。我们还将添加一个浅色主题。

一旦完成，我们将继续排队其他几个我们想要的 JavaScript 功能和实现细节的提示。当那个运行时，我可以检查其他脚本。我可以确认我想运行那些脚本，如果有任何事情发生，Claude Code 可以按需修复。看起来有一些脚本但 Claude 不知道。所以我们将继续安装依赖项或确保我们按预期运行事物，并看到这里我们开始了一些代码质量检查，我们已经编写了 API 端点测试，并且我们正在添加更多前端功能。

一旦这一切完成，我们可以前往浏览器。我们可以确认我们的检查已完成，但在我们继续之前，让我们引入所有这些单独的更改。如果我们想运行测试，我们可以确认这是按预期的。我们想前往浏览器进行我们的 UI 测试，我们可以这样做。在这里，我们可以看到代码库格式化已完成，开发脚本已添加，文档已更新。

我们之前看到有一个 pyproject.toml 文件在两个不同的工作树中被添加。因此在整理这些单独的部分时可能会有一些冲突。现在我们对这些更改感到满意，让我们添加并提交一个描述性的消息。

让我们也在这个工作树上做同样的事情。由于我们将合并这些特定的提交，我们将希望确保我们有描述性的提交消息，以便我们可以理解在每个工作树中做了什么。我们已经提交了这个特定的提交，我们在这里的这一个上也做同样的事情。我们已经完成了我们的 UI 增强，所以让我们做同样的添加并提交一个描述性的消息。

如果您发现自己编写这类提示，如“添加并提交带有描述性消息”，这也可能是另一个自定义命令的好用例，我们可以在其中指定我们想要的确切样式或我们公司遵循的最佳 Git 实践。

合并工作树并解决冲突

现在我已经完成了所有这三个的提交，我现在可以回到我的主分支并合并一些东西。所以我要关闭这些终端环境并跳回到我们的主分支。

现在我将要求 Claude Code 使用 git merge 命令来合并所有工作树和 .trees 文件夹，并修复任何冲突（如果有的话）。所以让 Claude Code 合并所有这些特定的树，并确保它们按预期工作。

我们可以看到这里有三个可用的工作树。所以我们将从合并每个工作树开始。我们将确认这是我们想要使用的命令，然后这应该按预期工作。看起来我们的测试功能没有任何冲突。让我们引入我们的 UI 功能。再次强调，我们可以自己编写这些命令，但 Claude Code 从我们的提示中确切知道该做什么。

现在我们可以合并质量功能分支。在这里，我们将查看是否有任何冲突。正如我们所见，在这个特定文件中存在冲突。所以我们将让 Claude Code 分析这些冲突并完成合并。当您有小的合并冲突而不想每次都手动处理时，这可能非常有价值。在这里进行测试也很有价值，以确保一旦我们完成，我们可以运行测试并且代码库按预期工作。

现在继续按预期进行合并，并且可以用“解决合并冲突”来提交所有这些更改。如果我愿意，之后我可以要求它删除这些工作树，或者如果我需要，我可以保留它们。它将快速运行测试以确保这些文件按预期存在，并且合并配置也是按预期的。

我们也可以返回浏览器，看看我们的前端更改是否按预期实现。看起来 Claude Code 已经完成，我们已经添加了必要的依赖项，修改了我们的 pyproject.toml，添加了测试，实现了浅色/深色主题，实现了我们的 Black 代码格式化器以确保代码按特定格式预期，并在我们与另一个工作树处理的同一文件中添加了该配置，修复了任何冲突。让我们确保这按预期工作。

回到浏览器，我现在看到这里我有这个可爱的主题，当我切换时，我可以看到浅色主题和深色主题。可能还有一些我想在这里和那里调整的东西，但我已经能够编辑堆栈的所有部分，甚至在代码检查和 DevOps 方面做一些事情，所有这些都没有通过 Git 工作树的功能导致令人头疼的覆盖问题。

总结

在本节课中，我们一起学习了如何使用 Claude Code 和 Git 工作树功能来并行开发多个功能。我们首先创建了自定义命令来优化工作流程，然后利用 Git 工作树创建了三个独立的开发环境，分别用于 UI 功能、测试框架增强和代码质量工具添加。通过并行工作，我们能够同时修改代码而不会产生冲突，最后成功合并了所有更改并解决了可能出现的合并冲突。这种方法极大地提高了开发效率，特别是在处理多个相关但独立的任务时。

在下一课中，我们将看到如何通过 GitHub 集成在终端之外使用 Claude Code，以便审查拉取请求、进行更改，并在终端生态系统之外提供帮助。

007：探索GitHub集成与钩子 🔧

在本节课中，你将学习如何在终端之外使用Claude Code，通过集成GitHub。你将看到如何设置Claude Code来审查GitHub上的拉取请求和修复问题。然后，你将学习如何通过Claude Code钩子，在使用工具前后执行代码。

让我们开始吧。

回顾与清理工作树 🌳

上一节我们完成了工作树的合并。但我们忘记让Claude删除那些工作树。所以我们要回到Claude中。

我将传入 --resume 标志，回到之前关于工作树的对话。现在我们可以回到之前的状态，完成删除工作树的任务。

我们让Claude删除 .trees 文件夹及其下的工作树。完成后，将代码推送到GitHub。

给Claude Code一点时间来运行必要的git命令删除文件夹，然后将合并后的代码推送到GitHub。

我们给Claude Code访问底层工作树的权限，这样不仅能删除工作树，还能删除对应的分支。现在开始删除这些特定的树，删除目录，然后删除底层分支。

完成后，我们确认操作是否成功。很好，文件夹已经不存在了。现在将代码推送到GitHub。

我们确认要运行 git push origin main 命令。看起来代码已经推送到GitHub了。

安装GitHub集成 🚀

现在我们已经提交并将代码推送到了GitHub，让我们开始安装Claude Code附带的GitHub集成。

我将使用 install-github-app 命令来完成。这里你可能会看到需要通过命令行界面进行额外的身份验证。如果看到这些设置说明，请务必遵循。

我们现在可以为当前正在工作的仓库安装GitHub应用了。开始操作。这将打开浏览器。如果之前没有安装过，我将有安装选项。

这个集成允许我们在拉取请求和问题中使用Claude Code来响应反馈、修复错误、修改代码等。为了实现这些功能，它建立在Claude Code附带的软件开发工具包之上。这个SDK允许你在终端界面之外使用Claude Code。

让我们回到终端，指定要安装的工作流。这些工作流允许在问题中标记Claude，并使用Claude自动审查拉取请求中的代码。

我们两个都安装。创建一个长期有效的令牌。

这里我们需要授权并通过Claude进行身份验证。完成后，我们可以返回，会看到它正在创建仓库信息，发送任何需要的额外信息，并直接带我回到GitHub，用所做的更改打开一个拉取请求。

配置与使用拉取请求审查 🔍

在这里，我们可以自动看到这个拉取请求允许GitHub Actions启用错误修复、编写测试和代码审查。如果需要，我们可以更改这些设置，或者使用默认信息创建拉取请求。

在这个拉取请求中，我们可以看到不仅为Claude操作创建了一个YAML文件，还有一个用于代码审查的文件。开箱即用，我们有一些相当合理的默认设置。我们可以按作者过滤，可以指定运行环境，但开箱即用，我们获得了相当多非常好的功能。

如果你想修改代码审查中的提示词，可以在这里进行。由于这是一个由Git跟踪的文件，你可以不断编辑它。

我现在要合并这个拉取请求，这样我们就可以开始在GitHub中使用Claude Code了。

我们可以立即看到，一个Claude GitHub Action已经启动。这就是我们在未来的拉取请求中开箱即用的功能。它将读取和分析文件，检查代码质量，识别安全考虑因素。现在，我们有了一个新队友Claude来检查我们和其他团队成员的工作。

这有时需要一点时间才能开始，但一旦完成，我们将从Claude那里得到一些详细的评估，并可以在准备好时合并拉取请求。

看起来审查已经完成。根据我们给出的提示词，我们可以指定需要多少深度和信息。这里我们看到一些运行良好的地方，可能还有一些我们需要考虑的事项。如果对我们来说看起来不错，我们可以合并那个拉取请求。

现在，在未来的拉取请求中，我们将看到Claude会帮助审查我们的代码。当人类可能遗漏某些事情时，这非常有帮助，这是检查你工作是否符合预期的额外步骤。

使用Claude Code处理GitHub问题 🐛

假设出现了一个问题。我们团队中的某个人决定添加一个新问题。我们可以在GitHub中做这件事，甚至可以在Claude Code中做，你可能已经注意到，随着我们不断构建这个应用程序，我们开始看到添加了一个新的页眉。

这个新页眉可能看起来不错，但也许我们想恢复到之前的样子。所以让我们添加一个问题，看看Claude是否能帮助我们。

想象我们这里有一个问题：“应用程序添加了一个新页眉，让我们回到旧的那个。确保保留主题切换，但让页眉看起来像以前一样。我们还要指定确保移除‘课程材料助手’页眉，移除关于‘提问’的子标题，然后移除子标题下方的水平线。”

现在我们创建了这个问题，我们可以指派某人来处理它，但为什么不直接请Claude帮助我们呢？Claude，你能帮我解决这个问题吗？

一旦我们标记了Claude，我们将给Claude一点时间来修复手头的问题。当Claude修复那个问题时，它应该能够生成一个拉取请求来修复那个特定问题。

给Claude一点时间来找到那个操作。我们将看到Claude Code正在工作，如果我们想查看正在运行的基础任务，我们可以这样做。

给Claude一点时间，看看它能想出什么。你将看到的内容会非常熟悉，就像我们在命令行中看到的那样：分析结构，移除页眉。在这里，我甚至可以选择要优先处理什么。但你在这里看到的是我们在终端外看到的相同事情。

我们不仅可以使用Claude来处理问题和拉取请求，还可以使用Claude来审查代码，就像我们之前看到的那样。当我们开始看到它的计划时，我们会注意到正在进行的更改是什么，它在代码库的哪个位置提出建议。

当我们看到拉取请求时，我们可以开始看到正在进行的思考过程和逻辑。看起来这个不太难。所以它将遵循这些步骤：测试更改，提交并推送这些更改。现在它已经完成了必要的提交。

我们可以看到这里的基础描述。如果我们愿意，我们可以创建这个拉取请求，或者我们可以直接让Claude为我们完成所有工作。

当我们创建拉取请求时，我们看到了提交中生成的确切内容。现在让我们去看看Claude做了什么。我们可以查看我们更改的基础文件。这里没有太多内容。我们合并这个拉取请求。

就像之前一样，Claude也会花一些时间审查代码，也就是Claude自己写的代码。这实际上非常有帮助，因为尽管我们想信任Claude，但让另一个Claude双重检查它的工作也是很好的。

看起来Claude Code已经批准了我这里的任务。我们合并这个拉取请求，然后回到终端，确保拉取我们已有的更改。

我转到VS Code，拉取更改。让我们看看前端是否看起来更好一些。

探索Claude Code钩子 ⚙️

我们做到了。页眉被移除了，水平线被移除了。我们可能想恢复那条水平线或将其移到另一个地方，但现在我们知道如何不仅在终端中，而且在GitHub中做到这一点。

我想展示的另一个功能是最近发布的东西，即向Claude Code添加所谓的“钩子”的能力。如果你熟悉钩子的概念，这会感觉非常相似。

其思想是，当我们在Claude Code中有不同的操作时，比如执行一个工具或在工具执行后发生某些事情，我们可以在Claude Code操作生命周期的任何时间点注入特定的代码来运行。

让我回到VS Code，向你展示我的意思。我将回到Claude。虽然我们可以手动进行这些更改，但我想向你展示我们拥有的编辑器。

我将输入 claude hooks manage configurations for tool events。你看到的内容可能看起来有点吓人，但我们的责任是让你知道，如果你正在运行任意的shell命令，你必须非常小心你在做什么。

我们可以运行钩子的事件有很多：在工具执行之前，我们甚至可以停止该工具的执行；我们可以在之后做一些事情；当发送通知时；当用户提交提示时；当某些事情停止时；甚至在一个子代理结束其响应之前。

因此，我们能够以编程方式介入任何这些事件。我想用一个后工具使用钩子展示一个简单的例子。

首先添加一个匹配器。在这个匹配器中，我可以指定我希望为此钩子运行而匹配的工具。我将在这里添加一个非常非常简单的例子：任何时候有读取操作，或者任何时候使用了grep工具，我将运行一个简单的终端命令。

我要运行的新钩子或命令是 say 命令。say 命令运行计算机的音频，并指定你想要它说的文本路径。

所以如果我做对了，在我们读取了某些内容或在文件中查找了某些内容之后，我们的机器应该说“全部完成”。

让我们再次在我们的项目设置中添加这个。我们之前提到过 settings.local.json 文件，我们可以在其中指定权限。这也是你的钩子所在的地方。

在我们的 claude 设置中，我们可以看到在 settings.local.json 中，我们不仅有权限，还有我们定义的钩子。post_tool_use 是钩子的名称，匹配器（如果移除将应用于任何操作）但这里匹配读取或grep操作，运行命令 say 全部完成。

完成后，让我们试试看。我将退出Claude Code，再次打开它，读取 run.sh 文件的内容。这应该按预期使用读取工具。全部完成。一旦完成，它会通知我们并告诉我们“全部完成”。

虽然这是一个有趣的小例子，但你可以想象执行代码，比如运行测试或运行linters，或者如果我们不希望使用某些工具，甚至可以停止工具的使用，甚至在发生某些事情时让Claude审查自己。

钩子有很多用途，而且还有更多功能即将推出。所以请务必查看文档，了解你可以做的一切。你总是可以使用Claude Code为你编写钩子并相应地进行修改。

总结 📝

在本节课中，我们一起学习了如何将Claude Code与GitHub集成，从而在拉取请求和问题中自动审查代码、修复错误。我们配置了GitHub Actions工作流，使Claude成为团队中的自动化代码审查员。此外，我们还探索了Claude Code的钩子功能，它允许我们在工具使用的特定生命周期事件中注入自定义代码，为自动化工作流提供了极大的灵活性。

通过GitHub集成，Claude Code的能力从本地终端扩展到了协作开发平台，使得代码审查和问题修复更加高效和自动化。而钩子机制则为我们定制和增强Claude Code的行为打开了新的大门。在下一节中，我们将探索如何在Jupyter笔记本中使用Claude Code来创建可视化、重构代码，并在一个略有不同的环境中进行操作。

008：重构 Jupyter Notebook 与创建仪表盘 📊

在本节课中，我们将学习如何使用 Claude Code 来重构一个 Jupyter Notebook，并将其转换为一个交互式的 Web 仪表盘。我们将从一个结构有些混乱、数据展示不够清晰的 Notebook 开始，通过 Claude Code 的帮助，将其业务逻辑与展示层分离，并最终生成一个功能完整、界面美观的 Streamlit 仪表盘。

概述

Claude Code 具备读取和编辑 Jupyter Notebook 的工具。在本节中，我们将通过第二个示例，使用 Claude Code 来重构一个 Jupyter Notebook，并将其转换为一个仪表盘。

在前面的课程中，我们已经了解了如何使用 Claude Code 处理前端和后端的 Web 应用程序。现在，让我们转换思路，展示如何使用 Claude Code 来处理 Jupyter Notebook。

初始 Notebook 分析

我手头有一个包含虚构电子商务数据的 Jupyter Notebook。这个 Notebook 从 ecommerce_data 文件夹中的几个 CSV 文件读取数据。

它使用 pandas 读取 CSV 数据，并展示了一些信息。虽然能得到想要的答案，但这些数据的组织方式并不理想。获取的统计信息在格式和显示上可能不是最理想的。

随着我继续查看更多信息，我开始看到一些更复杂的操作流程。我想从这些数据中获得一些洞察，例如 2023 年相对于 2022 年的收入增长情况。

Notebook 中包含了实现这一目标所需的操作，包括合并两个不同的 CSV 和数据框。虽然最终得到了想要的数字，但过程中出现了一些警告，并且需要花费一些时间来直观地展示我想要的内容以及最佳的显示方式。

因此，虽然最终得到了想要的数字，但整个过程有些繁琐和混乱。我需要一种更好的方式来展示这些信息，并探索如何重构这个 Jupyter Notebook。

在 Notebook 的其他部分，我尝试计算一些高级指标，如平均订单价值。这不仅仅是寻找 2023 年的数字，还需要考虑未来（如 2024 年）的情况。

向下滚动，我们会看到一些不错的可视化图表，但相信我们可以做得更好。

使用 Claude Code 进行重构

考虑到上述情况，让我们展示如何使用 Claude Code 来重构这个 Notebook，并更好地整合我们的业务逻辑与展示层。

我将打开 Claude，并输入一个提示词。这个提示词引用了 Notebook 以及我正在处理的其他文件。

在粘贴这个提示词之前，我打算创建一个新的 Markdown 文件来展示其内容，并解释我们为什么要这样做。

请注意，我使用 @ 符号引用文件名，使用 # 符号引用文件夹名。如果你不确定如何最好地提示或询问 Claude 该做什么，你总是可以直接问 Claude。

很多时候，我会使用像 Claude AI 甚至 Claude Code 这样的工具，直接问 Claude：“我想做这个，给我一个完成这个任务的最佳提示词。”

在我们的案例中，我们有一些关于结构布局的重构要求、代码质量改进的诉求，以及对我们想要的特定 Python 文件的请求。

我们在这里要求 Claude 做的是：创建一个单独的 Python 文件来加载和处理数据，再创建另一个 Python 文件来计算这些指标。这种关注点分离将使我们能够更好地测试和理解支撑这些可视化的代码。

我们还要求改进可视化效果，并对“改进”的含义给出了更具体的说明。最后，我们希望对我们正在处理的数据有更多的配置选项。

通常，让 Claude 知道你在这里的期望是一个好做法。因此，不仅仅是说“重构这个”，而是说“给我一个重构后 Notebook 的基础资产，给我一种记录函数和计算业务指标的方法”。

然后，“给我一些其他重要的文件来处理依赖项，以及一个解释如何使用它的 README”。

让我们复制并粘贴这个提示词。你会注意到，在粘贴了一定数量的行之后，Claude Code 不会显示所有内容，以保持终端的简洁性。

让我们运行这个提示词。与使用其他类型的工具一样，我们将在这里使用一套略有不同的工具集。我们将处理 Notebook 读取，而不是普通的文件读取。但我们之前看到的相同待办事项列表将会被执行，就像我们已经非常习惯的 Claude Code 工作流程一样。

这里我们使用了 read_notebook 工具，我们将探索这些单元格，分析结构，并创建我们期望的重构后 Notebook。

完成后，我们不仅应该看到一些强大的可视化效果，还应该看到一些其他文件，其中包含用于加载数据、处理数据和计算我们所需的业务指标的辅助函数。

重构过程与结果

当 Claude Code 处理这些单独的任务时，我们可以随时检查已创建的文件。我们可以看到，这种面向对象的方法比尝试将所有内容直接嵌入到 Notebook 中要清晰得多。

对于我们的业务指标计算也是如此。我们可以看到，通过传入数据框并返回可视化和数据验证的能力，我们创建了业务指标。

最后，还有我们的 Notebook、requirements.txt 以及即将创建的 README。

当这个过程运行时，让我们看看重构后的 Notebook。确保我们可以按预期运行所有这些单元格。从视觉上看，这看起来好多了。我看到它正在尝试读取提示词，我会让 Claude 继续。

实际上，不需要读取提示词，只需完成 README 的创建。

当我查看这个 Notebook 时，我可以立即看到它看起来好多了。我可以看到对我正在查看的数据的分析，以及一些用于处理的配置。我可以指定年份和比较数据，甚至指定月份。我将在整个 Notebook 中使用这些常量。

我可以看到这里需要的数据加载，以及来自我自定义类的模块。当我运行所有这些单元格时，到目前为止看起来还不错。

但如果我向下滚动一点，实际上会看到一个错误。我可以立即看到这里的问题似乎是某种键错误。我会让 Claude 修复它。当我运行一个特定单元格时出现键错误。我可以尝试让 Claude Code 为我找出问题，但我实际上会给 Claude Code 我使用的代码，让它有更多的上下文。

Claude Code 将查看需要做什么，发现问题所在，并进行更改。现在更改已经完成，让我们运行这些单元格，确保情况看起来好一些。

当我向下滚动时，我没有看到之前的错误了。现在让我们看看它返回给我的一些业务指标。获得了更美观的摘要信息显示、客户满意度信息，这比我之前拥有的更容易处理。

当我们转向收入分析时，我们可以开始看到清晰显示的值和信息，并且做了一些工作来更轻松地显示我们正在处理的数据。

可视化看起来更令人愉悦。当我们查看类别表现时，我们甚至有更好的工具来分析类别及其相关的收入。

当我们查看地理表现时，我们看到了按州划分的可视化。我们可以将鼠标悬停在该图表上，以获取按州划分的更多信息。

当我们看到页面底部时，查看初始交付分析，一切看起来都如预期般良好。

因此，我们已经很好地重构了这个 Notebook，以更直观地显示信息，并分离了我们的业务逻辑。

从 Notebook 到仪表盘

但现在我想做的是，从一个 Notebook 转移到一个基于 Web 的界面，一个由 Streamlit 驱动的漂亮仪表盘。

如果你不熟悉 Streamlit，它是一个非常有用的 Python 库，用于显示界面，特别是仪表盘。从 Notebook 无缝过渡到这些 Python 文件非常容易。

让我们继续创建一个新的 Markdown 文件，其中包含我们的提示词，我们将其称为 convert_to_dashboard.md。让我们看看我们要在这里放什么。

我们将要求 Claude 将我们重构后的 Notebook 转换成一个具有特定布局的专业 Streamlit 仪表盘。

我们可以只从这一行开始。但为了避免大量的来回沟通，让我们直接告诉 Claude 我们想要什么：

  • 我们想要一个带有标题和筛选器的标题。
  • 我们想要用于收入增长、平均订单价值和总订单数的 KPI 卡片。
  • 然后我们想要一些图表：收入类别、按州划分的收入，以及底部一行带有满意度的条形图。
  • 我们想要两个卡片。我们希望具体说明我们显示数据和呈现信息的方式。

考虑到这一点，让我们尝试一下。让我们使用 Streamlit 从 Notebook 迁移到可视化界面。

我们可以看到它正在创建我们的仪表盘。当它进行时，我们可以看看这里做了什么。

我们正在导入 Streamlit，引入 pandas，引入一些可视化库，包括 Plotly。然后在这里你可以看到我们正在为样式显示一些自定义 CSS，设置我们的页面配置。这些大部分都来自我需要使用的 Streamlit 对象。

我们更新了 requirements.txt，并且在这里我们实际上将创建或修改 README，以显示仪表盘中发生的一切。

实际上，我现在就告诉 Claude，不要创建新的 README，只需修改我们已有的那个。在许多这类较长的计划中，很容易就让 Claude 继续运行。但有时你可能想停止这个过程，并按照你的意愿引导它。

运行仪表盘

现在我们已经创建了这个仪表盘，让我们打开一个新的终端窗口来启动我们的服务器。

在这个左侧的终端窗口中，我将使用 streamlit run 命令启动服务器，然后是要显示的 Python 文件 dashboard.py。

我可以看到这里没有 streamlit 命令。因此，为了启动并运行一切，我需要安装这些依赖项。

让我们继续这样做。我将运行我的 pip install 命令，安装所有必要的依赖项，并确保服务器加载时，应用程序中没有依赖项问题。

完成后，我将使用 streamlit run 命令运行我的服务器。让我们输入 streamlit run 和我们 Python 文件的名称，就像这里建议的那样。

回到浏览器，这是仪表盘的样子。我有一些收入数据，有一些增长数据。当我们向下滚动一点时，我们肯定需要验证这些数字是否符合我们的预期。

我们看到，当我们查看这个仪表盘时，它是一个相当不错的开始，但我们可以看到缺少了一些东西。看起来这里的这些卡片是空的，实际上是多余的，因为我们正在获取我们想要的信息。

同时，从 2024 年开始有点困难，因为我们没有看到太多逐年信息。所以也许我们应该要求 Claude 不仅清理这些部分，而且从默认年份 2023 年开始。这样我们可以有一些稍微好一点的可视化效果，同时也确保我们能够根据月份进行筛选。

我们想从 2023 年开始的原因是我们没有 2024 年每个月份的数据。因此，当我们查看这个时，月度增长有点令人困惑，而且我们这里的数据还没有。

优化仪表盘

让我们提出这些要求，把它们放回 Claude 中。这是一个好的开始，但我想实现以下更改：

  1. 确保默认年份是 2023。
  2. 要求 Claude 也添加月份的筛选器。
  3. 最后，确保移除每个的空卡片。

让我们更新仪表盘代码以实现这些特定的要求。

我们将默认年份设置为 2023，这看起来不错。在这里，我们将为月份添加一些筛选器。现在让收入图表处理我们按特定月份筛选的情况。

我们可以看到 CSS 也在改变。因此，这个图表容器应该比以前更整洁一些。

让我们回到浏览器看看情况。我们可以看到 2023 年是默认值，这是一个好的开始。我们还可以看到那些空卡片不见了，这很好。

我们现在就停在这里，但你可以想象，随着你不断给出提示，你可以创建更强大的可视化效果。

总结

在本节课中，我们一起学习了如何使用 Claude Code 重构 Jupyter Notebook 并创建交互式仪表盘。

我们从一个有些杂乱、难以阅读和理解的 Notebook 开始，现在我们已经迁移到了一个可以部署、与团队成员共享并快速迭代的仪表盘。

在短时间内，我们通过清晰的指令，实现了业务逻辑与展示层的分离，创建了模块化的 Python 文件，并最终生成了一个功能完整、界面美观的 Streamlit Web 应用。这充分展示了 Claude Code 在提升数据分析工作流效率和代码质量方面的强大能力。

在下一课中，我们将构建一个 Next.js 应用程序，并使用 Claude Code 连接到 Figma 和 Playwright 的 MCP 服务器，以根据设计稿快速构建一个强大的 Web 应用程序。

009：基于Figma设计稿创建Web应用 🎨

在本节课中，我们将学习如何将Claude连接到Figma MCP服务器，以导入设计稿到Claude Code中，并基于此开发一个完整的Web应用程序。我们将利用MCP服务器的强大能力，快速将视觉设计转化为可运行的代码。

概述

本节课我们将连接两个关键的MCP服务器：Figma MCP服务器用于获取设计稿和代码，以及Playwright MCP服务器用于自动化测试和视觉验证。我们将基于一个美联储经济数据仪表板的Figma设计稿，使用Next.js和Recharts库来构建一个功能完整的Web应用。

环境与工具准备

上一节我们介绍了MCP服务器的基本概念，本节中我们来看看如何为本次项目配置具体的工具。

首先，您需要一个Figma账户。如果您不想订阅Figma的开发者模式，我们也会提供替代方案。同时，我们将使用Playwright MCP服务器来分析Figma设计稿，生成必要的HTML，并通过在浏览器中打开并截图的方式进行程序化测试。

由于我打算使用更现代的技术栈构建前端应用，我将选择Next.js。

以下是初始设置步骤：

  1. 在当前文件夹中，使用最新版本创建一个Next.js应用。
  2. 我将遵循大部分默认设置。
  3. 继续安装必要的依赖项。

如果您之前没有使用过Next.js，这完全没问题。整个过程只需要几个命令行命令，很快就能在浏览器中看到结果。

在安装依赖的同时，让我们去看看Figma中的设计稿。

分析Figma设计稿

在Figma中，我有一个希望使用美联储经济数据构建的仪表板设计稿。

这个设计稿在图层和背后的分析细节上并非最详尽，但这足以让我开始工作。

在Figma中，我需要首先确保已进入偏好设置并启用开发者模式MCP服务器。

启用后，我将复制这个特定的图层，因为在指定MCP服务器使用时需要它。




配置MCP服务器

成功创建Next.js应用后，我们需要为Claude添加要使用的两个MCP服务器：Figma和Playwright。

我将添加必要的命令来引入Figma的MCP服务器，然后对Playwright进行同样的操作。

以下是添加Playwright MCP服务器的命令，它在本地使用以下命令启动：

# 示例命令，具体命令可能因MCP服务器实现而异
npx playwright install

请记住，由于我们处在一个独立的项目和环境中，这个配置不会应用到我们构建的每一个Claude Code应用中。我们必须为每个项目单独进行此操作。

为了确保配置正确，我将进入Claude并使用MCP命令进行检查。如果查看连接状态，我可以看到两个服务器都已连接。查看开发者模式MCP服务器，可以看到有五个可用工具来获取底层代码、图像以及围绕Figma中特定设计稿的设计规则。

生成应用程序代码

连接好两个MCP服务器后，我们让Claude使用指定的Figma设计稿和Figma MCP服务器进行分析，并构建必要的底层代码。

我们将要求它使用Recharts库来创建图表，然后使用Playwright MCP服务器检查这个应用的外观。

但在执行之前，我想先做一个快速调整。如果您能够进行此调整并且不在专业计划中，可以使用Ous作为不同的模型。否则，Sonet仍然可以很好地工作，但对于稍复杂的任务，Ous的表现会略好一些。

切换到相应模型后，让我们运行提示词，看看效果如何。

我们首先需要连接到MCP服务器，确保使用正确的设计稿和必要的工具来编写支撑此设计稿的底层代码。

在这里，我们可以看到我们使用了Figma开发MCP服务器的get_image工具，随后使用get_code工具来获取该设计稿背后的底层代码。

然后，确保使用NPM或相应的包管理器安装必要的依赖项。这里我们看到它尚未安装，因此Claude Code很可能会要求我们安装它。我们将照做并继续。

由于我们在这个Next.js应用内部，大部分工作将在app文件夹中进行。我们将分析任何全局CSS，并开始创建主要的仪表板结构。

这里我们将添加一些元数据，看起来不错。因此，对于后续的编辑，我将直接让Claude继续运行。

现在我们将创建仪表板布局，并使用更基于组件化的React架构来构建它。

测试与视觉验证

创建好底层结构后，让我们开始确保一切看起来符合预期。

由于我已经在此运行了服务器，我只需告诉它不要再次启动服务器，它已经在运行了。

现在，我们将使用Playwright进行测试，看看情况如何。

我们将导航到localhost:3000，并对其进行截图。让它开始截图，我们可以在Playwright中看到结果。


到目前为止，看起来相当不错。与原始设计稿相比，我们在一些条形图上多了点样式，但相对于我们最初的设计稿来说，这是一个很好的起点。

事实上，我甚至认为这个看起来更美观一些。




我们仍然看到一些正在进行的修改。有一个布局和侧边栏需要调整，我们总是可以让Claude来回迭代，修改这个特定的设计稿。

需要提及的重要一点是，Figma中的这个设计稿没有大量的图层和底层组件，因此很多效果将取决于您拥有的底层设计稿的质量。但这是一个非常好的开始，只花费了极少的时间。我们可以看到已经构建的内容以及高度匹配的部分。

集成真实数据

现在让我们看看情况如何。我们可以看到，通过模型的一点工作，并利用MCP服务器验证可视化效果和基于设计稿进行构建，那些可能需要数天才能从头开始完成的事情，现在可以在几分钟内完成。

您可能想知道接下来是什么。我们拥有的这个设计稿只是您可能设想构建的内容的起点，而这些数据实际上可以通过API获取。

我可以让Claude Code使用真实的美联储经济数据来填充这些图表。我们将让Claude Code使用其网络搜索工具之一来查找信息，并使用实际数据进行更新。

在这里，我们将查看CPI、失业率、收益率等数据。但您可以想象，这些可能是您从后端获取的数据。不过，这里我们将展示Claude研究如何使用API文档、如何获取数据的能力，并且有可能我们需要一个API密钥才能这样做。

因此，当我们开始进行一些研究时，Claude会让我们知道需要什么以确保一切按预期工作。

在那个设计稿中，导航栏中还有几个仅用于可视化的部分，但接下来我们可以添加任何我们想要的底层功能。





完成一些研究后，它意识到为了从美联储获取实际数据，我需要输入一个API密钥。我可以进入我的账户获取一个API密钥。


这是一个相对简单的过程，您可以在这里看到。一旦我有了API密钥，它将开始为我编写额外的代码来获取数据并以可视化方式显示数据。

因此，我将在这里面更新我的API密钥。

更新API密钥后，让我们看看Claude在构建额外数据方面进展如何。它现在已经编写了一个服务来获取经济数据。

现在我们将更新仪表板，使用我们的API获取真实数据。




我们将在Playwright中测试这个，然后继续看看我们在浏览器中有什么。我们将去看看它在视觉上的效果，以及是否有任何底层代码需要修改以使其更具视觉吸引力。


通过一些提示，我们可以从带有虚假数据的设计稿，过渡到在实际数据源上使用真实世界的信息。

完成后，我们将回到localhost:3000，看看我们有什么，并发现我们将要获取的数据并非虚构，而是真实的失业率、十年期国债收益率等。

我们在这里设置了相当多的内容来代理我们的请求，以及更多交互功能。那么，让我们去看看那是什么样子。



我们已经从带有一些虚假数据且功能不多的设计稿，在很短的时间内变成了功能相当强大的东西。

我们在这里加载的数据，实际上是反映真实世界信息的数据。当我们设想添加更多功能时，我们可以通过选项卡查看其外观。

但是，只需通过MCP服务器进行少量工作，从真实世界环境拉取数据，并基于Figma设计稿进行构建，您就可以开始想象前端开发的速度能有多快，尤其是在构建强大的真实世界界面时。

您可能想验证这些数据是否确实来自数据源，我们通过这个详情功能已经构建了这一点。

因此，我们可以轻松地看到这些数据来自哪里、情况如何，并将其追溯回我们正在构建的仪表板。

在这里，我们只是展示一些关键指标。但也许接下来我想做的是开始构建我自己的界面，或者使用另一个Figma设计稿来处理通货膨胀、就业等数据。

所以，我们将从这部分数据开始。但我很乐意看到您能利用这个界面和触手可及的所有数据构建出什么。


总结

本节课中我们一起学习了如何利用Claude Code与MCP服务器（特别是Figma和Playwright）协同工作，将一个视觉设计稿快速转化为一个功能齐全、集成真实数据的Web应用程序。我们涵盖了从环境配置、设计稿分析、代码生成、视觉测试到动态数据集成的完整流程。这个过程展示了如何将可能需要数天的手动开发工作，压缩到几分钟内完成，极大地提升了前端开发的效率和原型构建速度。

010：总结与展望 🎯

在本节课中，我们将回顾整个课程的核心内容，总结使用 Claude Code 的关键要点，并展望如何进一步扩展其能力。

课程回顾与核心要点

上一节我们探讨了如何利用 Claude Code 进行调试。现在，让我们对整个学习旅程进行总结。

恭喜你坚持学习到这里。你已经学会了如何使用 Claude Code 来探索、测试、重构和调试代码库。

为了让 Claude Code 发挥最佳效果，你需要遵循以下关键实践：

以下是使用 Claude Code 的三个核心原则：

  1. 提供清晰的指令：明确告知 Claude Code 你的具体需求。
  2. 阐明上下文：确保它理解当前任务所处的环境和背景。
  3. 指向相关文件：在代码库中明确指出与任务相关的文件。

此外，请务必将你的代码库规则添加到 .claudermd 文件中，并包含任何你希望 Claude Code 记住的关于项目的信息。

扩展能力与未来展望

考虑扩展 Claude Code 的能力，并将其连接到 MCP 服务器，例如 Playwright 和 Figma。

感谢你与我一同踏上这段学习旅程。我迫不及待想看到你将使用 Claude Code 构建出怎样的项目。

本节课总结

本节课中，我们一起回顾了 Claude Code 的核心使用流程：探索、测试、重构与调试。我们总结了高效使用它的三大关键——清晰的指令、明确的上下文和精准的文件指引，并强调了项目规则文件（.claudermd）的重要性。最后，我们展望了通过连接 MCP 服务器来扩展其功能的可能性。希望这些知识能助你在编程道路上更高效地创造。

posted @ 2026-03-26 01:40  绝不原创的飞龙  阅读(3)  评论(0)    收藏  举报