Communitygithub.com

ローンチ動画：クリエイティブディレクター級のメイン映像

SaaS ローンチ動画のためのクリエイティブディレクター。エージェントがプロダクトを読み込み、エディトリアル、大胆なグラフィック、シネマティック 3D、テクニカルなど方向性の異なる3案をレンダリング済みスチル付きで提案。選んだ案を HyperFrames（HTML→MP4）と Three.js で実際の UI を軸に組み上げ、音楽プロンプト、ミックス候補、ラウドネス正規化済みマスターまで仕上げます。

ローンチ動画：クリエイティブディレクター級のメイン映像 とは？

「ローンチ動画」レシピ ステップ1（メイン映像）、Aminebht/saas-launch-video-skill より。テンプレートではなく「監督＋ツールキット」：プロダクトのコード、サイトのリンク（リンクモードでブランドを抽出）、またはスクリーンショットを読み、4系統×3ルックから3つの方向性を提案。それぞれに独自の構成とシグネチャームーブがあり、案ごとにスチルを1枚レンダリングします。リファレンスモードでは既存動画の文法（カットのリズム、トランジション、書体、配色の役割）だけを再現し、素材はコピーしません。マスターと 100 MB 未満のアップロード版を納品。Node 18+、FFmpeg、HyperFrames が必要です。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Aminebht/saas-launch-video-skill/tree/HEAD/skills/saas-launch-video
オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

SaaS ローンチビデオ: クリエイティブディレクター

すべてのビデオは、その製品のために作られたように感じられるべきです：独自のコンセプト、構造、ルック、トランジションを持ちます。このスキルは ディレクター + ツールキット であり、テンプレートではありません。決して一つのハウススタイルに頼ってはいけません。

要件

Node 18+、FFmpeg が PATH に存在すること、npx [email protected]。HyperFrames スキル hyperframes-creative、hyperframes-animation、hyperframes-registry（インストール: npx [email protected] init <任意のディレクトリ>; 更新: npx [email protected] skills update）。音楽分析にのみ Python + pip install librosa。

参照ビデオ？ ユーザーが「こんな感じで」と再現したいビデオを送ってきた場合、references/REFERENCE.md に従ってください：scripts/analyze-reference.mjs を実行し、ステップ 1 の直後に reference.md を作成します。その後、ピッチ、スクリプト、ビルドの確認、音楽の形成に使用されます。

ワークフロー（4 つのチェックポイントはユーザーの確認が必要）

  1. セットアップと製品の学習。 node <skill>/scripts/new-project.mjs <dir> を実行します。次に、利用可能な最良のソースから製品を学習します：

    • コード: コンポーネント、ルート、テーマ、コピーを読み取り、brand.json（references/BRAND.md）を作成し、scripts/brand.mjs を実行します。
    • リンク: node <skill>/scripts/from-link.mjs <url> <dir> により brand.json と brand-kit.md を作成します。ロゴと色を確認します。
    • スクリーンショット: ロゴ、色、主要画面を尋ねます。

    実際の機能、オーディエンス、トーンをリストアップします。

  2. チェックポイント: 3 つの方向性を提案。 references/PITCH.md を使用します。references/DIRECTIONS.md（4 ファミリー × 3 ルック）のルックと references/NARRATIVES.md の形状を組み合わせます。3 つは異なる必要があり（少なくとも 2 ファミリー）、各方向性にレンダリングされたキーフレームを用意します。ユーザーが選択または混合します；決定を direction.md に保存します。参照がある場合、方向性 A は指定された忠実度の参照となり、各静止画はそれが対応する参照フレームと並べて表示されます。

  3. チェックポイント: スクリプト。 選択された方向性のビートテーブル（シーン、画面コンテンツ、コピー、モーション、トランジション、サウンド）と、正確な UI アクションを含みます。承認後、必要なアプリ内画面を尋ねます（references/UI-REBUILD.md）。

  4. チェックポイント: 画像（方向性が必要とする場合のみ）。プロンプトを作成し、ファイルを待ちます；自分で生成したり偽造したりしてはいけません（references/IMAGES.md）。

  5. ビルド。

    • シーンごとに 1 つのサブコンポジション。
    • 各シーンについて、その HyperFrames ブループリントを読み、手動で構築する前にレジストリを検索します（npx [email protected] catalog <単語> --json）。
    • 製品シーンは reference/ui-rig.html から始めます。モーションには lib/fx.js を、3D には lib/three-stage.js を使用します。
    • ループ lint → スナップショット → 修正 を、すべてのフレームが適切に見えるまで繰り返し、その後ドラフトレンダリングを行います（references/WORKFLOW.md）。参照がある場合、analyze-reference.mjs --compare でドラフトを確認します。

  6. チェックポイント: 音楽。 music-plan.json を作成し、scripts/music-plan.mjs を実行し、ユーザーに ElevenLabs で 2〜4 テイクを生成するよう指示します。analyze-track.py --drop でアラインし、mix-variations.mjs でミックスし、ユーザーに選んでもらいます（references/MUSIC.md）。

  7. 納品。 トラックをマウントし、-q delivery でレンダリングし、scripts/finalize.mjs を実行します（-14 LUFS マスタリングと 100 MB 未満のアップロード用コピー）。

ルール

  • 実際の機能、実際の UI、デモデータのみ。 画面をでっち上げないでください；必ず尋ねてください。
  • ビデオごとに 1 つのシグネチャームーブと 2〜3 つのトランジション（または参照自体のセット）を使用し、一貫して使用します。すべてのテキスト行は読めるだけの時間保持します。
  • シーン内ではブランド変数のみ（var(--brand-primary)、var(--font-display)）を使用；ブランドの hex やフォントファミリーをハードコードしないでください。
  • 参照は文法であり、コンテンツではありません。 そのリズム、トランジション、タイプと色の役割をコピーしますが、フッテージ、ロゴ、名前、コピー、音楽はコピーしません。
  • デフォルトのルックはありません。 ドラフトが一般的な「ダークグラデーション + 傾いたウィンドウ + タイプカード」に流れ始めたら、停止して direction.md を読み直してください。
  • ビルドを開始する前に references/GOTCHAS.md を読んでください。そこにはレンダリングを失敗させる HyperFrames の落とし穴がリストされています。

ファイル

パス説明
toolkit/fx.jsモーションヘルパー：タイピング、ストリーミングテキスト、ウィップ、マスクリビール、カーソル、カウントアップ、パス描画/フォロー
toolkit/three-stage.jsThree.js のノートパソコン/電話/フローティングパネルステージ。キーフレームカメラと画面切り替え対応
toolkit/ui-rig.htmlUI 再構築リグ（フラット / 傾き / フロントカメラ）。すべてのプロジェクトで reference/ にコピー
toolkit/skeleton/空のルート index.html（ブランドマーカー、インポートマップ、fx）
examples/ファミリーごとに 1 つのテクニックデモ：new-project.mjs <dir> --examples でマウント。学習用、コピー禁止。
scripts/new-project、from-link、brand、analyze-reference、fetch-sfx、music-plan、analyze-track.py、mix-variations、finalize

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community