用途：该技能面向已运行页面的视觉 QA 与源码级修复，不适用于功能自动化或回归测试套件。触发场景包括审查线上页面的布局或间距缺陷、在若干关键宽度检查响应式行为、将页面与设计系统或视觉目标对比，以及把可见问题追溯到 CSS、Tailwind 类或组件结构。
主要能力：借助浏览器工具打开页面、在编辑前捕获当前状态、测试桌面与移动宽度、修复源码后在同一视口复查。Playwright MCP 映射的工具包括 browser_navigate 打开页面、browser_snapshot 检查可访问结构、browser_take_screenshot 做前后截图、browser_resize 做响应式审查、browser_console_messages 与 browser_network_requests 捕获前端故障。
使用方式：优先使用 Playwright MCP，Chrome DevTools MCP 为可选；无 MCP 时可用 Playwright CLI、浏览器开发者工具、截图和手动响应式检查作为回退，并在提出视觉修复前先捕获控制台或网络问题。跨客户端方面，GitHub Copilot 需放在可见技能路径或用项目指令包装；Claude Code 放在本地技能目录或兼容插件源；Codex 安装或同步到 $CODEX_HOME/skills/web-design-reviewer 并在重大改动后重启。
检查清单：目标宽度下无溢出或裁切；交互控件可见可达；文本对比度与焦点状态可接受；重复组件间距、字体和颜色一致；代码修改后经视觉验证。验证协议要求把指导绑定到具体路由、组件、屏幕或设计产物，覆盖加载、空、错误、成功等状态与响应断点，并针对窄移动视口、纯键盘路径和慢加载状态做压力测试。
限制：不得在宿主未暴露 MCP 时声称使用了 MCP 操作；避免套用通用模板、忽略最终渲染或导出审查、在同一轮同时修内容与表现。相关技能包括 frontend-design、stitch-design 和 canvas-design。