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

X Avatar × Banner Fusion (Generic Skill)

Responsibility & Boundaries

Single goal: Output a pure background banner ready for X/Twitter profile, such that when X overlays the real avatar, a natural visual connection occurs along the visible overlap at the avatar’s top edge.

• Must only edit/generate the banner; cannot modify the avatar, its black border, profile area, status bar, buttons, or post content.
• Forbidden in final deliverables: avatar photos, placeholder circles, full circles, UIs, account text, or simulated profile screenshots; preview/measurement images are not final deliverables.
• Fixed 3:1 ratio, recommended 1500×500 / 1536×512 / 3000×1000. Output should preserve the user’s requested visual style and subject; do not default to drawing a sheep just because a reference example features one.
• Most of the avatar lies below the banner’s bottom edge. Do not mistakenly place the avatar center inside the canvas, nor treat the banner and profile page as one editable canvas.
• The black border is client-side overlaid: the banner cannot remove it; only soften the disconnect using nearby colors, arcs, brightness, and flow. Do not fabricate that the lower half of the avatar is wrapped by the banner.

When to Trigger

The user wants: X profile avatar interacting with background, top-edge fusion, banner and avatar as one connected design, correcting misaligned halos, reducing dark land/band below the banner, generating an uploadable pure banner; or providing profile screenshots and original banners for calibration requests.

Workflow (Must Follow in Order)

1. Prioritize Real Geometry, Don’t Guess Center

When the user provides a full profile screenshot showing the banner and the uncollapsed profile area:

1. Identify in the screenshot the banner rectangle (left, top, width, height); confirm the actual avatar center (cx,cy) and outer border radius r, all in screenshot coordinates. The intersection of the avatar’s outer edge and background is critical.
2. Use scripts/banner_fusion.py measure to inverse-project screenshot coordinates back to the original banner canvas coordinates. Account for object-fit: cover scaling and center cropping; do not naively apply screenshot x/y.
3. Verify results: avatar center is usually below the banner bottom edge; the avatar top edge is above the bottom edge; the only interactable area is the top narrow arc. If geometry differs, defer to the actual screenshot, do not force default values.
4. Save layout.json; reuse it for subsequent iterations on the same device/layout; remeasure for different clients, devices, or layout changes.

Without screenshots: Use references/example_layout.json as an empirical value for the first draft only. It comes from a single successful mobile case, not an official fixed coordinate for all X users. Produce a first draft, but ideally ask the user to upload one screenshot for real calibration.

Example measurement (coordinates illustrative, not user’s actual screen):

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

If exact coordinates are unavailable but a screenshot exists: first generate a grid helper image, then mark the banner bottom edge and avatar outer border. Do not fabricate pixel values for false precision with auto-fitting.

2. Design Background Around the Avatar’s Top Visible Arc

Read references/prompt_templates.md, fill in theme, style, color palette, subject, and fusion elements. Include measurement data before generation:

• In the lower left, only create a low light arc / energy corona near the banner bottom edge, positioned close to the avatar’s theoretical top, following the real arc’s top trajectory; avoid drawing a large solid dark disk in the canvas.
• From the light arc, emit ribbons/smoke/light/petals/star trails to the right with real visual continuity, connecting to the center, then to the right-side subject.
• Subject is right-aligned or center-right; leave the lower-left for the avatar contact zone. Status bar / menu may overlay the top and right—keep key details clear of obstruction.
• Bottom land, black plateau, or dark bands must not be too thick; ensure the light arc near the avatar top touches close to the banner’s real bottom edge. But do not cut off important subjects just to keep it low.
• The light arc is not a cut-out avatar boundary; it’s a visual illusion achieved with the client overlay. Allow a 0–40px (scaled to 1536px width) outer glow buffer, prioritize adjustment based on screenshot effect.

3. Output Pure Background + Independent Alignment Preview

Final file must be 3:1, no avatar. Calibration / preview images are for review, not for upload as final banner.

python3 scripts/banner_fusion.py preview \
  --banner output/banner.png \
  --config layout.json \
  --out output/preview.png --guide
# If user provides their own square avatar image, use: --avatar-image input/avatar.png

The script overlays a simulated avatar on the black profile area without writing it into the banner.

Optionally, provide an in-screenshot position preview (UI icons may require specifying reserved areas; final acceptance is a real re-applied screenshot):

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. Iterate Only on Correct Dimensions

• Avatar top edge and energy arc are too far apart (arc above avatar) → Keep overall subject, move light arc / related light streams downward; if necessary, shift the entire image down, cropping the thickest dark band at the bottom.
• Light arc is too obscured by the avatar, barely visible → Slightly move the arc upward, not the avatar or enlarge the circle.
• Light effect shifted left/right → Re-check screenshot center x, then horizontally move local interactive elements; do not assume same x across devices.
• Visible black border feels jarring → Change arc to soft gradients and light mist, aligning along the top contact zone; do not promise to “remove black border.”
• Sheep/person/subject covered by menu → Adjust subject position or visual hierarchy, not the client UI.
• Banner cropping changes → Re-run measure; do not continue iterating with only the previous pixel offsets.

Lightweight shift of already generated image (for verifying position issues; final shift should be fed back to the generation model for high-quality regeneration):

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

--dy is downward canvas pixels; bottom is cropped, top filled by edge color—not suitable for large movements. Re-render preview after shifting.

5. Validation & Delivery

All of the following must be satisfied for completion:

1. Banner ratio 3:1; no avatar/text/UI/complete placeholder circles in the content.
2. In preview, the avatar’s real geometry matches the visible narrow arc; not a fabricated “full avatar inside the background”.
3. Perceptible but not jarring fusion lighting exists near the avatar top; the banner bottom does not feature excessive black soil or thick empty bands.
4. Light flow and subject are logically connected; main visual is not overly obscured by avatar/buttons.
5. After actually applying the banner to X, the user captures an uncollapsed profile screenshot as final evidence; if significant differences remain, continue precise calibration. Without real application, only claim “simulated preview passed,” never assert perfect performance on the live client.
6. Deliver pure banner, optional preview image, and layout JSON; do not mistakenly deliver the preview as the banner.

Reference Successful Cases

• Composition patterns from successful cases are in references/geometry.md and references/success_case.md. Pure background visual examples are in assets/success_reference_1536x512.webp (no avatar or personal information); alternatively, use scripts/make_demo_banner.py to generate neutral demo backgrounds.
• Key approach: truly low-left light arc (leaving energy plume space above), thin bottom land/dark band, colorful ribbon flowing left-to-right, right-side subject. Do not just imitate colors; must reuse positional relationships.
• Empirical coordinates: see references/example_layout.json and references/geometry.md. Device and client differences take priority over these empirical values.

File Index

• references/geometry.md: Coordinate transformation formulas, boundaries, and failure cases.
• references/prompt_templates.md: Replaceable theme main prompt, negative prompt, iteration prompts.
• references/example_layout.json: Example avatar parameters (default first draft only).
• scripts/banner_fusion.py: Calculation, grid, preview, screenshot replacement preview, shift calibration.
• assets/success_reference_1536x512.webp: Reference uploadable pure background from successful case (no real avatar).
• examples/geometry_guide.svg: Avatar/banner overlay schematic (no real avatar, no production background).
• scripts/make_demo_banner.py: Generate example 3:1 test background.
• README.md: Installation and command explanation.