用途：该技能通过 MCP（Model Context Protocol）把浏览器自动化与 DevTools 能力接入实时 UI 工作，用于观察和操作正在运行的界面，服务于截图分析、截图转代码、视觉调试、设计令牌提取与视觉回归测试等场景。
主要能力：提供导航与页面控制（browser_navigate、browser_navigate_back、browser_close、browser_resize）；截图与视觉捕获（browser_take_screenshot，支持 filename、fullPage、type、element、ref）；无障碍快照（browser_snapshot，比截图更适合理解结构）；交互（browser_click、browser_type、browser_hover）；表单处理（browser_fill_form）；页面内求值（browser_evaluate）；标签页管理（browser_tabs）。资料还给出截图转代码、元素级样式提取、设计令牌提取、视觉调试、响应式断点截图与实时预览等示例工作流。
使用方式：在 Claude Code 等支持 MCP 的环境中调用上述 mcp__playwright__ 前缀工具；典型流程为先 browser_navigate 打开目标 URL，再用 browser_snapshot 获取结构、browser_take_screenshot 获取视觉，必要时用 browser_evaluate 读取计算样式或注入调试样式。
适用场景：实时 UI 检查、截图转代码、CSS 与计算样式程序化检查、布局问题视觉调试、从现有站点提取设计令牌、视觉回归测试、实时预览工作流。
限制：资料未提供具体安装命令、配置步骤、收费与价格、平台支持范围及效果保证；示例代码中的类与方法为示意，实际可用工具以所接入的 MCP 服务为准。