Web Design Reviewer：给 AI 装上设计眼睛，自动找出网页视觉问题

网页设计师的 AI 副驾驶来了

做网页设计最头疼的是什么？自己做的页面，看久了真的很难发现问题了——元素溢出、响应式断点、色彩不统一……肉眼扫来扫去就是看不出哪儿别扭。

GitHub 上最近火了一个 Skill，叫 Web Design Reviewer，专门给 AI 装上一双”设计眼睛”，自动检查网页视觉问题还能直接修源码。

它能干什么？

这个 Skill 的工作流分四步走：

• 信息收集：自动检测你用的是 React / Vue / Next.js 还是纯 HTML/CSS，然后定位样式文件在哪里
• 视觉检查：截屏 + DOM 分析，按照「布局问题 / 响应式 / 无障碍 / 视觉一致性」四个维度逐项审查
• 自动修复：按 P1/P2/P3 优先级逐一修复，改完自动截图对比
• 回归验证：确认修复没有引入新问题，响应式展示不被破坏

检查清单非常细致——元素溢出、高对比度缺失、移动端按钮过小、字体不统一、flex 对齐问题……全都有 severity 评级。

怎么用？

推荐搭配 Playwright MCP 使用，配置超简单：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest", "--caps=vision"]
    }
  }
}

然后把网站 URL 丢给它，就能坐等报告。支持的网站类型不限——静态站、React/Vue SPA、Next.js 全栈、WordPress 都可以。

哪些人适合用？

• 前端开发者：上线前做最后一次视觉 Review
• 设计师：检查设计稿还原度
• 产品经理：验收时快速扫一眼不用 Figma 全家桶

目前已收录于 GitHub 的 awesome-copilot 精选列表，在 Smithery 上有 108 次安装，品质有保证。

👉 GitHub 仓库直达

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