mcpField
Y
yuv-reel-covers

yuv-reel-covers

github.com/hoodiniデザイン・UI29140 回インストール5 日前に更新
リポジトリ

yuv-reel-covers について

yuv-reel-covers は、統一感のあるブランド表現で Instagram Reel のカバーを作るスキルです。ポスターテンプレート、プレビューと書き出しに対応したスタジオ、コマンドライン生成機能を備え、グリッドの安全領域を考慮します。

主な機能

  1. 01Editorial と cinema のテンプレート
  2. 02ライブプレビューと書き出しスタジオ
  3. 03ヘブライ語と英語の組版
  4. 04コマンドラインでの PNG 生成
  5. 05画像生成向け AI プロンプト

活用シーン

  1. 01ブランドを統一した Reel カバーの制作
  2. 02内容別のシリーズカラーの選択
  3. 03スタジオでのプレビューと書き出し
  4. 04Midjourney、Flux、Nano-Banana-2 向けプロンプト作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hoodini/ai-agents-skills --skill yuv-reel-covers

インストール後、Claude Code で/yuv-reel-coversを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

build_app.py
cover-studio.html
gen_cover.py
prompts.md
README.md
style-spec.md

詳細

yuv-reel-covers

Instagram のグリッド全体でブランドを統一して見せるリールカバーシステムです。キャンバスは 1080×1920 で、重要なコンテンツはすべて 3:4 のグリッド切り抜きセーフゾーン（y 285–1635） に収めます。

v2 — エディトリアルポスターシステム（標準仕様です。まず style-spec.md をお読みください）

Yuval が気に入っている SHELLY のスポーツエディトリアルポスターとシネマティックポスターをリバースエンジニアリングしました。gen_cover.py に新しいテンプレートを 2 つ追加しています。editorial（切り抜き画像の手前と背後に配置する大きく傾いたコンデンス体、✦ ティッカーストリップ、キーワードのスタック＋ラインアイコン。鮮やかな空・夕焼け・インク色にネオンイエロー #E9FF3D）と、cinema（ピンク／シアンのスプリットライトによるデュオトーン、頭の後ろに配置する白い文字）です。文字は幅に合わせて自動調整され、ヘブライ語（Rubik 900）と英語（Anton）の両方に対応しています。

  • Cover Studio アプリ — https://hoodini.github.io/yuv-cover-studio/ で公開中です（オフライン用には cover-studio.html も利用できます）。写真と切り抜き画像を読み込み、見出しを入力すると、ライブプレビューを確認して 1080×1920／1080×1350 の PNG をエクスポートできます。 指定したスタイルに合った Midjourney／Flux／Nano-Banana-2 のプロンプトを作成する AI PROMPTS タブも含まれています（マスターの数式とハイブリッドパイプラインについては prompts.md を参照してください）。
  • ヘッドレス実行：py gen_cover.py editorial --bg sky --cutout assets/yuval-cutout.png --back "STEAL MY|PROMPTS" --ticker "ALL DAY,EVERY PLAY,NO LIMITS" --stack "FOCUS,ENERGY,DISCIPLINE,VICTORY" --tag "AI" --cut-h 1060 --out my-cover

v1 テンプレート（behind／stack）— レガシー版ですが、以下から引き続き利用できます。

統一感を生むルール

  • 常に：リッチブラック #0A0A0A の背景＋暗いニューロンネットのフィールド＋ビネットを使用します。白は禁止、生のスクリーンショットも使用しません。
  • シリーズチップ（左上、等幅フォント、アウトライン付きピル）＋フェニックスマーク（右上）— すべてのカバーで同じ位置に配置します。
  • シリーズカラー（統一感の中に変化を持たせます）： ピンク #FF1464 = ニュース／注目の話題／Claude · シアン #00E5FF = チュートリアル／開発 · アンバー #F9AD45 = 楽しい話題／野生動物。
  • behind テンプレート（シグネチャー）：Rubik-900 の大きな見出し（1～3 語、自動サイズ調整）を配置し、1 語をシリーズカラーにして、被写体の切り抜き画像の一部の後ろに配置します。胸の高さにパンチラインを前面に配置します（--front-top、デフォルトは 1285）。切り抜き画像にはシリーズカラーのリムグローを加えます。
  • stack テンプレート（写真なし）：Anton／Rubik の大きく光るスタック文字＋Rubik のサブタイトルを使用します。ツール／コードのカバー向けです（例：「CLAUDE CODE / המדריך המלא」）。
  • 下中央に @yuval_770 · YUV.AI のハンドルを小さな等幅フォントで配置します。

実行方法（このスキルのフォルダー、または assets/+fonts/ をコピーした任意のプロジェクトから）

# 0) prereqs: Node 22+, FFmpeg. Builder is pure-stdlib Python (py on Windows, python3 on Mac).
# 1) one-time per new photo — local AI background removal:
npx --yes hyperframes@latest remove-background photo.png -o assets/cutout.png
# 2) generate a cover (renders headless via HyperFrames -> PNG):
py gen_cover.py behind --img assets/cutout.png --back "קלוד דסקטופ" --front "משנה הכל!" `
   --accent-back 1 --color pink --tag "CLAUDE · AI" --out my-cover
py gen_cover.py stack --back "CLAUDE CODE" --sub "המדריך המלא" --accent-back -2 --color cyan --tag DEV --out cc

引数：--accent-back N = BACK テキストのうちシリーズカラーにする語の位置（-1 はなし、-2 はすべて）； --size-back は自動サイズ調整を上書きします；--front-top は前面の行を移動します（胸の高さに保ち、顔には重ねないでください）。 Yuval のデフォルトの切り抜き画像（スタジオ撮影）は assets/yuval-cutout.png に同梱されています。

エージェント向けルール

  1. 見出しは後ろに配置する文字を 3 語以内、前面に配置する文字を 2 語以内にします。長い場合は、より簡潔に書き直してください。これはポスターであり、キャプションではありません。
  2. コンテンツの種類に応じてシリーズカラーを選びます（上記の対応表を参照）。1 枚のカバーで色を混ぜないでください。
  3. 前面の文字を顔に重ねてはいけません。胸の高さにのみ配置し、写真に合わせて --front-top を調整してください。
  4. 新しい写真を使う場合は、まず背景を除去してください（手順 1）。長方形の写真をそのまま貼り付けてはいけません。
  5. レンダリングした PNG を確認してください。頭の後ろにある見出しが読めること、チップとフェニックスがセーフゾーン内にあること、y=285 より上や y=1635 より下に重要な要素がないことを確認します。
  6. ヘブライ語の字形には同梱の Rubik サブセットを使用します。特殊な句読点が不足している場合は、必要に応じて yuv-video-director の builders/fetch_hebrew_fonts.py から再取得してください。

コメント

Markdown 対応