screenshotting-changelog

截图变更日志

在准备包含视觉／UI 变更的拉取请求时使用此技能。截取变更前后的截图，创建视觉变更日志，方便评审者快速浏览。

步骤

1. 截取“变更前”状态 — 在进行变更之前（或在基础分支上），启动开发服务器并截取受影响页面的屏幕截图：

   git stash  # or checkout the base branch
   

   启动开发服务器，然后：

   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  # or checkout the feature branch
   

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

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）宽度下截取屏幕截图。
• 深色模式对比：如果应用支持深色模式切换，请同时截取两种主题。
• 交互状态：截取悬停状态、打开的模态框、已填写的表单和错误状态。

备注

• 截图会保存到工作区。你可以在 Markdown 中引用这些截图，也可以将其上传到 PR。
• 如需截取组件级别的屏幕截图，请前往 Storybook URL 或特定组件路由。
• 这对设计工作量较大的 PR 最有价值——仅涉及后端的变更可跳过此步骤。