builtnotboosted/image-generation

Bildgenerierung

Dieses Skill verwandelt die Nachricht eines Beitrags in eine fertige Bilddatei in der exakten Größe, die jede Plattform benötigt. Es besitzt die Produktionsmethode: wie die Szene ausgewählt wird, wie die Überschrift ins Bild kommt, wie das Gesicht einer realen Person echt bleibt, wie das Seitenverhältnis gesteuert wird, wie die Datei geprüft wird und wie der Alt-Text geschrieben wird. Es delegiert an brand/brand-profile.md für die Markenkonstanten (Palette, Schriften, Logoregeln, Ähnlichkeitsregeln), an das writing-Skill für den Wortlaut der Überschrift, an das video-editing-Skill für Cover, die innerhalb einer Videobearbeitung erstellt werden, und an das review-loop-Skill für die unabhängige Prüfung, bevor etwas ausgeliefert wird.

Autoritätsreihenfolge: brand-profile.md gewinnt bei Markenkonstanten und Compliance-Formulierungen; dieses Skill besitzt die Methode.

Bevor du beginnst

1. Finde den Marketing-Workspace (Standard marketing/). Wenn es keinen gibt, sag dies in einem Satz und biete an, das brand-setup-Skill auszuführen; wenn der Nutzer weitermachen möchte, frage nur nach der Palette (zwei oder drei Hex-Codes), einer Überschrift-Schriftart und ob eine reale Person vorkommt.
2. Lese aus brand/brand-profile.md: ## Visuelle Identität (Palette, Schriften, Logo-Verwendung, Bildstil), ## Ähnlichkeit (Referenzbild-Pfade und -Regeln), ## Plattformen (wo das Bild landet), ## Compliance (alles, was in einem Bild erscheinen muss oder nicht darf), ## Grenzen und ## Werkzeuge (welches Bildmodell verfügbar ist).
3. Lese brand/voice-learnings.md, bevor du den endgültigen Wortlaut der Überschrift festlegst: Überschriften sind Text, und Text sollte wie die Person klingen.
4. Lese brand/performance-learnings.md für alles, was das Konto über Bilder gelernt hat, die Reichweite erzielen.
5. Arbeite im Ordner des Stücks, content/<jjjj-mm-tt>-<slug>/. Bilder landen in einem images/-Unterordner darin.
6. Kenne das Format vor der Produktion: einfaches Static, Karussell, Kurzvideo-Cover, Langvideo-Cover oder animiertes Static. Wenn niemand eines ausgewählt hat, wähle das einfachste passende und erkläre die Wahl in einem Satz.

Der Standard

1. Die Überschrift wird vom Bildmodell in die Szene eingebettet, niemals per Code nachträglich aufgesetzt. Bitte das Modell, die Überschrift und die Unterüberschrift als Teil des Bildes zu rendern, beleuchtet und platziert wie ein Designer. Warum: Nachträglich mit PIL, Canva-ähnlichen Overlays oder HTML hinzugefügter Text sitzt auf einer anderen Ebene als das Foto und wirkt wie eine billige Vorlage – der häufigste Grund, warum Menschen KI-Bilder ablehnen. Das Bildmodell kann inzwischen kurzen Text gut darstellen; lass es seine Arbeit tun.
2. Die Überschrift ist der Star. Groß, fett, kondensiert, etwa 40 % der sichtbaren Höhe und niemals weniger als ein Drittel, zwei oder drei kurze Zeilen, ein Punch-Wort in der Akzentfarbe. Wenn es wie eine Bildunterschrift wirkt, ist es gescheitert. Warum: Das Grid und der Feed werden in der Thumbnail-Größe auf einem Telefon beurteilt, und nur eine große Überschrift überlebt das.
3. Der gesamte Text lebt in der Grid-sicheren Zone. Das zentrierte 1:1-Quadrat der Leinwand, auf jeder Seite um weitere 7 bis 8 % eingerückt, mit klarem Platz über der Überschrift und nichts Wichtigem in den unteren 12 %. Warum: Profil-Grids, Link-Vorschauen und In-Feed-Zuschnitte schneiden die Ränder ab. Öffne references/grid-safe-zone.md für die formatabhängigen Zahlen.
4. Jedes Bild ist eine eigene, realistisch wirkende Szene, die für diese Nachricht gebaut wurde. Eine Person, die in einer realen Umgebung etwas tut, oder eine starke visuelle Metapher, in natürlichen Farben mit sparsam eingesetzter Markenakzentfarbe. Niemals dasselbe Porträt auf demselben Hintergrund mit nur geänderten Worten. Die einzige Ausnahme ist eine bewusste wöchentliche Serie, die ihr Layout absichtlich wiederholen darf.
5. Reale Personen bleiben echt. Wenn eine reale Person erscheint, stammt ihr Gesicht von ihren Referenzfotos, in ihrem tatsächlichen Alter und ihrer Statur. Erfinde niemals ein Gesicht, poste niemals die Referenzfotos selbst.
6. Exakte Größe, überprüft. Jede Datei wird auf die exakte Pixelgröße in references/asset-sizes.md fertiggestellt und ihre Abmessungen werden überprüft, nicht nur angenommen.
7. Nie die Form in Code pfuschen. Polstere, letterboxe, spiegele, strecke oder setze ein generiertes Bild nicht zusammen, um ein Seitenverhältnis zu erzwingen. Generiere stattdessen mit einem Seitenverhältnis-Anker neu (siehe unten). Warum: Ein aufgepolstertes Bild hat toten Raum, der unfertig aussieht, und das fällt sofort auf.
8. Eine Alt-Text-Zeile pro Bild. Einfache Beschreibung der Szene und der eingebetteten Überschrift, keine Hashtags, keine Links, kein Verkauf.

Die Methode

1. Entscheide das Bild (frisch für jedes Bild)

1. Nenne die einzelne Kernbotschaft des Beitrags in einem Satz.
2. Entscheide die Emotion: beruhigend, klug, ruhig, lustig, freudig oder eine sanfte Warnung. Standardmäßig warm. Niemals Untergangsstimmung.
3. Erfinde eine visuelle Idee, die diese trägt: eine Person in einem echten Moment (am Telefon auf einer belebten Straße, am Küchentisch mit einem Kaffee, beim Auspacken von Kartons) oder eine lesbare Metapher (ein Sicherheitsnetz unter einem Ladenlokal, eine Kette mit einem gesprungenen Glied, ein Kalender mit einem eingekreisten Tag).
4. Schreibe die Überschrift (2 bis 5 Wörter sind ideal, niemals mehr als drei kurze Zeilen) und eine optionale einzeilige Unterüberschrift. Beginne mit der schlichten, wörtlichen Zeile, die sagt, was es ist; biete einen clevereren Aufhänger als markierte Alternative an. Warum: Schlichte Überschriften gewinnen meist an Klarheit und bei der Suche, und die Leute wählen sie, wenn sie die Wahl haben.
5. Plane die leere Zone für die Überschrift von Anfang an, normalerweise einen dunkleren Bereich des Himmels, einer Wand oder eines Schattens innerhalb des Grid-sicheren Quadrats.

2. Generiere die Szene mit der Überschrift darin

Schreibe einen Prompt, der die Szene, das Licht, den Bildausschnitt und den Text zusammen beschreibt. Buchstabiere die Überschrift genau, in Anführungszeichen, gib an, welches Wort die Akzentfarbe ist, bitte um „riesige, fette, kondensierte, plakative“ Schrift in der reservierten Zone und halte die Unterüberschrift kurz genug, damit sie nicht umbricht. Lasse den unteren Bereich komplett frei.

Garble-Wächter, weil Bildmodelle auf vorhersehbare Weise versagen:

• Eine umbrechende Unterüberschrift bekommt oft ein Wort am Umbruch doppelt („erste erste“). Halte sie auf eine Zeile.
• Kleiner fester Text (ein Name, ein Handle, eine Webadresse) wird oft falsch geschrieben. Wenn die Marke ein kleines Namensetikett verwendet, setze dieses Element nachträglich auf (scripts/cover_from_frame.py --wordmark zeigt wie), anstatt es vom Modell zu verlangen.
• Lange Überschriften schrumpfen und werden verstümmelt. Weniger Wörter, größer.

Öffne references/prompting-and-aspect.md für die Prompt-Struktur, die Seitenverhältnis-Tricks und das ausgearbeitete Gemini-Beispiel. Die Kurzversion: Wenn dein Werkzeug eine Einstellung für das Seitenverhältnis bereitstellt, verwende sie; wenn es nur Quadrate ausgibt, bearbeite es auf einer leeren Leinwand im Ziel-Seitenverhältnis (scripts/aspect_scaffold.py) und lege niemals ein quadratisches Referenzbild daneben.

3. Ähnlichkeitssperre (jedes Bild mit einer realen Person)

Lese references/likeness-lock.md vor dem ersten gesichtszentrierten Bild einer Sitzung. Kurz gesagt:

• Baue aus den Referenzfotos in brand/reference-images/: Bearbeite ein sauberes, frontales Porträtfoto in die Szene, anstatt die Person in Worten zu beschreiben, und füge zwei oder drei enge Gesichtsausschnitte (keine Ganzkörper-Selfies, deren Hintergründe einbluten) als Identitätsreferenzen bei. Drehe seitliche Telefonfotos vorher aufrecht.
• Überprüfe das Ergebnis Punkt für Punkt mit einem bereitgestellten Farbfoto (Haarfarbe, Frisur, Gesichtsbehaarung, Gesichtsform und Statur, Brille, Alter). Beurteile die Ähnlichkeit niemals anhand eines anderen KI-Bildes.
• Kalkuliere etwa drei oder vier ehrliche Neugenerierungen ein. Wenn es immer noch nicht die Person ist, baue das Stück als gesichtslose Szene um (die Metapher plus die Überschrift). Wenn das auch nicht funktioniert, halte es an und erkläre dies. Ein falsches Gesicht ist schlimmer als kein Bild.
• Poste oder beschneide die Referenzfotos niemals direkt in das Bild. Sie sind nur Identitätsreferenzen.

4. Cover aus echten Frames für gefilmte Videos

Wenn die Person ein Talking-Head-Video gefilmt hat, wird das Cover aus einem echten Frame dieses Filmmaterials erstellt, nicht aus einer generierten Ähnlichkeit. Das Gesicht ist wirklich ihres und das Cover passt zum Video. Dies ist der einzige Fall, in dem ein gestalteter Überschrift-Overlay auf einem Foto die richtige Entscheidung ist, da es sich um die Betitelung eines echten Fotos handelt, genau wie ein Thumbnail-Designer es tun würde.

1. Ziehe Kandidaten-Frames (ffmpeg -ss <t>) oder lasse das Skript den schärfsten Gesichts-Frame in einem Zeitbereich finden und wähle einen mit Blickkontakt, einem warmen Ausdruck (nicht mitten im Wort), scharfem Fokus und ohne eingebrannte Untertitel.
2. Führe scripts/cover_from_frame.py aus (siehe --help): Es beschneidet das Cover auf die richtige Größe, fügt eine weiche Scrim hinzu, passt die Hauptüberschrift automatisch mit einem Akzentwort und einer Unterstreichung innerhalb des Grid-sicheren Quadrats ein, fügt optional ein Unterüberschrift-Band und ein optionales Namensetikett hinzu und prüft dann jedes Textfeld gegen die sichere Zone.
3. Passe die Form des Videos an: Ein 9:16-Kurzvideo bekommt ein 9:16-Cover (1080x1920) mit dem Text im zentralen Quadrat; ein 16:9-Langvideo bekommt ein 1280x720-Cover. Wenn die Bearbeitung mit dem video-editing-Skill durchgeführt wird, erledigt dessen eigener Cover-Schritt dies innerhalb der Bearbeitung.

5. Animierte Statics (die eine Ausnahme von „keine Overlays“)

Ein animiertes Static ist eine 4 bis 6 Sekunden lange MP4-Schleife, die einen Static-Platz füllt und von den meisten Feeds als Video behandelt wird. Text muss eine separate Ebene sein, um sich zu bewegen, daher liegt hier – und nur hier – gestaltete kinetische Typografie über einer generierten Szene. Es wird an derselben Messlatte gemessen: eine echte Szene, heroische Überschrift, Markenfarben, Grid-sichere Platzierung, und die gesamte Überschrift ist bereits in Frame 0 sichtbar, weil das Grid ein Video ab seinem ersten Frame anzeigt. Öffne references/animated-statics.md für die Frage, wann man eines verwendet, die Konfiguration für scripts/animate_render.js, die Audiobett-Rechte-Regel und die Prüfpunkte.

6. Kein Bildmodell verfügbar: der HTML-Weg

Wenn kein Bildmodell angeschlossen ist oder das Stück ein reines Typografie-Layout ist (eine wörtliche Zitatkarte, eine Statistik-Karte, ein Karussell mit Textfolien, ein Profil-Banner), gestalte es in HTML und CSS und rendere es mit Playwright. Wichtige Regeln: Der Viewport ist die tatsächliche Ausgabegröße, keine CSS-Scale-Transformationen, Schriftarten vor dem Screenshot geladen und die PNG-Abmessungen danach überprüft. Öffne references/html-fallback.md und verwende scripts/render_html.js. Eine Zitatkarte ist auch der richtige Weg, wenn ein Testimonial wortwörtlich wiedergegeben werden muss, da generierter Text abdriften kann.

7. Fertigstellen, ablegen und beschreiben

1. Stelle auf die exakte Größe für jedes Ziel fertig (references/asset-sizes.md). Ein 4:5-Master dient normalerweise Instagram, Facebook, LinkedIn und Threads; leite ein 1:1 nur durch Center-Crop ab, wenn der gesamte Text innerhalb des zentralen Quadrats sitzt, ansonsten generiere ein separates Quadrat.
2. Führe python3 scripts/check_image.py <datei> --expect BxH --grid aus, um die Abmessungen zu bestätigen und ein Grid-Vorschau-Blatt zu erstellen (das zentrale Quadrat und 3:4-Zuschnitte in Thumbnail-Größe, mit eingezeichneter sicherer Box).
3. Speichere in content/<jjjj-mm-tt>-<slug>/images/ mit einem Namen, der angibt, was es ist (<slug>-feed-4x5.png, <slug>-cover-9x16.png).
4. Schreibe eine Alt-Text-Zeile pro Bild in die PACKAGE.md des Stücks, zum Beispiel: „Eine Frau in einer mehlbestäubten Schürze, die das Schild an einer Bäckereitür auf OFFEN dreht, mit der Überschrift „Offen vor dem Schulweg“ quer über dem oberen Bereich.“ Jede Karussellfolie bekommt ihre eigene Zeile. Videocover benötigen keinen Alt-Text.
5. Behalte den endgültigen Prompt (und alle Neugenerierungs-Notizen) im Ordner des Stücks, damit eine zukünftige Neugenerierung von dem ausgehen kann, was funktioniert hat.

Überprüfungen vor der Auslieferung (der Review-Loop)

Jede Generierung und jede Neugenerierung ist ein neues Bild, daher erhält es die vollständige Überprüfung anhand der abgelegten Datei, geöffnet und angesehen, niemals anhand des Prompts beurteilt:

• Rechtschreibung jedes Wortes in der Überschrift, Unterüberschrift und allen gestempelten Tags; keine doppelten Wörter.
• Primat der Überschrift: dominant, wird zuerst gelesen, in der Thumbnail-Größe des Profil-Grids lesbar.
• Grid-sicher: der gesamte Text innerhalb des zentrierten Quadrats mit den Rändern; nichts berührt einen Rand; nichts im unteren Band. Bei Videos beurteile den ersten Frame.
• Ähnlichkeit (gesichtszentrierte Stücke): die Bewertungsmatrix anhand eines bereitgestellten Farbfotos. Unsicherheit gilt als Fehlschlag.
• Form: Die tatsächlichen Abmessungen stimmen mit dem Ziel überein; nichts ist aufgepolstert oder gestreckt.
• Marke: Palette und Schriftarten aus dem Profil, Akzentfarbe sparsam verwendet, natürliche Farbe.
• Einzigartig: Keine nahe Kopie der letzten paar Bilder auf dem Konto.
• Wahrheit und Compliance: Jede im Bild enthaltene Zahl oder Behauptung geht auf eine Quelle zurück; erforderliche Kennzeichnungen aus ## Compliance sind vorhanden; nichts aus ## Grenzen erscheint.

Wenn es fehlschlägt, behebe die Ursache und generiere neu, beurteile dann die neue Datei auf die gleiche Weise. Übergib dann den Satz an das review-loop-Skill für den unabhängigen Durchlauf. Wenn ein Stück nicht sauber erstellt werden kann, behalte den Prompt, erkläre, was fehlgeschlagen ist, und halte es an. Liefere niemals ein Ersatzgesicht oder einen Text-Overlay-Notbehelf aus.

Anpassung

• Keine reale Person vor der Kamera? Überspringe die Ähnlichkeitssperre und konzentriere dich auf Szenen und Metaphern; der Rest des Standards bleibt unverändert.
• Ein Produktgeschäft? Behandle das Produkt als „Gesicht“: Verwende echte Produktfotos als Referenzen, damit das Modell Form, Etikett und Farbe korrekt hält.
• Anderes Bildmodell? Die Methode bleibt bestehen. Nur die Mechaniken in references/prompting-and-aspect.md ändern sich (wie das Seitenverhältnis eingestellt wird, ob Referenzbilder akzeptiert werden).
• Ein Serienformat (wöchentliche Zusammenfassung, Tipp der Woche): Lege ein komponiertes Layout für die Serie fest und variiere alles andere zwischen den Serien.
• Regulierte Branchen: Überprüfe ## Compliance auf alles, was auf einem Bild erscheinen muss oder niemals erscheinen darf (Zahlen, Garantien, Testimonials). Im Zweifelsfall halte Behauptungen aus dem Bild heraus und in die Bildunterschrift, in der der Haftungsausschluss steht.
• Deine eigenen Lektionen: Wenn der Nutzer ein Bild ablehnt oder austauscht, notiere was und warum in brand/performance-learnings.md (visuelle Lektionen) oder brand/voice-learnings.md (Überschriftsformulierung), damit das nächste Bild näher dran startet.

Dateien in diesem Skill

Datei	Öffne sie, wenn …
references/asset-sizes.md	… du eine Datei fertigstellst oder die aktuelle Größe einer Plattform prüfst
references/grid-safe-zone.md	… du Text in einem Format platzierst
references/prompting-and-aspect.md	… du einen Prompt schreibst, mit dem Seitenverhältnis kämpfst oder Gemini verwendest
references/likeness-lock.md	… du ein Bild mit einer realen Person erstellst
references/animated-statics.md	… du eine MP4-Schleife für einen Static-Platz erstellst
references/html-fallback.md	… kein Bildmodell verfügbar ist oder du ein reines Typografie-Layout hast
scripts/aspect_scaffold.py	… du eine leere Leinwand im Ziel-Seitenverhältnis für bearbeitungsbasierte Werkzeuge erstellst
scripts/cover_from_frame.py	… du ein Cover aus einem echten Video-Frame erstellst
scripts/animate_render.js	… du ein animiertes Static renderst
scripts/render_html.js	… du ein HTML-Layout renderst