Communitygithub.com

m2promario-afk/hyperframes-M2PRO

記事やメモ、トピック、概要などの任意のテキストを、顔出し不要の解説動画に変換します。撮影や実際のアセットは不要で、シーンごとにタイポグラフィ、抽象的なグラフィック、図解、データ可視化などのビジュアルが自動生成されます。

hyperframes-M2PRO とは?

このスキルは、任意のテキストを「顔出し不要の解説動画」に変換するHyperFramesワークフローです。動画は、ウェブサイトや実写をキャプチャするのではなく、タイポグラフィや抽象的なグラフィック、図解、データ可視化などを用いて、各シーンのビジュアルをゼロから生成します。このスキルは、トピック解説、概念の分解、ハウツー動画、ランキング形式の動画などに最適です。ワークフローは、プロジェクトのセットアップ、テキストの取り込み、デザインシステムの選択、ストーリーボードとスクリプトの作成、音声(ナレーションとBGM)の生成、各フレームのビジュアルデザイン、そして最終レンダリングという段階を踏みます。HyperFrames、HeyGen、Kokoroなどのプラットフォームをサポートし、ユーザーの介入を必要とするステップと自動化されたステップを明確に分離することで、効率的な動画制作を実現します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/m2promario-afk/hyperframes-M2PRO/tree/HEAD/skills/faceless-explainer

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

プラグインインストール: セットアップまたは更新コマンドの前に、このスキルが HyperFrames プラグイン内にある場合は、プラグイン実行ルール に従ってください。スタンドアロンインストールの場合は、以下の更新手順をそのまま使用します。

まず、このスキルを最新に保ってください — ユーザーに確認してから実行: npx hyperframes skills update faceless-explainer。すべてが最新の場合は高速で何も行いません。それ以外の場合は、このスキルとそれが依存するコアドメインスキルを、それらを使用する前に更新します。

media-use: オーディオ/画像/ロゴを調達する前に、/media-use を呼び出して、HeyGen カタログから BGM/SFX/画像を、公式ソースからブランドロゴを解決します。最初に --adopt を実行して既存のアセットを登録します。/media-use スキルを参照してください。ホストアプリが独自の音楽や効果音ツールを提供している場合は、音楽と効果音にそれらを使用してください。

Faceless Explainer to HyperFrames

このスキルを使用して、テキストの塊を解説動画に変換します:デザインシステムを選び、教育的なストーリーを計画し、HyperFrames でフレームごとに構築します。Faceless とは、すべてのビジュアルがダウンストリームで作成されることを意味します — キャプチャステップも実際のアセットインベントリもありません。

正面玄関は /hyperframes です。 あなたがオーケストレーターです。各ステップを実行し、そのゲートを確認してから続行します。このスキルは、テキストからトピックを説明するためのものであり、キャプチャする製品やウェブサイトはありません。他の意図、単なる「動画を作成」、または不確かな場合は、最初に /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/extracted/; ステップ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。


Step 0: セットアップ

目標:確定したブリーフを携えて入場し、HyperFrames プロジェクトを作成し、ブリーフを永続化します。

ブリーフはインテントレイヤーによって確定され、ここでの質問によって確定されるものではありません。 開始ルール、順番に:(1) BRIEF.md が存在する → それを読み、何も尋ねない — ブリーフは確定しており、その flow/storyboard がモードを導出します(ブリーフコントラクト § 1)。(2) BRIEF.md はないがプロジェクトが存在する(ディスク上に hyperframes.json / STORYBOARD.md) → ストーリーボードのフロントマターと記録されたプリファレンスから再開する;構築途中のプロジェクトに再質問しないでください。(3) どちらでもない — 直接ここに到着した新しい作成リクエスト → /hyperframes を読み、そのインテントレイヤー(references/intent-interview.md)を実行します:レシピと記憶されたデフォルトをチェックし、このルートの質問(../hyperframes/references/routes/faceless-explainer.md)を実施し、ロックされたブリーフを返します。編集リクエストはこれらすべてをスキップします — 編集を実行してください。

hyperframes.json が欠落している場合にのみ初期化します。プロジェクトに <project> という名前をトピックからケバブケースで付けます(例:compound-interest-explained)。ワークスペース名やタイムスタンプは使用しないでください。

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=faceless-explainer — 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 を使用するかローカルエンジンを使用するか、およびサインアウトしている場合のサインイン方法を報告します。次のいずれかのブランチを適用します:

  • 協調モード: ユーザーがサインインするか、明示的に offline / go を選択するのを待ちます。
  • 自律モード: ステータスを述べて、利用可能なローカルエンジンで続行します。

オフラインプロバイダーが存在しない場合に、必要な機能を黙って省略しないでください;ブロッカーを明示してください。この決定を別の質問に折り込んだり、リポジトリごとの .env にキーを書き込んだりしないでください。認証の所有権とオフラインフォールバック:/media-use references/setup-providers.md § プロバイダー。

ゲート: hyperframes.json と BRIEF.md が存在する;プリファレンスに基づく回答が記録された(ブリーフコントラクト § 2);サインインステータスが表示された(サインイン済み、またはオフラインで続行)。


Step 1: ブリーフ(キャプチャなし)

目標:ユーザーのテキストを情報源としてプロジェクトに取り込みます。ウェブサイトのキャプチャも実際のアセットもありません — これはフェイスレス解説動画です。

ユーザーの入力全体をそのまま保存し、次に手動で合成キャプチャパッケージを作成します:

  • capture/extracted/visible-text.txt — 記事/メモ/トピック/ブリーフ全体をそのまま。これは情報のソースであり、ストーリーテンプレートではありません(ステップ3で再形成されます)。
  • capture/extracted/tokens.json — { "title": "", "description": "", "colors": [], "fonts": [] }。ブリーフから title/description を埋めます。ユーザーが明示的にブランドカラーやフォントを指定した場合を除き、colors/fonts は空のままにします — その場合にのみ追加します(デザインプリセットは完全なパレットを提供します)。

ユーザーがスクリプトを貼り付けた場合、または言葉遣いをそのまま残したい場合は、user_script.txt としてそのまま保存します;VO_MODE(逐語的または再構成)は BRIEF.md から取得します — インテントレイヤーはスクリプトが到着したときに質問します。ブリーフになぜか欠落している場合にのみ、ここで一度尋ね、ステップ3のために回答を保存します。

npx hyperframes capture を実行しないでください(URL はありません)。asset-descriptions.md を作成したり、capture/assets/ を入力したりしないでください — フェイスレスビジュアルはステップ4-5で作成され、キャプチャされません。唯一の例外:ユーザーが実際の画像を提供した場合は、それを public/<basename> の下に配置し、ステップ3のためにメモします。

ゲート: capture/extracted/visible-text.txt と capture/extracted/tokens.json が存在する;解説のトピックとオーディエンスを1つの明確な文で述べられること。


Step 2: デザインシステム

目標:1つの出荷済みフレームプリセットを選択します;スクリプトがそれをこの動画の frame.md + キャプションスキンに変換します。

BRIEF.md が style_preset を指定している場合 — ユーザーはインテントレイヤーでショーケースを見て選びました — それを使用します;判断を下すのはブリーフが沈黙している場合のみあなたです。次に、1つの判断を下します — どのプリセット:../hyperframes-creative/references/design-spec.md を読み、../hyperframes-creative/frame-presets/ を閲覧し、トピック、トーン、オーディエンスに最も合うルックのプリセットを選びます。次に実行します:

node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .

スクリプトは残りを決定論的に行います:プリセットの FRAME.md をコピーして frame.md にし、capture/extracted/tokens.json 内の任意のブランドトークンにリミックスし(ブランドカラーは役割ごとにプリセットのカラーキーにマッピング、プリセットの表示+本文フォントはブランドのものと交換)、プリセットのキャプションスキンを .hyperframes/caption-skin.html にコピーし、自己検証します(マッピングが壊れていると exit 1)。exit 0 になったらすぐに進みます — 仕様の手動編集は行いません。

フェイスレス解説動画には通常ブランドカラー/フォントはありません(tokens.json の colors/fonts は空)→ スクリプトはプリセット独自のパレット、つまり完全に出荷可能なデザインを保持します。ユーザーがブランドカラー/フォントを指定した場合にのみ、実行前に tokens.json に追加し、マッピングが本当に必要な場合にのみ、その後手動で frame.md を調整します。

ゲート: build-frame.mjs が exit 0 で終了した — frame.md が指定されたプリセットから存在し、(プリセットが出荷する場合).hyperframes/caption-skin.html がキャプションスキンソースとして存在する;選択されたプリセットがプリファレンスとして記録された(--key style_preset --workflow <このワークフロー>、ブリーフコントラクト § 2)。


Step 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 の役割→ブループリントメニューを参照します:各ビートについて、候補のブループリントが示唆する形状でボイスオーバーを書き、適合する場合はその候補 blueprint: id をタグ付けします。教えるべき真実がどのビートが存在するかを決定します — ブループリントに合わせるためにビートを強制したり、実績のある形状が利用可能だからといってビートを発明したりしないでください。フェイスレスビジュアルはダウンストリームで作成されるため、フレームはアセットインベントリを保持しません:ユーザーが実際の public/<basename> 画像を提供した場合を除き、asset_candidates は空のままにします。ストーリーボードとスクリプトのリファレンスから正確な必須フィールドを使用します。

ドラフト作成後、レビューループの計画パスを実行します — ../hyperframes/references/review-loop.md § 1:計画を提案として提示し、2つの質問をします — 承認するか変更するか、そしてスケッチを先に(推奨)またはスキップするか。フィードバックはチャット返信として届きます;承認されるまでループします。これはチェックポイントゲートです(ブリーフコントラクト § 1):自律モードでは質問することは何もありません — 同じサマリーを事前通知として投稿し、続行します;スケッチはビルドに組み込まれ、その1つの質問を含む最終プレビューはステップ6で行われます。

ゲート: STORYBOARD.md が存在し、すべてのフレームが必要なナラティブフィールドを持っている;ナレーションが必要な場合 SCRIPT.md が存在する;ユーザーがフレームごとの計画を承認した(自律モード:サマリーが事前通知として投稿された)。


Step 3.1: オーディオ

目標:承認されたスクリプトからナレーション、ワードタイミング、音楽、およびオーディオメタデータを生成します。

ステップ3の承認後にオーディオを開始します。バックグラウンドで実行し、ステップ4に進みます(サインインステータスはステップ0ですでに表示されており、エンジンは自動的にフォールバックします)。

呼び出す前にユーザーの要求からナレーションボイスを選択します。 リクエストが声、性別、またはトーンを指定した場合は、一致するボイスIDを選択し、--voice <id> で渡します。パイプラインデフォルトはそれ以外の場合 Marcia(女性) on HeyGen / am_michael on Kokoro です — そのため、「男性の声」のようなリクエストは、フラグを渡さない限り黙って無視されます。ボイスIDはプロバイダー固有です;ステップ0のサインインステータスが選択したプロバイダーに対して解決します:HeyGen(サインイン済み)は node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list(または GET /v3/voices?engine=starfish)経由;Kokoro(オフライン)は <MEDIA_DIR>/audio/references/tts.md のボイステーブル経由(プレフィックス am_/bm_ 男性、af_/bf_ 女性)。ユーザーが好みを表明しなかった場合は、パイプラインデフォルトの前に記憶されたボイス(ブリーフコントラクト § 2)にフォールバックし、使用したボイスを述べます;どちらも指定されていない場合にのみ --voice を省略します。ユーザーが今回の実行で明示的にボイスを選んだ場合は、それを記録します(prefs.mjs record --key voice)。

node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <voice-id> &

オーディオスクリプトは、ナレーション、ワードタイミング、HeyGen の音楽ライブラリからの BGM ルックアップ、およびタイミングメタデータを処理します。BGM のムードはストーリーボードの music: フィールドから取得します。これは、生成ではなく取得に HeyGen Audio API を使用し、TTS と同じ ~/.heygen 資格情報を使用します。プロバイダーの詳細については、../media-use/audio/references/tts.md を読んでください。ホストアプリの独自ツールが音楽や効果音を作成する場合は、ファイルを assets/ の下に置き、audio_meta.json ファイルに "source": "host" とマークしてリストします:音楽は bgm { "path": "assets/…", "source": "host" } として、ストーリーボードでは music: none とします;効果音は sfx エントリ { "frame": <n>, "file": "assets/…", "offset_s": 0, "duration_s": <その長さ>, "source": "host" } として。すべてのオーディオパスはこれらを保持し、ホスト効果音のあるフレームにはルックアップされたキューはありません。

ナレーションがなく、SCRIPT.md もない場合は、音声生成をスキップします。ストーリーボードに音楽ムードがある場合、BGM は引き続き実行される可能性があります。

正規の完全無音マーカー(このオーディオモデルを再利用するすべてのワークフローで共有):STORYBOARD.md の上部 YAML ブロックに music: none、SCRIPT.md なし、かつ sfx: キューやホストオーディオがないこと。この組み合わせにより、プロジェクトは無音としてマークされます — このスキルはすべての後続ステップでデフォルトを変更し、動画のトラック数は0、スクリプトのオーディオトラックはありません。以下はこのスキルの残りです:

(注:原文が途中で切れていますが、マークダウンとして有効な部分を翻訳しました。)

関連スキル