Web Design Reviewer：让 AI 自动给你做设计走查和修复

你的网站看起来哪里不对？让 AI 自动给你找出来

做前端开发最头疼的事情是什么？不是在写代码，是在「评审代码」——明明页面跑起来了，但总觉得哪里怪怪的：间距不统一、颜色跳了、响应式崩了……肉眼扫来扫去，就是说不出具体哪里有问题。

最近我在 Smithery 上发现了一个 Skill，叫 Web Design Reviewer（GitHub 仓库），专门解决这个痛点。它是 GitHub 官方 awesome-copilot 项目下的一个 Skill，Star 数高达 20,589，定位是「让 AI 自动做设计走查和修复」。

它能做什么

简单来说，你给它一个网站地址（本地或线上都行），它会：

• 自动检测你用的框架（React/Vue/Next.js/Tailwind 等）
• 在多个视口下截图（手机、平板、桌面、带鱼屏）
• 按照一套结构化清单检查：布局溢出、元素重叠、响应式断裂、对比度不足、缺失 alt 文字、无键盘焦点状态等
• 找到问题后直接定位到源代码文件，给出最小改动修复方案
• 修复后重新截图对比，确认问题消除

整个流程是：信息收集 → 视觉检查 → 问题修复 → 复验，循环迭代直到问题清零。

适合什么场景

这个 Skill 特别适合：

• 快速审查新做的页面，把设计问题消灭在 commit 之前
• 接入了 AI coding tool 的团队，让 AI 边写边审，不需要人工介入
• 排查老项目的样式债务，按优先级逐个修复
• 做响应式兼容测试，一次跑完所有主流分辨率

怎么安装使用

在 Claude Code、Cursor、Windsurf 等主流 AI coding 工具里都可以直接装：

npx -y skills add https://smithery.ai/skills/github/web-design-reviewer

它依赖浏览器自动化能力，官方推荐搭配 Playwright MCP 使用（配置简单，一行 JSON 就搞定）。

一句话评价

与其让设计师或 PM 对着页面挑刺，不如让 AI 先跑一遍设计清单，把高概率的「低级错误」先修了，节省下来的时间用来做真正需要审美判断的事情。这个 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