网站哪里不对劲但又说不上来？这个设计Reviewer帮你找出来
你的网站看起来哪里不对劲？说不上来但就是丑
做设计或前端开发的朋友，有没有遇到过这种情况——甲方说”这个页面看起来怪怪的”，但你检查代码又没报错，浏览器控制台干干净净，就是说不上来哪里不对。
这种情况，往往不是功能问题，而是视觉设计细节出了问题：可能是间距不统一、颜色跳脱了品牌色板、字体大小搭配不和谐、或者在小屏幕手机上布局直接崩了。
最近我在 Smithery 上挖到一个非常有意思的 Skill——Web Design Reviewer，专门解决这类”说不上来哪里不对”的设计问题。
它能做什么
这个 Skill 的核心逻辑很清晰：自动化视觉审查 + 源码级修复。
它会遍历你的网站页面，截取截图，分析 DOM 结构，然后对照一份视觉检查清单（布局问题、响应式问题、可访问性问题、视觉一致性）逐项排查。发现问题的同时，直接告诉你问题在源码的哪个位置、应该怎么改。
支持的网站类型非常广：静态页面、React/Vue/Angular/Svelte、Next.js/Nuxt/SvelteKit、WordPress/Drupal，几乎覆盖了主流技术栈。
检查维度
它会从这几个维度给你打分：
- 布局问题：元素溢出、重叠、对齐错误、间距不一致
- 响应式问题：移动端布局崩溃、断点切换不自然、按钮触控区域过小
- 可访问性：文字与背景对比度不足、键盘导航缺少焦点态、图片缺少 alt 文本
- 视觉一致性：字体家族混用、颜色体系不统一、相似元素间距参差
使用方式
只要你的网站已经运行起来（本地开发服务器、测试环境或线上环境都可以），给 Claude 丢一句：
“review website design at http://localhost:3000”
它就会自动开始检查，并给你一份完整的修复报告，包括问题位置、严重程度和修改建议。修完之后还会重新验证，确认没有引入新问题。
实际场景
举几个我想到的实用场景：
做新项目上线前，想让 AI 做一次免费的”设计体检”；设计师交付了 UI稿，开发还原后想有个第二意见；或者接了别人的项目，想快速摸清楚设计债务有哪些。
对于 AI 生成的前端代码，这个 Skill 也特别有用——现在 AI 生成页面功能没问题，但视觉细节（间距、响应式、配色）经常翻车，用这个 Skill 跑一遍能快速定位修复。
总结
Web Design Reviewer 是一个非常实在的设计质量控制工具。它把”设计感”这种感性判断，转化成了可检查、可量化的清单项，让设计和开发协作有了共同语言。
如果你经常需要和网站设计打交道，这个 Skill 值得加到你的 Claude 工具箱里。
GitHub: https://github.com/github/awesome-copilot/tree/main/skills/web-design-reviewer
评论区
登录后可评论。