Claude Code（三）:Prompt范式、深度思考、上下文工程与MCP

要点

• 计划先行，谋定后动：在着手新功能或复杂重构时，优先使用 “计划模式 (Plan Mode)”，让 AI 先思考、再执行，能显著提升代码质量与方向准确性。
• 精准上下文是效率的关键：无论是通过 @ 符号精确引用文件，还是利用截图进行多模态交流，为 AI 提供充足且准确的上下文，是获得高质量输出的根本。
• “思考预算” 的妙用：通过 think, think harder 等指令，我们可以主动提升 Claude Code 的 “思考预算”，迫使其在处理复杂问题时投入更多计算资源，从而获得更优解。
• 上下文工程 (Context Engineering)：/clear 与 /compact 的选择并非小事。理解并实践上下文管理，是决定我们能否与 AI 进行长期、连贯且高效协作的核心技能。
• MCP 协议拓展 AI 边界：通过模型上下文协议 (MCP)，Claude Code 能够集成 Playwright 等外部工具，实现从 “理解” 到 “操作” 的跨越，自动化完成浏览器测试与调试，展现出惊人的智能体潜力。

一、好的 Prompt 长啥样？

在整个教程中，Elie 老师与 Claude Code 沟通时所使用的 prompt。一个好的 prompt，是开启 AI 强大能力的第一把钥匙。我将 Elie 老师使用的几个关键 prompt 罗列如下

> The chat interface displays query responses with source citations. I need to modify it so each source becomes a clickable link that opens the corresponding lesson video in a new tab:
  - When courses are processed into chunks in @backend/document_processor.py, the link of each lesson is stored in the course_catalog collection
  - Modify _format_results in @backend/search_tools.py so that the lesson links are also returned
  - The links should be embedded invisibly (no visible URL text)

> [Image #1] these links are hard to read can you make this more visually appealing

> Add a '+ NEW CHAT' button to the left sidebar above the courses section. When clicked, it should:
  - Clear the current conversation in the chat window
  - Start a new session without page reload
  - Handle proper cleanup on both @frontend and @backend
  - Match the styling of existing sections (Courses, Try asking) - same font size, color, and uppercase formatting

# dont run the server using ./run.sh I will start it myself

> Using the playwright MCP server visit 127.0.0.1:8000 and view the new chat button. I want that button to look the same as the other links below for Courses and Try Asking. Make sure this is left aligned and that the border is removed

> there are now two + icons, remove the one closer to the text "+ New Chat"

> In @backend/search_tools.py, add a second tool alongside the existing content-related tool. This new tool should handle course outline queries.
  - Functionality:
    - Input: Course title
    - Output: Course title, course link, and complete lesson list
      - For each lesson: lesson number, lesson title
      - Data source: Course metadata collection of the vector store
  - Update the system prompt in @backend/ai_generator so that the course title, course link, the number and title of each lesson are all returned to address an outline-related queries.
  - Make sure that the new tool is registered in the system.

与 AI 协作的成败，直接取决于我们构建上下文的质量。资深开发者应将每一次 Prompt 视为一次精准的“任务描述”或“技术方案”的撰写。

• L1. 我要Z：这是最基础的层次，必须清晰、明确地告诉 AI 你的最终目标是什么。例如，“我要一个新聊天按钮”。
• L2. 现在是Y，我要Z：在阐述目标的同时，告知 AI 当前的状况或上下文。例如，“这些链接的蓝色太深了（现状Y），让它们在视觉上更好看一些（目标Z）”。
• L3. 我做了X，现在是Y，我要Z：在 L2 的基础上，补充你已经尝试过的操作 (X)，这可以帮助 AI 更好地理解问题，避免重复或错误的尝试。
• L4. 请基于W，实现Z：这是最高阶的指令，你不再让 AI 自行推导实现路径，而是直接给出具体的执行步骤或约束 (W)。

回顾 Elie 老师的 7 条 prompt，它们至少都满足了 L1 的 “我要Z”。其中，第 1、2、6 条额外说明了现状 (Y)，而第 5、6 条则给出了具体的执行路径 (W)，属于更高阶的指令。

值得注意的是，最长的三条 prompt（1、3、7）都是预先编辑好再发送的，并且都巧妙地运用了 Markdown 的无序列表，甚至包含了层级关系。这种结构化的表达方式，极大地提升了信息传递的准确性。

1.1 结构化 Prompt：定义与 AI 的“交互契约”

一个专业级的 Prompt 应该像一份清晰的需求文档，它定义了你与 AI 之间的“交互契约”。

• 定义现状 (Context)：The current implementation in @module/service.py has a performance bottleneck under concurrent loads.
• 定义目标 (Goal)：Refactor this module to use an asynchronous pattern with a connection pool to handle up to 500 concurrent requests.
• 提供示例 (Example)：For instance, a call to process_data(items) should now return a Future object.
• 施加约束 (Constraints)：Only use libraries present in requirements.txt. The solution must be compatible with Python 3.9+. Maintain the existing public API signature to avoid breaking changes.
• 指定路径 (Methodology)：`First, write a failing benchmark test that reproduces the bottleneck. Then, implement the async changes. Finally, ensure all existing unit tests and the new benchmark pass.

二、实践：三步为聊天机器人增添新翼

教程的核心是为一款已有的聊天机器人应用增加新功能。我们将跟随 Elie 老师的脚步，分三步完成这个任务：

• 功能一：为引用来源添加可点击链接
• 功能二：添加 “新聊天” 按钮
• 功能三：增强后端工具，获取更详细的课程信息

2.1 第一战：计划先行，实现引用链接

初始问题：应用在回答问题时，会列出信息来源，但这些来源仅仅是纯文本，用户无法点击跳转。我们需要将其改造为可点击的超链接。

面对这样一个涉及前后端修改的任务，Elie 老师没有直接让 Claude Code 上手编码，而是采用了 Claude Code 官方最佳实践中首推的工作流：“先设计后编码 (Design then code)”。

什么是计划模式 (Plan Mode)？

计划模式是 Claude Code 的一种特殊工作模式，特别适用于 初次接触新功能、修复复杂 Bug 或进行代码重构 的场景。通过按 shift + tab 切换进入。 其核心特点有二： 1. 详尽思考：AI 会投入更多的 “思考预算”，对任务进行更全面的分析和规划。 2. 只读执行：AI 不会直接修改你的文件，而是生成一份详细的修改计划和代码建议。只有在你明确授权后，它才会执行这些修改。 因此，计划模式是 绝对安全 的，并且 生成的代码建议往往更优。

Elie 老师首先开启了计划模式，然后给出了一个高质量的 prompt:

> The chat interface displays query responses with source citations. I need to modify it so each source becomes a clickable link that opens the corresponding lesson video in a new tab:
  - When courses are processed into chunks in @backend/document_processor.py, the link of each lesson is stored in the course_catalog collection
  - Modify _format_results in @backend/search_tools.py so that the lesson links are also returned
  - The links should be embedded invisibly (no visible URL text)

其中包含了：

• 明确的目标：构建一个带有来源引用的界面。
• 精准的上下文：通过 @ 符号，直接引用了需要修改的前后端关键文件。

Claude Code 接收到指令后，并未立即生成代码，而是分析了相关文件，并提出了一份详尽的修改计划，清晰地列出了需要在哪些文件的哪个部分进行何种修改。在 Elie 老师确认计划可行后，Claude Code 才开始自动化地执行这些修改。

这个流程完美地展示了 “先计划，再编码” 的优势：方向明确，过程可控，结果可靠。

2.2 第二战：多模态交互与自动化调试

2.2.1 第一阶段：视觉优化

链接功能完成后，出现了一个新的 UI 问题：链接的默认蓝色在深色背景下难以辨认。

这一次，Elie 老师展示了 Claude Code 强大的多模态能力。他直接截取了界面图片，粘贴到对话框中，并附言：“这些链接很难读，能让它更美观吗？”

这是一个非常直观高效的沟通方式。Claude Code 准确地识别了图片中的问题（“默认蓝色”），并迅速生成了修改 CSS 的代码。

2.2.2 第二阶段：添加 “新聊天” 按钮与上下文管理

接着，进入了下一个功能开发：添加一个 “新聊天” 按钮。

在开始新任务前，Elie 老师使用 /clear 命令清空了上下文。这是一个好习惯，可以避免旧的对话内容干扰新任务的执行。

• 对话上下文管理：战略性的“记忆”取舍

  长对话会消耗宝贵的上下文窗口。资深开发者需要像管理内存一样管理对话历史。

  • /clear：当任务切换，上下文已完全无关时，果断清空历史，避免信息污染。
  • /compact：当需要开启一个相关但更聚焦的新任务时，使用此命令。它会总结之前的对话，保留关键信息作为新会话的引子，实现上下文的平滑过渡。此命令甚至支持自定义指令，如 /compact Focus on code samples and API usage，以优化压缩效果并节约成本。

举个例子，在视频中，Elie 老师第一次告诉 AI 不要自动启动服务器，但在使用 /clear 并开始新任务后，AI 又忘记了这个指令。如果当时用的是 /compact，就大概率可以避免这个问题。上下文工程 (Context Engineering) 是当前大模型应用领域的一个核心课题，如何有效管理上下文，值得我们每个使用者深入研究。

2.2.3 第三阶段：引入 MCP，实现自动化闭环

“新聊天” 按钮的基本功能实现了，但样式仍然不尽人意。此时，手动截图、反馈、修改的循环显得有些繁琐。Elie 老师展示了 Claude Code的王牌功能——通过模型上下文协议 (MCP)集成外部工具。

• 模型上下文协议 (MCP)

  MCP (Model Context Protocol) 是一套允许 Claude Code 等 AI 工具与外部数据源和系统进行交互的协议。通过 MCP，Claude Code 可以获得超越自身内置能力的 “超能力”，例如操作浏览器、读写文件系统、调用 API 等，从而成为一个真正意义上的智能体 (Agent)。

  Elie 老师通过一行命令，为 Claude Code 添加了对 Playwright 的支持。

  claude mcp add playwright npx @playwright/mcp@latest

  

  MCP成功连接Playwright

  Playwright 是一个强大的浏览器自动化工具。集成之后，Claude Code 便拥有了自主操作浏览器的能力。Elie 老师随即下达了一个复杂的指令，要求 Claude Code：

  • 访问 页面
  • 查看 “新聊天” 按钮
  • 分析 其样式与页面其他元素的差异。
  • 修改 代码，使其样式（对齐方式、边框等）与其他元素保持一致。

  接下来:

  • Claude Code 自动打开了一个新的浏览器窗口，访问了指定的页面。
  • 它 “看” 到了页面布局，并 “理解” 了样式上的不一致。
  • 它自动修改了相关的前端代码。
  • 为了验证修改结果，它再次操作浏览器，刷新页面并进行二次 “视觉” 确认。

  这个过程完全自动化，形成了一个 “观察-思考-行动-验证” 的闭环。这正是 “Highly Agentic” 的完美体现，也是 AI 辅助编程未来发展的方向。

2.3 第三战：深入后端，扩展 RAG 工具

完成了前端的开发，教程最后转向了后端。目标是为应用增加一个新工具，使其能够查询并返回更详细的课程信息（包括每一课的标题和描述）。

这本质上是在应用现有的 检索增强生成 (Retrieval-Augmented Generation, RAG) 系统中，注册一个新的工具。

• 什么是 RAG？

  RAG (Retrieval-Augmented Generation) 是一种将大型语言模型 (LLM) 与外部知识库相结合的技术框架。当用户提问时，系统首先从知识库（如数据库、文档集）中检索相关信息，然后将这些信息与原始问题一起提供给 LLM，让模型基于这些具体的、最新的知识来生成回答。教程中的应用就使用 RAG 来查询课程信息，而我们现在要做的，就是为这个系统增加一个新的信息检索 “工具”。

  Elie 老师再次使用了 “计划模式”，让 Claude Code 分析现有的 search_tools.py 文件，并规划如何添加新工具。计划清晰地指出了三步：

> In @backend/search_tools.py, add a second tool alongside the existing content-related tool. This new tool should handle course outline queries.
  - Functionality:
    - Input: Course title
    - Output: Course title, course link, and complete lesson list
      - For each lesson: lesson number, lesson title
      - Data source: Course metadata collection of the vector store
  - Update the system prompt in @backend/ai_generator so that the course title, course link, the number and title of each lesson are all returned to address an outline-related queries.
  - Make sure that the new tool is registered in the system.

• 在 search_tools.py 中实现获取课程详细信息的新函数。
• 更新系统提示词 (System Prompt)，告知模型新工具的存在和用法。
• 在 RAG 系统中正式注册这个新工具。

计划通过后，Claude Code 精准地修改了 Python 代码和系统配置文件，成功为应用赋予了新的后端能力。

Claude Code 官方文档中提到，可以通过 think, think hard, think harder, ultrathink 这四个关键词，来引导 Claude Code 使用更高的思考预算。

• 策略性思考与规划：引导而非命令

  在面对复杂任务时，直接要求实现是低效的。更高级的策略是引导 AI 先进行深度思考。

  • 扩展思考模式：通过在 Prompt 中加入 think, think hard, think harder, ultrathink 等关键词，可以强制 AI 分配更多资源进行规划，这对于架构设计或复杂重构至关重要。
  • 计划模式 (Plan Mode)：通过 Shift + Tab 切换到计划模式，强制 AI 在动手前提交一份详细的行动计划。这提供了一个关键的架构评审节点，确保 AI 的执行路径符合你的预期，避免不必要的返工。

2.4 在 Claude Code 中与文件共舞

在 Claude Code 中输入 @ 即可引用文件，这极大地提升了提供上下文的效率。这里面有一些需要注意的 “坑”。

• 当路径中包含括号等特殊字符，并且你试图使用 / 进行路径导航时，自动补全会失效。
• 直接输入不含特殊符号的目标文件名，然后在候选列表中勾选，这是最稳妥的方式。
• 如果候选文件太多，可以直接在文件管理器（如 Finder）中复制文件路径，然后粘贴到 Claude Code 中。
• 如果路径中有空格，记得用引号将路径包裹起来。

另外，值得一提的是 Claude Code 的文件读取策略。与许多套壳应用将文件内容直接嵌入 prompt 不同，Claude Code 采用的是更智能的 “按需读取” 策略。它仅在后续的分析中确实需要访问文件内部内容时，才会调用工具去读取文件。这种 Agentic 的行为模式，理论上可以带来更高的效率和更优的上下文利用率。

三、总结：拥抱 Agentic 编程新范式

一个真正 “Agentic” 的 AI 助手应该具备怎样的能力：

• 深刻的理解力：能通过自然语言、图片、代码文件等多种媒介，准确理解我们的意图。
• 周密的规划力：在行动前进行思考和规划，并征求我们的同意，确保方向的正确性。
• 强大的执行力：能直接修改代码，并自动化地完成一系列复杂操作。
• 开放的扩展力：能通过 MCP 等协议，与外部世界连接，不断扩展自己的能力边界。

开发者的角色正在从一个 “代码实现者” 转变为一个 “需求定义者”、“项目规划者” 和 “AI 监督者”。掌握如何精准地提出问题、如何有效地管理上下文、如何利用工具链增强 AI 的能力，这些 “软技能” 在 AI 时代将变得愈发重要。

Reference

1. Claude Code: A Highly Agentic Coding Assistant
2. Claude Code(GitHub)
3. 吴恩达 Claude Code 笔记精华版
4. 课程项目源码
5. 课程官方文件与 Prompt
6. Claude Code Docs
7. Claude Code Offcial