使い方ガイドへスキップ
faceless-explainer作者 HeyGen

Faceless Explainer スキル。

Claude Code と Codex 向けのモーション・動画スキル。テキスト、メモ、記事を、生成されたシーンビジュアルを使った解説動画に変換します。

  • モーションと動画
  • Video
heygen-com/hyperframes · skills/faceless-explainer/SKILL.mdSKILL.md
--- name: faceless-explainer description: Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes. --- ## Step 0: Setup ## Step 1: Brief (no capture) ## Step 2: Design System ## Step 3: Storyboard and Script ## Step 3.1: Audio ## Step 4: Frame Visual Design
2026-09-14 に上流ファイルから読み取ったフロントマターとセクション見出し · 全 29,476 文字

01 できること

Claude CodeおよびCodexにおけるfaceless-explainer Skillの機能

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

記事、メモ、トピック、ブリーフなど任意のテキストを、独自に考案されたシーンビジュアル(タイポグラフィ、抽象グラフィック、図表、データビジュアライゼーション)を用いたフェイスレス解説動画に変換します。7つの連携したステップを通じて機能します:ブリーフ確認によるセットアップ、合成キャプチャパッケージ(Webサイト不要)、同梱のフレームプリセットからのデザインシステム選択(ブランドトークンの任意のリミックスも可能)、入力を再構成するナラティブデザインを用いたストーリーボードとスクリプト作成、TTSとBGMによる音声生成、独自に考案した要素を追加するタイムコード付きショットシーケンスによるビジュアルデザイン、サブエージェントによる並列フレーム構築、そして最終レンダリングです。

コラボレーティブモードにおけるステップ0、3、6でのユーザーゲート付きチェックポイント。フェイスレスとは、キャプチャステップや実際のアセットインベントリが存在しないことを意味します。すべてのビジュアルは、後段のワーカーによって独自に考案されます。

生成されるもの

  • フレーム単位のティーチングプラン、タイムコード付きショットシーケンス、考案したフォーカル・役割を記載したSTORYBOARD.md
  • compositions/frames/NN-*.html — サブエージェントが構築するフレームごとのHTMLコンポジション
  • renders/video.mp4 — 横型1920x1080、縦型1080x1920、または正方形1080x1080でレンダリングされた最終動画
プロンプト例を見る ↗

仕組み

  1. 01
    ブリーフの確認とプロジェクトの初期化

    BRIEF.mdが存在し、モードを決定します。それを読み、何も質問しないでください。存在せず、プロジェクトが新規の場合は、intentレイヤーを実行してブリーフを確定してください。

  2. 02
    合成キャプチャパッケージの作成

    ユーザーの入力全文をそのまま capture/extracted/visible-text.txt として保存します(情報の出典)。

  3. 03
    フレームプリセットの選択とframe.mdの構築

    hyperframes-creative/frame-presets/ から、トピックとトーンに合う出荷済みプリセットを1つ選びます。

  4. 04
    ナラティブデザインによるストーリーボードの作成

    story-design.md の構造を使い、テキストをフレーム単位のティーチングプランに変換します。

  5. 05
    音声の生成とビジュアルデザインの追加

    HeyGenライブラリからのTTS、単語タイミング、BGMのために、バックグラウンドでaudio.mjsを実行します。

  6. 06
    フレームの構築とインデックスの組み立て

    時間を同期し、フレームごとのパケットを構築し、フレームごとに1つのサブエージェントを並列で配下に発行します。各ワーカーは compositions/frames/NN-*.html を書き出します。キャプションはバックグラウンドで構築します。

02 適合性を確認

faceless-explainer スキルを使用するタイミング

このようなモーションと動画のタスクには、Claude Code または Codex で faceless-explainer スキルを使用してください。適合性と制限は、スキル自身のファイルから引用しています。

適している場合

  • トピック解説、コンセプトの分解、ハウツー、リスト記事
  • プロダクトもキャプチャ対象のウェブサイトもないテキストからトピックを説明する場合
  • タイポグラフィ、抽象的なグラフィック、図表、データビジュアライゼーションなど、すべてのビジュアルを考案する必要がある場合

境界を知る

  • プロダクトのプロモーションやツアーのために、ウェブサイトから構築される動画
  • キャプチャ工程や実素材のインベントリが必要な場合
  • 「動画を作って」という単純な依頼、または何らかの不確実性がある場合 — まずintentレイヤーを通す必要があります

提供すべきもの

  • 任意のテキストソース記事、メモ、トピック、またはブリーフ — 入力全文をそのまま capture/extracted/visible-text.txt として保存します。
  • 任意のユーザースクリプトユーザーがスクリプトを貼り付けた場合、またはその言い回しを維持したい場合は、そのまま user_script.txt として保存します。VO_MODE(そのまま、または再構成)はBRIEF.mdから取得します。
  • 任意のブランドカラーまたはフォントユーザーが明示的にブランドカラーやフォントを指定していない限り、tokens.json のcolorsとfontsは空のままにしてください。
  • 任意の音声設定リクエストで声、性別、またはトーンが指定されている場合は、一致する音声 id を選び、--voice <id> を渡してください。
  • 任意の実画像ユーザーが実画像を提供した場合は、public/<basename> の下に配置し、ステップ3のために記録しておいてください。

03 スキルの内部

faceless-explainer スキルが Claude Code と Codex に与えるルール

SKILL.mdがエージェントに設定する7つの具体的な指示、デフォルト、制限 — ファイルの中で結果を変える部分です。

  1. ブリーフ対応の開始ルール

    BRIEF.md が存在する場合は、それを読み、何も質問しません — ブリーフは確定済みです。

  2. 顔出しなし動画にはキャプチャ手順がありません

    npx hyperframes capture は実行しません — URLが存在しないためです。asset-descriptions.md の作成や capture/assets/ への投入も行いません。顔出しなしのビジュアルはステップ4-5で考案されるものであり、キャプチャされるものではありません。

  3. 各ステップを順番にゲートを通して進めます

    ステップ0のセットアップ、ステップ1のブリーフ、ステップ2のデザインシステム、ステップ3のストーリーボード、ステップ3.1の音声、ステップ4のビジュアルデザイン、ステップ5のフレーム、ステップ6の最終化まで進めます。

  4. Asset_candidates は既定で空のままにします

    顔出しなしの動画では、フレームにアセットインベントリは含まれません。ユーザーが実際の public/<basename> 画像を指定した場合を除き、asset_candidates は空のままにしてください。

  5. 見た目を考案する前にカタログを検索します

    ブリーフに記載されている名前付きのルック・エフェクト・トランジションについては、STORYBOARD.md に書き込む前に、平易な英語で npx hyperframes catalog --query を実行してください。

  6. クリップレイヤー上のフルブリード背景

    フレームの地(カラーフィールド、グラデーション、グリッド)は、class="clip" を持つ、それ自体が全長の背景クリップです。

  7. デュレーションの同期は機械的に行います

    実際の音声のデュレーションが優先され、無音のフレームは推定値を保持します。ステップ3.1が完了したら audio.mjs sync-durations を実行してください。同期済みのデュレーションを手動で編集してはいけません。

04 実際に使う

Claude Code または Codex に faceless-explainer をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはお使いの Agent に faceless-explainer を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill faceless-explainer

skills/faceless-explainer/SKILL.md 用の汎用 skills CLI 形式です。リポジトリ側で独自のパスが記載されている場合があります。

スキルに最初のモーション・動画タスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Turn this article about compound interest into a 60-second explainer video for young adults. Use clean modern graphics with invented diagrams showing how money grows over time. Keep the tone approachable and use a female voice for narration. Format: [landscape/portrait/square]. Destination: [Instagram/YouTube/LinkedIn].

出典:SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの:

  • npx hyperframes lint を実行して構造を検証してください
  • npx hyperframes check を実行して、テキストのオーバーフローやレイアウトの問題を検出してください
  • フレームの中間点で npx hyperframes snapshot を実行してコンタクトシートを作成し、明らかな崩れがないかざっと確認してください
  • キャプション語(#caption-word-*, .caption-line)における1〜4pxの text_box_overflow は無視してください — 行間が詰まっていることによる想定内の誤検出です
  • text_box_overflow はフレーム要素(#el-NN-*)を指している場合のみ対応し、キャプション語を指している場合は対応しないでください
  • 最終レンダリング前に transitions.mjs inject and verify を実行し、トランジションのタイミングを確認してください

OpenDesignでSKILL.mdリンクからfaceless-explainerをインポートします:Plugins → Add → Skill → Import from link、その後トップバーで選択します。

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
HeyGen
Repository
github.com/heygen-com/hyperframes ブランチ main
スキルファイル
skills/faceless-explainer/SKILL.md 検証時にコンテンツチェックサムを記録。コミット 558c11b
License
Apache-2.0 LICENSE より
リポジトリスター数
49,761 GitHub スナップショットは 2026-09-14 取得。heygen-com/hyperframes リポジトリ全体を対象としており、このカタログには 9 件のスキルが含まれています。faceless-explainer 単体の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません(2026-08-28 確認)。このページには実行記録がありません。

SKILL.md の中身

  1. ステップ0:セットアップブリーフを確認し、プロジェクトを初期化し、BRIEF.mdを作成し、好みを記録し、サインイン状態を表示します
  2. ステップ1:ブリーフ(キャプチャなし)入力をvisible-text.txtとして保存し、合成トークンのtokens.jsonを作成します。ウェブサイトのキャプチャやアセットは使用しません
  3. ステップ2:デザインシステム付属のフレームプリセットを選択し、build-frame.mjsを実行してブランドトークンをプリセットにリミックスします
  4. ステップ3:ストーリーボードとスクリプトナラティブデザインに基づいてフレームごとの指導計画を作成し、提案として提示し、承認されるまで繰り返します
  5. ステップ3.1:オーディオTTSでナレーションを生成し、単語のタイミング、HeyGenライブラリからのBGM、オーディオメタデータを作成します
  6. ステップ4:フレームのビジュアルデザインタイムコード付きのショットシーケンスを追加し、フォーカルポイントや役割を考案し、シーンごとにレイアウトとモーションをインラインで配置します
  7. ステップ5:フレームの構築時間を同期させ、パケットを構築し、フレームごとにサブエージェントを派遣し、インデックスを組み立て、キャプションを構築します
  8. ステップ6:最終化トランジションを挿入し、lint/check/snapshotを実行し、レビューのために一時停止し、最終的なMP4をレンダリングします
  9. クイックリファレンスフォーマット、faceless版とキャプチャ済みアセットワークフローとの差異、バックグラウンドスクリプト、参照テーブル
スキル自身による説明
任意のテキスト(記事、メモ、トピック、ブリーフ)を顔出しなしの解説動画に変換します。キャプチャするサイトや映像がないため、ビジュアルはシーンごとに作成されます(タイポグラフィ、抽象グラフィックス、図、データビジュアライゼーション)。トピック解説、コンセプト解説、ハウツー、リスト記事に使用します。ウェブサイトから作成される動画ではありません(/product-launch-video — プロモーションまたはツアー)。不明な場合 → /hyperframes。

SKILL.md のフロントマター説明文。ファイル全体は約 29,476 文字です。GitHub で全文を読む

06 インストールする前に

faceless-explainerスキルに関するよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

これはコラボレーティブモードとオートノマスモードの両方で動作しますか?

はい。コラボレーティブモードでは、ステップ0、3、6でユーザー承認のゲートが実行され、ステップ4でスケッチのレビューが行われます。オートノマスモードでは、同じ概要が事前通知として投稿され、スケッチはビルドに統合されますが、ステップ6でプレビューに関する質問が1つ残ります。

音声や音楽用のHeyGenアカウントがない場合はどうなりますか?

ステップ0では、進める前にサインイン状態が表示されます。サインアウトしている場合、オーディオは自動的にローカルエンジン(TTSにはKokoro)にフォールバックします。サインインを待つコラボレーティブモードを選択することも、利用可能なローカルエンジンで進めるオートノマスモードを選択することもできます。

出力はどのビデオフォーマットに対応していますか?

横向き1920x1080、縦向き1080x1920、または正方形1080x1080です。フォーマットはBRIEF.md内の配信先から導かれ、ストーリーボードのフロントマターに一度だけ設定されます。

Faceless Explainer

実際のモーションと動画タスクで faceless-explainer を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから faceless-explainer をインポートし、上記のプロンプトを貼り付けて、結果の前に計画を確認します。

ターミナル
npx skills add https://github.com/heygen-com/hyperframes --skill faceless-explainer

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応