shot-scraper video 是今天发布的 shot-scraper 1.10 版本中引入的一个新命令，它接受一个 storyboard.yml 文件，该文件定义了针对 Web 应用程序运行的一系列操作，并使用 Playwright 录制这些操作的视频。我之前写过关于编码智能体为其工作生成演示的重要性；这是我为实现这一目标所做的最新尝试。

以下是使用 shot-scraper video 创建的示例视频，演示了一个仍在开发中的功能——从粘贴的 CSV、TSV 或 JSON 数据在 Datasette 中创建新表：

该视频是通过运行以下命令创建的：

shot-scraper video datasette-bulk-insert-storyboard.yml \
  --auth datasette-demo-auth.json --mp4

（那个 --auth JSON 文件包含一个 cookie，如文档中所述。）

以下是 datasette-bulk-insert-storyboard.yml 文件：

output: /tmp/datasette-bulk-insert-demo.webm
server:
  - uv
  - --directory
  - /Users/simon/Dropbox/dev/datasette
  - run
  - datasette
  - -p
  - 6419
  - --root
  - --secret
  - "1"
  - /tmp/demo.db
url: http://127.0.0.1:6419/demo/tasks
viewport:
  width: 1280
  height: 720
cursor: true
wait_for: 'button[data-table-action="insert-row"]'
javascript: |
  (() => {
    let clipboardText = "";
    Object.defineProperty(navigator, "clipboard", {
      configurable: true,
      get: () => ({
        writeText: async (text) => {
          clipboardText = String(text);
        },
        readText: async () => clipboardText,
      }),
    });
  })();
scenes:
  - name: Bulk insert existing table rows
    do:
      - : 0.8
      - click: 'button[data-table-action="insert-row"]'
      - wait_for: "#row-edit-dialog[open]"
      - : 0.5
      - click: ".row-edit-bulk-insert"
      - wait_for: ".row-edit-bulk-textarea"
      - : 0.5
      - click: ".row-edit-copy-template"
      - wait_for: "text=Copied"
      - : 0.8
      - fill:
          into: ".row-edit-bulk-textarea"
          text: |
            title,owner,status,priority,notes
            Prepare release video,Ana,doing,1,Recorded with shot-scraper
            Check pasted CSV import,Ben,review,3,Previewed before inserting
            Share the branch demo,Chen,queued,2,Bulk insert creates three rows
      - : 0.8
      - click: ".row-edit-save"
      - wait_for: "text=Previewing 3 rows."
      - : 1.2
      - click: ".row-edit-save"
      - wait_for: "text=3 rows inserted."
      - : 1.0
      - click: ".row-edit-cancel"
      - wait_for: "text=Prepare release video"
      - : 1.0
  - name: Create a table from pasted CSV
    open: http://127.0.0.1:6419/demo
    wait_for: 'details.actions-menu-links summary'
    do:
      - : 0.8
      - click: 'details.actions-menu-links summary'
      - click: 'button[data-database-action="create-table"]'
      - wait_for: "#table-create-dialog[open]"
      - : 0.5
      - fill:
          into: ".table-create-table-name"
          text: "launch_metrics"
      - click: ".table-create-from-data"
      - wait_for: ".table-create-data-textarea"
      - : 0.5
      - fill:
          into: ".table-create-data-textarea"
          text: |
            metric_id,name,score,recorded_on
            m001,Activation rate,87.5,2026-06-29
            m002,Retention check,72.25,2026-06-30
            m003,CSV import health,95,2026-07-01
      - : 0.8
      - click: ".table-create-save"
      - wait_for: "text=Previewing 3 rows."
      - : 1.2
      - click: ".table-create-save"
      - wait_for_url: "**/demo/launch_metrics"
      - wait_for: "text=Activation rate"
      - : 1.2

视频命令文档中包含更简单的示例，但为了本文的目的，我决定采用更全面的示例。

那个演示用的 YAML storyboard 完全由运行在 Codex Desktop 中的 GPT-5.5 xhigh 构建，使用的提示词是在我本地该分支的 ~/dev/datasette 目录下运行的：

审查此分支上的更改。

切换到 ~/dev/shot-scraper 目录并运行命令 "uv run shot-scraper video --help"。

现在使用那个新的 video 命令录制此分支新功能的视频演示，包括运行一个 "uv run datasette -p 6419 --root --secret 1 /tmp/demo.db" 开发服务器，这样你就可以针对你首先创建的演示数据库来录制视频。

既然我已经发布了这个功能，提示词可以改为 "run uvx shot-scraper video --help"，应该能达到同样的效果。

我非常喜欢这种模式：命令的 --help 输出提供了足够详细的信息，让编码智能体能够使用它——这有点像把 SKILL.md 文件直接捆绑在工具内部。我在 showboat 和 rodney 中也使用了相同的模式。

我是如何构建这个功能的

shot-scraper video 最初是一个实验性原型。shot-scraper 构建在 Playwright 之上，它所需的关键功能是让 Playwright 能够录制浏览器会话的视频，并且有足够的控制力来创建所需的演示。

我几年前第一次尝试这个功能，发现 Playwright 生成的视频包含了额外的浏览器界面元素，这些元素对调试测试失败很有用，但对于产品演示来说却是不需要的。

他们不久前修复了这个问题，但仍然存在一些小障碍。特别是，我录制的视频开头会出现几帧白屏，因为录制机制在浏览器加载第一个 URL 之前就已经启动了。

Playwright 1.59 新增了一种屏幕录制机制，可以对视频录制进行更精细的控制。这几乎完全符合我的需求，但生成的视频宽度被固定为 800 像素。

我发现了一个已合并的 PR 修复了这个问题，但当时尚未发布。然后昨天他们在 playwright-python 1.61.0 中发布了这个修复，我终于可以无障碍地完成这个功能的实现了！

代码本身全部由 Codex Desktop 中的 GPT-5.5 xhigh 编写。我还让它编写了文档，这为我审查设计提供了一个非常有用的框架——对该功能的多次迭代改进都来自于审查这份文档，发现其中冗余、不一致或令人困惑的地方，然后请求（或口述）一个更好的设计方案。

YAML 格式本身主要由编码智能体定义。我让它使用 Pydantic 来定义和验证该格式，部分原因是为了让设计更容易审查。

这是一个很好的例子，说明如果没有编码智能体的支持，我几乎肯定不会去实现这类功能。我最初在 2024 年 2 月提交了这个问题，但一直很难从其他项目中抽出必要的时间来解决它。

2026 年 6 月 30 日

更多近期文章

• 全新 GPT-5.6 系列：Luna、Terra、Sol - 2026 年 7 月 9 日
• sqlite-utils 4.0，现已支持数据库模式迁移 - 2026 年 7 月 7 日
• sqlite-utils 4.0rc2，主要由 Claude Fable 编写（花费约 149.25 美元） - 2026 年 7 月 5 日

本文为《让你的智能体使用 shot-scraper video 录制工作视频演示》，作者 Simon Willison，发布于 2026 年 6 月 30 日。

python

yaml

playwright

shot-scraper

pydantic