AI写的代码逻辑完美，但页面就是丑？这个 Skill 给 Claude 装上设计眼睛

你有没有过这种感觉——让 AI 写代码，逻辑完美，但做出来的页面总觉得哪里不对劲？

不是错误，是「看起来廉价」。

Web Design Reviewer 就是来解决这个问题的。

这个 Skill 出自 GitHub 官方 awesome-copilot 仓库，专门给 Claude 装上一双能「看见」设计问题的眼睛。不管你跑的是本地开发服务器、staging 环境还是线上正式站，它都能自动截图、检查 UI、找出毛病——然后直接改源码。

它能检测的范围相当全面：响应式布局有没有破、 accessibility 达标没有、视觉风格是否一致、组件样式有没有走偏。发现问题之后不是只给你报个数字，而是直接动手改源代码。

支持所有主流框架：React/Vue/Angular/Svelte、Next.js/Nuxt/SvelteKit、WordPress/Drupal，以及任何其他 Web 应用。配合 Playwright 做浏览器自动化，截图、页面导航、DOM 信息抓取一条龙。

用法也简单——装好 Skill 之后，跟 Claude 说「review website design」或者「check the UI」，剩下的它自己来。

一个冷知识：
很多 AI 生成的代码，逻辑跑分很高，但 UI 一截图就能看出「AI 味」——间距随意、字体大小不讲究、颜色不协调。这个 Skill 其实在帮 AI 补一块长期被忽视的短板：设计品味。

如果你是独立开发者或者做 side project，这个 Skill 能让你的作品集看起来更 professional。

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