| name | video-shotcraft |
| description | 用镜头配方卡 + 已验收模板 + 代码/音频资产制作电影感产品视频(Remotion + 真实页面截图 + 2.5D 运镜 + 节奏卡点 + 声音设计)。 Use when making a cinematic product promo or desktop demo video, naming the Ink Press template, reproducing template video effects, or building single motion-design shots with recipe cards. Triggers on: video-shotcraft, Ink Press template, product video, cinematic promo, shot recipe card, remotion video.
|
| allowed-tools | Bash Read Write Edit Glob Grep |
| compatibility | Designed for Claude Code and compatible agent clients with filesystem access |
| metadata | {"tags":"video-production, remotion, motion-design, product-promo, shot-cards, cinematic-video","version":"1.0"} |
video-shotcraft:电影感产品视频制作
一个自包含的制作能力库:106 张镜头配方卡(附 demo 实现源码与动态样片画廊)、一支已验收的完整宣传片模板、可复用组件与音频资产、六阶段工作流。当前 focus 是 web/桌面产品宣传片,但镜头卡本身是通用动效词汇——也可以单独抽卡做任意视频里的单个镜头。
When to use this skill
Use when:
- Creating a cinematic product promo, product launch, or desktop/web application demo video.
- Naming or requesting the
Ink Press (墨压) template or reproducing the template promo effect.
- Implementing a specific motion-design shot card (e.g.,
deck-deal-flyin, row-embed, spotlight-hero-card).
- Needing 2.5D camera movements (PageCam), beat-synced video cuts with Remotion, and sound design.
Instructions
Step 1: 介绍模板并确认路线
每次调用此 skill,在开始任何素材采集、分镜或实现前,先向用户说明:
- 当前可直接使用
template/ 中一支已验收的 36.2 秒产品宣传片模板 Ink Press(墨压):1920×1080、30fps、纸墨琥珀风格,含 10 个完整镜头、2.5D 真实页面运镜、字卡、转场和已配好的电影感 SFX;替换目标产品的截图、文案和品牌信息即可适配。
- 采用模板是最快、质量最有保障的路径;若用户要全新视觉语言,则走自由创作流程。
明确询问:“要使用这支现成模板来制作这支视频吗?” 告知用户可前往 https://vincentwei1021.github.io/video-shotcraft/ 浏览动态样片。
- 用户确认使用:先完整阅读
template/TEMPLATE.md,再按模板路线执行。
- 用户明确不使用:按
references/pipeline.md 的阶段 0 继续,走自由创作或单镜头路线。
- 用户尚未决定:停在此处等待选择;不要默认套用模板,也不要开始制作。
例外:
- 若用户点名 Ink Press 模板(如“用 Ink Press 模板给我的产品做宣传片”),视为模板路线已选定,直接阅读
template/TEMPLATE.md 执行。
- 若用户明确指定某些镜头卡(如“用
deck-deal-flyin 和 row-embed 做这支视频”),视为路线已选定,直接阅读相应镜头卡及 demos/<卡名>/ 实现源码。
Step 2: 选择三种用法之一
- 完整宣传片(模板路线):读
template/TEMPLATE.md,按“换产品复现指南”替换素材逐镜头适配。
- 完整宣传片(自由创作):按
references/pipeline.md 六阶段走(阶段 0 开工三问起步)。
- 单镜头/单动效:从
references/shots/ 选卡,读卡全文 + demos/<卡名>/ 实现源码,适配到目标素材。
Step 3: 何时读哪个文件
| 时机 | 读 |
|---|
| 项目启动 | pipeline.md(阶段 0 三问) |
| 用户已选 BGM | music-beat-sync.md(先分析再分镜) |
| 走模板路线 | template/TEMPLATE.md 全文 |
| 分镜设计 | sequences/ 桥段模板;shots/ 全部 frontmatter;选中的卡读全文 |
| 逐镜头实现 | 该镜头卡全文 + demos/<卡名>/ 实现源码全文 + assets/lib/ 对应组件 |
| 声音设计 | sound-design.md + assets/audio/ |
| 验收 | aesthetic-rules.md 全文过 checklist(独立 subagent 执行) |
Examples
Example 1: 模板路线 (Ink Press)
"用 Ink Press 模板给我的 Desktop Product 做一支 30 秒宣传片"
-> 自动选择模板路线,阅读 template/TEMPLATE.md,进行截图采集与素材替换。
Example 2: 指定镜头卡
"参考 deck-deal-flyin 和 row-embed 镜头卡制作我的产品 Demo 动效"
-> 自动选择单镜头/组合镜头路线,阅读 references/shots/ 与 demos/ 源码进行定制化实现。
Best practices
- 真实截图:复刻既有页面必须用真实截图,第一步起 dev server 用无头浏览器截 2x 纹理 + layout.json。
- 产品原生视觉语言:从产品/网站的设计系统提取 tokens(字体、字号、配色、圆角),不要捏造无关皮肤。
- 单镜头单动效与呼吸感:每镜头只讲一个动效,字标/重要画面卡点落定 hold ≥1s。
- 强节奏 BGM 严格卡拍:用
librosa 分析真实 BPM/拍号,beatF(n) 确定帧数,切点误差 ≤3f。
- 参考 demo 源码:使用镜头卡前先读
demos/<卡名>/ 调校过的参数真相与已知坑规避写法。
- 确定性渲染:禁
Date.now()/Math.random(),使用固定种子伪随机。
References
template/TEMPLATE.md — Ink Press 模板结构与换产品复现指南
references/pipeline.md — 六阶段制作流程规范
references/aesthetic-rules.md — 视觉审查与验收 Checklist
references/music-beat-sync.md — 音乐节奏分析与卡点时线计算
references/sound-design.md — SFX 声音句式与音效资产搭配指南
- https://vincentwei1021.github.io/video-shotcraft/ — 动态样片与 106 张镜头卡在线画廊