网站设计自动审查+修复！这个 AI Skill 把设计质量检测卷出新高度

做设计稿最崩溃的时刻是什么？不是画不出来，是终于画完了，发给别人一看——「这里按钮太小」「那里颜色对比度不够」「手机上完全乱了」……然后改改改，改到怀疑人生。

我最近挖到一个超实用的 AI Skill，专门帮你「自动化审查网站设计」，叫 web-design-reviewer。一句话总结：它能自动检测出你网站的布局问题、响应式 bug、可访问性缺陷，然后直接帮你修！

它能干什么？

这个 Skill 的工作流程是四步走：

• 信息收集 — 自动识别你用的框架（React/Vue/Next.js）和样式方案（Tailwind/CSS Modules/styled-components）
• 视觉检测 — 截图 + DOM 分析，覆盖布局溢出、元素重叠、响应式断点、色彩对比度、无障碍访问等
• 自动修复 — 按优先级（P1/P2/P3）修复问题，最小改动原则，不破坏其他功能
• 复验报告 — 修复后重新截图对比，输出完整报告

支持哪些场景？

基本覆盖所有常见项目类型：

• 静态站点（HTML/CSS/JS）
• React / Vue / Angular / Svelte SPA
• Next.js / Nuxt / SvelteKit 全栈框架
• WordPress / Drupal 等 CMS
• 任意 Web 应用

检测哪些问题？

看这张表就懂了——

• P1（立即修）：布局溢出、元素重叠、移动端布局崩溃、无障碍问题（对比度不足、无键盘焦点状态）
• P2（尽快修）：对齐问题、间距不一致、文字截断、触控区域过小
• P3（有空再修）：字体不统一、配色不品牌化

怎么用？

需要配合 Playwright MCP 使用，配置超级简单：

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

之后丢给它一个本地或线上地址，它自动开始审查，输出「修复前 vs 修复后」对比报告。参考实现基于微软的 Playwright MCP，也可以替换成 Selenium、Puppeteer 或 Cypress。

适合谁用？

前端设计师 / UI 工程师——做完稿子先跑一遍自查，不用等用户截图投诉；独立开发者——没有设计资源，用它做快速质量把关；设计团队——接需求评审前自动化过一遍，减少来回沟通成本。

说真的，这种「截图检测 + 自动修代码」的工具以前只有专业设计审计工具才有，现在 AI + Playwright 直接给你配齐了，还等什么？

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