Communitygithub.com

heygen-com/hyperframes

任意のテキスト(記事、メモ、トピック、要約など)を、人物が登場しない解説動画に変換します。画面キャプチャや実写はなく、各シーンのビジュアル(タイポグラフィ、抽象グラフィック、図、データ可視化など)を自動生成します。

hyperframes とは?

このスキルは、ユーザーが提供したテキストを元に、人物が登場しない解説動画(faceless explainer video)を自動生成するためのものです。対応プラットフォームはHyperFramesで、テキストの入力から動画レンダリングまでの全工程を、ステップバイステップのワークフローで実行します。スキルは、ブリーフの確認(ステップ0)、テキスト取り込み(ステップ1)、デザインシステムの選択(ステップ2)、ストーリーボードとスクリプトの作成(ステップ3)、ナレーションとBGMの生成(ステップ3.1)、ビジュアルデザインの追加(ステップ4)、フレームごとのHTMLファイル生成(ステップ5)、最終レンダリング(ステップ6)という順序で進行します。各ステップにはゲート(承認ポイント)があり、ユーザーまたはエージェントが進捗を確認しながら進めます。特に、テキストからストーリーを再構築し、あらかじめ用意されたプリセットデザインを適用して、視覚的で魅力的な解説動画を効率的に作成できる点が特徴です。

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

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

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

ドキュメント

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

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

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(フレームごとに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 が欠落している場合にのみ初期化します。<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エンジンを使用するかローカルエンジンを使用するか、そしてサインアウトしている場合のサインイン方法が報告されます。1つの分岐を適用します:

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

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

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


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

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

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

  • 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/ にデータを入力したりしないでください — facelessビジュアルはステップ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 にコピーし、自己検証します(マッピングが壊れているとexit 1)。exit 0になったらすぐに進みます — 仕様の手動編集は行いません。

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

ゲート: build-frame.mjs がexit 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 をタグ付けします。教えるという真実がどのビートが存在するかを決定します — ブループリントに合わせるためにビートを強制したり、実績のある形状が利用可能だからといってビートを発明したりしないでください。facelessビジュアルは後工程で発明されるため、フレームはアセットインベントリを持ちません。ユーザーが実際の public/<basename> 画像を提供した場合を除き、asset_candidates は空のままにします。ストーリーボードとスクリプトのリファレンスから正確な必須フィールドを使用します。

ドラフト後、レビューループの計画パスを実行します — ../hyperframes/references/review-loop.md § 1: 計画を提案として提示し、2つの質問をします — 承認するか変更するか、そしてスケッチを先に(推奨)またはスキップするか。フィードバックはチャット返信として届きます。承認されるまでループします。これはチェックポイントゲートです(ブリーフ契約§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 を読んでください。

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

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

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


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

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

**まずストーリーボードシートをスケッチします(協調モード)

[原文が途中で切れているため、ここ以降の翻訳は提供された範囲に基づきます。完全な翻訳が必要な場合は、全文を再度ご提示ください。]

Individual skills in this repo

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

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

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.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

関連スキル