交付前多一双眼睛：AI 网页设计审查 Skill 来了

说实话，前端项目交付前你有没有这样的经历——自己看自己的代码怎么看都顺眼，结果甲方打开手机一用，布局全乱了，按钮小得戳不到，文字直接被截掉一半？

web-design-reviewer 就是来解决这个问题的。

这是 GitHub 官方 awesome-copilot 项目里的一个 Skill，专门给 AI Agent 用来看网页”长什么样”——不是读代码，是真真切切地看界面，然后告诉你哪里有问题，甚至帮你修。

它能干什么？

简单说，它给 AI Agent 装上了一双”眼睛”。

触发词很自然：说”review website design”、”check the UI”、”fix the layout”、”find design problems”，它就会自动开始工作。

它检查的范围很全面：

• 布局问题：元素溢出、重叠、对齐不准、间距不一致、文字被截断
• 响应式问题：移动端适配差、 breakpoint 切换不自然、移动端按钮太小
• 可访问性问题：文字对比度不够、无键盘导航焦点状态、图片缺少 alt 文本
• 视觉一致性：字体不统一、颜色不规范、相似元素间距混乱

它不只是”发现问题”，还会告诉你具体在哪个文件的哪一行，以及怎么修。

支持所有主流框架

不管你的项目用的是 React/Vue/Angular/Svelte，还是 Next.js/Nuxt/SvelteKit，甚至纯 HTML/CSS 或者 WordPress，它都能处理。

它会自动识别你用的是什么框架、用什么样式方案（纯 CSS / SCSS / Tailwind / CSS-in-JS），然后精准定位到对应的源文件去改。

工作流程很清晰

四步走：

1. 信息收集 — 确认要审查的 URL、了解项目结构
2. 视觉检查 — 截图、遍历页面、用检查清单逐项过
3. 修复问题 — 按优先级（P1/P2/P3）逐个修复，最小改动原则
4. 复验 — 修复后再截图对比，确保没引入新问题

它推荐搭配 Playwright MCP 使用，这样 AI 能直接控制浏览器截图、导航、分析 DOM。

适合谁用？

• 前端开发者：交付前想有个”第二双眼睛”帮你过一遍
• 产品经理：想快速检查原型或上线前站点的 UI 问题
• AI 应用开发者：想让 Agent 自动帮你维护界面质量
• 独立开发者：没有专职设计师，想自己把控界面水准

怎么用？

在支持 Skills 的 AI 客户端（如 Claude Code、Codex、Cursor 等）里，当你想审查网站时，直接说：

“Review the UI of my site at http://localhost:3000”

它就会自动按这个 Skill 的流程开始工作。

GitHub 仓库里还有两个参考文件：references/visual-checklist.md 和 references/framework-fixes.md，详细列出了检查项和针对不同框架的修复指南。

👉 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