你的AI网站设计到底过不过关？这个GitHub官方Skill给你一双设计眼睛

做AI编程这么久，你的网站设计到底过不过关？

用GitHub Copilot写代码，你可能已经轻车熟路了。但有没有想过——AI生成的网页到底好不好看？布局有没有问题？手机端显示正常吗？

这个skill就是来解决这个问题的。

它能干什么？

Web Design Reviewer 是 GitHub 官方出品的一个 Copilot Skill，专门给AI编程 Agent 装上一双”设计眼睛”。它的工作流程很清晰：

• 第一步：采集信息 — 访问目标网站，截图，抓DOM结构
• 第二步：视觉审查 — 对比桌面端(1280px)、平板(768px)、手机(375px)、大屏(1920px)四个尺寸，检测布局溢出、元素重叠、无障碍对比度、响应式断点等各类问题
• 第三步：定位修复 — 找到问题对应的源文件（支持纯CSS/SCSS/Tailwind/CSS Modules/styled-components等各类样式方案），直接改代码
• 第四步：复验 — 修复后再截图对比，确认问题消失

它强在哪？

传统的人工设计走查，每次只能看一个尺寸、一个浏览器。这个skill可以一次性把四个主流视口全扫一遍，还能精确到具体是哪个CSS选择器出了问题。

而且它兼容多种主流前端框架——React/Vue/Angular/Svelte，Next.js/Nuxt/SvelteKit，甚至WordPress。样式方案也通吃，不管你是Tailwind党还是CSS Modules党，都能精准定位文件。

底层推荐搭配 Playwright MCP 使用，提供截图、DOM读取、浏览器resize等全套能力。当然如果你用Selenium/Puppeteer/Cypress，workflow也完全一样——Smithery页面甚至给出了各工具的能力对照表。

适合谁用？

如果你经常用AI生成网页前端，这个skill能帮你省掉大量”肉眼看设计稿”的时间。尤其是做响应式排查和可访问性检查的时候，AI比人眼更不会漏掉低对比度这类细节。

安装方式很简单，Smithery上直接点Download skill，或者在Copilot支持的IDE里搜索”web-design-reviewer”即可。

GitHub仓库

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