Web Design Reviewer：AI 自动搞定前端 UI 审查，连修复代码都给你改好

做前端开发的同学都知道，最头疼的不是写代码，是 UI 验收——「这个按钮没对齐」「颜色和设计稿不一致」「手机端布局炸了」……每次 review 都是体力活，还容易漏掉。

最近发现一个 Skill，专门解决这个痛点——Web Design Reviewer。它本质上是一个 AI 驱动的设计质量检查 Agent，能自动化完成视觉审查 + 问题定位 + 修复建议，流程非常专业。

核心能力：四步走，比人工还细

这个 Skill 把设计审查拆成了完整的四步流水线：

• 信息收集：自动检测项目框架（React/Vue/Next.js 等）、样式方案（CSS/Tailwind/SCSS 等），摸清项目结构
• 视觉检查：截取多端截图（375px 手机、768px 平板、1280px 桌面、1920px 宽屏），逐一过检
• 问题修复：按优先级（P1 立即修 / P2 尽快修 / P3 有空再修）定位源码文件，直接改代码
• 复验确认：修复后重新截图对比，确认没有引入新问题

检查范围覆盖了：布局溢出、元素重叠、响应式断点、色彩对比度、无障碍访问（键盘导航焦点状态）、字体一致性等维度，都是实打实影响用户体验的。

适合哪些场景

• 开发阶段：提 PR 前自己先过一遍，把低级 UI 问题消灭在萌芽
• 设计走查：不用手动一个个页面截图，AI 自动遍历并输出问题清单
• 重构验收：改完样式后快速确认没有破坏其他页面
• 多端兼容：一次跑完手机 / 平板 / 桌面 / 宽屏四个 viewport

技术细节

推荐搭配 Playwright MCP 使用，Skill 文档里直接给了配置示例：

npx -y @playwright/mcp@latest --caps=vision

支持的能力包括：browser_navigate（页面导航）、browser_snapshot（DOM 结构）、browser_take_screenshot（截图）、browser_resize（响应式测试）、browser_console_messages（JS 错误检测）。当然，Selenium、Puppeteer、Cypress 也都能兼容，工具链选择很灵活。

总结

这个 Skill 把设计审查从「人肉操作」变成了「自动化流水线」，不仅能发现问题，还能直接改源码给出修复方案。对于每天被 UI review 折磨的开发者来说，这是一个能实实在在省时间的工具。

⭐ GitHub：https://github.com/github/awesome-copilot/tree/main/skills/web-design-reviewer

GitHub: https://github.com/github/awesome-copilot/tree/main/skills/web-design-reviewer