Communitygithub.com

duytienitptit/edit-hyperframe

任意のテキスト(記事、メモ、トピック、概要)を、顔出し不要の解説動画に変換します。ビジュアルは場面ごとに(タイポグラフィ、抽象グラフィック、図解、データビジュアライゼーションなど)自作されます。トピック解説、コンセプト解説、ハウツー、ランキング形式のリスト動画に最適です。

edit-hyperframe とは?

このスキルは、ユーザーが提供した任意のテキストを顔出し不要の解説動画に自動変換する機能を提供します。主な特徴は、動画内のすべてのビジュアルが実在のサイトや映像をキャプチャするのではなく、タイポグラフィや抽象グラフィック、図解、データ可視化など、場面ごとに新たに生成される点です。これにより、特定の製品やウェブサイトに依存しない、純粋な概念説明やハウツー動画の制作が可能になります。 このスキルはHyperFramesプラットフォーム上で動作し、プロジェクトは`videos/<プロジェクト名>/`ディレクトリに作成されます。ワークフローは、セットアップ(Step 0)、ブリーフ作成(Step 1)、デザインシステム選択(Step 2)、ストーリーボードとスクリプト作成(Step 3)、オーディオ生成(Step 3.1)、ビジュアルデザイン(Step 4)、各フレームのHTML生成(Step 5)、最終レンダリング(Step 6)という段階的なプロセスで構成されています。各ステップにはゲート(確認ポイント)が設定されており、ユーザーの承認や自動チェックを経て進行します。 特に重要なのは、「顔出し不要(faceless)」であることと、ユーザーが指定したテキストをそのまま使用するのではなく、教育的なストーリーテリングに基づいて再構成することです。動画のデザインは事前に用意されたフレームプリセットから選択され、ナレーションやBGMはHeyGenのTTS/音楽ライブラリ、またはKokoro等のローカルエンジンを使用して生成されます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/duytienitptit/edit-hyperframe/tree/HEAD/.claude/skills/faceless-explainer

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

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

ドキュメント

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

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

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

顔出しなし解説 → HyperFrames

このスキルは、テキストの本文を解説動画に変換するために使用します:デザインシステムを選択し、教育的なストーリーを計画し、HyperFramesでフレームごとに構築します。顔出しなしとは、すべてのビジュアルが後続工程で創作されることを意味し、キャプチャステップも実際のアセットインベントリもありません。

入り口は/hyperframesです。 あなたがオーケストレーターです。各ステップを実行し、そのゲートを確認してから続行してください。このスキルは、商品やキャプチャするWebサイトがなく、テキストからトピックを解説するためのものです。それ以外の意図、「動画を作って」というだけの依頼、または不明な点がある場合は、最初に/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。


ステップ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 がない場合にのみ初期化します。プロジェクト名はトピックからkebab-caseで命名します(例: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がドラフトするスケルトンが返されます。レシピは回答を埋めるものであり、承認ではありません。レビューゲートは引き続き実行されます。

Setup を通過して先に進む前に、サインインステータスを表示します — npx hyperframes auth status を実行し、その出力をそのまま中継します。これにより、音声/BGM が HeyGen を使用するかローカルエンジンを使用するか、およびサインアウトしている場合のサインイン方法が報告されます。次のいずれかのブランチを適用します:

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

オフラインプロバイダーがない場合に、必要な機能を黙って省略しないでください。ブロッカーを表面化します。この判断を別の質問に折り込んだり、リポジトリごとの .env にキーを書き込んだりしないでください。認証の所有権とオフラインフォールバックについては、/media-use references/setup-providers.md § プロバイダーを参照してください。

ゲート: hyperframes.json と BRIEF.md が存在すること。設定値ベースの回答が記録されていること(ブリーフコントラクト § 2)。サインインステータスが表示されたこと(サインインしている、またはオフラインで続行中)。


ステップ1: ブリーフ(キャプチャなし)

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

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

  • 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 が存在すること。解説のトピックとターゲットオーディエンスを、明確な一文で述べることができること。


ステップ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 にコピーし、自己検証します(マッピング不良の場合は終了コード1で終了)。終了コード0で終了したらすぐに進みます — スペックの手動編集は行わないでください。

顔出しなしの解説には通常、ブランドカラーやフォントはありません(tokens.json の colors/fonts は空) → スクリプトはプリセット独自のパレット(完全で出荷可能なデザイン)を保持します。ユーザーがブランドカラーやフォントを指定した場合にのみ、実行前に tokens.json に追加し、マッピングが本当に必要である場合にのみ、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 から設定します — おおまかな見積もりです。アセンブリは、実際の尺がその見積もりに対してどうだったかを報告します。

解説の構造(コンセプト/ハウツー/ランキング形式リスト/ストーリー)、フック戦略、明確化テクニック、感情のビート、タイプ列挙マッピング、および VO_MODE には story-design.md を使用します。動画のシーケンスは、入力テキストの段落順ではなく、ナラティブデザインから来ます — 並べ替え、マージ、省略、圧縮を行います。ソフトガイドとして、../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 が存在すること。ユーザーがフレームごとの計画を承認したこと(自律モード:サマリーが事前通知として投稿されたこと)。


ステップ3.1: オーディオ

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

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

呼び出す前に、ユーザーの要求からナレーションボイスを選択します。 リクエストが声、性別、またはトーンを指定した場合、一致するボイスIDを選択し、--voice <id> で渡します。パイプラインのデフォルトはそれ以外の場合、Marcia(女性)(HeyGen)または am_michael(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" とマークしてリストします:音楽は music: none のストーリーボードで bgm { "path": "assets/…", "source": "host" } として、効果音は sfx エントリ { "frame": <n>, "file": "assets/…", "offset_s": 0, "duration_s": <その長さ>, "source": "host" } として。すべてのオーディオパスはこれらを保持し、ホストサウンドのあるフレームは検索されたキューを取得しません。

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

正規の完全無音マーカー(このオーディオモデルを再利用するワークフロー間で共有されます):STORYBOARD.md のトップYAMLブロック内の music: none、SCRIPT.md なし、および sfx: キューやホストオーディオなし。その組み合わせはプロジェクトを無音としてマークします。

…

[翻訳のために切り詰められました]

関連スキル