video-shotcraft

The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.

---
name: video-shotcraft
description: Create cinematic product videos from shot recipe cards, a validated template, and code/audio assets (Remotion + real page screenshots + 2.5D camera moves + beat-synced cuts + sound design). Use when the user asks to turn a frontend project or webpage into a product video, says "use video-shotcraft to make a video/promo", names the Ink Press template or asks to reproduce its effect, or wants a single shot card's motion. 用镜头配方卡 + 已验收模板 + 代码/音频资产制作电影感产品视频（Remotion + 真实页面截图 + 2.5D 运镜 + 节奏卡点 + 声音设计）。当用户要求"用 video-shotcraft 做视频/宣传片"、把前端项目/网页做成产品视频、点名 Ink Press 模板或要求复刻模板片效果，或要用镜头卡做单个动效镜头时使用。
---

# video-shotcraft：电影感产品视频制作

一个自包含的制作能力库：157 张镜头配方卡（附 demo 实现源码与动态样片
画廊）、一支已验收的完整宣传片模板、可复用组件与音频资产、六阶段工作流。
当前 focus 是 web/桌面产品宣传片，但镜头卡本身是通用动效词汇——
也可以单独抽卡做任意视频里的单个镜头。

## 调用时先判断模式

完整宣传片有三种互不合并的模式。在开始素材采集、分镜或实现前，先判断用户
是否已经明确选择；已经选择时直接执行，不重复询问，也不要改成另一种模式。

1. **直接使用模板**：保持 Ink Press 原有替换流程。读 `template/TEMPLATE.md`，
   按既有镜头结构替换目标产品的截图、文案和品牌信息。
2. **自主自由创作**：读 `references/pipeline.md`。Agent 根据用户已有要求和项目
   内容，自主决定视觉方向、镜头映射、分镜、素材和音频，连续推进到成片；不在
   产品简报、styleframe、镜头映射或分镜阶段暂停等待用户确认。
3. **共同创作**：读 `references/guided-free-creation.md`。Agent 先提出有依据的
   判断和方案，由用户依次确认产品简报、需求决策、视觉方向、镜头映射和最终
   分镜；分镜放行后再进入 `references/pipeline.md` 的最终素材采集与制作阶段。

用户提供了项目路径、网址、录屏或页面截图但尚未选模式时，先做一次**最小、
只读的产品检查**：了解产品定位、主要功能、页面视觉、可展示状态和素材风险；
不修改业务项目、不采集敏感数据、不写视频代码。检查后给出三种模式，并说明：

- Ink Press 是否适合该产品、适合与不适合的具体依据；
- 自主自由创作与共同创作各自是否适合、预计会保留哪些产品视觉线索；
- Agent 推荐哪一种模式及其依据和取舍。

然后明确询问：**“根据上面的产品检查，我推荐使用 ×× 模式。要按这个模式继续吗？”**
同时告知用户：可前往 https://vincentwei1021.github.io/video-shotcraft/
浏览动态样片，并挑选希望在视频中使用的动效镜头。

用户尚未提供可检查的项目或页面时，简要介绍三种模式再询问；不要仅因 Ink Press
是现成模板就默认推荐它。

- 用户选择模板：完整阅读 `template/TEMPLATE.md`，按原模板流程执行。
- 用户选择自主自由创作：完整阅读 `references/pipeline.md`，Agent 自主推进，不逐阶段等待确认。
- 用户选择共同创作：完整阅读 `references/guided-free-creation.md`，按其中的确认节点协作。
- 用户尚未决定：停在此处等待选择；不要默认替用户选择，也不要开始制作。

**例外一：用户已点名 Ink Press 模板时，视为模板模式已选定。**
例如“用 Ink Press 模板给我的产品做宣传片”。此时不要再询问，直接完整阅读
`template/TEMPLATE.md` 按模板路线执行。

**例外二：用户已明确指定要使用或参考某些镜头卡时，镜头约束已经选定。**
例如“用 `deck-deal-flyin` 和 `row-embed` 做这支视频”或“参考
`spotlight-hero-card` 的效果”。此时不要介绍模板、也不要询问是否使用模板；
按 Gallery 名称解析规则确认指定镜头，完整阅读每张卡，并按卡片的“参考实现”
定位准确 demo 源码。单镜头可在目标素材明确后执行；完整宣传片若尚未说明采用
自主自由创作还是共同创作，只询问这两种模式，指定镜头作为后续制作约束，不自动
等同于共同创作。

## 四种用法

1. **完整宣传片（模板路线）**：想要和模板片高度相似的效果 →
   读 `template/TEMPLATE.md`，按“换产品复现指南”替换素材逐镜头适配。
2. **完整宣传片（自主自由创作）**：要新风格并授权 Agent 自主决定 → 读
   `references/pipeline.md`，从产品理解连续推进到终检，中途不逐阶段等待确认。
3. **完整宣传片（共同创作）**：要参与关键决策 → 读
   `references/guided-free-creation.md`，确认产品简报、需求决策、视觉方向、
   镜头映射和最终分镜；放行后从流水线的最终素材采集继续。
4. **单镜头/单动效**：从 `references/shots/` 选卡（或让用户在
   `gallery/` 画廊里挑），读卡全文并按“参考实现”定位准确 demo 源码，
   适配到目标素材。

## 自主自由创作与共同创作的边界

**自主自由创作**把创意和工程决策交给 Agent。Agent 从项目内容动态推导产品重点、
视觉方向、镜头映射、分镜、素材处理与音频方案，记录关键判断后直接执行；除非缺少
无法安全推断的必要输入，否则不提问、不逐阶段暂停，也不要求用户确认中间产物。
用户已有的明确要求始终是约束，不能被 Agent 的默认选择覆盖。

**共同创作**才使用逐阶段确认。默认读 `references/guided-free-creation.md`，每轮只问
1–3 个最能减少返工的问题，并在产品简报、需求决策、视觉方向、镜头映射和最终分镜
处暂停等待用户确认。用户确认业务与创意方向；Agent 自主完成采集方式、实现参数、
SFX 钉帧、Remotion 工程、渲染和技术 QA。

共同创作中，用户明确说“你全权决定”或“跳过确认直接做”时，切换为自主自由创作
并记录这一选择；不要一边声称自主推进，一边继续要求逐阶段确认。

功能到镜头的映射只是“选用哪些运动语法”，不是完整分镜。共同创作确认映射后，
Agent 必须继续给出镜头顺序、时长、具体画面、页面状态、素材来源、字幕、转场和
SFX；只有完整分镜确认后才进入最终素材采集。用户从 Gallery 复制镜头名时，只需
提供卡名或“卡名 · 样式名”，Agent 负责读取本地配方卡和 demo 源码。

## 核心理念

1. **复刻既有页面必须用真实截图；手搓 UI 限非复刻场景，且质量与表达
   明确性是硬门槛。** 表现产品真实页面时第一步就起本地 dev server，
   用无头浏览器截全页 2x 纹理 + 元素级抠图 + layout.json 坐标表。
   非复刻场景（抽象开场/品牌段/独立展示组件）允许手搓 UI，但达不到
   出版级质感或观众看不懂它表达什么，就回截图路线。页面数据按风险处理：
   公开演示数据只有在产品简报明确确认后才可保留；客户、个人、内部、密钥、
   实时或其他敏感数据必须用虚构或脱敏内容，且在采集前冻结。

2. **整支视频的视觉语言必须从产品自身生长，不能另造一套不相干的
   “宣传片皮肤”。** 做 styleframe 前，先从产品/网站的设计系统、源码或
   computed styles 中提取并写入设计 spec：字体家族与字重、字号层级、
   行高/字距，栅格、间距、对齐、信息密度与圆角，以及背景/表面/正文/
   强调/状态色、渐变和材质。片中所有标题、字幕、数字、字卡、版式、
   转场、粒子、光效和其他动效配色都必须复用或克制扩展这套 tokens，
   同时匹配产品的调性、品味和质感。走模板或镜头卡路线时，只继承其
   镜头结构、运动语法、节奏和已调参数；字体、排版、配色与材质必须按
   目标产品重新蒙皮。若因叙事需要偏离产品视觉，共同创作先说明理由并让用户
   确认；自主自由创作把理由与取舍写入设计 spec 后继续。

3. **电影感来自运镜、光影、节奏与声音的配合，不来自炫技动画。**
   被反复