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 sie genau zu diesem universellen Standard 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 Naheliegende mit demselben Ausgangsmaterial.

Hier wird die Behauptung sichtbar gemacht, statt nur diskutiert. Der erste Tab zeigt den statistischen Durchschnitt: indigo-500, ein lila Gradient, Inter, rounded-xl Cards. Die anderen Tabs zeigen *dieselbe Seite*, neu gerendert durch ein echtes Designsystem. Am Layout ändert sich nichts; jeder Unterschied, den Sie sehen, ist das System.

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 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 verwandt wirken. Eine Default-Oberfläche hat eine reine Ramp neben einem nicht verwandten Akzent, wodurch die beiden nie wirklich zusammenpassen.

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 Familie 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 Folge der Trainingsdaten-Gravitation als ein Konfigurations-Default. Es ist die mit Abstand häufigste Struktur für Marketing-Seiten im Web, daher ist es die Form, die ein Modell produziert, 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 mit einer Grotesk-Body, variiere den Radius.* Das funktioniert. Es funktioniert für einen Screen und meistens auch für den zweiten und dritten.

Dann nimmt die Qualität ab, und zwar auf eine spezifische Weise. Der Agent ignoriert Ihre Anweisung nicht. Er führt eine zunehmend lange Konversation, in der 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 wird dies als *Design Drift* bezeichnet. Er ist der Grund, warum eine „vibe-coded“ App, die am Freitag noch scharf aussah, am Montag wie das Ergebnis eines Komitees wirkt. Die Anweisung existierte nur im Gespräch, und Gespräche verblassen.

Ein Designsystem stoppt Drift aus demselben Grund, aus dem es dies in menschlichen Teams tut: Die Werte sind an einem dauerhaften Ort hinterlegt und werden konsultiert, anstatt im Kopf einer Person zu existieren. 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 Wert für --primary auflöst wie Screen eins, nicht einen ähnlichen.

Das ist das Hauptargument dafür, einem Agenten ein echtes System zu geben, statt einer besseren 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 vier oben genannten Merkmale, die von drei Vierteln der Personen, die sich explizit an ein Design-Kontrakt setzten, 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 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, 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 eines H1-Elements und eines Textabsatzes. Die gleiche font-family an beiden Stellen bedeutet, dass eine einzige Familie jede Aufgabe übernimmt.

3. 3

   Zwei Radien vergleichen

   Messen Sie den Eckradius eines Buttons und Ihrer größten Card. Identische Werte bedeuten, dass niemand den Radius an die Elementgröße angepasst hat.

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

   Entscheiden Sie, wo die Antwort liegt

   Prüfen Sie bei jeder Abweichung, ob der korrekte Wert an einer dauerhaften Stelle hinterlegt ist. 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.

Alles oben Genannte gilt doppelt für Chat-First-Builder, da dort die Konfiguration während des Workflows nicht einmal manuell bearbeitet werden kann: Das Gespräch ist die Schnittstelle. Die dauerhafte Lösung folgt demselben Prinzip, angepasst an die Art und Weise, wie das jeweilige Tool Kontext speichert: Fügen Sie ein vollständiges Designsystem als erste Nachricht (oder als Projektwissen) ein und bauen Sie darauf auf. Wir führen für jeden Builder eine kopierfertige Version jedes Kits: Themes für Lovable, für v0, für Bolt, für Replit und für Base44.