AI 自动扫描网页设计问题！这个 Skill 帮你找出每一个细节 Bug

做设计稿最头疼的事：怎么知道哪里有问题？

前端开发也好，设计师也好，最怕的就是交付出去的页面”看起来怪怪的”又说不上来哪里怪。响应式碎了、无障碍对比度不够、字体不统一、按钮太小点不到……这些问题靠肉眼看，费时费力，还容易漏。

最近我在 Smithery 发现了一个叫 web-design-reviewer 的 Skill，Star 数 20,589，安装量 117，专门解决这个痛点——用 AI 自动扫描网页设计问题，还能直接帮你修源码。

它能做什么？

这个 Skill 走的是「截图 + 分析 + 修复」四步流程：

• 信息收集：确认目标网址 + 检测项目框架（React/Vue/Next.js/Tailwind 等）
• 视觉巡检：截图，识别布局溢出、响应式断裂、对比度不足、字体不统一等 4 大类问题
• 定位源码：通过 class/id 找到对应的 CSS 文件或组件，直接改代码
• 复验确认：改完重新截图对比，确认修复有效

检查项非常细致，分 P1/P2/P3 三个优先级：

• P1 必须修（布局问题影响功能）
• P2 下一步修（视觉降体验）
• P3 有空再修（轻微不一致）

支持哪些网站？

官方说支持所有 Web 技术栈——静态站、React/Vue/Angular/Svelte SPA、Next.js/Nuxt 全栈，甚至 WordPress/Drupal CMS 都行。只要能给浏览器访问到、能截图，AI 就能审查。

怎么跑起来？

官方推荐搭配 Playwright MCP 使用，一条命令搞定：

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

Playwright 提供页面导航、截图、DOM 读取、浏览器缩放（响应式测试）等全部能力，和这个 Skill 是天然搭档。

使用场景

• 设计师交付前自检：不用再手动逐页过，AI 帮你扫一遍
• 开发者接需求后初评：快速识别设计稿里的坑，提前和设计师对齐
• 无障碍合规检查：自动检测对比度、alt 文本、键盘焦点等 accessibility 问题
• 响应式回归测试：改完 CSS 后自动跑多端截图，防止新 bug

总结一下

这是一个把「设计评审」这件事从人工肉眼变成流水线自动化的 Skill——适合设计师、前端工程师、UE 工程师，以及任何经常需要对网页设计质量负责的人。

唯一的前提：网站得在跑着（localhost 可以，线上也可以），AI 才能去访问和截图。

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