Warum KI-Grafiken alle gleich aussehen, und was man dagegen tut

Inzwischen erkennt man sie in einer halben Sekunde. Ein violetter Verlauf, irgendwo ein Leuchten und in der Mitte eine zentrierte Groteske. Mit etwas Pech steht im Text auch noch ein fast richtig geschriebenes Wort. Hässlich ist davon meistens nichts.

Das Problem ist die Austauschbarkeit. Im Feed hat eine Grafik genau eine Aufgabe: Sie muss in dem Moment erkennbar sein, in dem der Daumen darüberwischt. Eine Grafik, die nach dem Werkzeug aussieht statt nach der Firma, arbeitet gegen diese Aufgabe. Und wenn zwei Wettbewerber dasselbe Werkzeug benutzen, teilen sich drei Unternehmen einen Look.

Ein Bildmodell liefert die Mitte seiner Trainingsdaten

Bildmodelle werden darauf trainiert, aus Rauschen etwas Plausibles zu machen. „Plausibel” bedeutet in diesem Fall, nah an dem zu sein, was im Training häufig vorkam. Für eine Social-Media-Grafik ist das häufigste Layout eine zentrierte Überschrift auf einem dunklen Farbverlauf, da es davon Millionen gibt. Das Modell macht dabei nichts falsch. Es liefert die Mitte der Verteilung und wer dieselbe Mitte abfragt, bekommt dasselbe Bild.

Dazu kommt der Text. Ein Bildmodell malt Buchstaben so, wie es Bäume malt: als Formen, die nach Buchstaben aussehen. Die Modelle sind darin zwar deutlich besser geworden, aber ein Schild mit einem Wort darauf ist eben etwas anderes als sechs Zeilen Fließtext in einer bestimmten Hausschrift. Und ein Rand ist für einen Pixelgenerator ohnehin keine Kategorie, weshalb die unterste Zeile manchmal eben halb außerhalb des Bildes sitzt.

Bei uns schreibt das Modell HTML

Was Postmint erzeugt, ist ein HTML-Dokument mit CSS. Ein echter Browser rendert es auf 1080 × 1350 oder eines der anderen fünf Formate und schießt davon einen Screenshot. Der Text darin ist echter Text in einer echten Schrift. Er ist also richtig geschrieben, weil ihn niemand malen musste, und er hat eine Box mit messbaren Kanten.

Ausgangspunkt sind 32 von Hand erstellte Layouts. Eines davon ist nahezu monochrom und lebt von feinen Linien, ein anderes ist ein pastellfarbener Flyer mit handgezeichneten Kritzeleien. Das Modell übernimmt von der gewählten Vorlage, wie Farbe eingesetzt wird, also flächig oder als Verlauf, und wie viel Fläche sie bedeckt. Die Farbwerte selbst stammen aus dem Markenkit. Eine Vorlage, deren Verlauf in den eigenen Markenfarben nachgebaut ist, sieht nach der Marke aus. Dieselbe Vorlage mit ihren Originalfarben sieht hingegen nach einer Vorlage aus.

Gemessen ist etwas anderes als beurteilt

Nach dem Rendern liest der Browser das fertige Dokument aus und meldet acht Fehlerarten beim Namen. Fünf davon betreffen die Geometrie: Text steht außerhalb der Fläche, Text wird vom Container abgeschnitten, die eigene Box ist zu klein für den Inhalt, Text liegt unter einer deckenden Form, zwei Textblöcke liegen übereinander. Dazu kommen der Kontrast einer Textfarbe gegen eine einfarbige Fläche nach WCAG, Text im Bedienbereich von Story und Reel und zwei Obergrenzen für die Dichte, 170 Wörter pro Fläche und drei Schriftfamilien. Dahinter stehen Rechtecke, Kanten, Überlappungsflächen, Deckkraft- und Leuchtdichtewerte aus dem DOM. Ein solcher Fehler ist entweder da oder nicht, und darüber lässt sich nicht diskutieren. Welche Zahlen dahinter stehen, steht im Beitrag zu den fünf Fehlern in Social-Grafiken.

Farbe, Hierarchie und der Kontrast über einem Foto oder einem Verlauf laufen anders. Ein Vision-Modell bekommt den Screenshot zu sehen, dazu den Brief, die Vorlage und die Farbwerte der Marke, und darf das Ganze zurückschicken. Je nach Tarif gibt es eine bis vier solcher Runden. Das bleibt ein Urteil, und ein Urteil kann danebenliegen.

Deswegen steht bei uns nirgends, dass Markenfarben per Code gesetzt werden. Deterministisch passieren im Code genau zwei Dinge: das Logo wird eingesetzt und Fotos werden eingesetzt. Umgefärbt wird nichts.

Was trotzdem schiefgeht

Wer sein Markenkit ändert, färbt damit keine fertige Grafik um. Es gibt keinen Durchgang, der ein Kit nachträglich auf bestehendes HTML anwendet, und über die Bearbeitung per Beschreibung ist es ein Suchen-und-Ersetzen, das die größte Fläche im Bild übersehen kann. Neu generieren ist der zuverlässige Weg.

Und der messende Durchgang sieht nur, was in seinen acht Fällen steht. In einem 4:5-Render lagen farbige Balken quer durch zwei Textzeilen, vermutlich ein Marker-Effekt auf der falschen Höhe. Für den Browser war daran nichts zu beanstanden: Der Text stand im Bild, in seiner Box, ausreichend sichtbar. Als deckend gilt eine Form erst ab 90 Prozent Deckkraft über einem Viertel der Messpunkte, und ein schmaler Balken bleibt darunter. Beides steht in unserer internen Faktenliste, und beides steht hier, weil ein Werkzeug gegen Beliebigkeit schlecht damit anfangen kann, die eigenen Lücken zu verschweigen.

Wo die 32 Layouts liegen

Sie stehen in der Vorlagen-Galerie, jedes mit dem Format, für das es gebaut wurde, und mit dem Stil, den es mitbringt. Welches Format sich wann lohnt, steht im Guide zu den Instagram-Bildgrößen. Eine Grafik dauert etwa zwei Minuten, die Korrekturrunden eingerechnet.