Communitygithub.com

ahmadrashad1/video

制作一段带有旁白的 Loom 风格屏幕录制视频(MP4,1080p,使用用户自己的 Fish Audio 克隆语音,带字幕,无摄像头),用于演示网站或 Web 应用。当用户运行 /loom:video 或要求录制、演示、制作应用程序的演练/教程视频时使用。

video 是什么?

该技能使 AI agents(如 Claude Code)能够自动制作高质量的、带旁白的屏幕录制演示视频(MP4,1080p),类似于 Loom。它会使用用户自己的克隆语音(通过 Fish Audio)进行旁白,并生成字幕。整个过程是自动化的,从分析应用、检查页面元素、编写分步计划、使用用户语音录制旁白、实际录制屏幕到最终渲染和验证。该技能强制要求非破坏性操作、不泄露秘密,并且不允许使用伪造的录制片段,确保视频的真实性和安全性。它主要面向 Web 应用,但也实验性地支持桌面应用(通过 OBS)。用户只需提供一个请求(例如应用 URL 或演示目标),AI agent 就会驱动整个流程,在每一步获得批准后再执行。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ahmadrashad1/loom-skill/tree/HEAD/skills/video

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

带旁白的演示视频

你需要规划并主导整个演示过程。loom 命令(在此插件启用时,位于你的 PATH 中)负责处理旁白、录制、渲染和验证。在任何目录下直接运行 loom … 即可。视频默认保存在 loom status 显示的 recordings 文件夹下(默认路径为 ~/Videos/loom/<slug>/)。下文使用 <rec> 指代该文件夹。

请求:$ARGUMENTS

如果请求是现有录制的 slug(可通过 loom status 查看),则从其第一个未完成的步骤开始恢复。未批准的计划仍需等待批准。

不可协商的规则

  1. 绝不能录制未经批准的计划。 编写计划时设置 "approved": false,向用户展示,只有在用户批准后(或用户明确表示无需审核即可继续)才能将其设置为 true。
  2. 破坏性或不可逆的操作(如删除、购买、部署、发送、支付、修改生产环境设置)必须标记为 "destructive": true,并且需要用户为此视频明确同意后才能传递 --allow-destructive 参数。
  3. plan.json 或旁白中不得包含秘密信息。 输入的密码/令牌使用 "secret_env": "VAR";屏幕上出现的密钥、电子邮件、令牌、账号等信息放入 "redact" 中(使用 CSS 选择器,在整段视频中模糊处理)。切勿打印 ~/.config/loom/*.env 文件的内容。
  4. 不得使用伪造的录制片段。 每一个场景都必须由录制器真实执行。如果某个场景失败,请修复计划并重新录制。切勿伪造结果,也绝不能将 loom verify 失败的视频标记为已完成。
  5. 禁止使用摄像头,仅限用户本人的语音。 旁白必须使用用户自己的 Fish Audio 语音模型。未经他人许可,不得使用或建议使用他人的声音。

工作流程

0. 语音设置(首次运行)

运行 loom status。如果显示 VOICE NOT CONFIGURED,则首先配置语音;请遵循 /loom:setup 技能(${CLAUDE_PLUGIN_ROOT}/skills/setup/SKILL.md)。向用户询问他们自己的 Fish Audio 语音模型 ID;不得发明或重复使用某个语音 ID。如果用户现在不想设置,你可以使用 --provider espeak 继续,但只能作为机器人预览语音,并且必须明确说明这不是用户本人的声音。

A. 了解需求

确定:哪个应用/URL、观众应达成的目标、目标受众,以及是否需要登录。如果其中一项确实不清楚,提出一个简明的问题;否则做出合理的假设并说明这些假设。

B. 检查真实应用

loom inspect <url> --out <rec>/<slug>/inspect

阅读截图(<rec>/<slug>/inspect/page.png)并使用打印出的选择器。检查演示将访问的每个页面(遵循操作流程),确保选择器是真实的,而非猜测的。优先使用 #id、[data-testid=…],其次是 role=button[name="…"],最后是 text=…。本地文件支持使用 file:///… URL。

C. 编写计划

按照 ${CLAUDE_PLUGIN_ROOT}/skills/video/reference/plan-schema.md 创建 <rec>/<slug>/plan.json。指南:

  • 4–10 个场景;以 title 场景开始,以一个简短的总结场景结束。
  • 旁白:第一人称,口语化,类似于同事录制的 Loom。每个场景 1–3 句话(约 6–20 秒)。描述观众在屏幕上正在看到的内容;不要逐字逐句地读出选择器或 URL。
  • 操作应在此场景的旁白播放时执行;确保操作足够简短以适应(约每秒 2.6 个词)。如果操作流程较长,拆分为更多场景。
  • 在每个改变状态的场景中添加 expect,以便捕获失败。
  • 运行 loom validate <slug>,直到验证通过。

以表格形式(场景 · 屏幕上发生什么 · 旁白)向用户展示计划,并注明任何破坏性操作、所需的秘密信息以及预估时长。停下来等待批准。一旦批准,将 "approved" 设置为 true。

D. 旁白录制

loom voice <slug>:为每个场景生成一个 WAV 文件,使用克隆的语音(已缓存;仅重新生成已更改的场景)。检查时长是否合理。

E. 录制屏幕

loom record <slug>(仅在满足规则 2 时添加 --allow-destructive 参数)。 如果失败,读取错误信息和 <rec>/<slug>/raw/failure-<scene>.png,修复计划中的选择器/等待,然后重新运行。如有必要,重新检查页面。

F. 生成视频

loom render <slug>(如需烧录字幕,添加 --captions burn 参数;默认为嵌入的字幕轨道加上 subtitles/captions.srt)。

G. 验证(始终执行)

运行 loom verify <slug>,然后使用 Read 工具查看 <rec>/<slug>/scenes/*.jpg 中的每一张缩略图:是否显示了预期的屏幕状态,是否有任何敏感信息未进行模糊处理,是否有错误页面或 Cookie 横幅遮挡内容。如果警告提示操作时间超过了旁白时长,考虑拆分该场景。修复并重新执行必要的步骤,直到验证通过。

H. 报告结果

提供 <rec>/<slug>/final_video.mp4 的路径、视频长度、场景列表以及任何注意事项(例如使用了预览语音)。提醒用户 VS Code 的内置预览器播放 MP4 时没有声音,请使用常规视频播放器。计划获得批准后,快速执行 D–G 步骤的快捷方式为:loom run <slug>。

故障排除

  • loom: command not found → 插件的 bin/ 目录不在 PATH 中;请运行 ${CLAUDE_PLUGIN_ROOT}/bin/loom 代替。
  • loom needs uv → 告诉用户安装 uv(命令已打印)。
  • 未找到元素 → 重新在该页面上运行 loom inspect;添加 wait_for。
  • Cookie/同意横幅 → 添加一个初始场景的 click 操作,点击其接受按钮。
  • 登录 → 使用 secret_env 进行 type 操作;要求用户导出该变量。
  • Fish Audio 401 → API 密钥错误。402 → 该模型没有 API 积分;建议添加积分或将插件的模型设置切换为 s2.1-pro-free。
  • 桌面(非浏览器)应用演示 → 使用 --recorder obs 参数(需要 OBS 正在运行且已启用 WebSocket,并有一个屏幕捕获场景)。此路径为实验性功能。

相关技能