pr-screenshot-docs

PR 截图文档

创建拉取请求时，使用前后对比截图记录 UI 变更的指南。

何时使用此技能

• 创建包含前端／UI 修改的 PR
• 为代码审查记录视觉变更
• 构建设计演进的视觉记录
• 无需运行应用即可进行异步设计审查

截图工作流

1. 开始修改之前

在实施 UI 修改前，截取当前状态：

1. browser_resize(width: 320, height: 568)  # Mobile-first
2. browser_navigate to the target page
3. browser_snapshot to identify elements
4. browser_take_screenshot(element: "Target component", ref: "E123")

保存截图或记下截图位置，以便稍后进行比较。

2. 实施修改之后

修改完成后，截取相同视图：

1. Refresh or navigate to the updated page
2. browser_snapshot to get updated refs
3. browser_take_screenshot(element: "Target component", ref: "E123")

3. 上传截图（可选）

如需在 PR 描述中使用持久链接，请将图片上传到图片托管服务：

# Using curl with 0x0.st (ephemeral hosting)
curl -F '[email protected]' https://0x0.st

# Or use project-specific image storage

注意： 0x0.st 的 URL 会过期。如需永久保存记录，请在 PR 描述中使用 GitHub 的拖放图片上传功能，或使用项目文档存储。

PR 描述模板

在 PR 描述中加入视觉对比部分：

## Visual Changes

| Before | After |
|--------|-------|
| ![Before](url-or-path) | ![After](url-or-path) |

### What Changed
- [Specific visual change 1]
- [Specific visual change 2]

视口建议

根据要记录的内容选择视口大小：

目标	宽度	高度	使用场景
手机	320	568	移动优先的响应式布局
平板	768	1024	平板布局
桌面	1280	800	标准桌面布局
宽屏	1440	900	宽屏桌面布局

文档默认使用手机尺寸（320px）——如果在手机上显示效果良好，通常也能很好地适配更大的屏幕。

最佳实践

截图策略

• 聚焦于发生变更的组件——除非布局发生变化，否则不要截取整个页面
• 使用一致的视口——前后截图使用相同尺寸
• 截取交互状态——在相关时记录悬停、聚焦、激活状态
• 包含错误状态——如果修改了错误处理 UI

文档质量

• 描述变更内容——不要让审查者猜测
• 说明变更原因——将视觉变更与用户收益关联起来
• 注明无障碍情况——如适用，请说明对比度和焦点指示器

不应截图的情况

• 不影响 UI 的纯后端变更
• 不涉及视觉变化的代码重构
• 仅测试相关的变更
• 配置更新

与 PR 工作流集成

此技能可配合 /create-pr 命令使用。创建包含 UI 变更的 PR 前：

1. 截取变更前的截图（如果尚未截取）
2. 实施变更
3. 截取变更后的截图
4. 在 PR 描述中加入对比
5. 运行 create-pr 命令

PR 部分内容示例

## Visual Changes

| Before | After |
|--------|-------|
| ![Before - Button styling](./docs/screenshots/button-before.png) | ![After - Button styling](./docs/screenshots/button-after.png) |

### Changes Made
- Increased button padding from 8px to 12px for better touch targets
- Added subtle shadow for depth
- Improved contrast ratio from 3.5:1 to 4.8:1 (now WCAG AA compliant)

### Tested Viewports
- [x] Mobile (320px)
- [x] Tablet (768px)
- [x] Desktop (1280px)

相关工具

• visual-validator Agent——用于变更后的严格视觉 QA
• ui-ux-designer Agent——用于迭代式设计优化