Cutaway 演示录制器

这个 Agent 能做什么，适合哪些场景？

Cutaway 是一个本地运行的演示录制工具：你写一份 JSON 计划，它用 Playwright 驱动 Chromium 执行点击、输入、上传、滚动等步骤，再用 Skia 合成画面、FFmpeg 编码成 MP4。安装脚本会把仓库放到 ~/.cutaway，并把技能链接进 Claude Code 与 Codex，因此你可以直接对代理说 /cutaway record the checkout flow。产物包括 video.mp4、poster.png、无损帧 frames/*.png，以及 timeline.json、render.json、camera.json、workflow.json 等过程文件。它支持桌面浏览器和 Playwright 设备列表中的竖屏手机（含触摸指示、状态栏和 iOS 键盘），还能用 frame 子命令给单张截图套上同样的窗口或手机外框。整个流程不需要任何 AI 模型或云端服务，但每一步都是真实执行的。

CLI 入口是 src/cli.mjs，有三个子命令：record 读取 JSON 计划（url、viewport、device、captureScale、hide、colorScheme 等字段）后启动 Playwright Chromium，按 steps 依次执行 click、type、upload、focus、scroll、press、wait（手机上为 tap、swipe），每步可用 expect 断言成功元素、pause 控制停留、hold 控制长按时长；render 对已保存的录制重新导出，可调 --width/--height、--fps、--quality、--zoom、--blur、--cursor-size、--padding、--preset、--window、--keys、--pacing；frame 给外部截图（如 agent-browser screenshot 的产物）加上浏览器窗口或手机外框。录制阶段会同时写出 timeline.json、camera.json、workflow.json，导出阶段写 render.json 和 video.mp4、poster.png、frames/*.png。相机按 Screen Studio 风格自动推近正在操作的小控件，光标带弧线轨迹、Fitts 定律时长和按下反馈，无操作的等待时间会被加速。

1. 开发者提交 PR 前需要一段能直接贴进 GitHub 的界面改动录屏，可用 --width 1280 --height 720 --quality standard 压到 10MB 以内。
2. 复现一个 bug 并希望评审者看到真实操作路径时，用 expect 断言成功状态，录制会在步骤失败处中止。
3. 移动端适配完成后，用 device: "iPhone 15 Pro" 加 tap/swipe 步骤录出竖屏 1080×1920 演示，含触摸指示和 iOS 键盘。
4. 在 Claude Code 或 Codex 中让代理演示它刚写完的功能：/cutaway record the checkout flow 或 $cutaway。
5. 只做设计评审时，用 frame 子命令把一张 viewport 截图包装成带 Safari 窗口和壁纸的静态图。
6. 需要在无网络的本地 mock 应用上验证录制效果时，直接跑 examples/demo.json 或 examples/mobile-demo.json。

如何安装或部署这个 Agent？

需要 Node.js 22+，其余依赖（FFmpeg、Chromium）随安装脚本一起装好。

curl -fsSL https://raw.githubusercontent.com/half144/cutaway/master/install.sh | bash

安装脚本会把 Cutaway 放到 ~/.cutaway，安装依赖和 Chromium，并在检测到 Claude Code（~/.claude/skills）或 Codex（~/.codex/skills）时把技能链接进去。用 CUTAWAY_HOME 可改安装目录；安装后每天首次运行时会自动快进到 master 最新版。

从克隆安装：

git clone https://github.com/half144/cutaway.git && cd cutaway
npm ci
npx playwright install chromium
npm run demo
node scripts/install-skill.mjs
ln -s "$PWD/skills/cutaway" ~/.claude/skills/cutaway

卸载：

rm -rf ~/.cutaway ~/.claude/skills/cutaway ~/.codex/skills/cutaway

如何使用这个 Agent？

写一份 JSON 计划，描述一个人会怎么操作：

{
  "url": "http://localhost:3000",
  "hide": ["nextjs-portal"],
  "steps": [
    { "action": "click", "selector": "#edit" },
    { "action": "type", "selector": "role=textbox[name=\"Title\"]", "text": "New title" },
    { "action": "upload", "selector": "button:has-text(\"Choose cover\")", "file": "cover.jpg" },
    { "action": "click", "selector": "#save", "expect": "#saved-message" },
    { "action": "focus", "selector": "#updated-title", "duration": 1.5 }
  ]
}

选择器使用 Playwright locator，每个必须唯一匹配一个元素，模糊或缺失都会中止录制。登录后的应用可用 --storage-state /path/session.auth.json 复用已保存的 Playwright 会话。

跑完整流程：

node ~/.cutaway/src/cli.mjs record ~/.cutaway/examples/demo.json --out /tmp/cutaway-demo

只采集或重新导出：

node src/cli.mjs record plan.json --out recordings/take --capture-only
node src/cli.mjs render recordings/take --width 1280 --height 720
node src/cli.mjs render recordings/take --preset midnight --zoom 2

给截图加外框：

agent-browser set viewport 1440 810 2
agent-browser open https://app.example.com/reports
agent-browser screenshot /tmp/reports.png
node src/cli.mjs frame /tmp/reports.png --url https://app.example.com/reports

这个 Agent 有哪些优点和局限？

这个 Agent 与同类方案有什么区别？

与相关度最高的同类 agent 并排比较关键指标。

FollowAgents 如何评估这个 Agent？

常见问题