video-shotcraft

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: 选择三种用法之一

1. 完整宣传片（模板路线）：读 template/TEMPLATE.md，按“换产品复现指南”替换素材逐镜头适配。
2. 完整宣传片（自由创作）：按 references/pipeline.md 六阶段走（阶段 0 开工三问起步）。
3. 单镜头/单动效：从 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

1. 真实截图：复刻既有页面必须用真实截图，第一步起 dev server 用无头浏览器截 2x 纹理 + layout.json。
2. 产品原生视觉语言：从产品/网站的设计系统提取 tokens（字体、字号、配色、圆角），不要捏造无关皮肤。
3. 单镜头单动效与呼吸感：每镜头只讲一个动效，字标/重要画面卡点落定 hold ≥1s。
4. 强节奏 BGM 严格卡拍：用 librosa 分析真实 BPM/拍号，beatF(n) 确定帧数，切点误差 ≤3f。
5. 参考 demo 源码：使用镜头卡前先读 demos/<卡名>/ 调校过的参数真相与已知坑规避写法。
6. 确定性渲染：禁 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 张镜头卡在线画廊