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

X 頭像 × 橫幅融合（通用技能）

職責與邊界

唯一目標：輸出一張可直接用於 X/Twitter 個人頁面的純背景橫幅，讓 X 客戶端疊加真實頭像後，在頭像上沿可見重疊區產生自然的視覺連接。

• 必須只編輯/生成橫幅；不能改頭像、頭像的黑色邊框、使用者資料區、狀態欄、按鈕、貼文內容。
• 正式成品裡禁止出現頭像照片、頭像佔位圖、完整圓圈、UI、帳號文字或模擬個人頁面截圖；預覽/測量圖不屬於正式成品。
• 固定 3:1，推薦 1500×500 / 1536×512 / 3000×1000。輸出盡量保持使用者要求的視覺風格與主體，不因參考範例是一隻羊就預設都畫羊。
• 頭像大部分在橫幅底邊之下。不能誤把頭像圓心置於圖內，也不能把背景和個人頁面整體當成一張可編輯畫布。
• 黑色邊框是客戶端真實疊加的：橫幅無法抹掉它，只能用附近顏色、弧線、亮度與流向降低割裂感。不要虛構頭像下半圈也能被橫幅包裹。

什麼時候觸發

使用者想要：X 個人頁面頭像與背景互動、頭像上沿融合、banner 與 avatar 連成一體、修正對不齊的光環、減少橫幅下方土地/暗帶、生成可上傳的純橫幅；或提供個人頁面截圖與原橫幅請求校準。

工作流程（必須依次執行）

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 平台所有使用者的官方固定座標。先出初稿，最好讓使用者上傳一次應用截圖，再真實校準。

量測範例（座標為示意，不代表使用者螢幕實測）：

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：安裝與命令說明。