screenshotting-changelog

用途

当准备一个包含视觉或界面改动的 Pull Request 时，可使用本技能。它通过截取改动前后的界面对比截图，生成一份可视化变更日志，让评审者无需在本地运行应用即可快速浏览改动内容。

主要能力

• 捕获改动前的界面状态：在改动前（或基于基线分支）启动开发服务器，对受影响的页面截图。
• 捕获改动后的界面状态：切换到功能分支并应用改动后，对相同页面再次截图。
• 生成可视化变更日志：以 Markdown 形式描述视觉变化，并嵌入前后对比截图。
• 将变更日志放入 PR 描述，供评审者直接查看。

使用方式

1. 捕获改动前状态

在做出改动之前（或基于基线分支），启动开发服务器并截图受影响的页面：

git stash  # 或切换到基线分支

启动开发服务器，然后：

Tool: browser_navigate
Arguments: { "url": "http://localhost:3000/affected-page", "take_screenshot_afterwards": true }

Tool: browser_take_screenshot
Arguments: { "fullPage": true, "filename": "before-homepage.png" }

对每个受影响的页面或组件状态重复上述操作。

2. 切换到功能分支

应用改动：

git stash pop  # 或切换到功能分支

等待开发服务器热重载（或重启服务器）。

3. 捕获改动后状态

对相同页面截图：

Tool: browser_take_screenshot
Arguments: { "fullPage": true, "filename": "after-homepage.png" }

4. 生成变更日志

创建描述视觉变化的摘要：

## Visual Changes

### Homepage
**Before:**
![before](before-homepage.png)

**After:**
![after](after-homepage.png)

Changes: Updated hero section layout, new CTA button color, added testimonials section.

5. 放入 PR 描述

将可视化变更日志粘贴到 PR 正文中，使评审者无需在本地运行应用即可一目了然地看到改动。

变体用法

• 响应式对比：使用 browser_resize 在移动端（375px）、平板（768px）和桌面端（1280px）宽度下截图。
• 深色模式对比：如果应用有深色模式切换，可同时捕获两种主题。
• 交互状态：捕获悬停状态、打开的模态框、已填写的表单以及错误状态。

适用场景

• 包含视觉或界面改动的 PR，尤其是设计改动较多的 PR。
• 需要向评审者直观展示前后差异的场景。

限制与注意事项

• 截图保存在工作区中，可在 Markdown 中引用或上传到 PR。
• 如需组件级截图，可导航到 Storybook URL 或特定组件路由。
• 对仅涉及后端的改动，建议跳过本技能。