4ndychu/natural-ai-demo-video

NAVI: 自然なAIデモ動画

NAVIは「Xのデモを作って」という指示を、キャプション付きMP4に変えます。顔出し不要、マイク不要、そして人が説明するような自然な声を実現します。

ステータス: 開発中。ui/内のローカルアプリはサンプルデータで完成しています。エンジン（音声生成、タイミング、録画、ぼかし、レンダリング）は構築中です。リリースされるまでは、どのステップが実際に実行可能で、どれがまだ利用できないかをユーザーに明確に伝えてください。実行したふりをしないでください。

最初に: 実行環境を確認する

NAVIはユーザー自身のコンピュータで実行する必要があります。ブラウザでローカルアプリを開き、ユーザーがテストアカウントにログインするための2つ目のブラウザウィンドウを開き、画面を録画し、キーをキーチェーンに保存します。これはClaude Code（ターミナル、IDE、またはデスクトップアプリのコードタブ）で動作します。

もしクラウドサンドボックス（通常のclaude.aiチャット、またはユーザーのマシンにアクセスできないセッション）で実行している場合は、すぐに1〜2文でその旨を伝えてください。NAVIを録画するにはユーザーのコンピュータでClaude Codeが必要であること、ここではスクリプト（トーク版＋キャプション版）を作成してブラッシュアップし、後で録画できるように準備することは可能であることを伝えてください。サンドボックスからのインストール、録画、ElevenLabs呼び出しは試みないでください。

使用するタイミング

• 「<サイト/アプリ>のデモ動画/ウォークスルー/製品ツアー/チュートリアルを作って」
• 「<Webアプリ>で<タスク>をする方法をナレーション付きで録画して」
• 「デモのセクション3を作り直して」「もっと穏やかにして」「1:20のメールをぼかして」

対象外: デスクトップアプリ、実際の人物がカメラに映る動画、声のクローン作成。

基本ルール（常時）

1. サイトにパスワード、コード、キーを入力しないでください。 ブラウザが開き、ユーザー自身がログインします。理想的には、ダミーデータを使ったテストアカウントにログインします。
2. ElevenLabsキーを印刷、ログ、コミットしないでください。 キーチェーンまたはユーザーのローカルキーファイルからのみ読み取ってください。ElevenLabsにのみ送信してください。
3. 何かをインストールする前に確認を取ってください（Playwright、ffmpeg、タイミングモデル）。何をインストールするのか、おおよそのサイズを伝えてください。
4. クレジットを消費する前にクレジットコストを表示してください（サンプル、録画、やり直し）。
5. プライバシーティアはオプションではありません。 ティア1は常にぼかします。ユーザーが金額や他人のデータを表示する設定に切り替えた場合は警告してください。
6. 音声をビデオに合わせるために一時停止や速度変更をしないでください。 代わりにビデオがホールドされるか引き伸ばされます。
7. ぼかしはリスクを減らすものであり、ゼロにするものではないと明確に伝えてください。 公開前にユーザー自身で確認する必要があります。

フロー

0. 初回実行（1回のみ）

• ElevenLabs APIキー（Starterプラン以上、テキスト読み上げアクセスが必要）を尋ねます。テストして残クレジットを表示します。macOSではシステムキーチェーン、Linuxではスキルフォルダ外のローカルファイルに保存します。ユーザーのみが読み取り可能にします。
• Playwright、ffmpeg、タイミングモデルを確認します。不足しているものがあれば、確認してからインストールします。
• 最初にデモするサイトを尋ね、ログインできるようにブラウザを開きます。サイトごとにセッションを保存します。
• 2回目以降のユーザーはこれらをすべてスキップします。デモごとにサイトのみが変更されます。

1. ブリーフィング

できるだけ少ない質問で、以下を取得します: 何を表示するか、どのサイトか、視聴者層（初心者/ある程度の経験者/プロ）、長さ（1、3、5、8分）、画面に表示してはいけないもの、使用する声。キャプションとコーナーラベルは、ユーザーが別途指定しない限り、保存されたデフォルト設定（キャプションは焼き付け、コーナーラベルなし）を使用します。ユーザーが要求していない透かし、ブランド名、「Illustrative」タグ、その他のオーバーレイを追加しないでください。 すべてを尋ねるのではなく、適切なデフォルトを使用します。新しいサイトの場合は、その都度ログインが必要です。

ユーザーが途中で方向転換した場合（「代わりにペイアウトページのデモにして」）は、現在のデモを下書きとして保持し、ユーザーの発言に基づいて新しいブリーフィングを開始します。

2. 探索

保存されたセッションを使用してPlaywrightでサイトを開きます。タスクの画面、正確なクリック位置とフィールド、読み込みが遅いものをマッピングします。実際のデータは変更せず、テストアカウントのデータのみを使用します。

3. スクリプト

動画を短いセクション（約15〜35秒）に分割します。各セクションについて2行を記述します:

• トーク版（音声が話す内容）: 人が実際に声に出して説明する方法。画面に合わせた小さな言い直し、リアクション、意見を含めます。フィラーは最小限にします。
• キャプション版（表示される内容）: クリーンで短く、フィラーはありません。

reference/voice-rules.mdに従ってください。両方を並べて表示し、クレジットを使用する前に承認を得てください。

4. 音声

• 音声の推奨設定から開始します（コースウォークスルー、SaaSデモ、製品ツアーなど、デモの種類に応じて）。
• スライダーと安全な範囲: カジュアルさ 3〜8、エネルギー 1〜6、ペース 0.94倍〜1.08倍、ためらい 0〜3、息継ぎ 0〜2、罵り言葉 0〜2（指示内では使用禁止。ユーザーが要求しない限りキャプションはクリーンに）。
• テキストプレビューは無料。音声サンプルは約300クレジット。初めて声を聴く場合は約120クレジット。
• 落ち着いたトーンに傾ける: 安定性を高め、リラックスした話し方。明るい一言のラインは避けます。息継ぎタグは追加しません。
• ユーザーがシリーズ全体で1つの音声を希望する場合は、プロジェクトにロックします。

5. プライバシー

録画前にティアを適用します:

• 常にぼかす: APIキーとトークン、パスワード、2FAコードとリカバリーコード、カード番号と銀行口座番号、ID番号、秘密鍵、ログインリンク。
• 許可がない限りぼかす: メールアドレス、電話番号、実名と写真、住所、金額、顧客情報、フォロワー数とメンバー数。
• ぼかさない限り表示: 使用統計、公開価格、日付。
• 加えてユーザー自身の非表示ワード。

6. 録画

docs/engine.mdを参照。要約: セクションごとに1回の連続テイクを生成し、単語のタイムスタンプを取得し、各ブラウザアクションをその単語にスケジュールし、録画し、アクションの実行が長引いた場合はフレームをホールドし、音声は決して一時停止しません。その後、ページレベルのぼかしで見逃したものをフレームスキャンします。

7. レビュー

レビューステップでローカルアプリを開きます。ユーザーは瞬間をマークします（AIっぽい、ぼかしが必要、速すぎる）か、ノートを入力します。やり直しコストを表示し、マークされたセクションのみをやり直します。使用した設定とともにマークをログに記録し、音声のデフォルト設定が時間とともに改善されるようにします。

8. エクスポート

デモのキャプション設定（焼き付け、別の.srtファイル、またはオフ）とコーナーラベル（オフ、またはユーザーのテキストを指定されたコーナーに）を適用します。どちらかの変更は再レンダリングのみで、クレジットは消費されません。MP4（1080p）、キャプション（キャプションがオフでない場合は.srt）、トランスクリプト、およびオプションの720pプレビューを、ユーザーが指定したフォルダ（デフォルトは~/Movies/NAVI）にエクスポートします。動画が属するプロジェクトに直接保存できるようにするためです。ファイル名はデモタイトルに基づきます。

あなたのデータ

設定から、ユーザーはキーを削除（ElevenLabsでも取り消すようにリマインド）、保存されたログイン情報を忘れる、設定をリセット、またはNAVIが保存したすべてを削除できます。完成した動画は決して触れられません。アンインストールは、このスキルフォルダも削除することを意味します。

ファイル

• reference/voice-rules.md: トークスクリプトの書き方と人間らしい声の生成方法。ステップ3の前に読んでください。

• reference/recording-rules.md: 音声に合わせて画面を録画する方法。ステップ6の前に読んでください。

• reference/privacy.md: ぼかしティアと警告。ステップ5の前に読んでください。

• config/defaults.json: スライダー範囲、プリセット、音声ごとの設定、画面上のデフォルト

• ui/index.html: ローカルアプリ（ブラウザで開く。?start=home|voice|review|settings、&theme=light|dark）

• ui/app.js: 画面、状態、サンプルデータ

• docs/engine.md: 録画、タイミング、ぼかし、レンダリングの仕組み