GitHub 官方出品！用 AI 自动化做网页设计 Review 的 Skill

每次做完一个网站，自己看半天总觉得哪里怪怪的，但说不上来——设计师看了想打人，自己又看不出问题在哪？

今天介绍一个 GitHub 官方的 Claude Skill，web-design-reviewer，专门帮你自动化做网页设计审查。20,589 次安装，出身于 GitHub 官方 awesome-copilot 仓库（⭐ 37.6k），背书够硬。

它能做什么

这个 Skill 会用 Playwright MCP（推荐配置）打开你的网站，自动做四件事：

1. 截图 + 可视化检查
Capture screenshots across 4 个主流视口：Mobile (375px)、Tablet (768px)、Desktop (1280px)、Wide (1920px)。有没有布局错乱、元素溢出，一眼看清。

2. 问题分类分级
把所有设计问题分成 P1/P2/P3：
– P1：立刻修，影响功能的布局问题（比如按钮点不到）
– P2：视觉退化，比如间距不一致、颜色不统一
– P3：小的视觉不一致，锦上添花

3. 自动定位源码
发现问题后，它不是只告诉你”这里有问题”，而是会告诉你具体是哪个文件、哪个 class/ID，然后直接 grep 找到对应源码。改代码不用来回找文件了。

4. 修复后验证
改完再截图对比 before/after，确保修复没有引发新问题。

覆盖了哪些问题类型

• 布局：元素溢出、重叠、对齐问题
• 响应式：移动端布局崩溃、断点异常、触摸目标过小
• 可访问性：文字对比度不足、键盘导航无焦点状态、图片缺 alt
• 视觉一致性：字体/颜色/间距不统一

整个流程是循环的——发现问题 → 修 → 验证 → 还有问题就再来一轮，最多次 3 轮，超出就提示你人工介入。

怎么安装使用

需要先装 Playwright MCP：

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

然后让 Claude（或其他支持 Skill 的 AI 编程工具）加载这个 Skill，对它说：

“review 我的网站 http://localhost:3000”

剩下的它自己会跑。

实际体验

我试用下来最惊艳的是自动检测样式方案这个能力——它会读你项目的 tailwind.config、next.config、vite.config 等，自动判断你用的是 Tailwind / CSS Modules / styled-components / Emotion，然后直接去对应文件里改，不会动错地方。

很多 AI 代码修复工具要么不知道你的项目用什么样式系统，改错了地方；要么改了半天没效果。这个 Skill 把这套流程做得很系统。

适合谁用：
– 开发者自己做完页面想做一轮自查
– 设计师想快速 review 开发实现
– 团队没有专职 UX，需要低成本设计质量把控

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