嗨，我是小华同学，专注解锁高效工作与前沿AI工具！每日精选开源技术、实战技巧，助你省时50%、领先他人一步。👉免费订阅，与10万+技术人共享升级秘籍！
产品视频最容易陷入的，不是不会剪，而是每个镜头都没有明确理由：打开时间线，拖一拖、试一试、再重剪一遍。
video-shotcraft 的思路很不一样：先把“镜头应该怎么拍”拆成配方，再让 Codex/Claude Code 用 Remotion 把它落成可渲染的视频。
这篇不展开 104 张镜头卡的全部参数，只讲它为什么像一套视频生产方法，以及程序员怎么把它用进自己的产品宣传、功能演示和发布视频里。
产品视频最难的，不是把界面放进视频
很多程序员第一次做产品视频，通常是这样的：截几张页面，找一段音乐，往剪辑软件里堆素材，然后不断试转场。
最后常见的结果是：画面很忙，信息却不清楚；动效很多，重点却没有被看见；产品功能都出现了，但观众记不住任何一个卖点。
问题不一定是剪辑软件不够强，而是视频生产从一开始就缺少“镜头意图”：这一镜要表达什么？运动方向是什么？持续多久？文字应该什么时候出现？声音如何配合？
video-shotcraft 把这些问题提前写进了镜头配方里。它不是把时间线变得更复杂，而是把时间线之前的思考变得更清楚。
video-shotcraft 到底是什么？
一句话理解：这是一个给 Claude Code 和 Codex 使用的 AI 视频 Skill，把 Agent 变成一间带镜头库、动效库和生产流程的 Motion Design 工作室。
它底层使用 Remotion，把视频拆成可编程的 React/TypeScript 组件。Agent 负责理解产品、安排分镜、选择镜头卡，Remotion 负责把动画、节奏、字幕和页面变化稳定地渲染出来。
官方 Gallery 的首屏给出了几个很直观的数字：104 张镜头配方卡、161 种动效预览、一个 36.2 秒的可运行模板。这些数字的意义不在于“素材很多”，而在于它把原本靠经验口述的镜头语言，变成了可以浏览、选择和复用的资产。
它解决的，其实是“从空白时间线开始”的焦虑
传统做法和 video-shotcraft 的区别，可以简单看成这样：
| 传统做法 | video-shotcraft 的做法 |
|---|---|
| 打开时间线，边试边剪 | 先选择镜头目的、动势和时长 |
| 转场、缩放、推拉效果散落在项目里 | 用镜头配方描述动效意图 |
| 动画逻辑靠手工反复调 | 用 Remotion TSX 固化实现 |
| 音效往往最后才补 | 把 BGM、节拍和 SFX 放进生产流程 |
| 主要靠“看起来顺不顺”验收 | 结合画面、节奏、字幕和声音做最终 QA |
这就是它值得关注的地方：它把视频制作从“剪辑软件操作题”，变成了“镜头设计 + 代码实现 + 生产验收题”。
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
怎么开始？
如果你使用 Codex 或 Claude Code，可以先安装 Skill：
npx skills add Vincentwei1021/video-shotcraft
然后不要一上来就描述一堆抽象风格，可以直接给出产品和目标：
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.
如果你已经知道想要的镜头，也可以在提示词里点名某些 shot card，让 Agent 组合出一条更明确的分镜。Gallery 支持浏览、筛选和复制镜头名称，适合先找参考，再回到代码里实现。
它适合谁？又不适合谁？
适合：
- 想给 SaaS、桌面工具、开发者工具做宣传视频的团队；
- 会写 React/TypeScript，但不想每次从空时间线开始的人；
- 需要把产品截图、功能演示和品牌文案快速串成一版视频的人；
- 想让视频动效进入 Git 版本管理和自动渲染流程的工程师。
不适合：
- 期待“一句话自动生成完整商业大片”，但没有产品截图和文案的人；
- 需要真人拍摄、复杂三维建模或影视级后期的项目；
- 不愿意看 Remotion、Node、浏览器渲染和音频授权边界的人。
它提供的是一套高复用的生产骨架，不是替你完成所有创意判断的魔法按钮。真正决定成片质量的，仍然是产品素材、信息取舍和镜头选择。
最后说一句
我觉得 video-shotcraft 最值得收藏的点，不是“它有很多动画”，而是它把视频制作里最难复用的部分，拆成了可以被 Agent 理解的镜头语言。
对于程序员来说，这意味着以后做产品发布视频，不一定要先学会所有剪辑软件操作。你可以先把产品故事讲清楚，再让镜头卡、Remotion 实现、声音和 QA 一起进入工程流程。
下一篇可以继续拆它的 SKILL.md、镜头卡结构和 Ink Press 模板，看看一张“镜头配方”到底是怎样被翻译成 TSX 动画的。
