第5章 Computer Use

让 Claude 拥有「眼睛」和「手」——看图、操作浏览器、运行 GUI

5.1 用大白话理解 Computer Use

之前的 Claude 只能读文本和写文本。Computer Use 给它加上了：

5.2 在 Claude Code CLI 中的视觉能力

Claude Code CLI 本身就能「看懂」图片。当你在对话中提供截图路径时：

# 直接让 Claude 看截图
"我运行时遇到这个错误：/tmp/error-screenshot.png
请帮我分析一下可能是什么原因"

Claude Code 会使用 Read 工具读取图片文件，理解图片内容：

• 看懂错误弹窗、堆栈跟踪
• 理解 UI 布局和设计稿
• 分析架构图、流程图
• 识别图表中的数据趋势

# 假设你的前端应用跑在浏览器里，你截了一个图
"这是我们的用户注册页面截图：/tmp/register-page.png
按钮文字被截断了，请帮我分析可能的 CSS 问题"

# Claude 会看图片，分析布局，然后修改对应的 CSS 文件

5.3 通过 MCP 实现浏览器自动化

真正的 Computer Use 威力来自 Puppeteer MCP Server。配置它之后，Claude 可以直接控制浏览器：

# settings.json
{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-server-puppeteer"]
    }
  }
}

配置后，你可以这样和 Claude 对话：

"帮我打开 https://example.com/login，截个图看看"
"在这个网页上找到所有的  链接，列出来"
"帮我填这个表单：用户名 test123，邮箱 test@example.com"
"点击页面上的'提交'按钮，然后截图看返回结果"

"请帮我自动测试我们的登录页面：

1. 打开 http://localhost:3000/login
2. 截图看一下初始状态
3. 什么都不填直接点登录，截图看错误提示
4. 填入错误的密码，截图看错误提示
5. 填入正确的用户名和密码，点登录
6. 截图看是否跳转到了首页

最后告诉我整个流程是否正常"

"这是我们要做的用户设置页面设计稿：/tmp/settings-design.png

请帮我：
1. 分析这个设计稿的布局结构
2. 用 HTML + CSS 实现这个页面
3. 确保使用项目中已有的颜色变量和组件"

# 综合工作流示例：
"我们刚部署了新版本到 staging 环境，请帮我做一次全面的验证：

1. [Puppeteer MCP] 打开 staging 网站，浏览首页、登录页、用户中心
2. [视觉] 检查每个页面的 UI 是否正常（与设计稿对比）
3. [MCP GitHub] 如果有 UI 异常，自动创建 GitHub Issue 并附上截图
4. [子代理] 同时检查服务器日志和错误监控
5. [/loop] 之后每 30 分钟帮我自动重新检查一次"