openvidstudio

openvidstudio は何をしますか？

プロジェクトの実際に動作するアプリからデモ動画を構築します。すべての画面は実際の製品から取得され、生成されたものは一切ありません。

最初に行うこと

preflight を実行します。Node.js、ffmpeg、PlaywrightのChromium、アプリが実際に応答しているか、ナレーションエンジンが存在するかをチェックします。各失敗は修正方法を明示します。これをスキップすると、長時間のレンダリング後に依存関係の欠落が表面化します。

ツールが登録されていない場合、サーバーがインストールされていません。ユーザーにMCP設定でこれを指定し、クライアントを再起動するよう指示します：

{ "mcpServers": { "openvidstudio": { "command": "npx", "args": ["-y", "@openvidstudio/mcp-server"] } } }

順序

preflight -> extract_brand -> plan_beats -> [write VO] -> validate_beats -> 承認ゲート
  -> write_beats_file -> capture_screenshot -> scaffold_scene -> validate_scenes
  -> [plan_sound_effects] -> generate_narration -> stitch_composition -> contact_sheet
  -> render_video -> qc_extract_frames

1. インテーク

質問する前に整理する。 通常のリクエストは「このプロジェクトのデモ動画を作って」だけで、それ以上のものはありません。それが全体のブリーフであり、十分です。

ユーザーにインタビューするのではなく、リポジトリを読むことから始めます：

• README.md は製品が何か、そして何が重要かを示しています
• package.json の scripts は起動方法を示し、dev スクリプトは通常ポートを指定しています
• routes や pages は何を撮影すべきかを示しています

次に、自分でアプリを起動し、応答することを確認します。ユーザーに調べてもらうURLを尋ねないでください。開発コマンドを見つけ、実行し、確認します。起動に .env の欠落やデータベースが起動していないなど、あなたが知り得ない情報が必要な場合のみ質問します。

リポジトリからは分からないため、本当に質問する価値があること：

• 動画の長さ
• リポジトリに多くの機能がある場合、表示すべき2～3の機能
• 誰に向けたものか（ランディングページの訪問者か、すでにインストールしている人か）

一度に一つの質問、そしてリポジトリが答えられない質問のみ。 最初に6つの質問を連ねるのは、これを仕事のように感じさせる最も速い方法です。docs/PLANNING.md に不明なケースの完全な判断ツリーがあります。

ジョブの最後に結果を表示します：mp4のパス、その長さ、および contact_sheet またはいくつかの qc_extract_frames 静止画。誰も見ないレンダリングは、納品された動画ではありません。

1b. リポジトリのブランドを適用する

extract_brand を sourceRepo に撮影対象のリポジトリを設定して実行します。Tailwind v4 の @theme ブロックと :root のカスタムプロパティを読み取り、next/font インポートからフォントを選択し、見つけた最良のロゴをコピーし、src/brand.ts に書き込みます。

scaffold_scene の前に 実行します。事後テーマを適用した動画は、再スキャフォールディングが必要になります。

返される unresolved リストを確認し、重要なものを手動で補完します。これはもっともらしい色をでっち上げるのではなく、実際に見つけられるものだけを報告するため、未解決のトークンは実際のギャップであり、失敗ではありません。

これが手書きのシーンに課すルールの一つ：トークンはコンポーネント内部で読み取り、モジュールスコープでは読み取らないこと。applyBrand は共有トークンオブジェクトを変更するため、ファイルの先頭で const MONO =\"${font.mono}"`とするとデフォルトをキャプチャし、ブランドを見ることがありません。代わりにmonoStack()とuiStack()` を使用します。

2. ビートを計画する

plan_beats に目標の長さと機能を指定します。連続したスケルトンと、ビートごとの 単語予算 を返します。

その予算に合わせてナレーションを書きます。validate_beats はビートごとに 2.3～2.9 語/秒 の厳格な下限かつ上限を強制するため、行が少なすぎると却下される可能性があります。指定された数値に書くことで往復を回避できます。

すべての screenshot ビートには visual.url と visual.interactions（配列、空でも可）も必要です。これを事前に明記しているドキュメントは他にありません。

3. 承認ゲート

ユーザーにビートファイル全体を表示し、要約ではなく、明示的な同意を待ちます。 その前には何もディスクに書き込みません。これは提案ではなくプロトコルルールであり、間違った動画が1時間ではなく1文で修正できるポイントです。

その後 write_beats_file を実行します。

4. キャプチャ

screenshot ビートごとに capture_screenshot を実行します。これはオリジンごとのChromeズームの非同期を補正し、そうでなければ小さく、ソフト、またはフレームがずれたキャプチャになります。

ページにエントランスアニメーションがある場合、またはショットが中途半端な状態を捉えて明らかに間違って見える場合は、wait インタラクションを渡します。

5. シーン

ビートごとに scaffold_scene を実行します。そのビート自身のコピーと時間を使用して、そのままレンダリングされる シーンを出力します。コンテンツを編集し、構造を再構築しないでください。

次に validate_scenes を実行します。これはレンダリングに成功するが単純に間違っている失敗をキャッチします：フルステージ幅でレイアウトされたコンテンツは、カメラがズームインすると見える領域がステージをカメラスケールで割ったものになるため、トリミングされます。また、固定カメラ、欠落したアセット、ナレーションのないビートもフラグします。

プロップについては docs/API.md を読んでください。ライブラリのソースは読まないでください。

6. ナレーション

generate_narration を実行します。stitch_composition が参照するビートごとに1つのクリップを書き込み、タイムストレッチを自然な範囲に制限し、クリップをビートに無理やり合わせることを防ぎます。ビートが合わないと言われた場合は、スクリプトまたはビートの長さを修正し、それ以上ストレッチしないでください。

6b. サウンド。組み込みでカバーされない場合のみ

合成パックにはすでにクリック、キーストローク、ベル、ブリップ、成功音、ウーッシュ、およびBGMが含まれており、ffmpegが生成するためサードパーティの権利はありません。これを優先します。

動画に本当に他のものが必要な場合は、ユーザーにどのようなサウンドが必要か尋ね、次に plan_sound_effects を1エントリーにつき1サウンドで実行します。組み込みが既にカバーしているリクエストを教え、残りに対してPixabay検索リンクと正確な保存パスを返します。

Pixabayからダウンロードはしません。また、あなたもすべきではありません。Pixabayの利用規約は自動収集を禁止しており、APIは実際の人間のリクエスト用であると述べており、サウンドエフェクトのエンドポイントは公開されていません。ユーザーがダウンロードし、あなたが検証します。その後、ツールを verify: true で再度呼び出して、各ファイルが実際のオーディオであることを確認し、フォーマットを正規化します。

provider: "freesound" は代わりに自動的に取得しますが、ユーザー自身のAPIトークンが必要で、取得したすべてのクリップは ATTRIBUTION.md に記録されます。そのファイル内のものはすべて動画の説明に到達する必要があります。そうしないとライセンス違反になります。

音楽はこれらすべての例外です。find_music_bed は2つのCC0パブリックドメインカタログ（約9,400トラック）を検索し、import_music_bed はユーザーが選択したものをトリミング、フェード、ラウドネスマッチングして public/audio/music-bed.mp3 に取り込みます。そこにはクレジットは必要ありません。bgmusic スキルに詳細があります。合成BGMがローンチやプロモーション用にあまりにもプレーンな場合に使用します。

7. 組み立てとチェック

stitch_composition、次にレンダリング前に contact_sheet を実行します。コンタクトシートはビートごとに2フレームを1つの画像にまとめたもので、フルレンダリングのごく一部の時間で済みます。これは5分の動画が9000フレームであるため重要です。

render_video は最初に draft: true で実行します。ドラフトが適切に見える場合のみフル品質でレンダリングします。

次に qc_extract_frames を実行し、docs/PIPELINE.md のチェックリストに従います。

QCで不合格になるルール

docs/STYLE.md から、最も頻繁に破られるため再掲：

• 線形イージングは使用しない。 E.* プリセットを使用します。
• すべてのシーンは CinematicScene 内に配置します。
• モーションを決して止めない。 静的なフレームは不合格です。
• 画面上でもナレーションでも、ダッシュ（em dashes）は使用しない。
• キャプションは overlay に配置し、children には配置しない。 そうしないとカメラ移動に伴って画面外に流れます。
• スクリーンショットは BrowserFrame 内のみ。 録画やAIクリップはそれを使用してはなりません。さもないと生成された映像が実際のキャプチャのビジュアルシグネチャを取得します。

主張してはならないこと

実際の製品UI（DOMレンダリング、スクリーンショット、または録画されたもの）はグラウンドトゥルースです。AI生成クリップは雰囲気のみであり、製品テキストを決して表示しません。ナレーションが何かを主張する場合、ビジュアルはそれを示さなければなりません。できない場合は、その行を書き直します。