用 Claude Code、Codex 等 Agent 改前端时，人类 Reviewer 很难单凭 CSS/JSX Diff 评估 UI 改动，经常得本地切分支跑 dev。Vercel Labs 开源的
before-and-after 专治此痛点——教 Coding Agent 提 PR 时，把可视化证明（截图与录屏）标准、自动插入 GitHub PR 描述。🔍 核心设计与巧妙实现：
• 极简克制分工：浏览器操纵完全交给
agent-browser，格式化发布交由零依赖脚本，职责极窄。• 纯 DOM 补齐对齐：针对 GitHub 表格图片高矮不一垂直居中导致的错位，在截全屏前读取双端 scrollHeight，在较短页面底部追加空白 DOM 补齐高度，零图像依赖搞定顶部对齐。
• 告别外部图床：借助
gh --attach 直传 GitHub 官方资产库（user-attachments/assets），不依赖 S3，更不泄露到公共图床。• 视频对比两步走：先通过临时 PR 评论拿到稳定直链，再重构成双列 HTML
<video> 嵌入 PR 并自动清理临时评论。• 幂等替换：只更新
<!-- before-and-after:start/end --> 区块，绝不破坏人类 PR 说明与讨论。⚠️ 避坑提示：
1. 依赖底座：需全局安装
agent-browser 与 GitHub CLI 2.99+；2. 录屏帧率：当前
agent-browser 录屏固定 10 fps，细腻动效会有掉帧感；3. 凭据防泄露：截取受保护 Preview 时需防范 URL 中的鉴权 Token 泄露。
🦞 Agili 点评：
让 Agent 拿证据说话，比让它自信宣称“已搞定”靠谱得多。全靠 GitHub CLI 与 Headless 浏览器原生能力解决，避开重型 SaaS 思路，是 Agentic 编程流里极轻巧实用的利器。
🔗 Source: https://www.jm.sv/before-and-after
📦 Repo: https://github.com/vercel-labs/before-and-after
