以 skill 自身的术语
Web Design Reviewer 通过浏览器自动化工具驱动运行中的网站，对其进行视觉检查，并在源代码中修复发现的问题。它覆盖静态网站、基于 React、Vue、Angular 或 Svelte 的 SPA、Next.js 和 Nuxt 等全栈框架、WordPress 和 Drupal 等 CMS 平台，以及其他任何 Web 应用。
该工作流分为四个阶段：收集上下文并自动检测框架与样式方案，依照视觉检查清单检查页面，按 P1 到 P3 的优先级修复问题，然后重新验证并循环。发现的问题按布局、响应式、可访问性和视觉一致性分组，每项均标有严重程度。修复遵循最小改动原则，并以一份 markdown 审查报告结束。
它产出什么
- 一份题为 Web Design Review Results 的 markdown 审查结果报告。
- 一张汇总表，涵盖目标 URL、检测到的框架、样式方案、测试的视口、检测到的问题和已修复的问题。
- 逐项问题记录，包含优先级、页面、元素、描述、修复文件路径、修复详情以及修复前后截图。
- 未修复问题部分，说明每个问题未处理的原因，并给出用户建议采取的行动，此外还包含总体建议。
工作方式
- 01收集上下文并检测技术栈
如果未提供 URL，它会询问 URL，然后尝试从 package.json、tsconfig.json、tailwind.config、next.config、vite.config 和 nuxt.config 等工作区文件中自动检测，并询问哪些页面属于此次检查范围。
- 02导航并抓取
它打开目标 URL，拍摄截图，尽可能获取 DOM 结构或快照，并通过网站导航遍历更多页面。
- 03依照视觉检查清单进行检查
通过参考检查清单逐项排查布局、响应式、无障碍和视觉一致性问题，修复后再次使用该清单进行复核。
- 04定位每个问题的来源
通过在代码库中搜索类名或 ID、根据元素文本或结构查找对应组件，并按样式、组件和页面文件的模式进行过滤，将问题元素追溯到源头。
- 05修复，然后重新验证
依据框架特定的指导应用修复，然后重新加载浏览器或等待开发服务器的 HMR 生效，对修复区域重新截图，并对比修复前后的效果。