Vibe Coding 前端搭建：用 Playwright MCP 解决视觉盲区

Playwright：Vibe Coding 前端搭建的最佳测试伙伴

随着 Vibe Coding（氛围编程）成为流行开发方式，开发者只需提供创意和方向，繁琐代码实现交给 AI 智能体如 Claude Code、Cursor 完成。

后端开发中体验极佳，但在前端开发中，这套流程常出现问题。原因是大模型是'瞎子'，能写出逻辑完美的组件，但看不到渲染后的页面效果。常见场景包括按钮位置偏移、z-index 遮挡、Flex 布局挤在一起等。

微软官方项目 microsoft/playwright-mcp 提供了有效解决方案。通过 MCP（Model Context Protocol），它给大模型装上了'眼睛'和'手'，成为前端 Vibe Coding 的重要辅助工具。

什么是 Playwright MCP？

Playwright 是目前最强大的端到端（E2E）测试框架之一。 MCP (Model Context Protocol) 是让大模型安全、标准化调用外部工具的协议。

Playwright MCP 结合了两者：它是一个运行在本地的 MCP Server，允许 AI 智能体直接接管真实浏览器。Claude 不再只对着源代码，可以主动打开浏览器访问本地开发服务器，真正去'看'和'点'页面。

为什么它能解决大模型的'视觉盲区'？

1. 结构化无障碍树（Accessibility Tree）：核心功能。将 DOM 转换为高度结构化的可访问性快照，模型精确知道元素位置、可见性及遮挡情况，消除纯视觉模型的幻觉。
2. 结合屏幕截图（Screenshots）：遇到样式对齐、颜色等纯视觉问题时，调用 browser_take_screenshot 获取截图。配合视觉多模态能力，AI 能识别'按钮未居中'或'对比度太低'。

实战指南：在 Claude Code 中接入 Playwright MCP

要在 Claude Code 中获得所见即所得的体验，需简单配置。

前置准备

• 确保电脑安装了 Node.js（>=18）。
• 确保已安装并登录 Anthropic 官方 CLI 工具：claude-code。

1. 添加 Playwright MCP 服务器

在项目目录下运行命令：

claude mcp add playwright npx -y @playwright/mcp@latest 

此命令告诉 Claude Code 在该目录下可使用 npx 唤起 Playwright MCP 服务。

2. 查看可用的指令

接入成功后输入 /mcp 查看。Claude 现在拥有浏览器操作工具，例如：

• browser_navigate: 控制浏览器访问指定 URL
• browser_click / browser_type: 点击元素、输入文字
• browser_take_screenshot: 获取页面截图
• browser_console_messages: 获取浏览器报错信息

Vibe Coding 的全新工作流演示

此时 Claude Code 不仅是代码生成器，更是懂设计的高级前端工程师。

向 Claude Code 下达 Prompt：

帮我用 Tailwind CSS 写一个美观的登录页面。写完后，启动你的 Playwright MCP，打开 http://localhost:5173。检查登录框是否垂直居中，截图看整体视觉效果，如有问题直接改代码直到完美。

执行流如下：