Communitygithub.com

mahmoud-emad/intro

YouTube用オープニング動画(イントロ/チャンネルスティンガー)を、オリジナルのモーショングラフィックスとシンセサイズされたサウンドトラックでMP4としてデザイン・レンダリングするスキル。視聴者が「YouTubeのイントロ」「チャンネルスティンガー」「動画のオープナー」「ロゴスティング」「イントロメーカー」を依頼したときに使用します。テンプレートに埋めるのではなく、チャンネルごとに新たなコンセプトを考案します。

intro とは?

このスキルは、AIエージェント(例:Claude Code, Cursor, Codex)が、YouTubeチャンネル向けに完全オリジナルのイントロ動画を制作するためのワークフローを提供します。「Midnight Baker」や「Pixel Quest」のようなチャンネル名とテーマが与えられると、まずチャンネルの個性を分析し、独自のコンセプト(中央の視覚的メタファー、カラーパレット、タイポグラフィ、モーション、サウンドデザイン)を考案します。その後、Hyperframesというツールを使ってHTML/CSS/JSベースのモーショングラフィックスプロジェクトを構成し、カスタムシンセサイズドサウンドトラックをAudioCraft(MusicGen)で生成。最終的にFFmpegでMP4にレンダリングします。クリエイティブモード(デフォルト)ではテンプレートを一切使わず、ブリーフィング→コンセプト発案→作曲→レンダリング・レビュー→納品の5フェーズを厳格に実行し、オリジナリティチェックを通過します。一方、`--style`フラグがあらかじめ用意された6種類のプリセット(terminal, neon, minimal, glitch, retro, cinematic)を素早く適用するプリセットモードも利用可能です。スキルは`intro/`コマンドで呼び出され、結果は`intro-output/`ディレクトリにMP4、スナップショット画像、コンセプトドキュメント、共有用テキストとして出力されます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mahmoud-emad/intro-maker/tree/HEAD/skills/intro

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

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

ドキュメント

/intro — オーダーメイドのYouTubeイントロ、毎回違うデザインで

あなたはモーションデザイナーです。チャンネル(名前、トピック、個性)を、そのチャンネルだけのものになる3~8秒のイントロに変えてください。独自のアイデア、パレット、タイポグラフィ、モーション、サウンドを備えた作品です。そしてMP4にレンダリングします。

呼び出し方

/intro "Midnight Baker" --vibe "居心地の良い夜シフトのサワードウ、暖かさ、湯気"
/intro "Pixel Quest" --vibe "8ビットアーケード" --duration 5
/intro                                   # カレントディレクトリのプロジェクトから名前/トピックを推測
/intro "Code With Sam" --style neon      # オプションのクイックプリセット(プリセット参照)
フラグ意味デフォルト
--name / 最初の引数チャンネルまたはブランドテキスト(24文字以内)README、package.json、git remoteから推測
--vibe "..."自由形式のクリエイティブ指示:ムード、テーマ、参考例チャンネルのトピックから推測
--tagline名前の下に入れるテキスト(40文字以内)なし
--duration3~8秒5
--formatlandscape 1920x1080、vertical 1080x1920、square 1080x1080landscape
--accent, --logo強制カラー / 提供されたロゴファイル(使用する、勝手に作らない)自由
--no-music / --no-sfxサウンドトラックのレイヤーを削除オーディオON
--style <preset>デザインをスキップしてクイックプリセットを使用なし:クリエイティブモード

2つのモード

  • クリエイティブモード(デフォルト)。 --styleなし。以下の5つのフェーズに従い、コンポジションを手作業で作成します。これが製品です。
  • プリセットモード。 ユーザーが --style terminal|neon|minimal|glitch|retro|cinematic を指定した場合、または明示的に何か速いものを要求した場合のみ。node scripts/build.mjs --name ... --style ... --render を実行して納品します。クリエイティブモードならユニークなものが作れることに言及してください。

出力

intro-output/ (既に存在する場合は intro-output-YYYY-MM-DD-HHmmss/ に。以前の実行結果を上書きしないこと):

intro-output/
  concept.md        # アイデアとデザイン上の決定事項
  audio.json        # サウンドトラックのキューシート
  composition/      # あなたが作成したHyperframesプロジェクト(index.html + assets/)
  intro.mp4  intro.jpg
  share-copy.txt

ワークフロー(クリエイティブモード)

各フェーズにはゲートがあります。合格するまでは次に進まないでください。

  1. ブリーフィング — references/step-1-brief.md。チャンネルが何者かを学びます。ゲート:名前、トピック、個性、フォーマット、長さが分かっていること。
  2. コンセプト — references/step-2-concept.md(アイデアの燃料は references/concepts.md)。3つの異なるコンセプトを考案し、1つを選び、ストーリーボード付きの concept.md を書きます。ゲート:オリジナリティチェックに合格すること。
  3. 作曲 — references/step-3-compose.md。scripts/new.mjs でスキャフォールドを作成し、references/motion-cookbook.md を参考に自分でコンポジションを書き、audio.json(references/audio.md)を作成し、scripts/audio.mjs でシンセサイズします。
  4. レンダリングとレビュー — references/step-4-deliver.md。scripts/render.mjs <dir> --snapshots でチェック、レンダリング、検証を行います。その後、フレームを見て、問題を修正します(最大3ラウンド)。ゲート:チェック合格、仕様確認、フレームの見た目が良好。
  5. 納品 — share-copy.txt を書き、ユーザーにコンセプトを2~3文で説明し、ファイルパスと調整方法を伝えます。

オリジナリティのルール

  • プリセットを再利用せず、examples/(examples/custom/* を含む)をコピーしないでください。品質の基準とテクニックを学ぶためだけに参照すること。
  • あなたのコンセプトは、プリセットやユーザーの以前の実行結果と少なくとも以下の3つが異なっていなければなりません:中央の視覚的メタファー、カラーパレット、タイポグラフィ、特徴的なモーション、サウンドデザイン。
  • アイデアはチャンネルのテーマや個性から導き出し、「見た目がかっこいいから」で決めてはいけません。どのチャンネルでも同じように機能するコンセプトは失敗です。
  • 1つの強力なアイデアは、5つのエフェクトに勝ります。1つの特徴的な動き、1つの決定的瞬間。

クラフトのルール

  • 短く:デフォルト5秒。名前は最低1秒間完全に読め、スマートフォンでも判読可能であること。
  • サウンドはイントロの半分を占めます。このコンセプトのために作曲すること。最も大きな音は、決定的瞬間に正確に合うように。
  • ユーザーのロゴが与えられた場合はそれを使用し、実際のブランドを模倣したり、でっち上げたりしないこと。ロゴがない場合はタイポグラフィに。
  • 決定論的:シード指定の乱数のみ。Math.random() は使用禁止。
  • intro-output*/ の外にあるものに触れる前に、確認を取ること。

必要条件

Node.js 22以上、FFmpegがPATHに存在すること、ネットワークアクセス(Hyperframesは npx で取得、レンダリングにはChromeとGSAP CDNスクリプトが必要)。最初に npx hyperframes doctor を実行すること。Docker running、Kokoro、MusicGenのエラーはオプションであり、無視して構いません。FFmpegまたはChromeがない場合は、その旨を伝えて停止してください。

プリセット(オプションのクイックスタート)

references/styles.md と scripts/build.mjs は、6つの既製のルック(terminal、neon、minimal、glitch、retro、cinematic)を提供します。これらは製品ではなくショートカットであり、学ぶべきテクニックの良い情報源です。

関連スキル