product-demo

プロダクトデモ

このリポジトリのアプリを、node + playwright + ffmpeg だけを使って、スコア付き・字幕付き・フレーム単位で正確なデモ動画に仕上げます。このパイプラインは決定論的です。クリーンチェックアウトから、デモ全体を再レンダリングして再スコアリングできます。

パイプラインの手順

手順	レシピ	出力
1. スクリプト	01-script.md	シーン表、タイムコード付きのナレーション、リズムグリッド
2. スタンドアロン UI	02-standalone-ui.md	静的フォルダーからレンダリングするアプリコンポーネント
3. コンポジション	03-composition.md	時計を純粋な関数とする単一の React ツリー
4. 録画	04-record.md	PNG フレーム → 視覚的にロスレスな H.264 マスター
5. 字幕 + ナレーション	05-captions-vo.md	SRT/VTT サイドカー、タイムコード付きナレーションスクリプト
6. サウンド	06-sound.md	sfx-cues.json、ライブプレビュープレーヤー、自動ミキサー
7. 音楽	07-music.md	ドロップから始まる、EQ で帯域を調整し、ダッキングしたベッド
8. アセンブル	08-assemble.md	イントロ + トランジション + ステム → 最終エクスポート

手順は順番に進めてください。それぞれが前の手順の出力を使用します。サイレント版のドラフトでは手順 5～8 は任意ですが、ローンチ品質の動画では必須です。

1 つのスタータープロンプトですべてを実行

ユーザーがデモを求めたら、8 つの手順すべてを自分で調整して進めてください。手順の一覧を渡したり、次のプロンプトを持ってまた来るよう伝えたりしてはいけません。代わりに、ユーザーにしか用意できない情報が必要になった時点で、会話の中で直接尋ね、数秒で回答できる成果物を添えてください。

1. 手順 1 の後：シーン表とナレーションスクリプトを見せ、コードを書く前に承認を求めます。スクリプトのタイミング調整は簡単ですが、レンダリング済みの動画のタイミング調整は簡単ではありません。
2. スモークレンダリングの後：4 枚のスポットフレームを見せ、長時間の全体レンダリングに進む前に確認を求めます。
3. 手順 5：貼り付け可能なタグ付きナレーションブロック（同期メモは含めません）を渡し、生成した音声ファイルのパスを尋ねます。
4. 手順 7：作成した音楽生成プロンプトを渡し、生成したファイルのパスを尋ねます。ユーザーがツールを一度に使いたい場合は、手順 3 の質問とまとめて尋ねてもかまいません。
5. スコア付きプレビューの後：最終マスターを書き出す前に、試聴用の短い動画を渡します。

確認を求める間以外は、進行状況を確認せずに作業を進めてください。ユーザーが音声や音楽などの任意アセットを使わない場合、作業を止めずに、それなしで仕上げます。

進捗管理（再開可能な実行）

対象リポジトリの demo/PROGRESS.md を管理します。各手順について、ステータス（todo / in progress / done）と生成した成果物のパスを 1 行に記録します。すべてのセッションで最初にこれを読みます。途中までのパイプラインは最初からやり直さず、最後に質問した時点から再開します。各手順の後に更新してください。

判断ルール

• ユーザーにスクリプトやストーリーがない → 01 から始めます。コードを書くことから始めてはいけません。
• ユーザーの動画がカクつく → 04 のみ（フレーム単位の録画で修正できます）。
• 既存の動画にサウンド/SFX を追加したい → 06（キューファイル + ミキサー）を実行し、音楽が必要なら続けて 07 を実行します。
• デモが「作り物っぽく感じる」 → 01 と 03 の誠実さに関するルールを適用します（実データ、合計値の整合）。
• 長さや構成を尋ねられた → 45～60 秒、各シーンに主張は 1 つ、約 6 シーン、構成：課題 → ドロップ → 魅力 → 操作 → 実証 → ブランド。
• ボイスクローンが遅く平坦に聞こえる → 05 の修正を適用します。
• SFX が遅れて鳴る、または埋もれる → 06 で測定したヒット位置のオフセットとピーク正規化を適用します。

必ず守ること（指示されていなくても徹底）

1. データは正確に。 フィクスチャは実物を使います。実在する項目、表示価格、整合性の取れた合計を使ってください。きりのいい数字を捏造してはいけません。
2. 何もフェードさせない。 すべてスタンプ、スライド、破れ、またはスナップで切り替えます。フェードは申し訳なさそうな印象を与えます。イージングは共有ヘルパー最大3つにまとめます。
3. 画面録画は禁止。 シーク契約（04）に従い、フレームごとにレンダリングします。
4. 無音のほうが無理に音を付けるよりよい。 キューは最大で1分あたり約10個、ストーリーの展開ごとに1つとし、連続して繰り返してはいけません。
5. マスターは2種類。 1つのコンポジションから、window.__NO_CAPTIONS フラグを使って字幕焼き込み版と字幕なし版を作成します。
6. ベタ塗りの黒は禁止。 暗いシーンはすべて、ぼかして暗く調整した、製品独自のアートまたは壁紙を背景にします。最初のフレームはサムネイルになります。製品本来の表面が黒い場合に限り、ベタ塗りの黒を使えます（03）。

テンプレート

templates/ に作業用スクリプトがあります。record.mjs（決定論的なPlaywrightフレームレンダラー。再開可能）、mix-audio.mjs（キュー駆動のffmpegミキサー。タイミングを調整したボイスオーバーのステムには --vo、ベッドには --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/