before-and-after
为代码PR自动生成前后对比截图，直观展示UI变更。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：before-and-after。 它的用途是：为代码PR自动生成前后对比截图，直观展示UI变更。 完整的 Skill 内容见：https://321skill.com/skills/before-and-after-jamesvclements/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我对比一下功能分支和主分支上商品详情页的UI变化，聚焦在价格展示区域。”，它会自动运行 before-and-after 命令，捕获两个环境指定区域的截图，生成对比图并返回链接。或者说：“在本次PR中，为所有修改过的页面生成移动端视图的前后对比。”，AI会识别相关页面URL，调用该skill批量生成移动端截图并汇总报告。
介绍
before-and-after 是一款专为开发流程设计的工具，它解决了在代码审查或UI迭代中，难以直观、快速对比变更前后页面差异的痛点。通过简单的命令行调用或集成到AI Agent中，它能自动捕获两个URL或本地文件的截图，并将差异直观呈现。
使用方式非常灵活：可以直接在终端输入命令对比两个网页，也可以通过CSS选择器聚焦特定元素，还支持自定义视口大小、输出Markdown表格或上传到自定义图床。无论是本地开发环境还是线上预览分支，它都能轻松应对。
这个工具特别适合前端开发、UI设计师和测试工程师，他们在进行视觉回归测试、UI审查或向团队演示修改效果时，需要一个轻量、自动化的视觉对比方案。对于产品经理和项目经理来说，它也能提供更直观的变更报告。
建议将其作为CI/CD流程的一部分，或在提交PR前手动运行，以确保UI变更符合预期。需要注意的是，对于需要登录或复杂交互的页面，可能需要配合其他工具处理认证状态。默认使用公共图床上传截图，敏感项目建议配置自己的上传服务。
核心特点
核心区别在于其与Git工作流的深度集成，能自动关联PR上下文，并计划支持绕过Vercel预览分支的保护机制进行截图，这是普通截图工具不具备的。同时，它支持混合对比URL和本地图片，并提供了丰富的输出和上传选项，灵活性远超单一功能的截图插件。
注意事项
不适合需要复杂交互（如登录、多步操作）后才能访问的页面截图场景。
常见问题
如何将截图结果自动添加到PR描述中？
使用 `--markdown` 参数，工具会生成Markdown格式的对比表格，可直接复制粘贴到PR描述。
截图可以保存到本地而不上传吗？
可以，使用 `--output ./path` 参数指定本地目录即可保存截图文件。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/before-and-after-jamesvclements/raw/index.md 读取 before-and-after 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/before-and-after-jamesvclements/raw/index.md（查看排版版本）