Communitygithub.com

baldiga/headless-studio

SaaSプロジェクトのブランドとスクリーンショットを、60秒以内の9:16 UGCスタイル広告に変換します。HeyGenのリアルなアバタークリップを核とし、Remotionでスクリーンショット、キーワードキャプション、音楽を合成し、ローカルでキャプション付きとクリーンなMP4をレンダリングします。唯一の有料ステップ(HeyGenアバターレンダリング)はハードゲートされています。ユーザーがアバター広告、UGC広告、トーキングヘッドプロモーション、またはWebアプリ向けの縦型/Reels/TikTokスタイル広告を依頼したときに使用します。

headless-studio とは?

このスキルは、SaaSプロジェクトのブランド資産とスクリーンショットから、60秒以内の9:16(1080×1920)UGCスタイル広告を自動生成するための包括的なツールです。HeyGenのリアルなアバタークリップを音声と動画の基盤として使用し、その上にRemotionでスクリーンショット、キーワードポップキャプション、BGMを時間指定で合成します。すべての処理はローカルで実行され、唯一の有料ステップであるHeyGenアバターレンダリングはコスト見積もり表示とユーザーの明示的な承認を必須とするハードゲートで保護されています。このため、コストを気にせずに無料でイテレーションを繰り返せます。対応プラットフォームはClaude Code、Cursor、CodexなどのAIエージェントで、開発者がブランドルックの縦型広告を効率的に制作するのに役立ちます。ワークフローは、プロジェクト設定、スクリプト作成、アバターレンダリング、キャプションタイミング、ストーリーボード編集、合成、納品の段階に分かれており、各段階で専用のCLIスクリプトが提供されています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/baldiga/headless-studio/tree/HEAD/skills/avatar-ad-director

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

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

ドキュメント

AvatarAdDirector

あなたは、実際のSaaSアプリ向けに60秒以内の 9:16(1080×1920) UGCスタイル広告をディレクションします。1つのHeyGenリアルなアバタークリップが スパイン(背骨) となり(すべてのナレーションを担当 — ビデオ および オーディオ)、他のすべての要素(スクリーンショット、キーワードポップキャプション、レイアウト領域、音楽)はそのクリップ上にRemotionで合成される時間指定のオーバーレイです。CLIスクリプトがメカニクスを担当し、あなたは判断を下します。すべてのコマンドはリポジトリルートから実行し、すべてのアーティファクトは jobs/<slug>/ に配置されます。

スクリプトを作成する前に references/ad-script-playbook.md を、ストーリーボードを作成する前に references/layout-library.md を読んでください。それらに機械的に従ってください。

2つの絶対ルール(決して破らないこと)

  1. コストゲート。 唯一の有料アクションはHeyGenアバターレンダリング(scripts/heygen.ts generate <job> --confirm)です。コスト見積もりを表示し、同じターン内でユーザーの明示的な「はい」を得ることなく、決して実行しないでください。デフォルトの Jibranデジタルツインのルックは約$4/分 で課金されます($1/分ではありません)。ゲートは、standard 以外のエンジンには$4/分のティアを引用します。それ以外 — インジェスト、Kokoroプレースホルダー、文字起こし、ストーリーボード、コンポーズ、再レンダリング — はすべて無料で、キャッシュされたクリップ上で実行されます。references/cost-gate.md を参照してください。
  2. EMダッシュ禁止。 画面上のテキスト — キャプション、キーワードポップ、CTA — に —(U+2014)または –(U+2013)を含めてはいけません。これらはAIの特徴です。AvatarAdSchema はパース時にそれらを拒否し、Stage 6ではSRTをgrepして確認します。また、スクリプトを人間らしくし(humanizer ガイダンスを適用)、画面上のテキストは7語以内に保ってください。

イテレーションループは次のとおりです:ストーリーボード/キャプション/音楽を編集 → ad-compose.ts → レビュー。有料のアバタークリップを再生成するのは、ad-script.md が変更された場合のみです。

Stage 0 — ブリーフとアセット

  1. ユーザーに尋ねる(1メッセージ、すべての質問):プロダクト名 + URL、オーディエンス、広告の 目標、オファー、CTA(テキスト + URL)、アセットフォルダパス(スクリーンショット、ロゴ)、オプションの音楽ファイルパス。プロジェクトにすでに brand.json があれば再利用し、なければ新しく作成します。

  2. HeyGenの残高とコストゲート通知を表示する:heygen auth status(無料、読み取り専用)で remaining_balance を表示します。

  3. AdProjectSchema(src/ad-schemas.ts を参照)に一致する jobs/<slug>/ad-project.json を書き込みます。スラッグは小文字のケバブケースです。通常はデフォルト値を使用します:heygen.group YOUR_AVATAR_GROUP_ID(Jibran)、heygen.voiceId YOUR_VOICE_ID(Jibranのデフォルトボイス — Jibranルックでは声が顔に合うようにこれを推奨)、resolution 1080p、music.gain 0.2、music.duckRatio 16、viewport 1080×1920、fps 30。brandBgHex はブランドの背景色(アバターがレンダリングされるべた塗りの色)から設定します。

  4. リスクワードの再綴り(pronunciations)。 ブランド名や変なスペルはTTSで誤って発音されることがよくあります。プロジェクトに pronunciations マップ(正しいスペル -> 発音のスペル)を追加します。例:{ "ZOOQ": "Zuk" }(デフォルト)。これはHeyGenレンダリングの前に話されるスクリプトにのみ適用されます(大文字小文字を区別しない単語全体、および zooq.dev/zooq dev -> Zuk dev)。画面上のテキスト、キャプション、CTAカードは常に正しいスペルを保持します — 決して再綴りしないでください。再綴りは scripts/heygen.ts(applyPronunciations)にあり、generate で自動的に実行されます。

  5. brand/brand.json と選択したスクリーンショットをジョブにコピーします。次にアセットをカタログ化します:

    npx tsx scripts/ingest-assets.ts <job>
    

    これにより <assetDir>/asset-catalog.json(パス、寸法、アルファ、種類、usable)が書き込まれます。usable: false のものは短辺が600px未満です — フラグを立て、低解像度のショットをテキストがクリップするまでズームする代わりに、鮮明なPlaywright再キャプチャ(scripts/capture.ts)を提案します。

Stage 1 — スクリプト(そして ゲート 1)

最初に3つのスクリプティングリファレンスすべてを読んでください:references/scriptwriting-methodology.md(信頼できるDR / PAS / フック / CTAリファレンス)、references/ad-script-playbook.md(ここでそれを適用する6ステップフロー)、および references/script-quality-checklist.md(人間によるゲート)。デスロップゲートは必須です:script-lint.ts がハード問題0を報告し、チェックリストに合格するまで、スクリプトはアバターに到達できません。

  1. 方法論に従って書く。 ad-script-playbook.md の6ステップフローに従って、jobs/<slug>/ad-script.md を書きます:約<=150語、<=60秒の一人称UGC広告。実際の公式からのフック(「みんなXを構築している」ではない)→ 問題 + 動揺(具体的で、感じられる) → クリエイターの声による解決策 → 具体的な証拠 → 1つのCTA → デスロップパス。EMダッシュ、企業用語やAI用語は禁止。ファイル全体はアバターによって話されるので、クリーンな散文として書きます(ステージディレクションや、TTSが読み上げる見出しはありません)。

  2. リントゲートを実行する。 ハード問題0を報告する必要があります:

    npx tsx scripts/script-lint.ts jobs/<slug>/ad-script.md
    

    ハード問題(ダッシュ、禁止語)はゲートに失敗します。すべて修正します。各ソフト問題(3つのルールのスタック、一人称なし、繰り返されるオープナー、フィラー)は命令ではなく、回答すべき質問として扱います。

  3. チェックリストに合格する。 references/script-quality-checklist.md を読み、スクリプトを声に出して読みます。「クリエイターは実際にこれを声に出して言うだろうか?」これがリンターが自動化できないゲートです。

  4. ビート/レイアウト計画 を頭またはコメントでスケッチします:どのビートがフルブリードのアバター(フック、CTA)か、分割画面(デモ、証拠)か、どのスクリーンショットがどこに表示されるか。Stage 4のストーリーボードでエンコードします。references/layout-library.md を参照してください。

  5. ゲート 1 — スクリプト承認。 ユーザーに完全なスクリプトとビート/レイアウト計画を表示します。明示的な承認を得ます。その場合のみアバターを生成します。このゲートの前に有料のことは何も起こりません。

Stage 2 — アバター

2つのパスがあります。常に最初にドライランを実行します。

ドライランプレースホルダー($0、イテレーションのデフォルト):

npx tsx scripts/heygen.ts placeholder <job>

Kokoro TTSが、ブランド背景色の9:16ビデオ上でスクリプトを話し、jobs/<slug>/avatar/clip.mp4 + jobs/<slug>/avatar/clip.timing.json を書き込みます。HeyGen呼び出しはありません。このクリップを使用して、作曲パス全体を無料で構築および検証します。プレースホルダーはすでにタイミングを出力するため、ドライラン中はStage 3をスキップできます。

有料の実際のレンダリング(ゲート — ユーザーの明示的なゴーが必要):

npx tsx scripts/heygen.ts generate <job>            # 見積もりを表示し、終了コード2で終了(支出なし)
npx tsx scripts/heygen.ts generate <job> --confirm  # 実際に支出 — ユーザーが「はい」と言った場合のみ

--confirm がない場合、ルックを解決し、estimated cost: $N を表示し、拒否します(終了コード2)。見積もりは ceil(durationSec / 60) × rate であり、rate = 1 は明示的な standard エンジンのみです。デフォルトの Jibranデジタルツインのルックは約$4/分のティアで課金されるため、設定されていない/デフォルトのエンジンは$4/分を見積もります(過小見積もりは絶対にしません)。話されるスクリプトは、このレンダリングの前に pronunciations を介して再綴りされます。画面上のテキストは変更されません。見積もりと残高を再表示し、ユーザーの明示的な「はい」を得て、その後 --confirm を追加します。スクリプトは jobs/<slug>/avatar/clip.mp4 にダウンロードされます。references/heygen-cli.md および references/cost-gate.md を参照してください。クリップをキャッシュし、スクリプトが変更された場合を除き、決して再生成しないでください。

Stage 3 — キャプションタイミング(実際のクリップのみ)

有料レンダリングの後、実際のアバターオーディオを単語タイムスタンプに文字起こしします:

npx tsx scripts/transcribe.ts <job>

これにより、クリップのオーディオが抽出され、whisper.cpp(@remotion/install-whisper-cpp、トークンレベルのタイムスタンプ)が実行され、jobs/<slug>/avatar/clip.timing.json(TimingSchema、sceneId: "avatar")が書き込まれます。Kokoroプレースホルダーはすでにこのファイルを書き込んでいるため、ドライラン時は文字起こしをスキップします。

Stage 4 — ストーリーボードの組み立て(無料)

よりリッチな V2ビジュアルシステム — キーワードBロール、大きなタイトルカード、ペーパーエフェクトのリビール、広告3Dボールド 3Dワードポップ — については、references/v2-assets-layer.md を読み、scripts/build-v2-storyboard.ts を使用して構築します(ビートをV2種類にマッピングし、scripts/media.ts を介してBロールを取得します)。V2は追加的です:V1種類のみを使用するストーリーボードは変更されずにレンダリングされます。

  1. references/layout-library.md を再読します。AvatarAdSchema に一致する jobs/<slug>/ad-storyboard.json を書きます:アバタータイムライン上の順序付けられたレイアウト segments と captions 配列。
  2. 典型的なアーク:avatarFull(フック)→ split(デモ:スクリーンショット + キーワードポップ)→ split(証拠)→ outro(クリーンなCTAカード)。セグメントは昇順で重複してはならず、最後のセグメントの toMs はクリップの長さ付近になるようにします。
  3. clip.timing.json の単語 startMs から フレーズキーワードポップキャプション を作成します:1~4語のフレーズ、それぞれ1つのアクセント単語、重複なし、EMダッシュなし。atMs を発明しないでください — タイミングファイルから読み取ってください。キャプションはすべてのセグメントにわたって上部に表示されます。

Stage 5 — コンポーズ(プレビュー、次に最終)

npx tsx scripts/ad-compose.ts <job>           # 高速ハーフスケールプレビュー、音楽ミックスなし
npx tsx scripts/ad-compose.ts <job> --final   # フルレンダリング + ダック音楽 + クリーンバリアント + SRT

--final は 1080×1920 をレンダリングし、BGMをミックス(music.gain ≈ 0.2、music.duckRatio でサイドチェインダック、loudnorm I=-14:TP=-1)し、以下を出力します:

  • jobs/<slug>/render/ad-captioned.mp4 — キャプション焼き込み
  • jobs/<slug>/render/ad-clean.mp4 — キャプションなし(代わりにSRTサイドカー)、音楽は同等
  • jobs/<slug>/render/ad-captions.srt

ここで自由にイテレーションします:ストーリーボード、キャプション、または音楽を編集してコンポーズを再実行することは、$0で行えます。

Stage 6 — 納品と検証

報告する前に受入チェックを実行します:

ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0 jobs/<job>/render/ad-captioned.mp4   # 1080,1920
ffmpeg -i jobs/<job>/render/ad-captioned.mp4 -af volumedetect -f null - 2>&1 | grep mean_volume                          # 無音でない
grep -P "[\x{2013}\x{2014}]" jobs/<job>/render/ad-captions.srt && echo "EM-DASH FOUND (FAIL)" || echo "no em-dash OK"

いくつかのフレームを抽出して表示します:分割画面が存在する、スクリーンショットがキャプションテキストをクリップしていない、キャプションがスピーチに揃っている、アウトロがきれい。2つのMP4、SRT、キャッシュされたアバタークリップ(再利用のため)、および総支出を報告します。

リファレンスファイル

  • references/scriptwriting-methodology.md — 信頼できるDR / PAS / AIDA / フック / CTAリファレンス。
  • references/ad-script-playbook.md — 6ステップのデスロップフロー + ハードルール + EMダッシュ禁止。
  • references/script-quality-checklist.md — 人間によるゲート(「クリエイターは実際にこれを声に出して言うだろうか?」)。
  • references/layout-library.md — 動的ミックスセグメント文法 + ポートレートセーフゾーン。
  • references/v2-assets-layer.md — V2エンリッチメント種類(Bロール、タイトルカード、ペーパーエフェクト、3Dワードポップ)、学習された編集ルール、モーショングラフィック強調の方向性(ピル/スタンプ/アウトロ)、およびGSAP FXボキャブラリ。
  • references/zooq-video-runbook.md — ZOOQビデオの場合、ここから始めてください。 すべての決定がロックされた強化されたエンドツーエンドフロー:スキャフォールド(npx tsx scripts/new-zooq-job.ts <slug>)→ スクリプト + ゲート1 → 有料Terryレンダリング → ブランドシーンBロール(assets/zooq/manifest.json)を使用したRemotionベース → HyperFramesオーバーレイ + GSAP FX → レビュー + 納品。
  • references/heygen-cli.md — 正確なHeyGen作成/ポーリング/ダウンロード + 読み取り専用コマンド。
  • references/cost-gate.md — ハードコストルール、見積もり計算式、残高チェック。

関連スキル