用途
本技能提供一套基于截图的 UI 视觉验证工作流，用于加速代码审查并尽早发现响应式设计问题。它适用于以下场景：进行任何 UI 变更（组件、样式、布局）、实现响应式设计、创建包含视觉变更的 PR、希望在不要求审查者本地运行代码的情况下展示 UI 行为、需要记录缺陷修复前后的视觉状态。
主要能力
- 要求为任何改变 UI 的 PR 捕获三种视口尺寸的截图：桌面（1920x1080）、平板（768x1024）、移动端（375x667）。
- 支持捕获全页面截图、关键组件特写、修复/重构前后的对比，以及不同交互状态（默认、悬停、激活、错误、加载）。
- 提供浏览器 DevTools（Chrome/Edge、Firefox）和 CLI 工具（Playwright、Puppeteer）的截图捕获方法。
- 提供 PR 描述模板，用于记录视觉变更、响应式设计说明和无障碍检查项。
- 支持自动化截图测试，包括 Playwright Test 视觉回归测试和 Storybook + Chromatic 组件级视觉测试。
- 提供 CI 集成示例（GitHub Actions），可自动捕获并上传截图。
- 包含截图检查清单、常见问题解决方案（截图过大、动态内容变化、字体渲染差异）以及截图组织与命名规范。
使用方式
- 在提交包含 UI 变更的 PR 前，使用浏览器 DevTools 或 CLI 工具捕获桌面、平板、移动端三种视口截图。
- 对于缺陷修复，额外捕获修复前后的对比截图。
- 将截图上传至 PR，并使用提供的 PR 描述模板记录关键变更、响应式行为和无障碍说明。
- 可选：使用 Playwright Test 编写视觉回归测试，或通过 Storybook + Chromatic 进行组件级视觉测试。
- 可选：在 CI（如 GitHub Actions）中集成截图捕获步骤，自动生成并上传截图工件。
适用场景
- 任何涉及 UI 的代码变更（组件、样式、布局）。
- 响应式设计的实现与验证。
- 创建包含视觉变更的拉取请求。
- 需要向审查者展示 UI 行为而无需其本地运行代码。
- 记录缺陷修复前后的视觉状态。
限制
- 截图验证不能替代代码审查，仍需进行代码审查。
- 截图可能包含敏感数据（PII、密钥等），上传前需检查。
- 不同操作系统可能导致字体渲染差异，影响截图对比，建议使用 Docker 等一致环境。
- 动态内容（时间戳、随机数据）可能导致截图不一致，需要模拟数据或冻结时间。
- 大尺寸截图可能影响 PR 加载速度，需要压缩。
- 具体工具版本、安装命令和配置细节请参考官方文档，本技能不提供额外保证。