这才是狠活：产品视频还在从零手搓？video-shotcraft 把镜头、动效和音效编成可执行配方

嗨，我是小华同学，专注解锁高效工作与前沿AI工具！每日精选开源技术、实战技巧，助你省时50%、领先他人一步。👉免费订阅，与10万+技术人共享升级秘籍！

产品视频最容易陷入的，不是不会剪，而是每个镜头都没有明确理由：打开时间线，拖一拖、试一试、再重剪一遍。

video-shotcraft 的思路很不一样：先把“镜头应该怎么拍”拆成配方，再让 Codex/Claude Code 用 Remotion 把它落成可渲染的视频。

这篇不展开 104 张镜头卡的全部参数，只讲它为什么像一套视频生产方法，以及程序员怎么把它用进自己的产品宣传、功能演示和发布视频里。

video-shotcraft 项目封面：镜头有配方

产品视频最难的，不是把界面放进视频

很多程序员第一次做产品视频，通常是这样的：截几张页面，找一段音乐，往剪辑软件里堆素材，然后不断试转场。

最后常见的结果是：画面很忙，信息却不清楚；动效很多，重点却没有被看见；产品功能都出现了，但观众记不住任何一个卖点。

问题不一定是剪辑软件不够强，而是视频生产从一开始就缺少“镜头意图”：这一镜要表达什么？运动方向是什么？持续多久？文字应该什么时候出现？声音如何配合？

video-shotcraft 把这些问题提前写进了镜头配方里。它不是把时间线变得更复杂，而是把时间线之前的思考变得更清楚。

video-shotcraft 到底是什么？

一句话理解：这是一个给 Claude Code 和 Codex 使用的 AI 视频 Skill，把 Agent 变成一间带镜头库、动效库和生产流程的 Motion Design 工作室。

它底层使用 Remotion，把视频拆成可编程的 React/TypeScript 组件。Agent 负责理解产品、安排分镜、选择镜头卡，Remotion 负责把动画、节奏、字幕和页面变化稳定地渲染出来。

官方 Gallery 的首屏给出了几个很直观的数字：104 张镜头配方卡、161 种动效预览、一个 36.2 秒的可运行模板。这些数字的意义不在于“素材很多”，而在于它把原本靠经验口述的镜头语言，变成了可以浏览、选择和复用的资产。

video-shotcraft 官方截图：Gallery 首屏展示镜头配方与动效预览

它解决的，其实是“从空白时间线开始”的焦虑

传统做法和 video-shotcraft 的区别，可以简单看成这样：

这就是它值得关注的地方：它把视频制作从“剪辑软件操作题”，变成了“镜头设计 + 代码实现 + 生产验收题”。

趣味场景白板解释：从时间线试错转向镜头配方

4 层结构，拼出一条视频生产线

1. 镜头配方卡：先讲清楚这一镜要干什么

每张 Shot Recipe Card 不只是一个名字，还会描述镜头目的、画面能量、建议时长、可调参数、实现提示和常见坑点。

对程序员来说，这相当于把“导演脑中的一句话”变成了一份能交给 Agent 执行的任务描述。

比如，你不必只说“做一个高级一点的页面动效”，而可以明确到：

• 用推近还是横向滑动表现重点；
• 产品截图什么时候进入画面；
• 文字是跟随页面出现，还是单独做标题卡；
• 这一镜承担展示、转场还是情绪强调。

2. Remotion 实现：让动效不再只存在于某个工程师脑中

项目提供了对应的 TSX 实现和动效预览，里面包含 easing、时间参数、页面相机运动、字幕、闪切、数字滚动等常见视频语言。

这带来一个很实际的变化：动效可以被读、被改、被复用，也能随着产品截图和文案一起进入版本管理。

3. 模板与序列：先有一条完整的参考片

项目自带一个名为 Ink Press 的产品宣传模板：1920×1080、30fps、约 36.2 秒、10 个镜头，整体是纸张、墨线和琥珀色的视觉方向。

它的作用不是让所有视频都长得一样，而是提供一条完整参考：如何开场、如何交代产品、如何安排节奏、如何把页面截图串起来。换成自己的截图、文案和品牌后，就能快速得到第一版可运行视频。

4. 声音与 QA：让“能动”变成“能看”

README 中还整理了 BGM、SFX、节拍同步、审美规则和最终检查流程。音频资源包含 5 组 BGM、149 个 SFX，并按场景做了分类。

这里的重点不是音效数量，而是它提醒开发者：产品视频不是截图轮播，声音、节拍和最后一秒的验收，都会影响成片的专业感。 使用仓库内音频前，还要查看 ATTRIBUTION.md，确认对应授权条件。

实际使用，大致是这条链路

截取真实产品页面
        ↓
选择镜头配方
        ↓
安排分镜和文案
        ↓
用 Remotion 写入 TSX
        ↓
对齐 BGM、节拍和音效
        ↓
渲染并完成画面/声音/字幕 QA
```bash

趣味场景白板流程：从页面截取到分镜、Remotion 渲染和 QA

怎么开始？

如果你使用 Codex 或 Claude Code，可以先安装 Skill：

npx skills add Vincentwei1021/video-shotcraft
```bash

然后不要一上来就描述一堆抽象风格，可以直接给出产品和目标：

Use video-shotcraft to create a 30-second promo for my desktop product.
Use the Ink Press template, highlight the search and export workflow,
and keep the final video suitable for a product launch page.
```bash

如果你已经知道想要的镜头，也可以在提示词里点名某些 shot card，让 Agent 组合出一条更明确的分镜。Gallery 支持浏览、筛选和复制镜头名称，适合先找参考，再回到代码里实现。

它适合谁？又不适合谁？

适合：

• 想给 SaaS、桌面工具、开发者工具做宣传视频的团队；
• 会写 React/TypeScript，但不想每次从空时间线开始的人；
• 需要把产品截图、功能演示和品牌文案快速串成一版视频的人；
• 想让视频动效进入 Git 版本管理和自动渲染流程的工程师。

不适合：

• 期待“一句话自动生成完整商业大片”，但没有产品截图和文案的人；
• 需要真人拍摄、复杂三维建模或影视级后期的项目；
• 不愿意看 Remotion、Node、浏览器渲染和音频授权边界的人。

它提供的是一套高复用的生产骨架，不是替你完成所有创意判断的魔法按钮。真正决定成片质量的，仍然是产品素材、信息取舍和镜头选择。

最后说一句

我觉得 video-shotcraft 最值得收藏的点，不是“它有很多动画”，而是它把视频制作里最难复用的部分，拆成了可以被 Agent 理解的镜头语言。

对于程序员来说，这意味着以后做产品发布视频，不一定要先学会所有剪辑软件操作。你可以先把产品故事讲清楚，再让镜头卡、Remotion 实现、声音和 QA 一起进入工程流程。

下一篇可以继续拆它的 SKILL.md、镜头卡结构和 Ink Press 模板，看看一张“镜头配方”到底是怎样被翻译成 TSX 动画的。

项目地址

https://github.com/Vincentwei1021/video-shotcraft