before-and-after
自动为代码PR生成前后对比截图的工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：before-and-after。 它的用途是：自动为代码PR生成前后对比截图的工具 完整的 Skill 内容见：https://321skill.com/skills/before-and-after/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘帮我为当前功能分支和主分支的首页生成一个移动端视图的对比图，并输出Markdown格式。’ 它会调用before-and-after技能，自动捕获两个环境下指定页面的截图，生成并排对比图，最后提供一个可直接复制到PR描述中的Markdown表格链接。
介绍
Before-and-after 是一个专为开发流程设计的自动化工具，它解决了在代码审查或功能演示时，难以直观展示界面变化的痛点。当开发者提交Pull Request后，该工具能自动捕获相关网页或应用在修改前后的视觉状态，并生成对比截图，让代码变更带来的视觉效果一目了然。
使用方式非常灵活，既可作为命令行工具直接调用，也能作为AI Agent的Skill集成到自动化工作流中。用户只需提供两个URL（或本地文件路径），工具便会自动截图、生成对比图，并可选择上传到图床或输出为Markdown表格，方便直接粘贴到PR描述中。
它非常适合前端开发者、UI/UX设计师、产品经理以及任何需要频繁进行视觉回归测试或界面审查的团队。在敏捷开发、设计系统更新或A/B测试结果汇报等场景下，能显著提升沟通效率和审查准确性。
与同类网页截图或对比工具相比，before-and-after的核心优势在于其与开发工作流的深度集成。它不仅能通过gh命令自动关联GitHub PR上下文，未来还将支持与Vercel预览部署联动，绕过保护机制直接对预览环境截图。这种“为PR而生”的设计理念，使其从单纯的截图工具升格为开发协作环节中的自动化助手。
核心特点
深度集成GitHub PR和Vercel部署流程，能自动识别分支关联的PR并对预览环境进行截图，而不仅仅是独立的网页截图对比工具。
注意事项
不适合需要复杂交互（如登录、多步操作）后才能截图的动态页面，主要针对静态或已部署页面的视觉对比。
常见问题
这个工具能对比本地开发环境和线上环境吗？
可以，支持直接对比 localhost 与任何线上URL。
生成的图片存储在哪里？安全吗？
默认上传到公共图床0x0.st，敏感内容建议配置自定义上传处理器（如S3）。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/before-and-after/raw/index.md 读取 before-and-after 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/before-and-after/raw/index.md（查看排版版本）