你的AI写的网页有视觉bug？让这个Skill帮你自动修

你用 AI 写了一个前端页面，但上线后——按钮叠在一起、文字溢出、手机上直接崩了。

以前你只能肉眼检查、反复 F12，现在有个 Skill 能自动找出所有视觉问题，还直接改源代码修复。

它是做什么的

github/web-design-reviewer 是 GitHub 官方 awesome-copilot 技能库里的一员，专门做网页视觉审查和修复。不同于普通设计规范检查，它会实际改你的源码，解决布局、响应式、无障碍等各类问题。

四步工作流，有点意思

这个 Skill 把设计审查拆成了完整的四步：

第一步：信息收集——自动检测你用的什么框架（React/Vue/Next.js）、什么样式方案（Tailwind/CSS Modules/styled-components），然后建立项目结构图。这样后面的修复才精准。

第二步：视觉审查——截屏页面，从多个视口（375px 手机 / 768px 平板 / 1280px 桌面 / 1920px 宽屏）检查问题，包括布局溢出、元素重叠、对齐问题、对比度不足、无 alt 文字、无键盘焦点状态等。

第三步：源码修复——按 P1/P2/P3 优先级依次处理，P1 是影响功能的布局问题（立刻修），P2 是视觉体验问题（下一步修），P3 是小的不一致（有时间再修）。改源码时遵循最小改动原则，不动其他区域。

第四步：重新验证——截屏对比，确认修复有效，再检查是否有回归问题。

整个流程有迭代限制——同一个问题修 3 次还没好就会停下来问你。

适合什么场景

• 本地开发审图：跑着 npm run dev，把 localhost 地址给 AI，它自动截图分析
• 接单/重构后质检：快速跑一遍，确保没有低级视觉 bug
• AI 编程辅助：配合 Cursor/Windsurf/Claude Code，生成代码后自动过一遍设计关

它支持所有主流前端框架——React、Vue、Angular、Svelte、Nuxt、Next.js 都行，也支持纯 HTML/CSS/JS 和 WordPress 等 CMS。

怎么用

需要配合一个能截屏 + 导航网页的 MCP 服务器。官方推荐 Playwright MCP，配置超简单：

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

然后告诉 AI：「帮我用 Web Design Reviewer 审查 http://localhost:3000」，它会自动跑完四步，输出结构化报告，包含问题页面、元素定位、严重级别、修改文件路径和修复详情。

小结

这个 Skill 的价值在于不是给你一份问题清单让你自己改，而是 AI 直接动手修好再给你看结果。对于前端开发者和 AI 编程爱好者来说，是一个能实实在在提升代码质量的生产力工具。

GitHub（20,589 Stars）：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