添加功能（下）
本节信息
讲师 Elie Schoppik（Anthropic）· 时长 05:29 · ▶ 原视频
接上一节，我们让 Claude Code 用 Playwright MCP 服务器去摸索、搭出需要的内容。
让 Claude 自己截图、自己改、自己验证
我让 Claude Code 用 Playwright：访问我们当前的页面、看看那个「新建对话」按钮。我的要求是——让这个按钮和下面 Courses、Try Asking 那些链接长得一样：左对齐、去掉边框。
下面这段回放，还原了 Claude 用 Playwright 自己截图 → 分析 → 修改 → 再截图验证的完整闭环：
点「下一步」开始这段会话回放 ↓
因为这次我没开自动接受，所以能在 VS Code 里看到正在做的改动。一改完，新效果里边框和背景都没了。它还会再截一张图，验证自己改完的样子对不对、和其他区块是否一致。
回浏览器看看——挺好，不过这儿多了个 +。那就让它去掉：「现在有两个加号图标，把更靠近文字的那个去掉。」它发现 HTML 里本来就有一个加号，于是把多余那个删掉。可以看到，Claude Code 发现没有打开的标签页，就自我修正，重新打开、截了所需的图。
可以想象，用 MCP Playwright 这类工具来搭复杂界面，让构建、设计、测试都变得轻而易举。
转战后端：再加一个工具
前端改得挺漂亮了。现在去后端。和之前一样，我们从头开始——/clear 清空历史，重新来。
这次我们要在后端加功能。先写提示词、说清要做什么：我想再加一个工具，能访问某一门具体课程，并对每门课列出课时编号、课时标题和描述。
我们要让 Claude Code 改的是 search_tools.py 文件。看一眼这个文件：目前里头只有一个工具，用来搜索内容、获取某门课的详情。我们要加的第二个工具，会让我们能拿到每门课里各个课时的更详细信息。
照旧，先出计划，确认计划没问题，再开始改具体文件。而且因为我们之前有了 CLAUDE.md，它能更快理解要做什么。
我们看看要实现什么：建好这个工具后，更新系统提示词确保能拿到那份额外数据，再把工具注册进 RAG 系统。可以看到，它不只在改底层 Python 代码，还改了系统提示词，并注册了新建的工具。
回到浏览器，试着问某门课的信息。如果没问题，我们应该能拿到更详细的内容，包括这门课的链接，以及各个课时的名字。
下一节，我们会聊聊出问题时怎么办——怎么用 Claude Code 调试、写测试，让我们对「和 Claude Code 一起写出来的软件」更有信心。