你的AI现在能替你做设计审查了——还会直接改源码

每次设计师给了一版 UI，你是不是也这样——

截图丢给 AI：「帮我看看哪里有问题」

然后 AI 给你来一段万能废话：「建议优化一下布局」「颜色可以再协调一点」

听完你还是不知道具体改哪里。

Web Design Reviewer 这个 Skill，就是来解决这个问题的。

它不是给你泛泛建议，而是真的打开浏览器、截屏、拿 DOM 结构对照检查清单，一步步把问题找出来，再直接改源码。

它能干什么

简单说：一个会做设计审查的 AI 助手。

触发方式很简单——

「review website design」「check the UI」「fix the layout」「find design problems」

随便一句都行，它就开始干活了。

审查范围分四块：

• 布局问题：元素溢出、重叠、对齐、间距不一、文字被截断
• 响应式问题：小屏幕布局崩了、断点切换不自然、移动端按钮太小
• 可访问性问题：文字对比度不够、键盘导航看不到焦点状态、图片缺 alt
• 视觉一致性：字体混用、颜色不统一、间距忽大忽小

测完还会用优先级矩阵排个序，P1（影响功能的）先修，P2（影响体验的）其次，P3（轻微不协调）最后。

四步工作流

1. 信息收集：确认网站地址，搞清楚用的什么框架（React/Vue/Next.js）和样式方案（CSS/Tailwind/CSS-in-JS）
2. 视觉审查：打开页面截图，抓 DOM 结构，按检查清单逐项过
3. 问题修复：从源码层面改，优先改高优先级问题，每次只改一个然后验证
4. 复验：截修复后的图，对比前后，确认没有引入新问题

全程截图留档，每一步都有记录，改完还能自动生成审查报告。

它怎么配合浏览器自动化

官方推荐用 Playwright MCP，配置一行：

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

也支持 Apify、browser 自动化工具等——只要能截图、能抓 DOM、能导航页面，就能跑。

适用场景

• 设计师给你一版新 UI，你要快速过一遍心里有数
• 接手旧项目，想知道有哪些历史遗留的设计问题
• AI 生成的前端代码，想验证一下视觉效果
• 上线前做一次 Design QA，不用手动逐页点

安装方式

在 Smithery 上直接搜 github/web-design-reviewer，或者：

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

也支持 Claude Code、Cursor、Windsurf 等主流 AI 编程工具。

GitHub：github/awesome-copilot/skills/web-design-reviewer

一句话总结：它把你的 AI 变成了一个有审美、有方法论、还会改源码的设计审查员——不是废话输出器。

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