我最近越来越常把 Claude Code 当成一个真正能干活的搭子来用。只让它读代码当然也有用，但一旦接上浏览器能力，很多前端场景就会顺很多。
比如这些事，它就不再只是“告诉你应该怎么点”，而是真的可以去做：
- 打开页面看实际渲染结果
- 帮你点按钮、切 tab、填表单
- 复现某个前端交互 bug
- 在提完改动后顺手走一遍页面流程
我自己现在比较偏向的做法，是直接给 Claude Code 装上 Playwright MCP。这样 Claude Code 就能通过 MCP server 去操作浏览器。
先决条件
开始之前，我会先确认两件事：
- 本机已经装了 Node.js 18+
- 终端里能正常使用
claude命令
可以先随手检查一下：
node -v
claude --version如果这两样都正常，再继续往下走。
安装 Playwright MCP
Claude Code 官方文档里，给本地 stdio 类型 MCP server 的推荐格式是：
claude mcp add <name> -- <command> [args...]我这里直接加一个叫 playwright 的 server：
claude mcp add playwright -- npx @playwright/mcp@latest这条命令做的事情其实不复杂：
playwright是你在 Claude Code 里看到的 MCP 名字npx @playwright/mcp@latest会在本机启动 Playwright MCP server--用来把 Claude Code 自己的参数和后面的 server 启动命令分开
装完以后，可以先看一下 Claude Code 有没有把它记住：
claude mcp list
claude mcp get playwright如果你更喜欢在会话里看，也可以直接进 Claude Code 后输入：
/mcp只要能看到 playwright，基本就说明这一步已经通了。
Claude Code 里怎么用
装完以后，不需要再写什么复杂脚本，直接在 Claude Code 里用自然语言说就行。
比如我一般会这样试：
打开 https://example.com，看看首页结构。或者更具体一点：
打开 http://localhost:4323/blog ，帮我检查一下文章列表页的卡片间距和 hover 效果。如果我在调表单，也会直接这样说：
打开登录页，输入测试账号，提交表单，然后告诉我有没有报错。这类场景里，Claude Code 会通过 Playwright MCP 去调浏览器工具，而不是只停留在“建议你怎么测试”。
一个更实用的验证流程
如果你想确认它真的能操作浏览器，而不是只显示装好了，我建议直接跑一遍最小流程：
- 在项目目录里启动本地站点
- 打开 Claude Code
- 让它访问本地地址
- 让它做一个有交互的动作
例如：
npm run dev然后在 Claude Code 里说：
打开 http://localhost:4323 ，点击“博客”，再进入第一篇文章，告诉我页面标题是什么。如果它能真的完成这串动作，说明你这套已经不只是“装上了”，而是可以投入日常使用了。
常见的两个坑
1. npx 能跑，但 Claude Code 里看不到 Playwright
这种情况我会先回头看：
claude mcp list
claude mcp get playwright很多时候不是没装上，而是命令写法、作用域，或者当前目录下的配置理解错了。
2. 浏览器相关依赖没准备好
如果是第一次在这台机器上跑 Playwright，偶尔会遇到浏览器没有准备好的情况。
这时我一般会直接补一遍 Chromium：
npx playwright install chromium这一步不是每次都需要，但第一次装环境时很常见。
我为什么会装这个
我现在越来越不想把 Claude Code 只当“更会写字的终端助手”。
它真正开始变得有意思，是当它不只是能改代码，还能顺手去看页面、走流程、复现问题。
对前端来说，这一步差别其实很大。
以前经常是：
- Claude 改完代码
- 我自己切回浏览器点一遍
- 再回来继续改
现在很多时候可以直接变成：
- Claude 改代码
- Claude 自己打开页面验证
- 我只看结果和关键问题
这套工作方式一旦用顺了，真的会省不少来回切换的脑力。
最后
如果你只是想先把 Playwright MCP 装起来，记住这一条就够了：
claude mcp add playwright -- npx @playwright/mcp@latest剩下的事情，就是尽快让它替你跑一遍真实页面。只要第一次用顺了，后面你大概率就不想再回到“只靠自己手点”的那种节奏了。