你的网站体检了吗？这款AI工具帮你找出所有UI问题，还顺带修好它！

你有没有过这种感觉——自己做的网站，明明本地跑着挺好看，发到线上或者丢给同事看，就被吐槽”这布局怎么歪了””手机上看不了”？

说实话，Design Review 这件事，之前真的挺费劲。要么靠人肉截图、要么靠用户反馈”你的网站挂了”。等反馈来，黄花菜都凉了。

最近在 Smithery 上翻到一个叫 Web Design Reviewer 的 Skill，用了一阵子，感觉这个问题被它基本解决了。

它能干什么？

简单说，就是给你的网站做一次”体检”——会自动打开页面、截图、遍历多个视口（手机/平板/桌面/大屏），然后按照一套标准化的检查清单，帮你找出：

• 布局问题：元素溢出、重叠、对齐歪了
• 响应式问题：小屏幕布局崩了、触控目标太小
• 可访问性问题：文字和背景对比度不够、没有键盘导航的焦点状态、图片没有 alt 文本
• 视觉一致性问题：字体不统一、颜色跳跃、间距凌乱

找完不算，它还能直接帮你修——根据检测结果定位到源代码文件（CSS / Tailwind / styled-components 都能识别），按照优先级（P1 > P2 > P3）逐个修复，修完再截图验证，直到问题清零。

支持哪些框架？

官方说基本上全覆盖：React / Vue / Angular / Svelte、Next.js / Nuxt / SvelteKit、WordPress / Drupal，以及任何其他 Web 应用。样式方案也支持得很全，Tailwind、SCSS、CSS Modules、styled-components、Emotion 都能自动识别。

输出是什么？

修复完成后会生成一份结构化报告：目标 URL、检测到的框架和样式方案、测试视口、发现了多少问题、修好了多少问题——P1/P2/P3 分级列清楚，修的和没修的都写明白，截图对比也有。发给 PM 或设计师看完全够用。

怎么装？

在 Claude Code 或其他支持的 AI 编程工具里，用 Smithery 安装即可，Smithery 页面有直接的安装命令。

如果你经常要做前端界面、或者团队里没有专职设计师来做 Design Review，这个 Skill 值得备着——它不能取代人的审美，但至少能帮你把那些低级错误在发版前就抓住。

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