Back to Details

before-and-after

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Before-After Screenshot Skill

Before-After 截图 Skill

Package: 
@vercel/before-and-after
Never use 
before-and-after
(wrong package).
包： 
@vercel/before-and-after
切勿使用
before-and-after
（错误的包）。

Agent Behavior Rules

Agent 行为规则

DO NOT:
  • Switch git branches, stash changes, start dev servers, or assume what "before" is
  • Use 
    --full
    unless user explicitly asks for full page / full scroll capture
DO:
  • Use 
    --markdown
    when user wants PR integration or markdown output
  • Use 
    --mobile
    / 
    --tablet
    if user mentions phone, mobile, tablet, responsive, etc.
  • Assume current state is After
  • If user provides only one URL or says "PR screenshots" without URLs, ASK: "What URL should I use for the 'before' state? (production URL, preview deployment, or another local port)"
禁止操作：
  • 切换git分支、暂存变更、启动开发服务器，或自行假设“之前”的状态
  • 除非用户明确要求全屏/全滚动捕获，否则不要使用
    --full
    参数
建议操作：
  • 当用户需要集成PR或输出markdown格式时，使用
    --markdown
    参数
  • 如果用户提及手机、移动端、平板、响应式等，使用
    --mobile
    / 
    --tablet
    参数
  • 默认当前状态为之后的状态
  • 如果用户仅提供一个URL或只说“PR截图”但未提供URL，询问用户：“‘之前’状态应使用哪个URL？（生产环境URL、预览部署地址或其他本地端口）”

Execution Order (MUST follow)

执行顺序（必须遵守）

  1. Pre-flight — 
    which before-and-after || npm install -g @vercel/before-and-after
  2. Protection check — if 
    .vercel.app
    URL: 
    curl -s -o /dev/null -w "%{http_code}" "<url>"
    (401/403 = protected)
  3. Capture — 
    before-and-after "<before-url>" "<after-url>"
  4. Upload — 
    ./scripts/upload-and-copy.sh <before.png> <after.png> --markdown
  5. PR integration — optionally 
    gh pr edit
    to append markdown
Never skip steps 1-2.
  1. 预检查 — 
    which before-and-after || npm install -g @vercel/before-and-after
  2. 权限校验 — 如果是
    .vercel.app
    地址：执行
    curl -s -o /dev/null -w "%{http_code}" "<url>"
    （返回401/403表示受保护）
  3. 捕获截图 — 
    before-and-after "<before-url>" "<after-url>"
  4. 上传截图 — 
    ./scripts/upload-and-copy.sh <before.png> <after.png> --markdown
  5. PR集成 — 可选执行
    gh pr edit
    将markdown内容追加到PR中
绝对不能跳过步骤1和2。

Quick Reference

快速参考

bash
undefined
bash
undefined

Basic usage

基础用法

before-and-after <before-url> <after-url>
before-and-after <before-url> <after-url>

With selector

指定元素选择器

before-and-after url1 url2 ".hero-section"
before-and-after url1 url2 ".hero-section"

Different selectors for each

为前后状态指定不同选择器

before-and-after url1 url2 ".old-card" ".new-card"
before-and-after url1 url2 ".old-card" ".new-card"

Viewports

指定视口

before-and-after url1 url2 --mobile # 375x812 before-and-after url1 url2 --tablet # 768x1024 before-and-after url1 url2 --full # full scroll
before-and-after url1 url2 --mobile # 375x812 before-and-after url1 url2 --tablet # 768x1024 before-and-after url1 url2 --full # 全页面滚动捕获

From existing images

基于已有图片对比

before-and-after before.png after.png --markdown
before-and-after before.png after.png --markdown

Via npx (use full package name!)

通过npx使用（必须使用完整包名！）

npx @vercel/before-and-after url1 url2

| Flag | Description |
|------|-------------|
| `-m, --mobile` | Mobile viewport (375x812) |
| `-t, --tablet` | Tablet viewport (768x1024) |
| `--size <WxH>` | Custom viewport |
| `-f, --full` | Full scrollable page |
| `-s, --selector` | CSS selector to capture |
| `-o, --output` | Output directory (default: ~/Downloads) |
| `--markdown` | Upload images & output markdown table |
| `--upload-url <url>` | Custom upload endpoint (default: 0x0.st) |
npx @vercel/before-and-after url1 url2

| 参数 | 说明 |
|------|-------------|
| `-m, --mobile` | 移动端视口（375x812） |
| `-t, --tablet` | 平板端视口（768x1024） |
| `--size <WxH>` | 自定义视口尺寸 |
| `-f, --full` | 捕获全滚动页面 |
| `-s, --selector` | 用于捕获的CSS选择器 |
| `-o, --output` | 输出目录（默认：~/Downloads） |
| `--markdown` | 上传图片并输出markdown表格 |
| `--upload-url <url>` | 自定义上传端点（默认：0x0.st） |

Image Upload

图片上传

bash
undefined
bash
undefined

Default (0x0.st - no signup needed)

默认方式（0x0.st - 无需注册）

./scripts/upload-and-copy.sh before.png after.png --markdown
./scripts/upload-and-copy.sh before.png after.png --markdown

GitHub Gist

GitHub Gist方式

IMAGE_ADAPTER=gist ./scripts/upload-and-copy.sh before.png after.png --markdown
undefined
IMAGE_ADAPTER=gist ./scripts/upload-and-copy.sh before.png after.png --markdown
undefined

Vercel Deployment Protection

Vercel 部署保护

If 
.vercel.app
URL returns 401/403:
  1. Check Vercel CLI: 
    which vercel && vercel whoami
  2. If available: 
    vercel inspect <url>
    to get bypass token
  3. If not: Tell user to provide bypass token, take manual screenshots, or disable protection
如果
.vercel.app
地址返回401/403：
  1. 检查Vercel CLI：
    which vercel && vercel whoami
  2. 如果已安装：执行
    vercel inspect <url>
    获取绕过令牌
  3. 如果未安装：告知用户提供绕过令牌、手动截取截图或关闭保护

PR Integration

PR集成

bash
undefined
bash
undefined

Check for gh CLI

检查gh CLI是否安装

which gh
which gh

Get current PR

获取当前PR信息

gh pr view --json number,body
gh pr view --json number,body

Append screenshots to PR body

将截图内容追加到PR描述中

gh pr edit <number> --body "<existing-body>
gh pr edit <number> --body "<existing-body>

Before and After

前后对比截图

<generated-markdown>"

If no `gh` CLI: output markdown and tell user to paste manually.
<generated-markdown>"

如果未安装`gh` CLI：输出markdown内容并告知用户手动粘贴到PR中。

Error Reference

错误参考

ErrorFix
command not found
npm install -g @vercel/before-and-after
could not determine executable
Use 
npx @vercel/before-and-after
(full name)
401/403 on .vercel.appSee Vercel protection section
Element not foundVerify selector exists on page
错误解决方法
command not found
执行
npm install -g @vercel/before-and-after
could not determine executable
使用
npx @vercel/before-and-after
（完整包名）
.vercel.app地址返回401/403查看Vercel保护章节
元素未找到确认页面中存在该选择器对应的元素