MCP 服务器与 Claude Code
你可以通过添加 MCP（模型上下文协议）服务器来扩展 Claude Code 的功能。这些服务器在你的机器上远程或本地运行，为 Claude 提供它通常不具备的新工具和能力。
最受欢迎的 MCP 服务器之一是 Playwright，它赋予 Claude 控制网页浏览器的能力。这为 Web 开发工作流程打开了强大的可能性。
安装 Playwright MCP 服务器
要将 Playwright 服务器添加到 Claude Code，请在终端中运行此命令（不在 Claude Code 内部）：
claude mcp add playwright npx @playwright/mcp@latest
此命令做两件事：
-
• 将 MCP 服务器命名为"playwright" -
• 提供在你机器上本地启动服务器的命令
管理权限
当你第一次使用 MCP 服务器工具时，Claude 会每次都要求权限。如果你厌倦了这些权限提示，你可以通过编辑设置来预先批准服务器。
打开 .claude/settings.local.json文件并将服务器添加到 allow 数组中：
{
"permissions": {
"allow": ["mcp__playwright"],
"deny": []
}
}
注意 mcp__playwright中的双下划线。这允许 Claude 使用 Playwright 工具而不用每次都请求权限。
实际示例：改进组件生成
这是 Playwright MCP 服务器如何改善开发工作流程的真实示例。你可以让 Claude 而不是手动测试和调整提示：
-
1. 打开浏览器并导航到你的应用程序 -
2. 生成测试组件 -
3. 分析视觉样式和代码质量 -
4. 基于它观察到的内容更新生成提示 -
5. 使用新组件测试改进的提示
例如，你可能要求 Claude：
"导航到 localhost:3000，生成一个基础组件，查看样式，并更新 @src/lib/prompts/generation.tsx 中的生成提示，以便今后产生更好的组件。"
Claude 将使用浏览器工具与你的应用程序交互，检查生成的输出，然后修改你的提示文件以鼓励更原创和创意的设计。
结果和好处
在实践中，这种方法可以导致显著更好的结果。Claude 可能会更新提示以鼓励，而不是通用的紫色到蓝色渐变和标准 Tailwind 模式：
-
• 温暖的日落渐变（橙色到粉色到紫色） -
• 海洋深度主题（蓝绿色到翠绿色到青色） -
• 不对称设计和重叠元素 -
• 创意间距和非常规布局
关键优势是 Claude 可以看到实际的视觉输出，而不仅仅是代码，这使它能够对样式改进做出更明智的决定。
探索其他 MCP 服务器
Playwright 只是 MCP 服务器可能性的一个例子。生态系统包括用于以下用途的服务器：
-
• 数据库交互 -
• API 测试和监控 -
• 文件系统操作 -
• 云服务集成 -
• 开发工具自动化
考虑探索符合你特定开发需求的 MCP 服务器。它们可以将 Claude 从代码助手转变为能够与你整个工具链交互的综合开发伙伴。