製品デモ動画生成
このリポジトリのアプリケーションを、node.js + Playwright + ffmpeg のみを使用して、スコアリング済み・キャプション付き・フレーム単位で正確なデモ動画に変換します。パイプラインは決定論的であり、クリーンチェックアウトからデモ全体が再レンダリング・再スコアリングされます。
パイプラインの順序
| ステップ | レシピ | 出力 |
|---|---|---|
| 1. スクリプト | 01-script.md | シーンテーブル、タイムコード付きVOライン、リズムグリッド |
| 2. スタンドアロンUI | 02-standalone-ui.md | 静的フォルダからレンダリングされるアプリコンポーネント |
| 3. コンポジション | 03-composition.md | クロックの純関数としての単一Reactツリー |
| 4. 録画 | 04-record.md | PNGフレーム→視覚的ロスレスのH.264マスター |
| 5. キャプション＋VO | 05-captions-vo.md | SRT/VTTサイドカー、タイムコード付き音声台本 |
| 6. サウンド | 06-sound.md | sfx-cues.json、ライブプレビュープレイヤー、自動ミキサー |
| 7. 音楽 | 07-music.md | EQカット、ダッキングされたBGM（ドロップから開始） |
| 8. アセンブル | 08-assemble.md | イントロ＋トランジション＋ステム→最終エクスポート |
ステップは順番に進めてください。各ステップは前のステップの出力を使用します。ステップ5〜8はサイレントドラフトではオプションですが、ローンチ品質の動画には必須です。
1つのスタータープロンプトですべてを実行
ユーザーがデモを依頼したら、8つのステップすべてを自分で実行してください。ステップリストをユーザーに渡したり、「次のプロンプトで戻ってきて」と伝えたりしないでください。代わりに、ユーザーにしか提供できないものが必要な瞬間にのみ会話の中で直接質問し、その質問に数秒で答えられるようにする成果物を添付してください。
- ステップ1後: シーンテーブルと音声台本を表示し、コードを書く前に承認を求めてください。スクリプトのタイミング変更は安価ですが、レンダリング済み動画のタイミング変更は高価です。
- スモークレンダリング後: 4つのスポットフレームを表示し、長時間のフルレンダリングの前に続行するか確認してください。
- ステップ5: ペースト準備完了のタグ付き音声ブロック（同期メモなし）を渡し、生成された音声ファイルのパスを依頼してください。
- ステップ7: 自分で書いた音楽生成プロンプトを渡し、生成されたファイルパスを依頼してください。両方の依頼は、ユーザーがツールへの旅行を1回にまとめたい場合、ステップ3のものとまとめて実行できます。
- スコアリング済みプレビュー後: 最終マスターをエクスポートする前に、小さなカット版を聴いてもらうために提供してください。
質問の間は、確認なしで処理を進めてください。ユーザーがオプションのアセット（音声、音楽）を拒否した場合は、停止せずにそれらなしで動画を納品してください。
進捗追跡（再開可能な実行）
ターゲットリポジトリに demo/PROGRESS.md を維持してください。ステップごとに1行で、ステータス（todo / in progress / done）と生成されたアーティファクトパスを記録します。すべてのセッションで最初にこれを読み取ってください。中途半端なパイプラインは最初からやり直すのではなく、最後の質問から再開します。各ステップの後に更新してください。
判断ルール
- ユーザーにスクリプトやストーリーがない → 01から開始。決してコードを書くことから始めない。
- ユーザーの動画がカクカクする → 04のみ（フレームごとの録画で修正）。
- ユーザーが既存の動画にサウンド/SFXを追加したい → 06（キューファイル＋ミキサー）、必要に応じて07（音楽）。
- ユーザーのデモが「偽物っぽい」 → 01と03の誠実ルール（実際のデータ、合計の整合）。
- ユーザーが長さや構成を尋ねる → 45〜60秒、シーンごとに1つの主張、約6シーン、構成：問題→ドロップ→マジック→インタラクション→証明→ブランド。
- 音声クローンが遅く平坦に聞こえる → 05の修正。
- SFXが遅れたり埋もれたりする → 測定されたヒットオフセット＋06のピークノーマライゼーション。
絶対条件（依頼がなくてもこれらを遵守すること）
- 誠実なデータ。 フィクスチャは実際のもの（実際のアイテム、印刷された価格、整合する合計）でなければなりません。よりきれいな数字をでっち上げないでください。
- フェードなし。 すべてがスタンプ、スライド、リップ、またはスナップします。フェードは謝罪のように読まれます。イージングは最大3つの共有ヘルパーに限定します。
- スクリーンレコード禁止。 シークコントラクト（04）を介してフレームごとにレンダリングします。
- 無理に入れた音は、音がないより悪い。 1分あたり最大約10キュー、ストーリーのターンごとに1つ、連続して同じものを繰り返さない。
- 2つのマスター。 キャプション焼き込み版とクリーン版。
window.__NO_CAPTIONSフラグを介して1つのコンポジションから生成。 - フラットブラック禁止。 すべての暗いシーンは、製品自体のアートや壁紙の上に配置し、ぼかしてグレーディングを落とします。最初のフレームがサムネイルになります。フラットブラックは、それが製品の実際の表面である場合のみ（03）使用します。
テンプレート
templates/ にある動作スクリプト: record.mjs（決定論的なPlaywrightフレームレンダラー、再開可能）、mix-audio.mjs（キュー駆動のffmpegミキサー；--vo でタイミング調整された音声ステム、--bgm でBGM）、retime-vo.mjs（生成された読み上げを無音部分でカットし、各フレーズを作成されたタイムコードに配置）、sfx-cues.example.json（実際の10キュー楽譜）、package.json（npmスクリプト）。これらをターゲットリポジトリの demo/ ディレクトリにコピーし、パスを適応させてください。各レシピがいつ行うかを示します。
補完スキル
ターゲットリポジトリがRemotionやElevenLabsを使用している場合、これらの公式スキルもインストールしてください。このスキルはパイプラインとセンスをカバーし、それらのスキルはAPIをカバーします。
npx skills add remotion-dev/skills
npx skills add elevenlabs/skills
ユーザーが受け取るもの（動画以外）
ペースト準備完了の2つのアーティファクト。これにより、人間の作業は正確に2つのペースト作業（音声ツール用のタグ付き音声ブロック（05）と音楽生成ツール用のスタイルプロンプト（07））になります。ユーザーにこれらのいずれかを書かせないでください。
参考出力
4つのデモが、無関係な製品でこのパイプラインを証明しています。Vouchデモ（54.3秒、領収書分割）、Excalidrawデモ（35.5秒、実際の @excalidraw/excalidraw npmコンポーネントで撮影、ソースはこのリポジトリの examples/excalidraw 下）、Asakiri Studio（54秒、Tauri+Reactコースエディタ、esbuildでバンドルされた実際のコンポーネント）、Colosseum（54秒、Qt/QML Windowsメディアアプリ、そのトークンと独自のスクリーンショットからサーフェスを再構築、02のネイティブアプリパスを参照）。Vouchリポジトリ github.com/Anshgrover23/vouch には、完全な動作する demo/ ディレクトリ、コンポジション、ベンダーランタイム、キューファイル、キャプションがリファレンス実装として含まれています。すべての数値と障害を含むマニュアル: https://anshgrover23.github.io/product-demo-playbook/