AI 生成的前端丑哭了？这个 Skill 让它自己给自己挑毛病

AI 生成的前端丑哭了？这个 Skill 让它自己给自己挑毛病

用 AI 写前端，你可能遇到过这个情况：代码能跑，布局也凑合，但一眼看过去——完了，又撞脸了市面上99%的”AI 风”界面。毛玻璃、卡片堆叠、大圆角、渐变按钮，看多了真的审美疲劳。

问题出在哪？不是 AI 不会写代码，是 AI 不知道什么是”好看”。它缺的不是能力，是品味。

最近在 Smithery 上翻到一个开源 Skill，叫 web-design-reviewer，专门解决这件事——让 AI 自己给网站”挑毛病”，还能直接修。

它能做什么？

这个 Skill 本质上是一套系统化的 Web 设计审查流程，装到你的 Agent（Claude Code、Cursor、Copilot 等都支持）里之后，它会：

• 打开网站截图，捕捉布局、间距、颜色、字体等问题
• 自动检测响应式缺陷（手机端会不会乱掉）
• 识别可访问性问题（对比度不足、没有 focus 状态等）
• 找到问题代码位置，直接改源码修复
• 修复后重新截图对比，验证效果

它的审查清单相当专业，涵盖了布局问题、响应式问题、可访问性问题和视觉一致性四大类，每类还有 P1/P2/P3 优先级划分。有点像给 AI 前端请了个24小时在线的设计 QA。

怎么工作的？

核心流程分四步：信息收集 → 视觉审查 → 问题修复 → 验证复查。

审查时会测试四个视口：375px（手机）、768px（平板）、1280px（桌面）和 1920px（大屏），确保各种设备上都不翻车。配合 Playwright MCP 使用效果最佳，能自动截图、导航、分析 DOM 结构。

修复时遵循”最小改动”原则——只动必要的地方，不做大范围重构，避免修一个问题引出三个新 bug。这点对 AI 来说其实挺难得的。

适合谁用？

• 用 AI 生成前端但总觉得差点意思的开发者
• 想让 AI 帮你做设计走查，不用自己盯着屏幕挑问题
• 有大量 AI 生成的活动页、Landing Page 需要批量审查的设计团队

它支持静态站、React/Vue/Angular Svelte、Next.js/Nuxt/SvelteKit、WordPress/Drupal 各种项目，基本覆盖主流技术栈。

安装 & 使用

在 Smithery 上直接搜 github/web-design-reviewer 就能找到，安装后配合支持 Agent Skills 的 IDE 使用。推荐搭配 Playwright MCP，截图 + 导航 + DOM 检索一条龙，设计问题无所遁形。

说实话，现在 AI 生成的前端同质化太严重了——不是不能看，是”没有灵魂”。与其每次手动调样式，不如让 AI 自己学会挑剔自己的审美。这个 Skill 是个好起点。

GitHub 仓库

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