Warum jede KI-generierte Website gleich aussieht

Es ist verlockend, dies als Geschmacksproblem zu beschreiben – das Modell hat Milliarden von Landingpages gesehen und regrediert zum Mittelwert. Das ist ein Teil davon, aber nicht der Mechanismus, und es führt Nutzer zu der falschen Lösung (bessere Prompts). Der Mechanismus ist langweiliger und wesentlich einfacher zu beheben: Ein Coding-Agent, der eine UI bauen soll, greift auf eine Komponenten-Bibliothek zurück, und diese Bibliothek liefert Defaults. Diese Defaults wurden so entworfen, dass sie niemanden stören, was genau sie so universell macht.

Fragen Sie fünf verschiedene Tools – Claude Code, Cursor, v0, Lovable, Bolt – nach einem Dashboard, ohne weitere Anweisungen. Sie erhalten fünf Layouts und eine einzige visuelle Identität. Sie kopieren sich nicht gegenseitig. Sie tun unabhängig voneinander das Sinnvolle mit demselben Ausgangsmaterial.

Das Standard-Theme von shadcn/ui basiert auf der zinc-Skala von Tailwind, wobei slate und gray häufige Alternativen sind. Es ist ein kühles, leicht bläuliches Grau. Wenn man es einmal bemerkt hat, sieht man es überall: Es ist der Hintergrund der meisten KI-generierten Produkte der letzten zwei Jahre. Es ist ein wirklich gutes Neutral, und genau das ist das Problem – es ist gut genug, dass es niemand ersetzt.

Das verräterische Element ist nicht das Grau an sich, sondern seine *Uniformität*. Eine gestaltete Oberfläche neigt ihre Neutraltöne meist leicht in Richtung der Markenfarbe, sodass die Grautöne mit dem Akzent korrespondieren. Eine Default-Oberfläche hat eine reine Ramp neben einem nicht korrespondierenden Akzent; die beiden gehören nie wirklich zusammen.

Inter ist eine exzellente UI-Schriftart, weshalb sie überall präsent ist und mittlerweile eher als Default denn als bewusste Entscheidung wahrgenommen wird. Wenn es nicht explizit Inter ist, dann ist es der font-sans System-Stack, der auf den meisten Maschinen zu einer nahezu identischen Grotesk führt. In jedem Fall nutzt die Seite eine einzige Schriftfamilie für alles: Headlines, Fließtext, Labels, Zahlen.

Dass nur eine Familie genutzt wird, ist das eigentliche Merkmal, unabhängig davon, welche es ist. Ein gestaltetes System kombiniert fast immer – eine charakterstarke Display-Schrift für Headlines mit einer Arbeitsschrift für den Fließtext oder zumindest einen bewussten Kontrast in Gewicht und Breite innerhalb einer Superfamilie. Seiten mit nur einer Schriftfamilie wirken flach, selbst wenn jede andere Entscheidung fundiert ist.

Der Standard---radius von shadcn ist 0.5rem, und dieser setzt sich in Buttons, Inputs, Cards, Dialogs und Popovers gleichermaßen fort. Ein einheitlicher Radius über alle Elementgrößen hinweg entspricht nicht dem Verhalten gestalteter Systeme: Ein 44px Button und eine 400px Card mit identischem Eckenradius lassen die Card weich und den Button klumpig wirken, da der Radius relativ zum Element wahrgenommen wird.

:root {
  /* The line most AI-built projects never touch */
  --radius: 0.5rem;
}

Hero-Sektion, dann drei gleich große Cards, dann ein Testimonial-Band, dann ein CTA. Dies ist eher eine Gravitation der Trainingsdaten als ein Konfigurations-Default – es ist die am häufigsten vorkommende Struktur für Marketing-Seiten im Web. Daher produziert das Modell diese Form, wenn das Briefing nichts anderes impliziert. Es ist nicht falsch. Es ist einfach das Layout, das keinerlei Information über Ihr Produkt vermittelt.

Die gängige Reaktion ist, einen längeren Prompt zu schreiben: *nutze eine warme Palette, kombiniere eine Serif-Display-Schrift mit einer Grotesk für den Body, variiere den Radius.* Das funktioniert. Es funktioniert für einen Screen und meistens auch für den zweiten und dritten.

Dann baut es sich ab, und zwar auf eine spezifische Weise. Der Agent ignoriert Ihre Anweisung nicht – er führt ein zunehmend langes Gespräch, in dem Ihr Styling-Absatz mit allem konkurriert, was seitdem folgte. Beim fünften Screen erinnert er sich an *warm*, hat aber die Hex-Werte vergessen und approximiert daher. Die Approximation ist ein leicht anderes Warm. Screen sechs approximiert die Approximation.

In Fachkreisen nennt man dies *Design Drift*. Das ist der Grund, warum eine „Vibe-coded“ App, die am Freitag noch scharf aussah, am Montag wirkt, als wäre sie von einem Komitee zusammengestellt worden. Die Anweisung existierte im Gespräch, und Gespräche verfallen.

Ein Designsystem stoppt Drift aus demselben Grund, warum es dies in menschlichen Teams tut: Die Werte stehen an einem dauerhaften Ort und werden konsultiert, anstatt im Kopf einer Person gespeichert zu sein. Für einen Coding-Agenten ist dieser Ort eine DESIGN.md plus ein Token-Set im Repo. Beides wird zu Beginn jeder Session neu gelesen, sodass Screen zwanzig denselben --primary-Wert auflöst wie Screen eins – nicht einen ähnlichen.

Dies ist das Hauptargument dafür, einem Agenten ein echtes System zu geben, statt nur eine bessere Beschreibung eines solchen. Die semantische Token-Ebene ist wichtiger als die Palette: --primary und --muted-foreground überstehen ein Redesign, während blue-600, verteilt im Markup, dies nicht tut.

Meistens nicht, und das ist die unangenehmere Erkenntnis. Wir haben 299 öffentliche DESIGN.md-Dateien von GitHub analysiert — genau die Dateien, deren einzige Aufgabe es ist, dies zu verhindern — und deren Inhalte gemessen.

Von den 72 Dateien, die ein visuelles Designsystem beschreiben, spezifizieren 21 % eine Radius-Skala und 26 % die Elevation. Das sind zwei der oben genannten Merkmale, die von drei Vierteln der Personen, die sich explizit an das Schreiben eines Design-Kontrakts gesetzt haben, auf den Defaults belassen wurden. 69 % lassen den Dark Mode komplett weg, sodass das gesamte zweite Theme der Erfindung des Agenten überlassen wird. Und 86 % benennen Farben nach dem Farbton oder listen reine Hex-Werte auf, anstatt semantische Rollen zu verwenden. Das bedeutet, dass die Datei auf keine Komponente angewendet werden kann, die sie nicht explizit beschrieben hat.

Es gibt eine zweite Ebene desselben Problems: 54 % der Dateien enthalten mindestens ein vages Adjektiv als Ersatz für einen Wert, angeführt von *clean* (39 %) und *modern* (36 %). Ein Adjektiv ersetzt keinen Default. Es fordert den Agenten auf, selbst einen auszuwählen.

1. 1

   Hintergrund prüfen

   Ermitteln Sie den Hex-Wert Ihres Seitenhintergrunds. Wenn es #09090b, #18181b, #0f172a oder #020617 ist, befinden Sie sich auf einer unberührten Zinc- oder Slate-Rampe.

2. 2

   Schriftfamilien zählen

   Öffnen Sie die berechneten Styles (computed styles) einer H1 und eines Body-Absatzes. Die gleiche font-family an beiden Stellen bedeutet, dass eine einzige Familie jede Aufgabe übernimmt.

3. 3

   Zwei Radien vergleichen

   Messen Sie den Eckenradius eines Buttons und Ihrer größten Card. Identische Werte bedeuten, dass der Radius nicht an die Elementgröße skaliert wurde.

4. 4

   Ersten und letzten Screen diffen

   Platzieren Sie den ersten erstellten Screen neben den aktuellsten. Listen Sie jeden Wert auf, der abweicht — diese Liste ist Ihr Drift.

5. 5

   Festlegen, wo die Antwort liegt

   Fragen Sie bei jeder Abweichung, ob der korrekte Wert irgendwo dauerhaft existiert. Wenn die ehrliche Antwort lautet: „In dem Prompt, den ich im März geschrieben habe“, dann ist genau das der Punkt, der behoben werden muss.