AI 视频导演级 Skill：Codex 装上它，5 分钟出一支电影感产品宣传片（video-shotcraft）
配套媒体
本页对应的 PPT 与演示视频
下载没反应？点这里复制直链
侧边栏预览窗口（Electron webview）会拦截下载，把下面的链接复制到 Chrome / Edge 地址栏打开即可保存。
../../video-shotcraft-recommend.pptx../../video-shotcraft-recommend.mp4本文目录
- 一句话看懂 video-shotcraft 是什么
- 核心亮点（5 个）
- 1. 106 张分镜头配方卡，覆盖产品宣传片所有常用动效
- 2. 一支完整可用的 Ink Press 模板片
- 3. 真正"从产品自身生长"的视觉语言
- 4. 强节奏 BGM 卡拍校验（librosa + 拍号语法）
- 5. 廉价确认物前置：素材 → styleframe → 分镜逐级确认
- 三种典型用法
- 安装与上手
- 方法 1：让 Agent 直接装（最直接）
- 方法 2：CLI 一行装
- 方法 3：手动 clone + 软链
- 镜头词汇库的 162 种动效样式（节选）
- 适用场景
- 同类对比：为什么不用剪映 / CapCut / Premiere
- 致谢与生态
- 总结
AI 视频导演级 Skill：Codex 装上它，5 分钟出一支电影感产品宣传片（video-shotcraft）
痛点：你刚做完一个产品（App / 插件 / SaaS），想做个 30 秒宣传片发到 B 站 / 公众号 / 视频号，结果剪辑软件打开就劝退：分镜怎么排？运镜怎么调？BGM 怎么卡拍？字幕怎么排版？——这些事都还没做，你已经被学习曲线劝退了。
解决方案：给 Claude Code / Codex 装上 video-shotcraft 这个 Agent Skill，丢一句"用 Ink Press 模板给我的产品做宣传片"，Agent 直接接管：抓页面、换文案、套镜头卡、卡拍、合成出片，36.2 秒电影感产品片，5 分钟出活。
一句话看懂 video-shotcraft 是什么
video-shotcraft 是一个专为 Claude Code / Codex 设计的 AI 视频制作 Agent Skill，把 106 张分镜头配方卡、162 种动效样式、161 段动态样片和一支已验收的 36.2 秒完整宣传片模板（Ink Press / 墨压）打包在一起，让 AI Agent 拥有"电影感产品宣传片导演"的能力。
它不是视频生成模型（不是 Sora / Veo），它是编排 + 模板 + 镜头词汇库——底层引擎是 Remotion（React 写的视频框架）。
核心亮点（5 个）
1. 106 张分镜头配方卡，覆盖产品宣传片所有常用动效
每张卡都标注：用途、能量、建议时长、参数、实现要点、已知坑。常见类型：
deck-deal-flyin：发牌飞入（展示卡片阵列）row-embed：行嵌入（特性列表）spotlight-hero-card：聚光主角卡crash-zoom-punch：冲击放大bubble-swarm-takeover：气泡群接管dataviz-landscape-open：数据可视化景观command-palette-summon：命令面板召唤color-block-step-wipe：色块阶梯擦除
配方卡不是空概念——每张卡都有
demos/<卡名>/目录下的真实 Remotion TSX 实现代码，调校过的缓动、时值、摘罩时机都在源码里，不允许"凭卡名脑补重写"。
2. 一支完整可用的 Ink Press 模板片
Ink Press（墨压）—— 1920×1080 / 30fps / 纸墨琥珀风格 / 10 个完整镜头 / 2.5D 真实页面运镜 / 配齐电影感 SFX —— 36.2 秒成品。
用法极简：
Use video-shotcraft to make a promo for my product with the Ink Press template.
Agent 自动完成：抓产品截图 → 替换文案 → 套品牌色 → 输出 Remotion 工程 → 渲染 mp4。
Ink Press 是被完整验收过的，不是 demo。每个镜头的缓动、节奏、声音都对齐过——你换的是素材，不变的是质量底线。
3. 真正"从产品自身生长"的视觉语言
video-shotcraft 的核心理念之一：整支视频的视觉语言必须从产品自身生长，不能另造一套不相干的"宣传片皮肤"。
Agent 会先做这些事：
- 跑本地 dev server
- 无头浏览器截全页 2x 纹理
- 提取产品的字体家族、字号层级、行高字距、栅格间距、圆角、配色 tokens（背景/表面/正文/强调色、渐变、材质）
- 把这些 tokens 写入 design spec，全片所有字卡、字幕、数字、转场、粒子、光效都复用或克制扩展
走模板或镜头卡路线时，只继承镜头结构、运动语法、节奏和已调参数；字体、排版、配色与材质必须按目标产品重新蒙皮。
4. 强节奏 BGM 卡拍校验（librosa + 拍号语法）
如果你选了一首 BGM，Agent 开工前会先做节奏分析：
import librosa
y, sr = librosa.load(bgm.wav)
tempo, beats = librosa.beat.beat_track(y=y, sr=sr)
# 拟合真实 BPM + 鼓点相位
时间线用拍号 beatF(n) 写，不是用秒数写。渲染完成后还要从成片抽音轨回测切点误差 ≤3 帧。
这避免了"看起来对得上节奏但其实差了几帧"的廉价感——这是 80% 的 AI 视频教程都没教的事。
5. 廉价确认物前置：素材 → styleframe → 分镜逐级确认
video-shotcraft 强制一个逆向工作流：
- 素材确认（30 秒）：页面截图够不够用？要不要换品牌色？
- styleframe 确认（3 分钟）：一个纯 HTML/CSS 对比页 + 一张截图就锁定全片色板/字体/光感
- 分镜确认（5 分钟）：分镜表 + 设计 spec 同文档一次确认
- 逐镜头执行（30+ 分钟）：方向问题不进逐镜头阶段
确认物越廉价、越早，返工越便宜。这是它 4 天拿下 1,600+ 星的根本原因：返工成本被压到最低。
三种典型用法
| 用法 | 何时用 | 路线 |
|---|---|---|
| 完整宣传片（模板路线） | 想要和模板片高度相似的效果 | 读 template/TEMPLATE.md，按"换产品复现指南"替换素材 |
| 完整宣传片（自由创作） | 新风格、定制视觉语言 | 按 references/pipeline.md 六阶段走 |
| 单镜头 / 单动效 | 只想用一个镜头效果（比如发牌飞入） | 从 references/shots/ 选卡，读卡 + demos/<卡名>/ 实现源码 |
安装与上手
方法 1：让 Agent 直接装（最直接）
在 Claude Code / Codex 里说一句：
Install this skill for me: https://github.com/Vincentwei1021/video-shotcraft
Agent 会自动 clone 仓库并链接到 skills 目录。
方法 2：CLI 一行装
npx skills add Vincentwei1021/video-shotcraft
方法 3：手动 clone + 软链
git clone https://github.com/Vincentwei1021/video-shotcraft.git
cd video-shotcraft
ln -s "$(pwd)" ~/.claude/skills/video-shotcraft # Claude Code
# 或
ln -s "$(pwd)" ~/.codex/skills/video-shotcraft # Codex
装完直接提需求，例如：
Use video-shotcraft to create a promo for my desktop product.
Use the deck-deal-flyin and row-embed shot cards to present this feature.
Design a product close-up inspired by spotlight-hero-card.
镜头词汇库的 162 种动效样式（节选）
video-shotcraft 把所有动效按能量和用途分类。下面是节选自官方 Gallery 的 8 类：
| 类别 | 代表卡片 | 用途 |
|---|---|---|
| 入场 / 焦点 | crash-zoom-punch、crane-rise-reveal、spotlight-hero-card |
主角登场、产品首屏 |
| 阵列 / 翻页 | deck-deal-flyin、card-flip-reveal、card-flock-tumble |
卡片阵列展示 |
| 数据 / 可视化 | dataviz-landscape-open、chart-live-moves、gauge-readout-moves |
数据可视化场景 |
| 协作 / 多人 | collab-cursor-moves、bubble-swarm-takeover |
多人协作场景 |
| 界面 / 召唤 | command-palette-summon、color-block-step-wipe |
工具栏 / 召唤动效 |
| 光效 / 粒子 | cel-flash-stomp、autolayout-gap-dial |
强调点、节奏点 |
| 写意 / 抽象 | draw-svg-trace、document-typewriter-reveal、brand-ink-open |
抽象开场、品牌段 |
| 特写 / 切换 | before-after-slider-scrub、bottom-push-stack-wipe |
对比、切换场景 |
全部 106 张卡 + 161 段动态样片在 官方 Gallery 可搜索 / 筛选 / 切换变体 / 复制名称。
适用场景
video-shotcraft 主要面向 web / 桌面产品宣传片，但单张镜头卡可以抽出来用：
- ✅ 产品发布会开场视频
- ✅ App Store / Google Play 应用预览
- ✅ 官网首屏 hero 视频
- ✅ Twitter / X 产品发布视频
- ✅ 客户演示 demo 视频
- ✅ 品牌短片 / 公司介绍片
- ✅ 任意视频里的单个镜头动效
同类对比：为什么不用剪映 / CapCut / Premiere
| 工具 | 学习曲线 | 单次产出 | AI 接管程度 | 镜头词汇 |
|---|---|---|---|---|
| 剪映 / CapCut | 中 | 5-30 分钟手动 | 低（你点选模板） | 模板固定，不可调 |
| Premiere / DaVinci | 高 | 30 分钟 - 数小时 | 几乎为零 | 全部自己调 |
| Runway / Pika | 低 | 几秒生成 | 高（但失控） | 黑盒，无法定制 |
| video-shotcraft + Agent | 极低（说一句） | 5 分钟（自动） | 高（Agent 全流程） | 106 张可组合卡片 |
video-shotcraft 的核心壁垒：它不是 AI 生成模型，而是 可被 Agent 复用的镜头词汇库 + 已验收模板。Remotion 是 React，你可以 1:1 调任何参数，但 Agent 已经把 80% 的脏活干完了。
致谢与生态
镜头库借鉴了以下优秀官方宣传片的动效语言（ClickUp / Perplexity / Slack / Notion / Figma / Framer / Bear / Raycast / Pitch / Miro / Superhuman / Loom），所有动效技术（timing、easing、choreography）都是从零重新实现的，没有引用任何素材或品牌资产。
技术栈：
- Remotion：React 视频框架，驱动所有 demo 和模板（个人 / 小团队免费，公司可能需要付费 license）
- Mixkit：SFX 和 BGM 资产来源（免费商用）
- Claude Code：这个库本身就是用 AI 编码 Agent 构建、迭代和验收的——用的就是这个 skill 教的工作流
总结
| 维度 | video-shotcraft |
|---|---|
| 类型 | Claude Code / Codex Agent Skill |
| 镜头词汇 | 106 张分镜配方卡 |
| 动效样式 | 162 种 |
| 动态样片 | 161 段（在线 Gallery） |
| 完整模板 | Ink Press（36.2 秒，10 镜头，1920×1080，30fps） |
| 框架 | Remotion（React） |
| 协议 | Apache-2.0 |
| Star | 1,674 ⭐（4 天） |
| 适用 | 产品宣传片 / 品牌短片 / 单镜头动效复用 |
| 上手 | 一句话让 Agent 装 + 一句话提需求 |
一个为 Agent 量身定制的视频导演——不需要你会剪辑，不需要你会动效，不需要你会调色。 它把"做电影感产品宣传片"这件事的认知成本，从数小时压到了 5 分钟。
仓库地址：github.com/Vincentwei1021/video-shotcraft 动态样片：vincentwei1021.github.io/video-shotcraft