X-Avatar-Banner-Fusion (Deutsch)

X Avatar × Banner Fusion (Universelles Kompetenzprofil)

Aufgaben und Grenzen

Einziges Ziel: Ein reines Hintergrundbanner ausgeben, das direkt für das X/Twitter-Profil verwendet werden kann, sodass der echte Avatar des Clients im Überlappungsbereich am oberen Rand des Avatars eine natürliche visuelle Verbindung schafft.

• Es darf nur das Banner bearbeitet/erzeugt werden; das Profilbild, dessen schwarzer Rand, der Profilbereich, die Statusleiste, Schaltflächen und Beitragsinhalte dürfen nicht verändert werden.
• Im endgültigen Produkt dürfen keine Avatar-Fotos, Platzhalter für das Profilbild, vollständige Kreise, UI, Benutzernamen oder simulierte Profil-Screenshots erscheinen; Vorschau-/Messbilder zählen nicht als Endprodukt.
• Festes Seitenverhältnis 3:1, empfohlen 1500×500 / 1536×512 / 3000×1000. Der gewünschte visuelle Stil und das Hauptmotiv des Benutzers sollten beibehalten werden; nur weil das Referenzbeispiel ein Schaf ist, heißt das nicht, dass standardmäßig ein Schaf gezeichnet wird.
• Der Avatar liegt größtenteils unterhalb der Unterkante des Banners. Der Kreismittelpunkt des Avatars darf nicht fälschlicherweise innerhalb des Bildes platziert werden, und der Hintergrund darf nicht als eine einzige editierbare Leinwand mit der gesamten Profilseite behandelt werden.
• Der schwarze Rand wird vom Client real überlagert: Das Banner kann ihn nicht entfernen, sondern nur durch ähnliche Farben, Bögen, Helligkeit und Fließrichtung die optische Trennung reduzieren. Es darf nicht so getan werden, als ob die untere Hälfte des Avatars ebenfalls vom Banner umschlossen wird.

Wann wird diese Kompetenz aktiviert

Der Benutzer wünscht: Interaktion zwischen Avatar und Hintergrund auf der X-Profilseite, Verschmelzung des oberen Avatar-Randes mit dem Banner, Banner und Avatar als Einheit, Korrektur eines nicht ausgerichteten Lichthofs, Reduzierung einer dunklen Fläche unter dem Banner, Erstellung eines hochladbaren reinen Banners; oder Bereitstellung eines Profil-Screenshots und des ursprünglichen Banners für eine Kalibrierungsanfrage.

Arbeitsablauf (muss sequentiell ausgeführt werden)

1. Zuerst die echten Geometrien erfassen, nicht den Mittelpunkt raten

Wenn der Benutzer einen vollständigen Profil-Screenshot bereitstellt, der das Banner und den nicht zusammengeklappten Bereich zeigt:

1. Bestätige das Rechteck des Banners im Screenshot (left, top, width, height); bestätige den tatsächlichen Avatar-Mittelpunkt (cx,cy) und den äußeren Randradius r, alle in Screenshot-Koordinaten. Die Schnittlinie zwischen dem äußeren Avatar-Rand und dem Hintergrund ist entscheidend.
2. Verwende scripts/banner_fusion.py measure, um die Bildschirmkoordinaten zurück in die Koordinaten der ursprünglichen Bannerleinwand umzurechnen. Berücksichtige das object-fit: cover-Skalierungsverhalten und den zentrierten Zuschnitt. Die x/y-Werte des Screenshots dürfen nicht direkt übernommen werden.
3. Überprüfe die berechneten Ergebnisse: Der Avatarmittelpunkt liegt normalerweise unterhalb der Bannerunterkante; der obere Rand des Avatars liegt oberhalb der Unterkante; der tatsächlich interagierbare Bereich ist der schmale obere Bogen. Wenn die Struktur abweicht, richte dich nach dem tatsächlichen Screenshot, erzwinge keine Standardwerte.
4. Speichere layout.json zur Wiederverwendung für Iterationen mit demselben Gerät/demselben Layout; bei unterschiedlichen Clients/Geräten, geändertem Zuschnitt oder UI-Layout ist eine erneute Messung erforderlich.

Ohne Screenshot: Verwende references/example_layout.json als empirischen Ausgangswert nur für den ersten Entwurf. Er stammt von einem einzelnen erfolgreichen Mobilgeräte-Fall und ist kein feststehender, offizieller Koordinatensatz für alle X-Benutzer. Erstelle einen ersten Entwurf, am besten lässt sich der Benutzer einmal einen Anwendungs-Screenshot zusenden, um eine echte Kalibrierung durchzuführen.

Messbeispiel (Koordinaten sind illustrativ und entsprechen nicht den tatsächlichen Benutzermessungen):

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

Wenn keine genauen Koordinaten, aber ein Screenshot vorhanden sind: Erstelle zuerst ein Rasterhilfsbild mit grid, markiere dann die Bannerunterkante und den äußeren Avatar-Rand. Es ist nicht nötig, Pixelwerte nur für eine falsche automatische Anpassung zu erfinden.

2. Hintergrund basierend auf dem sichtbaren oberen Bogen des Avatars entwerfen

Lies references/prompt_templates.md und füge Thema, Stil, Farbpalette, Hauptmotiv und Fusionselemente ein. Bringe vor der Generierung die Messdaten ein:

• Gestalte nur einen niedrigen, flachen Lichtbogen/Lichtkrone nahe der Unterkante des Banners in der unteren linken Ecke, der sich nahe der theoretischen Spitze des Avatars befindet und dem Verlauf des tatsächlichen Kreisbogens folgt; vermeide es, eine große, vollständige, dunkle Scheibe in das Bild zu zeichnen.
• Lasse vom flachen Bogen nach rechts Bänder/Rauch/Lichtstrahlen/Blütenblätter/Sternspuren etc. ausgehen, mit echter visueller Kontinuität, die zur Mitte und dann zum rechten Hauptmotiv führen.
• Positioniere das Hauptmotiv rechts oder mittig-rechts; die linke untere Ecke ist für den Kontaktbereich des Avatars reserviert. Die Statusleiste und Menüs können den oberen und rechten Bereich überdecken; platziere wichtige Details daher außerhalb dieser Zonen.
• Die Unterkante (Land, schwarze Terrasse, dunkle Bänder) darf nicht zu dick sein; der helle Bogen im Kontaktbereich des Avatars muss nahe an der echten Unterkante des Banners liegen. Schneide jedoch kein wichtiges Hauptmotiv ab, nur um eine tiefe Position zu erreichen.
• Der helle Bogen ist nicht die echte Avatar-Kante (die herausgeschnitten wurde); er nutzt die Client-Überlagerung, um eine optische Täuschung zu erzeugen. Das Design kann einen leichten (0–40px, hochgerechnet auf 1536px Breite) äußeren Leuchtsaum enthalten, priorisiere die Anpassung basierend auf der Wirkung im Anwendungs-Screenshot.

3. Reines Hintergrundbild + unabhängige Positionierungsvorschau ausgeben

Die endgültige Datei muss 3:1 sein und darf keinen Avatar enthalten. Kalibrierungs-/Vorschaubilder dienen der Überprüfung und werden nicht als offizielles Banner hochgeladen.

python3 scripts/banner_fusion.py preview \
  --banner output/banner.png \
  --config layout.json \
  --out output/preview.png --guide
# Wenn der Benutzer ein eigenes quadratisches Avatar-Bild bereitstellt, verwende es in der Vorschau: --avatar-image input/avatar.png

Das Skript überlagert den Avatar simuliert auf dem schwarzen Profilbereich und schreibt ihn nicht in das Banner.

Es kann auch ein Anwendungs-Screenshot für eine Positionsvorschau bereitgestellt werden (UI-Symbole müssen möglicherweise als zusätzlich beizubehaltende Bereiche angegeben werden; der endgültige Akzeptanztest erfolgt mit einem echten Screenshot nach dem erneuten Anwenden):

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. Iteration nur in den richtigen Dimensionen

• Der Abstand zwischen dem oberen Rand des Avatars und dem Energiebogen ist zu groß (der Bogen liegt oberhalb des Avatars) → Behalte das gesamte Hauptmotiv bei, verschiebe den flachen Bogen/die zugehörigen Lichtbänder nach unten; verschiebe ggf. das gesamte Bild nach unten und beschneide die dickste dunkle Zone am unteren Rand.
• Der flache Bogen wird vom Avatar zu stark verdeckt und ist nicht sichtbar → Verschiebe den flachen Bogen leicht nach oben, ohne den Avatar zu bewegen oder den gesamten Kreis zu vergrößern.
• Lichteffekte sind zu weit links/rechts → Überprüfe den x-Wert des Screenshot-Kreismittelpunkts noch einmal und verschiebe dann die lokalen Interaktionselemente horizontal; gehe nicht davon aus, dass alle Geräte denselben x-Wert haben.
• Der sichtbare schwarze äußere Rand wirkt störend → Ändere den Bogen in einen sanften Verlauf mit Lichtnebel, der sich entlang des oberen Kontaktbereichs einfügt; versprich nicht, "den schwarzen Rand zu entfernen".
• Das Schaf/die Person/das Hauptmotiv wird vom Menü verdeckt → Passe die Position des Hauptmotivs oder die Bildkomposition an, nicht die Client-UI.
• Der Banner-Zuschnitt ändert sich → Führe erneut measure durch; es ist verboten, nur auf Basis der Pixelverschiebung der vorherigen Runde zu iterieren.

Leichte vertikale Verschiebung des erzeugten Bildes (um zu überprüfen, ob es sich um ein Positionsproblem handelt; es wird empfohlen, die erfolgreiche Verschiebung schließlich an das Bildgenerierungsmodell zurückzugeben, um es mit höherer Qualität neu zu generieren):

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

--dy ist die Abwärtsverschiebung in Bildschirmpixeln; der untere Rand wird beschnitten, der obere Rand wird mit Randfarbe aufgefüllt. Nicht für große Verschiebungen geeignet. Rendere nach der Generierung eine neue Vorschau.

5. Abnahme und Auslieferung

Die Aufgabe gilt erst als abgeschlossen, wenn alle folgenden Bedingungen erfüllt sind:

1. Das Banner hat ein Seitenverhältnis von 3:1; es enthält keinen Avatar/Text/UI/vollständigen Platzhalterkreis.
2. In der Vorschau stimmen die echte Avatar-Geometrie und der sichtbare schmale Bogen überein; es ist kein fiktiver "vollständiger Avatar innerhalb des Hintergrunds".
3. In der Nähe der Avatar-Spitze ist eine wahrnehmbare, aber nicht aufdringliche Fusion von Lichteffekten vorhanden; der untere Rand des Banners hat keinen übermäßigen schwarzen Boden oder dicke, inhaltslose Bänder.
4. Der Lichtfluss und das Hauptmotiv sind sinnvoll verbunden; die Hauptansicht wird nicht übermäßig vom Avatar oder von Schaltflächen verdeckt.
5. Nachdem das Banner tatsächlich in X angewendet wurde, erstellt der Benutzer einen Screenshot der nicht zusammengeklappten Profilseite als endgültigen Beweis; wenn die Abweichung erheblich ist, wird eine präzise Neukalibrierung durchgeführt. Ohne tatsächliche Anwendung kann nur gesagt werden: "Simulationsvorschau bestanden"; es darf nicht behauptet werden, dass es auf dem echten Client perfekt sein wird.
6. Auslieferung: das reine Banner, optional das Vorschaubild und das Layout-JSON; das Vorschaubild darf nicht versehentlich als Banner ausgeliefert werden.

Von erfolgreichen Fällen lernen

• Die Kompositionsregeln erfolgreicher Fälle finden sich in den Dateien references/geometry.md und references/success_case.md. Ein reines Hintergrund-Visualisierungsbeispiel findet sich unter assets/success_reference_1536x512.webp (ohne Avatare oder persönliche Daten); alternativ kann scripts/make_demo_banner.py verwendet werden, um einen neutralen Demo-Hintergrund zu generieren.
• Wesentliche Praktiken: Ein wirklich tiefer, flacher linker Bogen (mit darüberliegenden Energie-Ausströmungen), ein relativ dünner unterer Boden/dünne dunkle Bänder, ein von links nach rechts verlaufendes buntes Band und ein rechtes Hauptmotiv. Nicht nur die Farben kopieren; die Positionsbeziehungen müssen übernommen werden.
• Empirische Koordinaten: Siehe references/example_layout.json und references/geometry.md. Geräte- und Client-Unterschiede haben Vorrang vor diesen Erfahrungswerten.

Dateiverzeichnis

• references/geometry.md: Koordinatenumrechnungsformeln, Grenzen und Fehlerfälle.
• references/prompt_templates.md: Austauschbare Themen-Prompts, Negative Prompts, Iterations-Prompts.
• references/example_layout.json: Beispiel-Avatarparameter (nur für den ersten Standardentwurf).
• scripts/banner_fusion.py: Berechnung, Raster, Vorschau, Screenshot-Ersetzungsvorschau, Versatzkalibrierung.
• assets/success_reference_1536x512.webp: Hochladbares reines Hintergrund-Referenzbild eines erfolgreichen Falls, ohne echte Avatare.
• examples/geometry_guide.svg: Schematische Darstellung der Avatar/Banner-Überlagerung (kein echter Avatar, kein Produktionshintergrund).
• scripts/make_demo_banner.py: Generiert einen beispielhaften 3:1-Testhintergrund.
• README.md: Installations- und Befehlsanleitung.