litany-lty/elidli-x-avatar-banner-fusion

X アバター × バナー融合（汎用スキル）

責務と範囲

唯一の目標: X/Twitter プロフィールページにそのままアップロードできる純粋な背景バナーを出力し、X クライアントが実際のアバターを重ねた際に、アバター上端の重なり領域で自然な視覚的接続を生み出すこと。

• バナーのみを編集/生成すること。アバター、アバターの黒枠、ユーザー情報エリア、ステータスバー、ボタン、投稿内容は変更してはならない。
• 最終成果物にアバター画像、アバターのプレースホルダー、完全な円、UI、アカウントテキスト、または模擬プロフィールページのスクリーンショットを含めてはならない。プレビュー/計測用の画像は最終成果物には該当しない。
• 固定比率 3:1、推奨サイズは 1500×500 / 1536×512 / 3000×1000。ユーザーが要求する視覚スタイルと被写体を可能な限り維持すること（参考例が羊だからといって常に羊を描くわけではない）。
• アバターの大部分はバナーの下端より下に位置する。アバターの中心をバナー内に配置したり、背景とプロフィールページ全体を編集可能な一枚のキャンバスとして扱ってはならない。
• 黒枠はクライアントが実際に重ねるものであり、バナーで消去することはできない。そのため、近い色、弧、明るさ、流れを用いて違和感を軽減すること。アバターの下半分もバナーで包み込めるような錯覚を作り出してはならない。

起動条件

ユーザーが次のことを希望する場合：X プロフィールのアバターと背景をインタラクティブに見せる、アバター上端を融合させる、バナーとアバターを一体化させる、位置がずれた光彩を修正する、バナー下部の土台/暗帯を減らす、アップロード可能な純粋なバナーを生成する、またはプロフィールページのスクリーンショットと元のバナーを提供して位置調整を依頼する。

ワークフロー（必ずこの順序で実行すること）

1. 実際のジオメトリを優先し、中心を推測しない

ユーザーがバナー全体と、スクロールしていないプロフィールページのスクリーンショットを提供した場合：

1. スクリーンショット内のバナー表示矩形 (left, top, width, height) を確認する。アバターの実際の中心 (cx,cy) と外枠半径 r を確認する。これらは全てスクリーンショット上の座標である。アバターの外縁と背景との交線が重要。
2. scripts/banner_fusion.py measure を使用して、画面上の座標を元のバナーキャンバスの座標に逆算する。object-fit: cover による等比スケーリングと中央クロップを考慮し、スクリーンショットの x/y をそのまま適用してはならない。
3. 計算結果を確認する：アバターの中心は通常バナーの下端より下にある。アバターの上端はバナーの下端より上にある。実際にインタラクション可能なのは上部の狭い弧のみ。構造が異なる場合は、実際のスクリーンショットを優先し、デフォルト値を無理に適用しない。
4. layout.json を保存する。同一デバイス・同一ページレイアウトでの反復にはこれを再利用する。異なるクライアント/デバイス、クロップやUIレイアウトが変更された場合は再計測する。

スクリーンショットがない場合： references/example_layout.json を初稿のみの経験値として使用する。これは単一の成功したモバイル端末のケースに基づくものであり、X プラットフォームの全ユーザーに固定された公式座標ではない。まず初稿を出力し、ユーザーに実際のスクリーンショットを1回アップロードしてもらい、実際の位置で校正することを推奨する。

計測例（座標は例示であり、ユーザーの画面実測値ではない）：

python3 scripts/banner_fusion.py measure \
  --banner-box 0 0 1536 512 \
  --avatar 210 618 158 \
  --target 1536 512 \
  --out layout.json
python3 scripts/banner_fusion.py report --config layout.json

正確な座標がなく、スクリーンショットがある場合：最初に grid でグリッド補助画像を生成し、バナー下端とアバター外枠をマークする。不正確な自動フィッティングのためにピクセル値をでっち上げる必要はない。

2. アバター上部の見える弧に合わせて背景をデザインする

references/prompt_templates.md を読み、テーマ、スタイル、配色、被写体、融合要素を入力する。生成前に計測データを含めること：

• 左下隅にはバナー下端に近い低い位置の浅い弧/エネルギーの冠のみを作成する。位置はアバターの理論上の上部付近とし、実際の円弧の上部の軌跡に沿わせる。画像内に大きな完全な暗い円盤を描かないこと。
• 浅い弧から右に向かってリボン/煙/光/花びら/星の軌跡などを放射させ、視覚的な連続性を持たせ、中央部へ、さらに右側の被写体へとつなげる。
• 被写体は右寄りまたは中央よりやや右に配置し、左下はアバターとの接触領域とする。ステータスバー/メニューが上部、右部を隠す可能性があるため、重要なディテールはそれらの領域を避けて配置する。
• 下端の地面、黒い台地、暗帯は厚くなりすぎないこと。アバター上部の接触領域の明るい弧が、実際のバナー下端に近くなるようにする。ただし、重要な被写体を切り落とすために低い位置を強要しない。
• 明るい弧は、切り抜かれた実際のアバターの端ではない。クライアント側の重ね合わせを利用した錯覚である。デザインには 0～40px（1536px幅に換算）程度の範囲で外部発光のバッファを含めてもよいが、優先的には実際のアプリのスクリーンショットで効果を調整する。

3. 純粋な背景 + 独立した位置合わせプレビューを出力する

正式なファイルは 3:1 で、アバターを含まないこと。校正画像/プレビューは確認用であり、正式なバナーとしてアップロードしないこと。

python3 scripts/banner_fusion.py preview \
  --banner output/banner.png \
  --config layout.json \
  --out output/preview.png --guide
# ユーザーが自身のアバターの正方形画像を提供した場合、プレビュー時に使用：--avatar-image input/avatar.png

スクリプトは、アバターをシミュレートして黒いプロフィールエリアに重ねるが、アバターをバナーに書き込むことはしない。

また、アプリのスクリーンショットを使った位置プレビューも提供可能（UI アイコンを追加で指定して除外領域を確保する必要がある場合あり。最終的な承認は、実際にバナーを適用した後のスクリーンショットで行うこと）：

python3 scripts/banner_fusion.py screenshot-preview \
  --banner output/banner.png --screenshot input/home.png \
  --banner-box 0 0 691 230 --avatar 94 278 72 \
  --out output/screenshot_preview.png

4. 反復は正しい次元でのみ行う

• アバター上端とエネルギー弧が離れすぎている（弧がアバターの上にある） → 全体の被写体は維持し、浅い弧/関連する光の流れを下に移動する。必要に応じて画像全体を下方に移動し、最下部の厚すぎる暗帯を圧縮する。
• 浅い弧がアバターに隠れすぎて見えない → 弧を少し上に移動する。アバターを移動したり、円全体を拡大したりしない。
• 光の効果が左/右に偏っている → スクリーンショットの円の中心 x を再度確認し、局所的なインタラクティブ要素を水平方向に移動する。すべてのデバイスで x が同じであると仮定しない。
• 見える黒枠が目立つ → 弧を柔らかいグラデーションと光の霧に変更し、上部接触領域に沿ってなじませる。「黒枠を消す」と約束しない。
• 羊/人物/被写体がメニューに隠れる → 被写体の位置や画像の主従を調整する。クライアントの UI は変更しない。
• バナーのクロップが変更された → 再 measure する。前回のピクセルオフセットだけを頼りに反復を続けてはならない。

生成済み画像の軽量移動（位置の問題かどうかを検証するため。成功した移動は最終的に画像生成モデルにフィードバックし、高品質で再生成することを推奨）：

python3 scripts/banner_fusion.py shift --input output/banner.png \
  --dy 32 --out output/banner_down32.png

--dy は下方へのキャンバスピクセル数。下端は切り取られ、上端はエッジフィルで補われるため、大きな移動には適さない。生成後、プレビューを再レンダリングする。

5. 承認と納品

以下の項目がすべて満たされた場合にのみ完了とする：

1. バナー比率が 3:1 であること。コンテンツにアバター/テキスト/UI/完全なプレースホルダーの円が含まれていないこと。
2. プレビューにおいて、アバターの実際のジオメトリと見える狭い弧が一致していること。「背景内部の完全なアバター」のような架空のものではないこと。
3. アバター上部付近に、知覚可能でありながら不自然ではない融合光の効果があること。バナー下部に過度な黒土や無内容な厚い帯がないこと。
4. 光の流れと被写体の関連性が合理的であり、メインのビジュアルがアバター/ボタンによって過度に隠されていないこと。
5. 実際にバナーを X に適用した後、ユーザーがスクロールしていないプロフィールページのスクリーンショットを最終証拠として撮影していること。差異が明らかな場合、正確な校正を続けること。実際に適用していない段階では「シミュレーションプレビューは合格」としか言えず、実際のクライアントで完全に機能すると主張してはならない。
6. 納品物は、純粋なバナー、オプションのプレビュー画像、レイアウト JSON であること。プレビュー画像をバナーと誤って納品しないこと。

成功事例の参照

• 成功事例の構図ルールは references/geometry.md と references/success_case.md を参照。純粋な背景のビジュアル事例は assets/success_reference_1536x512.webp（アバターや個人情報なし）を参照。また、scripts/make_demo_banner.py を使用して中立的なデモ背景を生成できる。
• 重要なアプローチ：本当に低い位置の左側の浅い弧（上部にエネルギーのプルームを残す）、薄めの下部の地面/暗帯、左から右へのカラフルなリボン、右側の被写体。色を真似るだけでなく、位置関係を再利用すること。
• 経験的座標：references/example_layout.json と references/geometry.md を参照。デバイスとクライアントの差異は、これらの経験値よりも優先される。

ファイル一覧

• references/geometry.md：座標変換式、境界、失敗ケース。
• references/prompt_templates.md：置き換え可能なテーマのメインプロンプト、ネガティブワード、反復プロンプト。
• references/example_layout.json：アバターパラメータのサンプル（デフォルト初稿のみ）。
• scripts/banner_fusion.py：計算、グリッド、プレビュー、スクリーンショット置換プレビュー、オフセット校正。
• assets/success_reference_1536x512.webp：アップロード可能な成功事例の純粋な背景参照画像（実際のアバターなし）。
• examples/geometry_guide.svg：アバター/バナー重ね合わせの模式図（実際のアバターやプロダクション背景ではない）。
• scripts/make_demo_banner.py：サンプルの 3:1 テスト背景を生成。
• README.md：インストールとコマンドの説明。