用途：对本地或远程运行的网站进行可视化检查，识别布局、响应式、可访问性与视觉一致性等问题，并在源代码层面修复。
适用对象：静态站点（HTML/CSS/JS）、SPA 框架（React/Vue/Angular/Svelte）、全栈框架（Next.js/Nuxt/SvelteKit）、CMS（WordPress/Drupal）及其他 Web 应用。
前置条件：目标网站需正在运行（本地开发服务器、预发或生产环境，生产环境只读）；需具备浏览器自动化能力（截图、页面导航、DOM 信息获取）；修复时需能访问工作区源代码。
工作流：1) 信息收集——确认 URL，了解框架、样式方案、源码位置与检查范围，可通过 package.json、tsconfig.json、tailwind.config、next.config、vite.config、nuxt.config 及 src/、app/ 自动检测；2) 可视化检查——导航并截图，检索 DOM，遍历页面，检查布局（元素溢出、重叠、对齐、间距、文本截断）、响应式（移动端适配、断点、触摸目标）、可访问性（对比度、焦点状态、alt 文本）与视觉一致性（字体、颜色、间距），在 375px、768px、1280px、1920px 视口测试；3) 问题修复——按 P1/P2/P3 优先级排序，通过选择器、组件或文件模式定位源文件，遵循最小改动、尊重现有模式、避免破坏性变更、适当加注释；4) 重新验证——刷新后截图对比前后差异，做回归测试，问题未解决则回到第 2 步，同一问题超过 3 次修复尝试需咨询用户。
输出：审查结果报告，含目标 URL、框架、样式、测试视口、问题数与修复数的摘要，按优先级列出问题详情与修复文件，未修复问题及原因，以及后续改进建议。
参考实现：推荐 Playwright MCP，使用 browser_navigate、browser_snapshot、browser_take_screenshot、browser_click、browser_resize、browser_console_messages 等工具；配置示例中 command 为 npx，args 为 -y @playwright/mcp@latest --caps=vision。也可用 Selenium、Puppeteer、Cypress、WebDriver BiDi 等具备导航、截图、DOM 检索能力的工具替代。需要页面导航、截图捕获与图像分析能力，DOM 检索为推荐项，代码读写与搜索为修复所需。
限制：目标网站必须正在运行且需浏览器自动化能力，修复需访问源码；生产环境仅只读审查；无源码时无法修复；同一问题反复修复超过 3 次需咨询用户；重大改动前需与用户确认。资料未提供收费、价格、具体效果数据与平台兼容性细节。