AI 写完前端代码后，让它自己 review 设计问题——GitHub 官方 Skill 体验

做过前端开发的同学都知道，最崩溃的时刻不是写代码，而是——

“这按钮怎么歪了？”
“这个间距怎么跟设计稿差这么多？”
“手机上看完全乱了，谁改的？”

然后开始一行行翻 CSS，调半天也不知道哪里的问题。

今天推荐一个 GitHub 官方出品的 Skill——Web Design Reviewer，专门解决”AI 写完代码后设计对不对”这个高频痛点。

它能做什么？

一句话：让 AI 自动审查你网站的视觉问题，并直接修复源码。

支持任意网站类型：
– 静态站点（HTML/CSS/JS）
– React / Vue / Angular / Svelte
– Next.js / Nuxt / SvelteKit
– WordPress / Drupal
– 任何其他 Web 应用

核心能力一览：

1. 多端响应式测试
自动在 4 个主流视口下截图检查：
– Mobile（375px，iPhone 标准）
– Tablet（768px，iPad）
– Desktop（1280px，标准 PC）
– Wide（1920px，大屏显示器）

2. 问题自动分级
按严重程度分 P1/P2/P3：
– P1：立即修（布局问题影响功能）
– P2：接着修（视觉体验问题）
– P3：尽量修（轻微不一致）

3. 自动识别样式技术栈
写修复代码前，AI 会先自动检测你用的是：
– 纯 CSS / SCSS
– Tailwind CSS
– CSS Modules
– styled-components / Emotion
– CSS-in-JS

然后精准改对应文件，不乱动其他代码。

4. 截图对比修复前后
每次修完自动截图，让你一眼看出 before/after。

怎么用？

需要一个能截图的浏览器自动化工具，推荐 Playwright MCP：

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

启动后，直接跟 AI 说：

“帮我 review 一下 http://localhost:3000 的设计问题”

AI 会自动：截图 → 识别问题 → 定位源码 → 修复 → 验证。

什么场景最有用？

• AI 生成代码后的视觉检查——再也不用手工对照设计稿
• 改完 CSS 后多端回归测试——确保手机端没被破坏
• 接手老项目快速了解设计问题——AI 自动出报告，比人工审计快 10 倍
• CI/CD 流水线集成——自动化的设计质量门禁

实际效果

看它输出的报告格式——直接给你 markdown 表格，清楚列出了：
– 问题页面和元素
– 严重程度
– 修复了哪个文件的哪一行
– before/after 截图

完全不需要你手动去网页上一个个找，AI 全包了。

如果你经常用 AI 写前端代码，这个 Skill 绝对是必备辅助——把设计问题从”人肉找”变成”AI 自动找 + 自动修”。

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