altacrest/motion-how-to-video

使用Claude Motion制作带旁白的操作演示视频

这是Novacrest市场团队制作操作演示和文档视频的方式：应用的真实屏幕、滑动的光标、每步简短的字幕、阅读每句字幕的英语语音、一个完整的MP4文件。它始于OmniOrders的快速入门影片（2026年10月）。

影片所需的一切都随此技能提供（路径相对于此文件）：

• engine/shared.js 和 engine/base.css：截图引擎（SS）及其外观。切勿从记忆中重建它们。
• examples/how-to-film/：参考影片“使用Claude Motion制作操作演示视频”（2026年10月27日）的每个场景模块，包含其 lines.json、scenes.json 和 shots.json。在编写场景前阅读它们：它们展示了每个 SS.def 选项的使用方式。
• scripts/voice.py：旁白生成。ElevenLabs API，每个字幕对应一个MP3，如果已安装Whisper则进行校验。它在用户自己的终端中运行。
• scripts/mix.py：将每个剪辑放置在其字幕下方，并写入完成后的MP4（需要ffmpeg）。

严格规则

• 仅使用从应用捕获的真实屏幕。切勿重新绘制应用的UI：绘制的屏幕在第一个快速入门影片中被发现。一个显示命令的普通卡片是可以的；但应用的绘制副本或终端窗口不行。
• 使用测试账户。屏幕上不得出现真实的客户数据、密钥、令牌或密码：使用补丁遮盖，或使用测试账户的虚拟值。切勿代表用户登录；请他们自行登录。
• 旁白为英语（美国），字幕即脚本：每步一条，使用任何人都能理解的简单词句，约12词以内，无破折号。语音逐字读出每条字幕。如果语音读错了某个词，在 say.json 中放入口语拼写；字幕保持原样。
• 切勿为了匹配语音而拉伸视频。字幕与其剪辑的时间对齐（步骤4）。如果剪辑仍然过长，则稍微加速（mix.py最多允许1.15倍），或缩短其句子并重新配音。
• 首先试听：为第一个场景的台词配音并检查，然后再进行其余部分；在语音或脚本更改后再次检查。
• 勿用LLM评判语音。voice.py会在已安装faster-whisper时使用Whisper（词错误率）对每个剪辑评分；否则由用户自行监听。
• 切勿在聊天中请求、打印或粘贴API密钥。ElevenLabs密钥仅存在于用户计算机上的一个文件中。
• 在下载文件、命名文件及说明来源前先征询用户。

为什么语音在用户终端中运行：Claude的工作区和Claude在用户计算机上的Shell无法访问ElevenLabs（Novacrest网络允许列表阻止了api.elevenlabs.io和elevenlabsusercontent.com；已于2026年11月12日检查），且密钥不会通过聊天传输。Claude准备好一切，用户只需粘贴一个命令。ElevenLabs连接器（自定义连接器，https://api.elevenlabs.io/v1/mcp）在无需密钥的情况下生成语音，但其音频以elevenlabsusercontent.com链接形式返回，工作区无法下载，因此此处不使用。如果管理员允许这两个域名，请重新考虑此方案。

步骤1：确定范围和字幕

一次性获取以下信息，只询问缺失的部分：流程（例如“在OmniOrders中创建转账”）、应用及其测试账户、视频用途（文档页面、快速入门、YouTube）以及产品的配色。编写步骤列表，每步一条字幕，加上标题行和结束行，保存为 lines.json（{"id": "caption"}，按影片顺序排列；id如 open、ask-a、ask-b、end）。仅针对语音可能读错的词（如OmniOrders读作“Omni Orders”、包含破折号的仓库名）添加 say.json（{"id": "spoken text"}）。在聊天中向用户展示字幕，除非用户要求修改，否则继续执行。

步骤2：开始配音

字幕确定后立即开始配音；在配音进行的同时进行捕获和构建。

1. 在用户计算机上创建一个影片文件夹 ~/Downloads/<film-slug>/，包含 lines.json、say.json（如有）以及 scripts/voice.py 的副本。如果有链接文件夹，使用device_bash将它们写入该文件夹。如果没有，使用SendUserFile发送文件，并要求用户放在同一个文件夹中。
2. 首次使用时，用户需要一个具有文本转语音访问权限的ElevenLabs API密钥（参见README中的“ElevenLabs”）。检查 ~/.config/elevenlabs/env 是否存在（测试文件是否存在；切勿读取其内容）。如果不存在，从下面的设置行开始。
3. 为用户提供一个可直接粘贴到终端的代码块：

   cd ~/Downloads/<film-slug>
   python3 voice.py setup        # 仅首次：根据提示粘贴密钥（输入时隐藏）
   python3 voice.py check        # 检查密钥是否有效及剩余额度
   python3 voice.py --only open,<第一个场景的id>
   

   当试听效果满意后（voice.json无标记，或用户已听取），执行 python3 voice.py 完成剩余部分。
4. 默认语音：Matilda（XrExE9yKIg1WjnnlVkGX），eleven_multilingual_v2，稳定性0.5，相似度0.75，速度1.0，MP3 44.1 kHz 128 kbps；每句台词在前后字幕的上下文中读出，以保证朗读流畅。仅在用户要求时更改语音或速度。voice.py会打印要使用的字符数（大约每个信用点一个）；如果 check 显示剩余信用点不足，则停止并询问。
5. 剪辑文件位于 voice/<id>.mp3；voice/voice.json 列出每个剪辑的长度，如果已安装Whisper，还会列出识别出的内容和词错误率。错误率超过0.05的行需要听取，在 say.json 中添加口语拼写或修改措辞，然后执行 python3 voice.py --only <id> --redo。

步骤3：捕获屏幕

1. 加载claude-in-chrome技能。在用户已登录的Chrome中打开一个新标签页，启动应用。调整窗口大小直到页面视口为1512 x 745（检查 innerWidth 和 innerHeight）：这是引擎的世界尺寸，截屏将以2倍分辨率返回，即3024 x 1490。
2. 在测试账户中按流程操作。使用 computer 截图并设置 save_to_disk: true 捕获影片所需的每个状态：每次点击前后；对于输入操作，捕获空字段和填写后的字段（影片通过从填写后的截图中裁剪补丁来展示输入的文本）。
3. 在工作区中，转换为webp格式（质量约90），命名为 <flow>_<step>.webp，并为每个输入的文本行创建2倍的裁剪图。在 shots.json 中记录每个截图的URL路径，在 patches.json 中记录每个补丁在视图像素（1512 x 745空间）中的矩形区域。
4. 请勿提交任何会更改测试账户之外数据的操作。如果某一步可能如此，请停止并询问。

步骤4：制作影片

1. 从Motion工件类型创建影片（在工件工具的类型列表中找到），title 设置为视频名称，并阅读返回的类型说明：这些说明指导影片的制作。在请求中处理其问题，无需表单。风格：在真实截图上使用引导光标，参考影片的外观。颜色：产品的调色板（OmniOrders：#16213E, #11ACE4, #F4F7FB, #2FD193）。时长：由语音决定（见下文），加上5秒标题卡片和7秒结束卡片。
2. 将 engine/shared.js 原样写入影片的 modules/shared.js，将 engine/base.css 写入 modules/base.css，仅修改第一行的四种颜色。上传本影片的截图和裁剪图作为资产；切勿复制其他影片的 _blob 引用。
3. 编写 lines.json（步骤1中的文件）、shots.json（每个截图的URL路径；"host" 是浏览器地址栏中显示在路径前、且路径以 / 开头的域名）、每个步骤一个场景模块，使用 SS.def 构建（标题卡片使用 SS.open；SS.end 需要 mark、next 和 url），以及 scenes.json，包含每个场景的 dur 和 desc。将字幕声明为 caps: [['<id>', tin, tout], ...]，以便mix.py可以找到它们；没有字幕的台词（如标题卡片）也以相同方式在模块中声明，例如 const voiceOnly = [['open', 0.4, 4.6]];。参照示例：光标滑向控件，出现一个圆环和点击波纹，相机缓动进入，字幕位于深色面板上。
4. 根据 voice/voice.json 中的剪辑时间设置字幕：在每个场景中，第一条字幕在0.3秒时出现，每条字幕持续显示的时间为其剪辑长度加0.45秒，下一条字幕在其后0.35秒出现。场景的 dur 为其最后一条字幕的结束时间再加约0.4秒，或者如果屏幕上的动作需要则更长。将光标、圆环和相机的运动安排在这些时间窗口内。如果语音尚未返回，先为每条字幕分配约5秒，待语音返回后重新调整时间。
5. 保持背景音乐安静且现代：第一批快速入门影片的背景音乐被形容为“80年代教堂管风琴”。
6. 用户播放影片并提出修改意见；实施修改（修改后的字幕需要重新配音）。当用户满意后，通过影片播放器下方的下载箭头导出MP4：用户点击它，或者在他们同意后由Claude in Chrome操作。文件将保存在用户的下载文件夹中。

步骤5：合成

1. 将导出的MP4、voice/ 文件夹、scenes.json 以及场景模块放在同一位置：用户计算机上的影片文件夹（如果安装了ffmpeg，则使用device_bash在那里运行mix.py），或云工作区（暂存）。如果从影片保存的文档使用ArtifactData（out_dir），则保持原样。
2. python3 mix.py cues --scenes scenes.json --modules <包含scene-*.js的文件夹> --lines lines.json 生成 cues.json：每个字幕在影片中的开始和结束时间（场景的开始时间，即之前所有场景 dur 之和，加上字幕自己的时间偏移）。
3. python3 mix.py mix --film <导出的>.mp4 --voice voice --cues cues.json --out <产品名>-<流程名>.mp4 --web：在字幕对应的时刻开始播放每个音频剪辑；如果导出文件包含音轨，则将影片的背景音乐音量降至语音的25%，将语音电平标准化至-16 LUFS，并复制画面。如果某个剪辑需要超过1.15倍的加速，则停止；缩短该台词，重新配音，然后再次合成。
4. python3 mix.py frames --film <产品名>-<流程名>.mp4 --cues cues.json --out frames：在每个字幕的中间时刻保存一帧。检查每一帧：字幕可见、屏幕正确、无隐私内容。然后播放开头几秒：语音随字幕开始。对于其他操作，请遵循视频制作技能的ffmpeg规则。

步骤6：交付

• 使用SendUserFile发送完成后的MP4，并将其保存到用户的连接文件夹中，命名为 <产品名>-<流程名>.mp4。
• 如果是用于网站：将 -web.mp4 副本提交到网站仓库的拉取请求。向用户提供链接；由他们合并。
• 最后简要列出用户仍需完成的操作：终端命令、导出、合并拉取请求。

设置（每人一次，插件README包含详细信息）

1. 从GitHub安装：Claude > 自定义 > 插件 > 添加 > 添加市场，输入 altacrest/novacrest-skills，选择使用，保持自动同步开启，同步，然后安装操作演示视频。
2. ElevenLabs：获取一个具有文本转语音访问权限的API密钥，在任何影片文件夹中使用 python3 voice.py setup 保存。
3. Claude in Chrome：登录到应用的测试账户。