プラグインインストール: セットアップやフレッシュネスコマンドの前に、このスキルがHyperFramesプラグイン内にある場合は、プラグイン実行ルールに従ってください。スタンドアロンインストールの場合は、以下の更新手順をそのまま使用します。
まず、このスキルを最新に保ってください — ユーザーに確認してから実行:
npx hyperframes skills update product-launch-video。すべてが最新の場合は高速なno-opです。そうでなければ、このスキルと、それが依存するコアドメインスキルを、それらに依存する前に更新します。
media-use: オーディオ/画像/ロゴを調達する前に、
/media-useを呼び出して、HeyGenカタログからBGM/SFX/画像を、公式ソースからブランドロゴを解決します。最初に--adoptを実行して既存のアセットを登録します。/media-useスキルを参照してください。
figma source: ソースがfigma.comのURLの場合、最初に
/figmaを実行 — アセットのエクスポート、ブランドトークン、必要に応じたコンポーネント/ストーリーボードの再構築 — その後、その出力からこのワークフローを構築します。Figmaを生のMCPツールで直接操作しないでください。それはSVGサニタイズ、.media/manifest.jsonlの来歴、ブランドトークンのvar()バインディングをスキップするため、後でブランドが変更された場合、完全な再インポートなしでは反映されません。
製品ローンチからHyperFramesへ
このスキルを使用して、製品をキャプチャし、そのブランドを理解し、ローンチビデオを計画し、HyperFramesでフレームごとに構築します。
正面玄関は
/hyperframesです。 あなたはオーケストレーターです。各ステップを実行し、そのゲートを確認し、その後にのみ次のステップに進みます。このスキルはマーケティング、ローンチ、プロモーション、または公開される製品のためのものであり、「私たちのサイトのプロモーション」のような、プロモーション目的のリクエストも含みます。サイトツアー/ショーケースの依頼もここに留まります。BRIEF.mdには「そのまま表示する」意図が記載され、キャプチャされたスクリーンショットがビデオで特集されるアセットになります。それ以外の意図、単なる「ビデオを作って」、または不明な点がある場合は、最初に/hyperframesを読んでください — インテントレイヤーがすべてのルート決定を所有し、BRIEF.mdなしでここに到着した新しい作成もそれを経由します（セットアップの開始ルール）。
あなたはオーケストレーターです。videos/<project>/で作業します。ステップを順番に実行し、各ゲートを通過してから続行します。ユーザーゲートはステップ0、ステップ3、ステップ6です。ステップ0の前に../hyperframes/references/brief-contract.mdを読んでください — ゲートタイプと、BRIEF.mdのflow/storyboardがどのようにしてステップ3/4/6のゲートを支配するモードを導出するかを定義しています。ステップ5を除くすべてのステップを自分で実行します。ステップ5では、フレームごとに1つのサブエージェントをディスパッチします。デザインやモーションのルールはここに置かないでください。それらはフレームワーカーサブエージェント、このスキルのローカル../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/、およびhyperframes-creativeにあります。
ワークフロー: ステップ0 セットアップ -> hyperframes.json; ステップ1 キャプチャ -> capture/; ステップ2 デザインシステム -> frame.md; ステップ3 ストーリーボード/スクリプト -> STORYBOARD.md および SCRIPT.md; ステップ3.1 オーディオ -> audio_meta.json; ステップ4 ビジュアルデザイン -> 強化された STORYBOARD.md; ステップ5 フレーム -> compositions/frames/NN-*.html および index.html; ステップ6 最終レンダリング -> renders/video.mp4。
ステップ0: セットアップ
目標: 承認されたブリーフを取得し、HyperFramesプロジェクトを作成し、ブリーフを永続化します。
ブリーフはインテントレイヤーによって確認され、ここでの質問によって確認されるわけではありません。 開始ルール、順に: (1) BRIEF.mdが存在する -> それを読み、何も質問しない — ブリーフは確定しており、そのflow/storyboardがモードを導出します（ブリーフ契約§1）。(2) BRIEF.mdはないがプロジェクトが存在する（ディスク上のhyperframes.json/STORYBOARD.md） -> ストーリーボードのフロントマターと記録された設定から再開します。構築途中のプロジェクトに再び質問をしないでください。(3) どちらでもない — ここに直接到着した新しい作成リクエスト -> /hyperframesを読み、そのインテントレイヤー（references/intent-interview.md）を実行します。これはレシピと記憶されたデフォルトをチェックし、このルートの質問（../hyperframes/references/routes/product-launch-video.md）を実施し、ロックされたブリーフを返します。編集リクエストはこれらすべてをスキップします — 編集に進んでください。
hyperframes.jsonがない場合にのみ初期化します。<project>にブランド名またはドメインをケバブケースで指定します（例: acme-promo）。ワークスペース名やタイムスタンプは使用しないでください。
npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=product-launch-video — initはインストールされたスキルをGitHubの最新版と比較し、古いものがあればグローバルセットを更新します。
initの後、<PROJECT_ROOT>をvideos/<project>とし、以降のすべての相対パスコマンドをそのディレクトリを作業ディレクトリとして実行します。以下のコマンドで、.は<PROJECT_ROOT>を意味します。.media、capture、または出力ファイルを呼び出し元ディレクトリに書き込まないでください。
initの直後にBRIEF.mdを書き込みます（決して前ではありません — initは空でないディレクトリを拒否します）。インテントレイヤーのロックされたブリーフ。形式は../hyperframes/references/brief-format.mdに従います。<MEDIA_DIR>をインストールされた/media-useスキルディレクトリとして解決します。次に、node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes .を使用して、設定に基づく各回答を記録します（brief-format.mdはサブセットを指定します）。インテントレイヤーがレシピを採用した場合、node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name>を実行します。これにより、そのframe.mdがプロジェクトにコピーされ（ステップ2はスキップされます）、ステップ3が草案を作成するためのスケルトンが返されます。レシピは回答を提供しますが、承認は提供しません。レビューゲートは引き続き実行されます。
セットアップを進める前にサインインステータスを表示 — npx hyperframes auth statusを実行し、その出力をそのまま中継します。これにより、音声/BGMがHeyGenエンジンとローカルエンジンのどちらを使用するか、およびサインアウトしている場合のサインイン方法が報告されます。終了コードの契約に注意してください: auth statusはサインインしていない場合に終了コード1を返します（および保存された認証情報が拒否された場合）。この非ゼロの終了は通常のサインアウト状態であり、コマンドの失敗ではありません。そのため、エラーとして扱わず、再試行せず、&&/set -eで連鎖させてワークフローを中断させないでください。以下のいずれかの分岐を適用します:
- 協調モード: ユーザーがサインインするか、明示的に
offline/goを選択するのを待ちます。 - 自律モード: ステータスを述べ、利用可能なローカルエンジンで続行します。
オフラインプロバイダーが存在しない場合に必要な機能を黙って省略しないでください。ブロッカーを明示的に示してください。この決定を別の質問に折り込んだり、リポジトリごとの.envにキーを書き込まないでください。認証の所有権とオフラインフォールバックについては、/media-use references/setup-providers.md § プロバイダーを参照してください。
ゲート: hyperframes.jsonとBRIEF.mdが存在する。設定に基づく回答が記録された（ブリーフ契約§2）。サインインステータスが表示された（サインイン済み、またはオフラインで続行）。
ステップ1: アセットのキャプチャ
目標: ビデオのためのソースマテリアル、ブランドシグナル、および使用可能なアセットを収集します。
入力を分類し、パスを選択します。明示的なURL -> それをキャプチャし、サイトをナレーションとアセットに使用します。貼り付けられたスクリプト/ブリーフ -> user_script.txtとしてそのまま保存します。VO_MODE（そのまままたは再構成）はBRIEF.mdから取得されます — インテントレイヤーはスクリプトが到着したときにそれを尋ねます（ブリーフにない場合にのみ、ここで一度尋ねます）。次にキャプチャターゲットを解決します: テキスト内のURL -> それを使用します。ブランド名のみ -> WebSearch、URLを一行で確認し、クロールします。URL/サイトがない場合（またはブリーフがスクレイピングしないように指示している場合）-> キャプチャなしパス。
キャプチャを実行: npx hyperframes capture "<URL>" -o ./capture --json。呼び出し元がより短い期限を持っている場合を除き、デフォルトのポストナビゲーションバジェットを維持します。その場合、ダウンストリーム作業の時間を残す正の--capture-budget <ミリ秒>を渡します。--timeoutはページナビゲーションのみを制御します。--skip-visionは、オプションの画像キャプションが意図的に無効にされている場合にのみ使用します。
コマンド結果と出力ディレクトリをすぐに検査します。非ゼロ終了、JSON ok: false、またはcapture/BLOCKED.mdは、キャプチャパスのハードストップです。記録された理由を報告し、部分的なスクリーンショット、DOM、トークン、またはアセットを消費しないでください。失敗したURLキャプチャの後に、合成されたキャプチャなしのフォールバックを作成しないでください。元のブリーフがソースマテリアルを提供した場合、またはユーザーが失敗後に提供されたスクリーンショットやブリーフに明示的に切り替えた場合にのみ、キャプチャなしパスを続行します。
「テキストコンテンツが非常に少ない」などの警告と空のアセットカタログは、使用可能なページの証拠にはなりません。サイトツアーや「そのまま表示する」ブリーフの場合、信頼できるキャプチャ構造または提供されたスクリーンショットが必要です。どちらも存在しない場合は停止します。キャプチャが使用できないという理由だけで、ページを発明したり再構築したりしないでください。
サイトツアーや「そのまま表示する」ブリーフの場合、キャプチャされたページがビジュアルの信頼できる情報源です。実際のスクリーンショットを使用し、完全なウェブサイトをHTMLで再構築しないでください。ショット内で動きが必要な場合は、スクリーンショットをベースとして保持し、測定された位置に実際のキャプチャアセットをオーバーレイするか、動く1つのコンポーネントだけを再構築します。スクロールショットの場合は、capture/screenshots/full-page.png上でビューポートをアニメーション化します — これはドキュメント全体の1倍プレートで、1920px幅のビューポートがそれを下っていく際のピクセル精度を提供します。ページが高すぎて一枚でキャプチャできなかった場合は存在しません。その場合は、同じディレクトリ内の重なり合うスクロール位置のショットにフォールバックします。1倍を超えてズームインするには、代わりにその領域の独自の2倍キャプチャが必要です。プレートには1倍を超えるヘッドルームがないためです。ユーザーが明示的に様式化された解釈を要求した場合にのみ、ページ全体を再作成します。使用できないキャプチャだけでは許可になりません。
GEMINI_API_KEY、GOOGLE_API_KEY、またはOpenRouterキーが存在する場合、キャプチャは自動的にアセットにキャプションを付け、capture/extracted/asset-descriptions.mdに出力します。これはレビューゲートではありません。ビジョンキーがない場合は、DOMコンテキストを使用して続行します。
キャプチャなしパス: capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/asset-descriptions.md、およびcapture/assets/を手動で作成します。tokens.jsonは{ "title": "", "description": "", "colors": [], "fonts": [] }とします。可能な場合は、タイトル/説明をブリーフから入力します。visible-text.txtにはブリーフまたはスクリプト全体が含まれます。asset-descriptions.mdには、ユーザーがアセットに関するメモを提供しない限り、アセットがキャプチャされなかったことを記載します。
ゲート: キャプチャJSONがok: trueを報告。capture/BLOCKED.mdが存在しない。capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/asset-descriptions.md、capture/assets/が存在する。ブランドを1つの明確な文で述べることができる。asset-descriptions.mdを主要なアセットインベントリとして扱います。実際のキャプチャ後にこれがない場合は、停止し、キャプチャが不完全であることを報告します。オプションのフェーズの低下に関する警告は、この構造的なゲートがまだ合格している場合にのみ許容されます。
ステップ2: デザインシステム
目標: 出荷済みのフレームプリセットを1つ選択します。スクリプトがそれをこのビデオのframe.md + キャプションスキンに変換します。
BRIEF.mdがstyle_presetを指定している場合 — ユーザーがインテントレイヤーでショーケースから目で選んだものです — それを使用します。判断はブリーフが黙っている場合のみあなたに委ねられます。次に、1つの判断を下します — どのプリセットか: ../hyperframes-creative/references/design-spec.mdを読み、ブランドとブリーフに最も合う外観のプリセットを選択します。次に実行:
node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .
スクリプトは残りを決定論的に行います。プリセットのFRAME.mdをframe.mdにコピーし、それをcapture/extracted/tokens.jsonのブランドトークンにリミックスします（ブランドカラーがプリセットのカラーキーにロールごとにマッピングされます — インク、キャンバス、アクセント — キー/構造/コンポーネントは保持。プリセットの表示フォントと本文フォントはブランドのものに交換されます）。プリセットのキャプションスキンを.hyperframes/caption-skin.htmlにコピーし、自己検証します（マッピングが壊れている場合は終了コード1）。終了コード0で終了したらすぐに次のステップに進みます — スペックの手動編集は行わないでください。
ブランドカラー/フォントがないtokens.json（例: キャプチャなし）の場合、スクリプトはプリセット独自のパレットを保持し、完全に出荷可能なデザインになります。ブリーフがキャプチャで見逃したブランドカラー/フォントを指定している場合は、実行前にそれらをcapture/extracted/tokens.jsonに追加します（またはユーザーのdesign.mdを使用して入力します）。マッピングが本当に必要な場合にのみ、その後手動でframe.mdを調整します。
ゲート: build-frame.mjsが終了コード0で終了 — frame.mdが名前付きプリセットから存在する。そして（プリセットが出荷する場合）.hyperframes/caption-skin.htmlがキャプションスキンソースとして存在する。選択されたプリセットが設定として記録された（--key style_preset --workflow <this workflow>、ブリーフ契約§2）。
ステップ3: ストーリーボードとスクリプト
目標: ブリーフとキャプチャされたマテリアルを、承認されたフレームごとのストーリープランに変換します。
../hyperframes-creative/references/story-spine.md（フックの言語、証拠より先に価値、提案としてのストーリーボード、ソース追跡可能なビジュアル）、references/story-design.md、../hyperframes-animation/blueprints-index.md、../hyperframes/references/storyboard-format.md、../hyperframes/references/script-format.mdを読んでください。これらを使用してSTORYBOARD.mdと、ナレーションが必要な場合はSCRIPT.mdを書きます。フロントマターのduration:をブリーフのlengthから設定します — 大まかな期待値。アセンブリは、そのカットがそれに対してどこにあるかを報告します。
story-design.mdをストーリーの青写真、フック、説得ロジック、ビート、VO_MODE、およびアセットの選択に使用します。ソフトガイドとして、../hyperframes-animation/blueprints-index.mdのロール→青写真メニューを参照します。各ビートについて、適切な青写真IDをメモします（該当する場合）。ストーリーの真実がどのビートが存在するかを決定します — 決してビートを青写真に合わせることを強制せず、証明された形状が利用可能だからといってビートを発明しないでください。各ビジュアルフレームのasset_candidatesをcapture/extracted/asset-descriptions.md（正規のインベントリ）から選択します — 生のcapture/assets/を参照しないでください。そのインベントリが存在しないか使用できない場合を除き、ユーザーにアセットを選択させるための質問をしないでください。ストーリーボードとスクリプトのリファレンスから必要な正確なフィールドを使用します。
草案を作成した後、レビューループの計画パスを実行します — ../hyperframes/references/review-loop.md § 1: 計画を提案として提示し、2つの質問をします — 承認するか変更するか、そしてスケッチを先に（推奨）またはスキップするか。フィードバックはチャット返信として到着します。承認されるまでループします。これはチェックポイントゲートです（ブリーフ契約§1）: 自律モードでは
...
[翻訳のため省略]
...
ステップ4: ビジュアルデザイン
目標: 承認されたストーリーボードを、各ビートの具体的なビジュアル指示で強化します。
各フレームについて、STORYBOARD.mdのvisualフィールドを、背景、オーバーレイ、アニメーションタイプ（フェード、スライド、ズーム）、カラーパレットの適用に関する具体的な指示で埋めます。frame.mdのデザイントークンを使用します。キャプチャアセットを合成するための正確なCSSセレクタまたは座標を指定します。このステップは新しいファイルを作成せず、STORYBOARD.mdをインプレースで強化します。
ゲート: 強化されたSTORYBOARD.mdが存在し、すべてのvisualフィールドが埋められている。ユーザーが変更を要求しない限り、レビューループを再度実行する必要はありません。
ステップ5: フレームの生成
目標: 各ストーリーボードフレームをスタンドアロンHTMLファイルとしてレンダリングします。
各フレームインデックスについて、サブエージェントをディスパッチしてcompositions/frames/NN-<slug>.htmlを生成します。サブエージェントは<SKILL_DIR>/rules/および../hyperframes-animation/blueprints/からデザイン/モーションルールを使用します。メインエージェントはindex.htmlを生成し、すべてのフレームを正しい順序でリンクします。各サブエージェントに、そのフレームのストーリーボードエントリ、frame.mdトークン、および関連するキャプチャアセットへのパスを提供します。
ゲート: すべてのcompositions/frames/NN-*.htmlおよびcompositions/index.htmlが存在する。index.htmlがブラウザで開かれ、期待されるすべてのフレームを表示できる。
ステップ6: 最終レンダリング
目標: フレームシーケンスから最終ビデオファイルを生成します。
npx hyperframes renderを実行してビデオにします。出力はrenders/video.mp4に保存されます。オーディオファイルがある場合は、マージします。これはユーザーゲートです。レンダリングが完了したら、ユーザーに確認のためにビデオを表示します。
ゲート: renders/video.mp4が存在する。ユーザーが出力を承認した。