製品ビデオは何をしますか？

60〜120秒のナレーション付きビデオを構築し、実際の画面を使用して製品を紹介します。出力はHyperFramesプロジェクト（生成されたindex.htmlとアセット）およびレンダリングされたMP4です。

すべての成果物（スクリプト、画面上のテキスト、README）は視聴者の言語で記述します。このファイルは手順書であるため英語のみです。

出力レイアウト

ビデオごとに1つのフォルダを作成し、ユーザーが別途指示しない限りコードリポジトリの外に配置します:

<Product>-video/
  ROTEIRO.md | SCRIPT.md     スクリプト、クレームテーブル、確認ポイント
  LEIA-ME.md | README.md     何がリアルか、何が再構築されたか、制限事項、再実行方法
  01-.. 0N-..                キャプチャされたアセット、ソースごとに1フォルダ
  voz/ | voice/              ナレーションセグメント（テキストとシーンごとのオーディオ）
  ferramentas/ | tools/      設定とgen.js（コンポジション生成ツール）
  hyperframes/
    index.html               生成ファイル。手動編集禁止。
    assets/{img,video,audio,fonts}
    renders/

ワークフロー

フェーズを順に実行します。各フェーズはチェックで終了し、チェックが合格するまで次のフェーズを開始しません。

P1. ソース

ユーザーが指定したすべてのソースを特定します。別のマシンからのパスは存在しないため、現在のユーザーのフォルダー内で同じプロジェクトを検索し、使用したものを指定します。
製品の表示方法を分類します:
- ライブアプリ、アクセス可能: キャプチャ（P3、site-capture.cjs、record-interaction.cjs）。
- 公開Figmaファイル: プロトタイプビューからフレームをキャプチャ（P3、figma-frames.cjs）。トークン不要。
- ログインが必要でアクセス不可: スクリーンショットまたはテストアカウントを要求します。記憶から画面を再構築しないでください。
製品の独自の文言を抽出します: ランディングページのコピー、機能名、数値、FAQ、用語。これらがクレームの唯一の許容されるソースです。

チェック: 視聴者、製品のモジュール、および使用予定の各事実のソースを指定できます。

P2. スクリプト

references/script.mdを読み、そのテンプレートからスクリプトファイルを作成します。最も重要なルール:

予算は1秒あたり2.3〜2.6の話し言葉。250ワードで約100秒。
シーンごとに1つのアイデア、8〜16秒、6〜9シーン。
ナレーション内のすべてのクレームは、クレームテーブルにソースとともに行を持ちます。ソースが裏付けられないものは除外します。
音声に合わせて記述: ブランド名は発音どおり、数字はスペルアウト、音声が文字を一文字ずつ読むような略語は避けます。

チェック: クレームテーブルに空のソースセルがなく、「確認ポイント」リストにマーケティングコピーから来たすべての数値が名前付きで含まれています。

P3. アセット

設定例についてはreferences/capture.mdを参照してください。

ソース	スクリプト	出力
ライブWebアプリ、静的	`scripts/site-capture.cjs`	ファーストフォールド、全ページ、ステップスクリーンショット、スクロール動画、切り抜き
ライブWebアプリ、フロー	`scripts/record-interaction.cjs`	カーソルまたはタップオーバーレイ付きのインタラクションクリップ
公開Figmaファイル	`scripts/figma-frames.cjs`	フレームごとに1つのPNG、フレームにクロップ

またブランドも収集: ロゴ（存在する場合はベクター）、ブランドフォントファイルとそのライセンス、製品のCSSからのカラートークン。scripts/page-styles.cjs <url>を使用して製品自身のページが使用するスタイルを読み取ります: 見出しファミリー、ウェイト、行間、文字間隔、ボタンスタイル、すりガラス表面。ビデオは推測ではなくこれらをコピーします。

チェック: いくつかのキャプチャを開いて確認します。ログインウォール、クッキーバナー、開発オーバーレイが表示されるキャプチャは失敗です。

P4. 音声

references/voice.mdを読みます。生成前にユーザーがどの音声を使用するか尋ねます: 有料サービス（MCPまたはAPIキー経由）が優先、提供されたナレーションが次、無料ローカルモデルはユーザーが明示的に要求した場合のみ（マシンにモデルをインストールするため）。

MCP経由の音声サービス: ナレーション全体を1回の連続テイクとして生成（シーンごとに1段落、先頭に1つのデリバリータグ）。scripts/voice.py --existingでアラインメントし、scripts/split-take.py --levelでポーズでカットし、scripts/voice.py --parts "voz/cena-{id}.wav"でシーンファイルを結合。シーン境界は正確で、トーンは最初から最後まで一定。シーンごとにリクエストするとムードが変わります。
APIキー経由の音声サービス: scripts/voice.py --provider elevenlabs --el-voice <id>で生成と結合。scripts/elevenlabs.pyは接続確認、音声ランキング、音楽作成を行います。
提供されたナレーション: --existingを渡します。シーン境界はトランスクリプトをスクリプトにアラインすることで決まります。

表現力豊かなモデルの場合、テイクの先頭に1つの[audio tag]でデリバリーを設定します。各シーンはtext（キャプション用、クリーン）を持ち、必要に応じてtts（音声が受け取るテキスト、異なる場合）を持ちます。

すべてのモードでワードタイミングはスクリプトテキストにアラインされるため、キャプションは転写エラーを表示しません。プリントされるmisheardリストを読みます: スペルアウトされた数字と同音異義語以外は発音の問題です。スクリプトを修正して再生成します。

コンポジション前にナレーションを約−18 LUFSに正規化します。

チェック: voiceover.jsonが存在し、合計時間が目標の10%以内、misheardが説明され、scripts/voice-tone.py --scenesがシーン間の中央ピッチの広がりを約3セミトーン以下と報告します。

P5. コンポジション

references/hyperframes.md（レンダラーが強制するルール）を読み、assets/gen-template.jsから開始します。

スクリプトからindex.htmlを生成します。タイミングは音声が変わるたびに変化します。ジェネレーターはそれを吸収しますが、手動編集はできません。
すべてのアニメーションをナレーションのフレーズにアンカーします（at(3, 'No painel')）。単一の短い単語には決してアンカーしないでください。「no」「e」「um」はシーン内で複数回出現し、最初のマッチは誤りです。
フレームの下部17%をキャプション用に確保します。この帯域には何も入りません。
ブラウザウィンドウまたはデバイスモックアップ内に実際の画面を表示します。説明はその横に置き、上部には置きません。
1文につき1つの明確なハイライト（リング、ズーム、カーソル移動）を優先し、多数の小さなハイライトは避けます。
見出しは製品自身の見出しスタイルを取り、タグは製品の表面言語を使用します（P3で読み取り済み）。デフォルトで最も太いウェイトにしないでください。
ストーリー、リール、ショート用には、references/vertical.mdを読み、同じナレーションからassets/gen-vertical-template.jsを開始点として縦型コンポジションも構築します。16:9版をクロップしないでください。

チェック: npx hyperframes lintでエラー0。

P6. 検証

npx hyperframes checkが「Check passed」で終了すること（lint、ランタイム、レイアウト、モーション、コントラスト）。
npx hyperframes snapshot --no-end --at <各シーンの1つの時刻、および各ハイライト>を実行し、すべてのフレームを確認します。ffmpegで2×2レビューシートを作成し、より速くレビューします。
各フレームをその秒のナレーションと比較します。一般的な欠陥: 文に対して間違った画面、間違った要素へのハイライト、テキストの折り返し、キャプション帯域内の要素。
ドラフトをレンダリングし（render -q draft）、MP4自体を検証: ffprobeで時間とストリーム、loudnormでラウドネス（ターゲット−16〜−17 LUFS、音楽あり）、ffmpegでフレーム抽出。

チェック: MP4から抽出した各シーンのフレームを少なくとも1つ確認しました（スナップショットだけでなく）。

P7. 納品

READMEを作成: 何がリアルか（キャプチャ）、何がHTMLで実際のデータをもとに再構築されたか、何が概念か、既知の制限、プレビュー、チェック、レンダリングのコマンド、音声の交換方法。その後ユーザーに報告: 何が作成されたか、何が検証されたか、まだ人間の判断が必要なもの（未確認の数値、音楽、音声品質）。

すでに支払い済みの落とし穴

コード	症状	原因と修正
X1	画面が1秒早く切り替わる	`at()`が最初の「no」または「e」にマッチした。フレーズにアンカーする。
X2	要素がシーン全体で非表示のまま	同じ要素に2つの`fromTo`トゥイーンがある。後者のトゥイーンが即座に「from」状態をレンダリングする。出現ごとに1つの要素を使用するか、CSS初期状態からの`to()`を使用する。
X3	サイトがスクリプトに403を返すが、ブラウザでは開く	ヘッドレスユーザーエージェント。デスクトップUAを送信する`lib/browser.cjs`を使用する。
X4	起動時に「Executable doesn't exist」	インストールされたブラウザビルドがPlaywrightのバージョンと異なる。`lib/browser.cjs`は最新のローカルChromium、次にChromeにフォールバックする。
X5	全ページスクリーンショットが1つの折り目で切れる	アプリが内部コンテナをスクロールする。最大のスクロール可能要素を見つけ、ビューポートをその高さまで拡大する。
X6	スクロール録画がカクつく	スクリーンキャストのフレームレートが可変。フレームごとにレンダリングする。
X7	変更されないファイルを何度も確認する	レコーダーがあなたが確認しているフォルダとは異なるフォルダに書き込んでいる。出力パスを表示して確認する。
X8	カウンターが巨大な「%」の横に小さく表示される	子孫セレクター（`.num span`）が内部のカウンタースパンにもマッチした。ラベルには子セレクターを使用する。
X9	キャプションに間違った単語が表示される	キャプションが生のトランスクリプトから来た。`voice.py`が行うように、タイミングをスクリプトテキストにアラインする。
X10	音声がブランドや用語を誤発音する	話されるように書く（1つの単語として書かれたブランドは2つの単語としてナレーションされる、外国語の用語にはネイティブフレーズを使用）、数字はスペルアウト、略語は展開する。
X11	2回目のキャプチャ実行で最初のインデックスが消えた	上書きではなく、実行間でインデックスファイルをマージする。
X12	タイムドラッパー内の動画がチェックに失敗する	タイムドメディア自体に`class="clip"`を付ける。そのコンテナにはタイミングを設定しない。
X13	プロトタイプキャプチャにトーストやクッキーバーが含まれる	スクリーンショットの前にオーバーレイを閉じて非表示にし、フレームにクロップする。
X14	録画にプロトタイプ専用ボタンが表示される	録画前にセレクターまたはテキストプレフィックスでテスト・開発コントロールを非表示にする。
X15	製品が証明できないクレーム	「初めて」「合計」「保証」にはソースが必要。除外するか「確認ポイント」に移動する。
X16	マーケティング数値に根拠がない	使用する前にどこから来たか確認する: ドキュメントとページのgit履歴を検索する（`git log -S'<数値>'`）。コピー編集で手作業で上げられた数値は証拠ではない。削除する。
X17	縦型カットが読めない	9:16のデスクトップ画面は9ピクセルのテキストになり、クロップしてもデスクトップのように見える。製品のモバイルランディングページのように、パネル上に一度に1つの適応要素を表示する（`references/vertical.md`）。
X18	ナレーションが劇的または幸福感あふれる	非言語タグ（`[sighs]`）、`[excited]`、`[serious]`は製品ビデオで過剰になる。`[calm]`と`[warm]`を使用し、指定されたシーンのみを再生成し、`scripts/voice-tone.py`でテイクを比較する。
X19	レイアウトがWebページのように読める	左揃えの列、見出しの上のセクションラベル、隅の小さなロゴ。縦型ビデオ: すべて中央揃え、ラベルを削除、ロゴを大きく中央に配置。
X20	タグラインがロゴから遠く離れている	ロゴのエクスポートに透明パディングがある。ファイルをトリミングし、実際のマークに対して位置調整する。
X21	ナレーションが一部のシーンで平坦で、他では興奮している	各シーンが独自のタグで別々のリクエストだったため、それぞれ別のパフォーマンスになった。1つのタグで1回の連続テイクを生成し、`scripts/split-take.py`でポーズでカットし、`scripts/voice-tone.py --scenes`で測定する。シーン間の5セミトーンの広がりは気分のむらとして聞こえ、2セミトーンは均一として聞こえた。
X22	見出しが重く、製品らしくない	ウェイトが（800と）仮定された。`scripts/page-styles.cjs`で製品自身の見出しスタイルを読み、ファミリー、ウェイト、行間、文字間隔をコピーする。
X23	見出し内の単語がくっついて見える	Webページからコピーされた狭い文字間隔が、ビデオサイズで単語間の隙間を閉じてしまう。`word-spacing: .07em`を追加する。
X24	ガラスタグが真っ白に見える、またはフェード後にぼかしが飛び込む	背景が不透明すぎる（下部を0.6近くに保つ）、またはフェードが親要素にある: 祖先の不透明度が1未満だと、要素がその背後から切り離される。`backdrop-filter`を持つ要素をアニメートする。
X25	コントラストチェックが問題ないテキストで失敗する	チェックがフェード途中のフレームをサンプリングした。報告された時間にスナップショットを撮る。要素が入場途中の場合、入場を数フレーム移動してチェックを再実行する。非常に短いコンポジションでこれが最も発生しやすい。

このスキルのファイル

references/script.md: スクリプトテンプレート、ペーシング、クレームテーブル、発音テーブル。
references/capture.md: 3つのキャプチャスクリプトの設定、キャプチャ仕様、ブランドアセット。
references/voice.md: TTS設定、音声、アラインメント、ラウドネス、音楽、ナレーションの交換。
references/hyperframes.md: コンポジションルール、CLIコマンド、レイアウトゾーン。
references/vertical.md: ストーリー用の9:16版: セーフエリア、画面上のカメラ、キャプション、パート分割。
assets/gen-template.js: プロジェクトのツールフォルダにコピーする16:9コンポジションジェネレーター。
assets/gen-vertical-template.js: フル版とショート版を持つ縦型ジェネレーター。
scripts/lib/browser.cjs、scripts/site-capture.cjs、scripts/record-interaction.cjs、scripts/figma-frames.cjs、scripts/element-shots.cjs、scripts/page-styles.cjs、scripts/voice.py、scripts/split-take.py、scripts/voice-tone.py、scripts/elevenlabs.py、scripts/lib/eleven.py。

ElevenLabs APIコード（--provider elevenlabs、elevenlabs.py）はテスト用のキーなしで書かれました。初回の実際の実行で修正が必要になる可能性があります。--partsルートとローカルルートはテスト済みです。

製品ビデオ