添加功能（上）
本节信息
讲师 Elie Schoppik（Anthropic）· 时长 12:09 · ▶ 原视频
你已经摸清了这个聊天机器人的代码库，接下来我们就给界面加功能，并为聊天机器人实现一个新工具。
我们想加什么功能
之前在这个应用里，问一门课的大纲，我们会拿到很详细的信息，还能看到引用的来源。但这些来源现在只是一段文字——要是能点成链接、直接跳到出处就太好了。
所以我们要做的，是让前端和后端都能正确地把这些来源渲染成链接，显示数据到底来自哪里，而不只是一段死文字。
两个关键动作：引用正确文件 + 计划模式
我们这次不直接让 Claude 去实现功能，而是先用上两个重要的技巧。
第一，引用正确的文件。 Claude Code 的表现，取决于你给它的上下文。让它改动时，先搞清楚「该改哪些文件」很重要。你可以让 Claude Code 自己去找，但如果你一上来就知道要改哪些文件，直接把这个上下文喂给它，效率会高得多。
怎么引用？打开 Claude Code，用 @ 来标记文件。引用具体文件时，还能用 Tab 键自动补全完整文件名。
第二，先计划，后动手（计划模式 / plan mode）。 在做功能、做较大改动时，我们不让 Claude 一上来就琢磨该干啥、然后立刻写代码，而是换个套路：先让它出一份详细的改动计划。我们认可这份计划之后，再让 Claude Code 去改动那一堆文件。
下面这个状态机，把「计划模式」这套流程走了一遍——点「下一步」看每一步发生了什么：
口诀：改动越大，越要先计划。Shift+Tab×2 进计划模式，Shift+Tab×1 开自动接受。
只要改动稍微大一点，我们都建议从计划模式开始——给 Claude 一个机会，在动手之前先想清楚要做什么。
实操：给来源加可点击的引用链接
我把准备好的提示词贴进去，让它「做一个带来源引用的界面」。注意我在提示词里既引用了正确的文件，也引用了其他需要改动的文件。
接着给 Claude 出计划的机会。计划出来后，我快速看了下，感觉挺好，那就照这个计划走，并打开自动接受改动（auto-accept）。于是待办清单出来了，文件开始被修改。
一个很常见的工作流是：用户一开始让 Claude 每次都请求许可；随着人对 Claude Code 的信任增加，再慢慢多用「自动接受改动」。
最后它说可以启动应用来测了。但其实服务器已经在跑了，所以我告诉 Claude：「不用，谢谢，服务器在跑了。」如果我想让它以后都这样，这正是个把规则写进 CLAUDE.md 的好时机。
一测——确实有能跳转的链接了，只是这个蓝色链接配色让界面有点难看清。
让 Claude「看图」改界面
我可以直接告诉 Claude 我想要什么；也可以用 Claude 的看图能力——给它一张截图，让它分析哪里要改。
那就把界面截个图，贴进 Claude Code，对它说：「这些链接很难读，能让它更好看些吗？」它说：「我看到问题了，链接用的是默认蓝色，我来改。」
当你需要 Claude Code 做视觉上的改动时，截图给它看是一个非常高效、能快速迭代的办法——这是我们见过最常用的功能之一。
加第二个功能：新建对话按钮
我们再加个新功能。这次我不在现有上下文窗口上接着干，而是用 /clear 把对话历史彻底清空、从零开始。这样我能有更长的上下文窗口可用，也避免 Claude 被之前那些无关内容搞混。
像之前一样，做新功能就用计划模式。我想给界面加一个**「新建对话」按钮**：不用每次刷新页面，而是有个按钮能重置对话、重新开聊。
小技巧：想换行补充更多上下文，用
\（反斜杠）再按回车即可。
待办清单照例出现，文件被一个个更新：加上点击时新建对话的 JavaScript、清空输入并聚焦、再补一点和现有区块匹配的样式。
接着它要测新功能。考虑到我以后会经常说「别跑服务器」，现在正好定个规矩。但别的开发者也许想自己跑服务器——所以更合适的是放进本地、被 git 忽略的记忆里，也就是 CLAUDE.local.md。
用 MCP 让 Claude 自己截图：Playwright
虽然功能能用了，但还是没完全长成我想要的样子。我可以一直截图、和 Claude 来回沟通；也可以给 Claude Code 加装新工具——用 MCP 服务器。
MCP（Model Context Protocol，模型上下文协议）让 Claude Code 这样的工具，能接上外部数据源和系统、获得额外能力。这里我要加一个 Playwright 的 MCP 服务器——它能打开浏览器、截图、并分析截图。这样一来，截图这件事就不用我手动做了，Claude 能自己全包。
先退出 Claude Code，加上这个 MCP 服务器：
claude mcp add playwright -- npx @playwright/mcp@latest也就是 claude mcp add、服务器名 playwright，再加上启动它的底层命令 npx @playwright/mcp@latest。
想接入任何 MCP 服务器，都可以查它的文档——每个 MCP 服务器都会给出连接所需的命令。
重新打开 Claude，用 /mcp 命令看看状态：可以看到已经成功连上 Playwright MCP 服务器，也能看到它给我们的工具——执行 JavaScript、按键、导航、后退……这些平时手动测的事，Playwright 都能用程序帮我们自动做。
下一节，我们就让 Claude Code 用上 Playwright，去自己摸索、搭出我们需要的东西。