ai-product-video

ai-product-video：电影感产品视频制作

一个自包含的制作能力库：152 张镜头配方卡（附 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 推荐哪一种模式及其依据和取舍。

然后明确询问：“根据上面的产品检查，我推荐使用 ×× 模式。要按这个模式继续吗？” 同时告知用户：152 张镜头卡都在 references/shots/ 下，按 camera / typography / transition / ui-entrance 等类别分目录，可以直接翻目录挑镜头。

用户尚未提供可检查的项目或页面时，简要介绍三种模式再询问；不要仅因 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 的效果”。此时不要介绍模板、也不要询问是否使用模板； 按镜头卡名称解析规则确认指定镜头，完整阅读每张卡，并按卡片的“参考实现” 定位准确 demo 源码。单镜头可在目标素材明确后执行；完整宣传片若尚未说明采用 自主自由创作还是共同创作，只询问这两种模式，指定镜头作为后续制作约束，不自动 等同于共同创作。

四种用法

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

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

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

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

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

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

核心理念

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

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

3. 电影感来自运镜、光影、节奏与声音的配合，不来自炫技动画。 被反复认可的是：单主角完整动作弧（聚光→推近→悬浮→归位）、 物理隐喻驱动的加速度（发牌）、侧斜机位 orbit 环绕特写、 riser→impact→sparkle 的声音句式。批量元素入场靠运动本身， 不靠逐个发光——装饰性 glint/泛光群发即廉价，单点高质量光效可做。

4. 每个镜头只讲一个动效；关键信息落定后必须呼吸。 一种动画手法（飞入/堆叠/翻页）全片只当一次主角，重复镜头、重复 tagline 一律删。节奏偏好是单向的：历史反馈全部指向"放慢/停留"， 从未有一次"太慢了"——品牌字标落定 hold ≥1s、批量动效收尾留 0.5s 静止、开场主体动作给足 3s。排时间线时预先给 hold/rest 留帧预算。

5. 强节奏 BGM 的片子，所有转场和动效必须卡在拍上。 BGM 用 dlazy search_audio 取（本库不再内置曲库，见 ## dlazy 工具链）。 用户已选好音乐 → 开工前先做节奏分析（librosa 网格拟合求真实 BPM/相位 + kick/snare/hihat 三分类鼓点定位），网格按瞬态覆盖率 验收通过后才分镜；时间线用拍号 beatF(n) 写，稀疏重音钉真实 瞬态而非网格插值点，渲后从成片抽音轨回测切点误差 ≤3f。 方法论见 references/music-beat-sync.md。 配了 BGM 的片子终渲固定交付两版：带 BGM 版 + 无 BGM 版（保留 SFX）， 靠 bgm inputProp 从同一时间线渲出，方便用户后期自配音乐。

6. 用镜头卡动效必须先定位准确的 demo 实现代码。 先在 references/shots/ 下确认卡名与卡内样式名，再按卡片文档的 “参考实现”定位具体 TSX。配方卡给的是语义和参数表，准确的 demo 源码 才是调校过的参数真相（缓动、时值 配比、摘罩时机、已知坑的规避写法）。允许适配性改动，但卡上 "已知坑/命门"标注的参数不得降档——质量标准只升不降。凭卡名和 理解新写＝放弃全部调校积累。

7. 共同创作把廉价确认物前置，自主自由创作把同样的判断留作执行记录。 产品简报→需求到执行决策表→文字方向→styleframe→镜头映射→分镜的顺序不变； 共同创作逐级交给用户确认，自主自由创作由 Agent 自主选定并连续推进。两种模式 都不应在方向未定时进入逐镜头实现。

8. 验收贯穿全程 + 交付前独立审查。 阶段 5 起每个镜头用 npx remotion still 出静帧自检、每轮修改后整片渲染 + ffmpeg 抽帧回看；交付前必须派一个干净上下文的 subagent 做独立终检。审查输入 包含成片、关键帧、产品简报、需求到执行决策表、当前模式确认或记录的视觉方向/styleframe、功能到镜头映射、 镜头卡名/变体、准确 demo TSX、最终分镜、选中的镜头卡和 审美准则；按 references/final-review.md 同时检查方案一致性、功能完整性、镜头还原度、视觉/音频技术质量和数据安全， 逐条出带帧号证据的报告。制作者对自己的产出有确认偏差，首检永远不能交给用户。

9. 确定性渲染：禁 Date.now()/Math.random()，一切伪随机固定 种子（mulberry32/哈希，seed 从 index 派生），逐帧可复现。

工作流

自主自由创作按 references/pipeline.md 从阶段 0 连续执行，不逐阶段等待用户确认。 共同创作先按 references/guided-free-creation.md 完成阶段 0–3 的产品理解、视觉方向、 镜头映射和分镜确认，再从流水线阶段 4 的最终素材采集继续，不得重复提问或重新设计。 阶段 2–3 扫 references/shots/ 各卡 frontmatter 按能量曲线选镜头；阶段 5–7 持续 对照 references/aesthetic-rules.md 自检；阶段 6 读 references/sound-design.md；卡点片全程贴 references/music-beat-sync.md。

dlazy 工具链

画面由 Remotion 生成，音乐、补充音效、旁白、字幕和 B-roll 走 dlazy CLI —— 一条命令覆盖多家模型，不用自己对接各家 API。

准备

npm install -g @dlazy/[email protected]
dlazy login      # 设备码流程，远程终端也能用；key 自动写入 ~/.dlazy/config.json
dlazy -h         # 列出当前账号可用的全部工具

也可以不全局安装：npx @dlazy/[email protected] <command>。 已有 API key 时用 dlazy auth set <key>（在 https://dlazy.com/dashboard/organization/api-key 获取）。

速查

用途	命令
BGM（本库不内置曲库）	dlazy search_audio --query "<mood>"
补充音效（自带 149 个不够时）	dlazy search_audio --query "<sfx>" 或 dlazy keling-sfx -h
旁白 TTS	dlazy -h → 选，再 dlazy <tts-tool> -h
字幕逐词时间轴	dlazy fun-asr --audio_url <wav> --format json（或 dlazy elevenlabs-stt），读返回的 data.words[]
补充图片	dlazy search_image --query "<关键词>" 或文生图工具（dlazy seedream-5.0 -h、dlazy jimeng-t2i -h、dlazy banana2 -h）
B-roll 真实运动镜头	dlazy -h → 选一个视频生成工具，再 dlazy <tool> -h

首次付费调用前先 dlazy <tool> -h 确认工具名与参数——可用工具随账号而变， 不要凭印象拼模型名。多个独立生成（多镜头、多变体、多音色）并发跑，别串行等。

ナレーション（任意、デフォルトでは追加しません）

製品紹介動画のデフォルト形式は、映像＋字幕＋サウンドデザインで、ナレーションは付けません。ナレーションを入れると、カメラワークや テンポの表現力が損なわれるためです。ユーザーが明確にナレーションを希望する場合、または動画が「複雑なことをわかりやすく説明する」役割 （機能解説、チュートリアル向け）を担う場合にのみ追加し、フェーズ 3 の絵コンテ承認前に必ず決定してください（ナレーションの長さがショットの尺を直接 決めるため、後から追加するとタイムラインの再構成が必要になります）。追加する場合は、次の手順で進めます。

1. TTS を選ぶ：dlazy -h で利用可能な音声ツールを確認し、言語をまたぐ場合は多言語モデルを優先します。まず -h でパラメーターを確認してください。
2. まず 2 文を試してから全体を生成する：絵コンテの中で最も長い文と最も短い文を使って一度レンダリングし、話速と音色を確認してから、 全文をレンダリングし、public/narration.wav に保存します。
3. 実際の長さを絵コンテに反映する：TTS の実際の長さは見積もりとほとんど一致しません。実際の長さに合わせてショットのフレーム配分を再構成し、 映像を先に作り終えてから音声に合わせることは避けてください。
4. 字幕：dlazy fun-asr --audio_url public/narration.wav --format json で単語ごとの タイムラインを取得します（メディアフィールドはローカルパスに対応しており、CLI が自動的にアップロードします）。返された data.words[] （各項目に start／end／text を含みます）を assets/lib/Caption.tsx に渡します。
5. ミキシング：ナレーションがある場合は BGM を 0.12–0.18 に下げます（ナレーションがない場合は 0.34）。SFX は人声の文の 開始・終了フレームを避けます。

ナレーションを付けない動画では、これまでどおり映像と字幕で解説を担い、音のない間を残さないでください。

どのタイミングでどのファイルを読むか

タイミング	読むファイル
プロジェクト開始時で、モードが未決定	最小限の読み取り専用チェックを行い、3 種類の完成した紹介動画モードを提示して推奨する
自由な自律創作	pipeline.md（エージェントがフェーズ 0～7 を自律的に完了し、フェーズごとの確認を待たない）
共同創作	guided-free-creation.md（フェーズ 0～3 を確認）を読んでから、pipeline.md のフェーズ 4 に進む
ユーザーが BGM を選択済み	music-beat-sync.md（先に分析してから絵コンテを作成）
テンプレートを使う	template/TEMPLATE.md 全文
絵コンテの設計	sequences/ のブリッジテンプレート（まず動画全体の骨組みを埋める）；shots/ のすべての frontmatter；選択したカードの全文
ショットごとの実装	該当ショットカードの全文＋「参考実装」をもとに特定した正確なデモソースコード全文＋対応する assets/lib/ コンポーネント
サウンドデザイン	sound-design.md ＋ assets/audio/
最終確認	final-review.md ＋ aesthetic-rules.md の全文を読み、チェックリストを確認する（独立した subagent が実行）

アセットの使用方法

• assets/lib/ のコンポーネントは、新しいプロジェクトに コピーしてから 自由に変更できます（このライブラリから import しないでください）。 一覧：PageCam（2.5D ページカメラ——あらゆる「実際のページ」のショットの基盤）、DigitRoll、 FlashCut、Caption、FlatPanel、VerticalTicker（3D の無限スクロール壁）、 helpers(rand/shake/camera/motion)。FlatPanel と helpers/camera には three ＋ @react-three/fiber ＋ @remotion/three の依存関係が必要で、それ以外は remotion のみで動作します。
• assets/scripts/capture-template.mjs をコピーし、先頭の CONFIG（BASE／ルート／セレクター）を変更します。
• assets/audio/ の効果音はそのままコピーして使用できます（商用利用無料ライセンス。audio/ATTRIBUTION.md を参照）： audio/sfx/<カテゴリ>/ にある 149 個の効果音は、シーン別に 16 のカテゴリに分類されています （transition impact riser camera ui text paper film light data scifi mech glass fluid crowd counter）。音を探す際はまずカテゴリディレクトリを確認してください。一覧は sound-design.md を参照してください。 用語集にある sparkle のディレクトリ名は light/ です（sparkle/ ではありません）。S1 は音色を禁止しますが、動作音は禁止しません—— 映像にクリックやスイッチ操作が実際にあるなら、それに合う効果音を付ける必要があります。ただし ui/ の半分は合成フィードバック音（tone/bleep/ notification）なので、個別に試聴し、ディレクトリ全体を一括で許可しないでください（対象リストは sound-design 3.3 を参照）。 長いサンプル音と小さな音の素材には、それぞれ特別な対応が必要なリストがあります（sound-design 4.1）。
• demos/ は各カードの実装ソースコードです。多くは自己完結したグレースケールのデモです（一部は demos/_fixtures/Fixtures.tsx のダミー UI シーンコンポーネントを import し、個別のデモは demos/_textures/ の実際のページテクスチャを import します）。Remotion プロジェクトにコピーすれば実行できます。 一部のデモでは @remotion/motion-blur（CameraMotionBlur）を使用するため、npm i @remotion/motion-blur が必要です。対象一覧は demos/README.md を参照してください。
• template/ には Ink Press のショット構成とシーンソースコード一式があります（36.2s／1085 フレーム）。 元動画のスクリーンショット素材はこのライブラリに含まれていません（別製品の実際のページであるためです）。ショット構成を参考にし、素材は対象製品のものに差し替えてください。 詳細は template/TEMPLATE.md を参照してください。 サンプル動画をダウンロードしていなくても利用できますが、動的プレビューは表示されません。