产品页面做好了，想发一段功能介绍视频，难点往往在下一步：几张截图怎么排顺序？哪里该放大、停留、加字幕？改了一句文案后，还能不能继续调整？
video-shotcraft 把镜头配方、示例代码和视频制作流程装进一个 Skill，供 Claude Code、Codex 这类能操作项目的 AI 工具使用。它适合把自己的网页、App 界面或功能截图，组织成有节奏的产品演示。
🧩 它到底做了什么？
底层使用 Remotion，用 React 代码描述画面随时间的变化，再渲染为视频。你的真实截图和文案是主要材料；选镜头、写动画、安排字幕与音效，则由 Agent 按工作流处理。
可以把它理解成一套“带示范的拍摄配方”：先决定观众看哪里，再决定画面怎么动。最终可保留工程继续修改，适合功能发布、作品集和产品介绍。
① 先看镜头，再选表达方式
当前官方文档列出 124 张配方卡、150 个镜头，覆盖排版、相机运动、转场等类别。画廊可先看样片，再按名称找到配方。
例如，介绍搜索功能，可以先展示完整页面，再靠近输入框，最后停在结果列表。每一步都让观众知道发生了什么，比给整张截图不停旋转更有用。镜头数量是官方版本信息，不代表每一种都适合你的内容。
② 出片以后，还能继续改
项目提供浏览器里的 Motion Workbench：用多轨时间线调整镜头位置、停留时长、速度、字幕和音效，再导出 MP4。
这里有个容易忽略的条件：时间和图层可以调整，但文字、颜色能否直接在面板里改，取决于镜头有没有提供相应参数。部分示例只能调时间与图层，深入修改仍需要改代码。
③ 想在剪映里接着剪，也有出口
官方还提供剪映草稿导出流程，可将镜头片段、字幕、配乐与音效交给剪辑软件继续处理。上游说明的验证环境是 Mac 剪映 11.2，Windows 路径尚未验证。首次使用，先拿一个短片检查兼容性。
🎬 第一次尝试，先做 8 秒单功能演示
准备三张有权使用的截图、一句准确的功能说明，以及视频尺寸。去画廊选一个能突出重点的镜头，交给 Agent 时明确时长和交付物。
下面是可改写的需求示例，并非本轮实际渲染结果：
“用 video-shotcraft 为我的二手书交换页面做一段 8 秒功能演示。材料是搜索页、书籍详情页和预约结果页三张截图。按‘找到书—看详情—预约’组织画面，每屏只强调一个动作。使用真实页面文字，不编造用户数或成交记录。先给分镜和所选配方，再制作本地预览。交付 MP4、可编辑工程和工作台入口；没有授权音频就先做静音版。”
预览时重点看：关键字能不能读完，字幕是否遮住按钮，镜头切换有没有丢掉操作顺序。先把这三件事做好，再加装饰性效果。
💡 “2.5D 运镜”是什么意思？
把页面和卡片想象成舞台上前后摆放的纸板，虚拟相机靠近、倾斜或穿过它们，就会产生纵深感。素材本身仍可能是平面的；它不会自动把产品变成真实三维模型，也不会补出截图之外不存在的界面。
📌 用之前，先留意这些条件
需要可运行代码的 Agent、Node.js 和相关渲染环境，音视频处理还可能用到 FFmpeg 等工具。安装依赖、准备素材与反复渲染都需要时间，不能承诺“一句话，几分钟必出精品”。宿主模型可能收费，Remotion 也有自己的许可条件。
仓库代码采用 Apache-2.0；音频另有授权记录，其中部分文件原始来源仍待确认。制作商业内容时，应使用许可明确的音乐、字体和图片，不把代码许可当成全部素材的商用许可。
🔗 官方入口
信息核验于 2026-10-27，依据官方版本 43bd349。本篇为来源导读，未安装或运行上游 Skill；封面为 AI 原创概念图，不是工具实际生成的成片截图。