AI 自动找 bug 还帮你改！Web Design Reviewer 让网站设计问题无处可藏

做完一个网站，最让人头疼的是什么？不是写代码，是调样式。间距差两像素、按钮在手机上太小、颜色对比度不够……这些问题 AI 生成代码的时候根本看不出来，非得打开浏览器才能发现。

Web Design Reviewer 就是来解决这个的——让 Agent 自动打开网站、截图、识别视觉问题、定位源码、直接修复。全程不需要你动手。

四步走：发现 → 修 → 再验证

Skill 把整个流程拆成四个阶段：

第一步：信息收集——确认目标 URL、识别用的什么框架（React/Vue/Next.js）、用什么样式方案（Tailwind/CSS Modules/styled-components）。这一步有自动检测逻辑，扫一眼 package.json 和配置文件基本就能判断。

第二步：视觉审查——截图、遍历页面、按清单逐项检查。Layout/响应式/可访问性/视觉一致性四个维度，每类问题标了 Severity（High/Medium/Low）。

第三步：修复——按 P1/P2/P3 优先级来，一次只修一个问题，修完立即验证。Skill 里有一张很实用的「框架修复对照表」：不同样式方案（纯 CSS/Tailwind/CSS Modules/styled-components）对应的源码修改路径，给了具体的文件定位方法。

第四步：回归测试——确认修复没破坏其他页面，响应式布局没退化。最多迭代三轮，超出就交给人来判断。

支持所有主流框架

不管你是纯 HTML/CSS，还是 React/Vue/Angular SPA，还是 Next.js/Nuxt 全栈，甚至 WordPress Drupal，都能用。Style 方案也全覆盖：

• 纯 CSS → 全局或组件 CSS 文件
• SCSS/Sass → SCSS 文件
• Tailwind → className + tailwind.config
• styled-components / Emotion → JS/TS 文件

配合 Playwright MCP 使用

Skill 文档里给了 Playwright MCP 的参考配置，搭配 Browser Use 能力，可以自动完成导航、截图、DOM 读取、控制台错误检测这些操作。如果用其他浏览器自动化工具（Selenium/Puppeteer/Cypress），只要能截图和读 DOM，流程同样适用。

输出也很专业

最终报告包含：目标 URL、检测到的框架/样式方案、测试过的视口（Mobile 375px / Tablet 768px / Desktop 1280px / Wide 1920px）、每个问题的 Severity 等级、修复文件路径、修复前后截图对比。交出去就是一份合格的 Design QA 报告。

121 次安装，来自 GitHub 官方 awesome-copilot 库，属于那种装完 Agent 就多了一个免费设计师的类型。

GitHub 地址 →

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