Open Record & Replay

一款隐私优先的浏览器操作录制器，可生成可审查的 Agent Skill 草稿。

English · 한국어 · 日本語 · 中文

无视频。无 Cookie。无明文密钥。

Open Record & Replay 监听浏览器交互，将其转换为脱敏后的步骤，并导出为草稿技能包。该技能包遵循 Agent Skills 标准，因此同一份录制可直接在 Claude Code、OpenAI Codex 和 Kimi 中加载。

你无需从零编写自动化框架即可创建有用的技能。录制一次真实的浏览器工作流，审查安全的语义步骤，并将其转化为可供他人调整、验证和分享的、可贡献的草稿。

任何人都可以成为技能贡献者。
从一个你已经会做的工作流开始，把它变成可审查的技能草稿。

它能帮你做什么

• 将浏览器工作流捕获为结构化步骤，而非视频。
• 把重复性工作转换为 markdown 技能草稿。
• 区分可安全自动化的操作与需要人工接管（handoff）的步骤。
• 生成关于隐私、风险和产物的、便于审查者查看的证据。
• 为向项目、团队或社区仓库贡献技能创造一个起点。

好的技能往往始于简单的被观察工作流：

Open a site -> Search or filter -> Inspect the result -> Stop before risky action -> Document the repeatable path

环境要求

• Node.js 20+
• npm
• Playwright Chromium 运行时

如果受控浏览器无法启动，请在项目目录中执行一次：

npx playwright install chromium

安装

通过 npm

软件包：open-record-replay

无需安装即可运行：

npx open-record-replay

或全局安装：

npm install -g open-record-replay
open-record-replay --help

直接指定技能名称开始录制：

npx open-record-replay record --name "YOURSKILLNAME"

从源码（开发）

git clone https://github.com/Marker-Inc-Korea/open-record-replay.git
cd open-record-replay
npm install
npm run build
npm start

不构建直接从源码运行：

npm run dev

快速开始

1. 启动录制器

手动流程：

npx open-record-replay

打开 http://localhost:48321，输入技能名称，点击 Record，执行浏览器工作流，点击 Stop，然后点击 Skill-ify 自动审查并生成技能包（或点击 Edit 手动审查/裁剪/批准）。界面默认英文；可在顶部切换语言（한국어 / 日本語 / 中文）。

2. 或直接指定技能名称启动

一条命令启动：

npx open-record-replay record --name "YOURSKILLNAME"

这会在 Chrome 中打开 Recorder UI，填入项目名称，立即启动用于捕获的 Chromium，并在 Recorder UI 中显示 Stop 按钮。

3. 在使用生成的技能前先审查

生成的技能包刻意是草稿。在将其复制到其他仓库或与他人分享之前：

• 删除无关的捕获步骤，
• 检查敏感值是否已脱敏，
• 确认有风险的操作已变为 handoff 步骤，
• 根据目标仓库调整措辞，
• 核实目标站点的条款与自动化政策。

可选：在 OpenCode 智能体中使用

项目命令文件位于：

.opencode/commands/

如果想在本仓库之外使用这些命令，可全局安装：

mkdir -p ~/.config/opencode/commands
cp .opencode/commands/open-record-replay.md ~/.config/opencode/commands/

重启 OpenCode，然后运行命令：

/open-record-replay 프로젝트명: YOURSKILLNAME

智能体应启动录制器，告知用户 Recorder UI 已在 Chrome 中打开、用于捕获的 Chromium 已开始录制，并提醒用户用 Recorder UI 中的 Stop 按钮结束捕获。

CLI 参考

| 命令 | 作用 | |---|---| | open-record-replay | 启动本地 Recorder UI 并打印 http://localhost:48321。 | | open-record-replay --open | 启动 UI，并在 macOS 上用 Chrome 打开。 | | open-record-replay record --name "YOURSKILLNAME" | 打开 UI，填入名称并开始录制。 | | open-record-replay record -n "YOURSKILLNAME" | --name 的简写。 | | open-record-replay record --name "X" --target-url "<url>" | 在指定 URL 启动受控浏览器（默认：Google）。 | | open-record-replay check "<bundle-dir>" | 对生成的技能包运行部署前检查。 | | open-record-replay --help | 显示 CLI 帮助。 | | open-record-replay --version | 打印软件包版本。 |

Recorder UI 运行在 http://localhost:48321。

录制工作流

Record -> Stop -> Skill-ify (auto review + generate) -> Deploy
                └─ or: Edit -> trim / AI review -> Approve -> Generate (manual control)

录制期间，受控浏览器仅捕获浏览器操作。停止后，点击一次 Skill-ify 即自动批准并生成技能包，随后打开专门的 Deploy 页面，其中包含校验摘要与一键操作（打开文件夹、创建 zip、复制 check/PR 命令）。如果录制包含 handoff、被掩码的值或风险边界，Skill-ify 会先请求一次确认。若想手动控制，Edit 可让你裁剪步骤、按需运行仅脱敏的 AI 审查、批准并生成。

当前的捕获覆盖范围包括：

| 交互 | 脱敏后的步骤 | |---|---| | 页面加载/导航 | navigate | | SPA 路由变化 | 来自 pushState、replaceState、popstate、hashchange 的 url_change | | 点击 | click | | 文本输入 | 经值分类后的 fill | | 下拉选择框 | select | | Enter、Escape、方向键、快捷键等语义按键 | key | | 表单提交尝试 | submit_attempt | | 滚轮/滚动/地图缩放候选 | wheel | | 指针拖拽/地图平移候选 | pointer | | 只读观察 | observe | | 风险边界 | handoff |

可打印的文本按键会被合并为 fill 步骤，而不是逐字符存储。类似地图/canvas 的界面会先被记录为可追踪的手势；站点特定的语义可在之后叠加。

生成的技能包

<skill-name> 是你在 Recorder UI 中输入的名称。例如 my-test-skill 会写入 ~/.open-record-replay/recordings/my-test-skill/output/my-test-skill/ 下。

生成的“技能”并非完成的自动化程序。它是一个草稿包，智能体或维护者可以阅读、审查、调整并复制到目标技能仓库。主要产物是：

<skill-name>/SKILL.md

该文件描述工作流、所需输入、安全的自动化边界、handoff 点和审查备注。例如一次地图搜索录制可能生成如下草稿步骤：

1. Open the official site
2. Fill the place search field = Gangnam Station
3. Press Enter
4. Detect an in-app route change
5. Record wheel/zoom interaction on the map
6. Record pointer/drag interaction on the map
7. Observe the result list

在 SKILL.md 旁边，同一个技能文件夹还携带可被机器执行的规格，以便 AI 智能体运行该流程。技能包根目录还包含面向审查者的证据、元数据、片段和 PR 模板。

~/.open-record-replay/recordings/<skill-name>/output/<skill-name>/
├── <skill-name>/                 <- 可部署的自包含技能（原样复制此文件夹）
│   ├── SKILL.md                  <- 面向智能体的 markdown 指令
│   ├── agent-flow.json           <- 可移植的动作规格（选择器、参数、安全策略）
│   ├── browser-use.task.md       <- browser-use 任务 + 可运行的 Python 片段
│   └── computer-use.md           <- computer-use 任务提示词
├── docs/
│   └── features/
│       └── <skill-name>.md       <- 人类可读的指南
├── snippets/
│   ├── README-table-row.md       <- 可选的 README 表格行片段
│   ├── sources-entry.md          <- docs/sources.md 条目
│   └── security-notes.md         <- 安全说明
├── recorder/                     <- 来源 / 审查证据（运行时不需要）
│   ├── manifest.yaml             <- 隐私/风险元数据
│   ├── manifest.json
│   ├── redacted.steps.json       <- 脱敏后的动作图
│   ├── privacy-report.md         <- 面向审查者的隐私证据
│   ├── replay-report.md          <- 静态 dry-run 报告
│   ├── pre-deploy-report.md      <- 部署前检查报告
│   └── pre-deploy-results.json
├── REVIEW.md                     <- 人工审查包
└── PR.md                         <- PR 描述模板

生成的技能包是草稿。请根据目标仓库或工作流进行审查与调整，并在发布前核实目标站点的服务条款。

部署与使用生成的技能

内层的 <skill-name>/ 文件夹是自包含的——它同时包含指令和可被智能体执行的规格。使用时，选择消费方：

| 消费方 | 使用什么 | 如何使用 | |---|---|---| | Claude / Agent Skills | <skill-name>/ 文件夹 | cp -r <bundle>/<skill-name> ~/.claude/skills/（或 .opencode/skills/）——智能体加载 SKILL.md 并用自身的浏览器/电脑工具执行步骤 | | browser-use | browser-use.task.md | 复制其任务与 Agent(initial_actions=...) 片段；需要 browser-use 和一个 LLM 密钥 | | Anthropic computer use | computer-use.md | 将提示词作为 computer-use 工具循环中的指令 | | 你自己的执行器 | agent-flow.json | 直接驱动可移植的步骤/选择器（例如 Playwright） |

在每一种形式中，流程都会在 handoff 步骤停止，绝不自动化登录、支付或最终提交。运行时你仍需为任何 {{PARAM}} 提供真实值，并且应先由人工确认站点的服务条款。

分享前先校验任意技能包：

node dist/cli.js check "<bundle-dir>"

未来工作：应用级钩子

诸如 Naver Map、KakaoMap、Google Maps、canvas 编辑器以及高度定制的 SPA 等复杂应用，常常把语义含义隐藏在 canvas 图层、生成的 DOM 或内部状态背后。通用的浏览器捕获能够记录“wheel”“drag”“click”“route changed”，但并不总能知道“选中了哪个标记”或“哪个地图地点成为了目的地”。

因此，站点/应用级钩子属于未来工作。未来的钩子可能如下所示：

window.__openRecordReplayHook({
  type: "map_place_selected",
  label: "Gangnam Station",
  source: "naver-map"
});

当前版本专注于通用、隐私优先的事件捕获。钩子将是一个可选的语义精度层，而非基础录制的必需项。

文档

| 文档 | 面向 | 内容 | |---|---|---| | docs/ARCHITECTURE.md | 维护者 | 模块图、数据流、守护进程 API、不变量、重构指南 | | docs/TESTING.md | 贡献者 | 测试布局、命令、约定、如何添加测试 | | CONTRIBUTING.md | 贡献者 | 贡献单元、护栏、验证 | | AGENTS.md | AI 智能体 | 简明的仓库规则、命令、不变量 | | docs/bundle-format.md | 所有人 | 生成技能包格式参考 | | docs/pre-release-status.md | 所有人 | 功能集、限制、就绪情况 |

预发布状态

关于当前功能集、限制、验证清单和部署就绪说明，请参阅 docs/pre-release-status.md。

安全护栏

该录制器专为低风险的浏览器工作流捕获而设计。

始终禁止：

• submit_payment - 绝不自动化支付提交
• automate_login - 绝不自动化登录
• bypass_captcha - 绝不绕过 CAPTCHA
• use_unofficial_bypass - 绝不使用非官方的绕过手段
• finalize_booking_without_user - 预订需要明确的用户确认

隐私默认值：

• 不录制视频
• 不存储 Cookie
• 不存储 localStorage 或 sessionStorage
• 不存储截图
• 不存储网络响应体
• 原始输入值在导出前会被分类
• 可选的 AI 审查仅使用脱敏后的语义步骤
• 如果下游工具使用生成的草稿，其输入仅限于脱敏后的语义步骤

当检测到风险边界（例如支付或最终预订按钮）时，录制器会生成一个 handoff 步骤，而不是自动化。

MVP 演示

下面的演示名称是示例生成产物，并不是录制你自己的工作流时必须输入的名称。要重新生成它们，请先构建，因为脚本会从 dist 导入：

npm run build
node scripts/generate-demo-bundles.mjs

| 演示 | 类型 | 风险 | |---|---|---| | Olive Young search | 只读电商 | 低 | | LH/SH notice search | 只读公共 | 低 | | KOBUS seat lookup -> checkout handoff | 真实场景 / handoff | 中 |

参与贡献

社区贡献是 open-record-replay 的引擎。你不必从一个大功能开始。一个有用的工作流、一条更安全的分类规则，或更清晰的生成指引，都可以成为很好的贡献。

完整规则见 CONTRIBUTING.md，代码库地图见 docs/ARCHITECTURE.md，测试方法见 docs/TESTING.md：

| 贡献类型 | 一个 PR 长什么样 | |---|---| | 分类规则 | 向 src/classifiers/ 添加新的 PII、敏感值或风险模式 | | 值模式 | 为新领域扩展低风险运营值列表 | | 风险模式 | 添加支付/删除/预订的风险边界模式 | | 站点预设 | 为特定站点或工作流添加字段映射 | | 演示录制 | 录制一个新的 markdown 技能草稿工作流并添加 fixture | | 参考模板 | 改进生成的 markdown 文档、片段或审查指引 |

最小而有用的贡献，往往就是把一个安全、可复现的工作流录制好。

许可证

MIT