AI 给网站做视觉体检！Web Design Reviewer 能自动找茬还能帮你修

你的网站看起来乱糟糟，但又说不出哪里不对劲？设计师看了直摇头，你自己盯着看也总觉得哪里怪怪的。

现在有个 Skill 能帮你「AI 自动找茬」——Web Design Reviewer，专门给网站做视觉体检，能发现你肉眼容易忽略的那些布局灾难、响应式翻车、无障碍翻车。

它能干什么？

简单说：给它一个网址，它会帮你把网站从头到脚「截图 + 扫描 + 出报告」一条龙。

具体能检测这几类问题：

• 布局问题：元素溢出、重叠、对齐歪了、间距不均匀、文字被截断
• 响应式问题：手机上布局炸了、切换断点时动画很怪、按钮太小点不到
• 无障碍问题：文字和背景对比度不够、键盘导航时看不出焦点在哪、图片没 alt 文字
• 视觉一致性问题：字体混用、颜色不统一、间距忽大忽小

而且！发现问题之后它还会直接去源码里修，修完再截图对比，给你一份 before/after 报告。

它是怎么工作的？

四步走：

1. 信息收集 — 自动检测你用的什么框架（React/Vue/Next.js）、什么样式方案（CSS/Tailwind/CSS-in-JS），问清楚要审哪几个页面
2. 视觉检查 — 截图 + 抓 DOM 结构，按表格逐项打分（严重程度分 P1/P2/P3）
3. 修复问题 — 按优先级逐个击破，修改最小化，尊重项目原有代码风格
4. 复验 — 修完重新截图对比，确认没有引入新问题

整个流程有迭代限制，同一个问题修了 3 轮还没搞定就提示用户介入，不会无限循环。

适合谁用？

• 前端开发：自测或给客户演示时用，比自己肉眼看更系统
• 产品经理：验收时用，截图 + 报告直接甩给开发
• 独立开发者：没有设计师也能让网站保持体面
• AI 开发者：结合 Playwright MCP，自动化设计走查全流程

用起来简单吗？

需要 MCP 工具有这几样能力：网页导航、截图、图像分析、源码读写、代码搜索。官方推荐用 Playwright MCP，配一个 browser_navigate + browser_snapshot + browser_take_screenshot 就够了。

装好之后，在 Claude Code/Cursor/VS Code 等主流 AI 编程工具里加载这个 Skill，遇到「帮我看看这个网站设计有没有问题」这类请求，它就会自动触发。

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

作者是 GitHub 官方维护，Stars 20,589，Smithery 上有 117 次安装。覆盖静态站、SPA、全栈框架、CMS 等各种 Web 应用类型，是一个相当实用的设计 QA 助手。

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