mcpField
C
comparing-branches-visually

comparing-branches-visually

github.com/spencerpauly测试与质量868388 次安装13 周前更新
代码仓库

关于 comparing-branches-visually

通过同时运行两个 Git 分支并截取受影响页面的截图，比较 UI 变更的技能，可用于审查视觉差异并整理报告。

主要功能

  1. 01为分支创建独立 worktree
  2. 02在不同端口运行两个分支服务
  3. 03查找代码变更影响的页面
  4. 04截取变更前后的页面截图
  5. 05报告视觉差异

适用场景

  1. 01合并前审查 UI 变更
  2. 02比较不同分支中的受影响页面
  3. 03为 Pull Request 整理视觉变更摘要

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill comparing-branches-visually

安装后在 Claude Code 中输入/comparing-branches-visually确认已加载。

详细介绍

直观比较分支

创建两条分支之间 UI 变更的前后对比图。

工作流

1. 设置两个工作树

使用 best-of-n-runner 子 Agent 或 Git 工作树，同时运行两条分支：

# Create a worktree for the base branch
git worktree add /tmp/branch-compare-base main

# The current working directory has the feature branch
2. 启动两个服务

在不同端口启动基线分支的服务：

# In the base worktree
cd /tmp/branch-compare-base && PORT=3001 npm run dev

# Current branch is already on the default port (3000)
3. 确定要比较的页面

确定哪些页面受到变更影响：

git diff main --name-only | grep -E '\.(tsx?|jsx?|vue|svelte|css)'

将变更文件映射到对应路由（例如，app/dashboard/page.tsx → /dashboard）。

4. 为两个版本截图

对于每个受影响的页面：

  1. 使用 browser_navigate 导航到 http://localhost:3001/<page>（基线分支）
  2. 使用 browser_take_screenshot 截图 → 保存为“变更前”
  3. 使用 browser_navigate 导航到 http://localhost:3000/<page>（功能分支）
  4. 使用 browser_take_screenshot 截图 → 保存为“变更后”
5. 报告

展示对比：

Visual Diff: feature/redesign-header vs main

/dashboard:
  Before: [screenshot from main]
  After:  [screenshot from feature branch]
  Changes: Header height reduced, nav links repositioned, new avatar dropdown

/settings:
  Before: [screenshot]
  After:  [screenshot]
  Changes: No visual differences detected
6. 清理
# Stop the base branch server
# Remove the worktree
git worktree remove /tmp/branch-compare-base

提示

  • 使用一致的视口尺寸进行测试（1280×800 是不错的默认值）
  • 对于移动优先的变更，也应在 375px 宽度下进行比较
  • 如果应用需要身份验证，请先在两个端口分别登录
  • 在 PR 描述中，这与 screenshotting-changelog 搭配使用效果很好

评论

支持 Markdown