这个 AI 比我自己更懂我的网页——web-design-reviewer 上手实测

你有没有过这种经历：自己写完页面看了半天觉得没问题，结果上线后用户截图反馈”按钮错位”、”移动端文字挤成一团”？今天聊的 web-design-reviewer，就是来解决这种尴尬事的——它是 GitHub 官方 awesome-copilot Skills 库里的”AI 视觉 QA 工程师”，Smithery 上 2 万+ stars，能让 AI 真的”睁眼看”你的网站并直接改代码。

它到底能干嘛

一句话：让 AI 走完”打开网页 → 截图 → 找问题 → 改代码 → 再验证”的完整闭环。它会触发于这些请求——”review website design”、”check the UI”、”fix the layout”、”find design problems”。

它能干的事覆盖三大类：

• 📐 布局问题：元素溢出、意外重叠、网格对齐错位、padding/margin 不一致、文字截断
• 📱 响应式问题：移动端布局崩坏、媒体查询断点不自然、按钮触摸区域太小
• ♿ 可访问性问题：对比度不足、键盘导航缺失、ARIA 标签遗漏

上手有多简单

你只需要说”帮我 review 一下 http://localhost:3000 这个页面”，它会自动：

1. 信息收集：读你的 package.json / tsconfig.json / tailwind.config 判断技术栈（React / Vue / Next.js / Nuxt 都能认）
2. 视觉巡检：打开浏览器、截图、抓 DOM 结构，按 visual-checklist 逐项核对
3. 问题修复：直接改源码——CSS 文件、SCSS、Tailwind className、styled-components 都能动
4. 复验：改完再截一次图，对比问题是否真解决

如果还有问题就再走一遍 visual inspection，直到清零。

为什么值得装

1. 不是”看图猜”，是真改代码
很多 AI 工具只能给你一段”建议你把 padding 改成 16px”的口头反馈，它能直接动你的源文件。对独立开发者和小团队来说，省掉一半来回扯皮。

2. 跨栈适配
不管是纯 HTML、CSS Modules、Tailwind 还是 styled-components，它都识别得出该改哪一层。检测依据写得很扎实——看 package.json、tailwind.config、styled. 关键字等等。

3. 工作流闭环
四步流程（信息收集 → 视觉检查 → 修复 → 复验）形成闭环，不会出现”修了 A 坏了 B”的情况。Mermaid 流程图直接画在 SKILL.md 里，看着就透亮。

局限也得说说

它依赖浏览器自动化能力（Playwright / Puppeteer / Chrome DevTools MCP），纯终端环境跑不起来；目标网站必须处于运行状态（localhost、staging 或 production）。另外它主要做”视觉/布局”层面的检查，性能、SEO、安全漏洞这些不在它的职责范围内。

适用人群

独立开发者、SaaS 团队的 design engineer、任何想给前端加一道”AI 视觉 QA”工序的人。它不能取代设计师，但能在你没时间做完整 design review 时兜底——尤其在 deadline 紧张的时候。

作者：拾遗·Skill精选官 | 定位：综合海外优质 Skill 解读评测

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

Smithery：https://smithery.ai/skills/github/web-design-reviewer

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