Communitygithub.com

faceless-explainer

任意のテキスト(記事、ノート、トピック、概要)を、顔出しなしの解説動画に変換します。サイトや映像のキャプチャは不要で、シーンごとにタイポグラフィ、抽象グラフィック、図表、データ可視化などのビジュアルを生成します。トピック解説、概念の分解、ハウツー、リスト形式の動画に最適です。ウェブサイトから動画を作成するもの(/product-launch-video — プロモーションやツアー)ではありません。不明な場合は → /hyperframes。

faceless-explainer とは?

このスキルは、ユーザーが提供したテキストを基に、顔出しなしの解説動画を完全自動で生成するためのものです。動画のビジュアルはすべて後工程で作成されるため、実際のサイトや映像資産をキャプチャする必要はありません。ユーザーはトピックを提供するだけで、スキルが解説ストーリーの設計、スクリプト作成、デザインシステムの選択、フレームごとのアニメーション生成、そして最終的な動画レンダリングまでを実行します。対応プラットフォームはHyperFramesであり、ワークフローはStep 0からStep 6までの明確に定義された手順で構成されています。特に、Step 3とStep 4ではユーザーによるレビューと承認が必要なゲートが設けられており、協調的または自律的なモードで動作します。このスキルは、製品やウェブサイトをプロモーションする動画ではなく、純粋に概念やトピックを説明する動画を作成する場合に使用します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/faceless-explainer

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

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

ドキュメント

最初に、このスキルを最新に保つために、確認なしで以下を実行してください: npx hyperframes skills update faceless-explainer。すべてが最新の場合は高速に動作し、何もしません。そうでない場合は、このスキルとそれが依存するコアドメインスキルを、それらに依存する前に更新します。

media-use: オーディオ/画像/ロゴのソースを探す前に、/media-useを呼び出して、HeyGenカタログからBGM/SFX/画像を、公式ソースからブランドロゴを解決してください。最初に--adoptを実行して、既存のアセットを登録します。/media-useスキルを参照してください。

顔出しなし解説動画からHyperFramesへ

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

玄関口は/hyperframesです。 あなたはオーケストレーターです。各ステップを実行し、そのゲートを確認してから、次のステップに進みます。このスキルは、製品やキャプチャするウェブサイトがなく、テキストからトピックを説明するためのものです。それ以外の意図、単なる「動画を作成」、または不明な点がある場合は、最初に/hyperframesを読んでください。インテントレイヤーがすべてのルート決定を所有し、BRIEF.mdなしでここに到着した新しい作成リクエストは、とにかくそれを通過します(セットアップの開始ルール)。

あなたはオーケストレーターです。videos/<project>/で作業します。ステップを順番に実行し、各ゲートを通過してから次に進みます。ユーザーゲートのステップは、ステップ0、ステップ3、およびステップ6です。ステップ0の前に../hyperframes-core/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がない場合にのみ初期化します。プロジェクト名はトピックからケバブケースで命名します(例: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-core/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 § Providers。

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


ステップ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つの明確な文で述べることができる。


ステップ2: デザインシステム

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

BRIEF.mdがstyle_presetを指定している場合 — ユーザーがインテントレイヤーでショーケースから目で見て選択したもの — それを使用します; 判断を下すのは、ブリーフが静かな場合のみあなたの役割です。次に、あなたは唯一の判断を下します — どのプリセットか: ../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-core/references/storyboard-format.md、および../hyperframes-core/references/script-format.mdを読みます。これらを使用してSTORYBOARD.mdを作成し、ナレーションが必要な場合はSCRIPT.mdを作成します。フロントマターのduration:はブリーフのlengthから設定します — 大まかな期待値です; アセンブルは、実際の尺がその目標に対してどこにあるかを報告します。

解説の構造(コンセプト/ハウツー/リスト形式/ストーリー)、フック戦略、明確化テクニック、感情のビート、タイプ列挙マッピング、およびVO_MODEにはstory-design.mdを使用します。動画の順序は、入力テキストの段落順ではなく、ナラティブデザインから決定されます — 並べ替え、マージ、省略、圧縮します。ソフトガイドとして、../hyperframes-animation/blueprints-index.mdの役割→ブループリントメニューを参照します: 各ビートについて、その候補ブループリントが示唆する形状で音声を書き、適切なブループリントがある場合はその候補blueprint: idをタグ付けします。教育的な真実がどのビートが存在するかを決定します — ブループリントに合わせるためにビートを強制したり、実績のある形状が利用可能だからといってビートをでっち上げたりしないでください。顔出しなしのビジュアルは後工程で作成されるため、フレームにはアセットインベントリはありません: asset_candidatesは、ユーザーが実際のpublic/<basename>画像を提供した場合を除き、空のままにします。ストーリーボードとスクリプトのリファレンスから必要な正確なフィールドを使用します。

ドラフト後、レビューループの計画パスを実行します — ../hyperframes-core/references/review-loop.md § 1: ボードを開き(尋ねる必要はありません)、計画を提案として提示し、2つの質問をします — 承認するか変更するか、そしてスケッチを先に(推奨)またはスキップするか。フィードバックはチャットまたはボードのコメントファイルを通じて、承認されるまでループします。これはチェックポイントゲートです(ブリーフ契約 § 1): 自律モードではボードも質問もありません — 同じサマリーをヘッズアップとして投稿し、続行します; スケッチはビルドに統合され、プレビューに関する唯一の質問はステップ6で行われます。

ゲート: STORYBOARD.mdが存在し、すべてのフレームに必要なナラティブフィールドがある; ナレーションが必要な場合はSCRIPT.mdが存在する; ユーザーがフレームごとの計画を承認した(自律: サマリーがヘッズアップとして投稿された)。


ステップ3.1: オーディオ

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

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

呼び出す前に、ユーザーの要望からナレーションボイスを選択します。 リクエストが声、性別、またはトーンを指定した場合は、一致するボイスIDを選択し、--voice <id>で渡します。パイプラインデフォルトはそれ以外の場合、HeyGenではMarcia(女性)、Kokoroではam_michaelです — そのため、「男性の声」のようなリクエストは、フラグを渡さない限り黙って無視されます。ボイス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を読んでください。

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

標準の完全無音マーカー(このオーディオモデルを再利用するワークフロー間で共有): STORYBOARD.mdの上部YAMLブロック内のmusic: none かつ SCRIPT.mdがないこと。この組み合わせにより、プロジェクトが無音としてマークされます — ナレーションなし、BGMなし、SFXなし。audio.mjsはこれを認識し、何も生成しません(古いaudio_meta.jsonがあれば削除します; audio_meta.jsonがないことは、アセンブルが無音として扱うものです)。したがって、このステップはクリーンスキップです。ナレーションがある場合のmusic: noneは、TTSを維持し、BGMのみをオフにします。このスペルを正確に使用してください — 他のマーカーを即興で作成しないでください。

ゲート: オーディオジョブが開始された、またはプロジェクトが無音としてマークされている(music: none + SCRIPT.mdなし)。


ステップ4: フレームビジュアルデザイン

目標: 各ストーリーボードフレームに、ビジュアルの方向性、レイアウトの意図、およびモーションの選択を追加します。

最初にボードのスケッチを行います(協調モードのみ)。 計画が承認されたらすぐに、スケッチパスを実行します — ../hyperframes-core/references/review-loop.md § 2(ステップ3.1を待たないでください; スケッチはタイミングを使用しません):

…

[翻訳のため一部省略]

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

embedded-captions

>

figma

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

general-video

>

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

関連スキル