# 用 shot-scraper video 让 AI 智能体录制工作演示视频 - 来源：Simon Willison 博客 - 作者：Simon Willison - 发布时间：2026-07-01 00:54 - AIHOT 分数：73 - AIHOT 标记：精选 - AIHOT 链接：https://aihot.virxact.com/items/cmr0wwa6g0085sl40xkkzeruy - 原文链接：https://simonwillison.net/2026/Jun/30/shot-scraper-video ## 精选理由 Simon 把 agent 的产出从文字推到了视频，这个 shot-scraper video 让 agent 自己生成 storyboard 并录屏，等于给自动化流程加了一双眼睛，开发者可以立刻用上这套 demo 生成方案。 ## AI 摘要 shot-scraper 1.10 新增 shot-scraper video 命令，支持通过 storyboard.yml 文件定义操作步骤，并利用 Playwright 录制浏览器视频。演示视频展示了 Datasette 中从粘贴的 CSV/TSV/JSON 数据创建新表的功能。该功能依赖 Playwright 1.61.0 新增的 screencast 机制，解决了此前视频开头白帧、宽度固定 800px 等问题。开发者 Simon Willison 强调，将 --help 输出设计得足够详细，可使编码 Agent 直接利用该命令生成演示视频。 ## 正文 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