Claude + 这个 Skill，让 AI 自动给你审设计！

做过设计的都知道，最崩溃的时刻不是不会画，而是画完了发现——「这网站配色怎么这么丑」「响应式直接炸了」「字体层级乱成一团」。以前靠人工肉眼看，现在 Claude + 这个 Skill，直接帮你自动审查并修复。

它能做什么？

Web Design Reviewer 是一个专门给 AI 看的「设计审核员」。你丢一个 URL 过去，它会：

• 截图 + 抓取 DOM 结构
• 自动检测：布局问题、响应式崩溃、无障碍缺陷、视觉不一致
• 按 P1/P2/P3 优先级排序（P1 = 必须立即修）
• 直接定位到源文件，给出修复建议甚至帮你改代码

支持哪些项目？

静态页面、React/Vue/Angular/Svelte SPA、Next.js/Nuxt 全栈，甚至 WordPress——通吃。框架会自动检测（package.json、tailwind.config、next.config 等），不需要你手动告诉它用什么技术栈。

怎么用？

接入 Playwright MCP 就能跑，官方示例配置：

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

然后丢给它你的网址，坐等结果。整个流程是：信息收集 → 视觉检查 → 修复问题 → 重新验证，形成闭环。

什么场景最有用？

• 上线前 Design Review，不用拉设计师开会
• 接手旧项目，快速摸清设计问题
• AI 生成的前端代码，自动过一遍设计质量关

20.5k Stars 的项目，GitHub 上直接免费用。赵一凡亲测——用它审过两个落地页，找出了 6 个我没肉眼发现的无障碍问题。很香。

GitHub 仓库直达 →

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