网页视觉、布局与易用性检查

前端页面的视觉问题常常在交付后才暴露：内容溢出容器、移动端按钮点不到、文字与背景对比度不足导致读不清。人工排查要反复切窗口、截图、翻源码，成本高且容易漏项。这个技能把「看页面」和「改代码」串成一条可重复的流程，在浏览器自动化与源码编辑之间建立反馈闭环。

解决的问题

• 布局缺陷：元素溢出、非预期重叠、栅格与 flex 对齐偏移、padding/margin 间距不一致、长文本被裁切。
• 响应式问题：小屏布局崩坏、断点切换生硬、触摸目标过小。
• 可访问性缺陷：文字与背景对比度不足、键盘导航缺少 :focus 状态、图片缺 alt。
• 视觉一致性：字族混用、品牌色不统一、同类元素间距参差。

核心能力

技能依赖三组底层能力：网页导航、截图捕获、图像分析为必需项；DOM 结构获取为推荐项；一旦要落地修复，还必须具备工作区内的文件读写与代码搜索能力。

工作方式

1. 信息收集：确认目标 URL；若要改源码，则先了解框架、样式方案、源码位置与审查范围，并可从工作区自动探测项目结构。
2. 视觉检查：遍历页面与导航链路，截图并取 DOM 快照；在 375px / 768px / 1280px / 1920px 四档视口下分别验证。
3. 问题修复：按「元素 → 选择器 → 源文件」逐层定位，支持纯 CSS、SCSS、CSS Modules、Tailwind、styled-components、Emotion 等方案；遵循最小改动、尊重既有风格、避免破坏性变更，并在必要时补充注释。
4. 回归验证：重载页面或等待 HMR，对比修复前后截图，确认未影响其它区域；同一问题超过 3 次仍未解决时向用户求助。

适用边界

• 被检查站点必须处于运行状态（本地服务、预发，或生产环境的只读审查）。
• 修复源码要求项目位于工作区内；仅有 URL 时只能完成检查与报告。
• 样式文件缺失、构建期生成 CSS、CSS-in-JS 运行时注入等场景需要额外排查。
• 参考实现基于 Playwright MCP，Selenium、Puppeteer、Cypress、WebDriver BiDi 亦可承载同等流程。