Der KI-Look im UI-Design – und wie du ihn vermeidest.

Eine KI-generierte Landingpage erkennt man in einer Sekunde: der lila Verlauf, der zentrierte Hero, die drei identischen Karten. Diese Merkmale entstehen, weil Agenten auf die häufigsten Muster zurückgreifen, wenn das Briefing Spielraum lässt. So erkennst du jedes davon und so briefst du deinen Agenten, damit es gar nicht erst auftaucht.

Aktualisiert am 6. November 2026 · 8 Min. Lesezeit

Warum KI-generierte UIs alle gleich aussehen

Ein Coding-Agent füllt jede Lücke in deinem Briefing mit der sichersten, häufigsten Wahl, die er kennt. Bitte um „eine moderne Landingpage“, und du bekommst den Durchschnitt aus Tausenden moderner Landingpages: einen Indigo-Verlauf, eine zentrierte Überschrift und ein Raster aus abgerundeten Karten. Keine einzelne Entscheidung ist falsch. Zusammen wirken sie wie ein Template, und das merken Besucher.

Die Lösung ist kein klügeres Modell. Es ist ein Briefing mit weniger Lücken plus ein Review-Schritt, der gezielt nach diesen Merkmalen sucht.

Die zwölf Erkennungszeichen

Visueller Stil

Der Verlauf von Lila zu Blau. Buttons mit Verlauf, Überschriften mit Verlauf oder ein sanftes violettes Leuchten hinter dem Hero. Das wurde zum Standard-Look für „Tech“ und signalisiert heute: „Das hat niemand bewusst entschieden.“
Abgerundete Ecken und weiche Schatten überall. Jede Karte, jeder Button und jedes Bild hat denselben großen Radius und denselben weichgezeichneten Schatten, sodass nichts heraussticht.
Glassmorphism und Glow. Milchglas-Panels und Neon-Konturen auf dunklem Hintergrund, als Dekoration statt zur Strukturierung der Hierarchie.
Emojis oder generische Icons als Illustration. Ein Funkeln, eine Rakete, ein Blitz in einem farbigen Kreis, als Ersatz für ein echtes Produktbild.

Layout

Alles ist zentriert. Zentrierter Hero, zentrierte Abschnittstitel, zentrierte Karten, zentrierter Footer. Zentrierter Text lässt sich schlechter überfliegen und nimmt der Seite jede Richtung.
Drei identische Feature-Karten. Icon, Titel aus zwei Wörtern, ein vager Satz, dreimal wiederholt in einem perfekten Raster.
Gleichförmiger Rhythmus. Jeder Abschnitt hat dieselbe Höhe, dasselbe Padding und denselben Aufbau. Die Seite hat dadurch keine Betonung und kein Tempo.

Typografie

Eine Schrift, ein Schnitt, kein Kontrast. Eine einzige serifenlose Schrift in ähnlichen Größen, sodass Überschriften, Labels und Fließtext ineinander verschwimmen.

Texte und Inhalte

Floskeltexte. „Entfessle die Kraft von“, „nahtlos“, „bring deinen Workflow auf das nächste Level“ oder Überschriften wie „Schnell. Sicher. Einfach.“ Das könnte jedes Produkt beschreiben.
Vager Social Proof. „Mehr als 10.000 Teams vertrauen uns“ über einer Reihe von Platzhalter-Logos und Testimonials von „Sarah K., CEO“.
Abschnitte, die sich wiederholen. Features, Vorteile und „Warum wir?“, die dieselben drei Versprechen in anderen Worten geben.
Stockbilder. Abstrakte 3D-Blobs oder generische Illustrationen statt des Produkts selbst.

Die zweite Welle der Erkennungszeichen

Seit Agenten gelernt haben, lila Verläufe zu vermeiden, sind neue Standards an ihre Stelle getreten. Im November 2026 markieren der frontend-design-Skill von Anthropic und Impeccable auch diese als KI-Erkennungszeichen:

Creme, Serifen und Terrakotta. Eine warme gebrochen weiße Seite, eine Serifen-Überschrift (oft mit einem kursiven Wort) und ein rost- oder terrakottafarbener Akzent. Das war die „geschmackvolle“ Antwort auf den lila Verlauf und ist inzwischen genauso verbreitet.
Fast Schwarz mit einem grellen Akzent. Eine schwarze Seite mit genau einer säuregrünen oder zinnoberroten Farbe.
Eyebrow-Labels. Ein kleines Versal-Label oder Pill-Badge über jeder Überschrift.
Nummerierte Abschnitte und Monospace-Labels. „01 / 02 / 03“ vor den Abschnitten und Datenlabels in einer Code-Schrift.
Haarlinien überall. Dünne Linien und umrandete Boxen, durch die jede Seite wie dieselbe Zeitungsseite aussieht.
Ein Einblenden bei jedem Abschnitt. Dieselbe Slide-up-Animation beim Scrollen, egal ob sie nötig ist oder nicht.

Keine Liste bleibt lange aktuell, denn jede Lösung wird zum nächsten Standard. Die dauerhafte Lösung ist eine Richtung, die aus deinem Produkt und seiner Zielgruppe entsteht, nicht aus einer Liste von Dingen, die du vermeiden sollst.

So briefst du, damit sie gar nicht erst auftauchen

Die meisten Merkmale verschwinden, wenn das Briefing die Entscheidungen trifft, die der Agent sonst für dich treffen würde.

Benenne die Art Direction. „Warm und editorial, Serifen-Überschriften, cremefarbener Hintergrund“ gibt dem Agenten eine Haltung. „Modern und clean“ nicht.
Setze echte Vorgaben. Deine Markenfarben, eine Akzentfarbe, deine Schriften und ein Eckenradius. Eine DESIGN.md-Datei hält das einmal für alle Screens fest.
Liefere echte Inhalte. Deinen tatsächlichen Produktnamen, Zahlen, Kundenzitate und Screenshots. Konkrete Inhalte erzwingen konkrete Layouts.
Zeig Referenzen. Ein Screenshot einer Website, die dir gefällt, sagt mehr als ein Absatz voller Adjektive.
Frag nach Richtungen, die sich unterscheiden. Bei drei bewusst unterschiedlichen Optionen fällt sofort auf, welche generisch ist. Mehr dazu in UI-Design mit Codex.

Dieser Prompt legt eine Richtung fest, bevor das Design beginnt:

Art Direction festlegen

Schlag vor dem Gestalten drei klar unterschiedliche Art Directions für [Produkt] vor, jeweils mit: einer Stimmung in einem Satz, einer Schriftkombination, einer Palette aus höchstens vier Farben mit einem Akzent, einem Eckenradius und einer Layoutidee, die kein zentrierter Hero ist. Vermeide lila oder blaue Verläufe, Glassmorphism, Emoji-Icons und Feature-Raster aus drei Karten. Warte, bis ich eine auswähle.

So reparierst du eine Seite, die sie schon hat

Bitte den Agenten, seine eigene Arbeit anhand der Liste zu prüfen. Sobald du die Merkmale benennst, findet er sie zuverlässig:

Auf KI-Look prüfen

Prüfe diese Seite auf Anzeichen, dass sie KI-generiert wirkt: lila oder blaue Verläufe, derselbe Radius und Schatten überall, Glassmorphism oder Glow, Emojis oder generische Icons, alles zentriert, identische Feature-Karten, gleichförmiger Rhythmus der Abschnitte, nur ein Schriftschnitt, Floskeln, vager Social Proof, sich wiederholende Abschnitte und Stockbilder. Liste jedes gefundene Merkmal mit der Stelle auf, an der es vorkommt, behebe dann die fünf auffälligsten und lass alles andere unverändert.

Die Texte brauchen meist einen eigenen Durchgang, denn Floskeln überleben visuelle Korrekturen:

Floskeltexte umschreiben

Schreib jede Überschrift und jede Feature-Beschreibung auf dieser Seite neu. Jede muss sagen, was der Nutzer davon hat, ein konkretes Detail oder eine Zahl aus unserem Produkt enthalten und diese Wörter vermeiden: entfesseln, nahtlos, nächstes Level, mühelos, leistungsstark, revolutionieren, auf ein neues Niveau heben. Die Länge soll ungefähr gleich bleiben.

Und für das Layout:

Das Template-Layout aufbrechen

Gestalte den Feature-Abschnitt so um, dass er keine drei identischen Karten mehr verwendet. Gib dem wichtigsten Feature doppelt so viel Platz, zeig jedes Feature mit einem kleinen, in HTML gezeichneten UI-Visual, richte den Text linksbündig aus und variiere den Rhythmus der Abschnitte, sodass die Seite einen klaren Moment der Betonung hat.

Skills, die helfen

Design-Skills gibt es zu einem großen Teil, um genau diese Standards auszuhebeln. Taste Skill und der frontend-design-Skill von Anthropic bringen Agenten beide weg von Template-Entscheidungen, und Impeccable ergänzt einen Detektor mit 62 Regeln, den du in CI laufen lassen kannst. Wie sie sich unterscheiden, steht in Taste Skill vs. Impeccable vs. UI UX Pro Max, und mehr dazu in Die besten Codex-Skills für UI-Design.

Vergleichen, bevor du veröffentlichst

Am leichtesten erkennst du diese Merkmale neben einer Alternative. Stell Original und überarbeitete Version nebeneinander, in zwei Browserfenstern oder auf einem Canvas, und die generische Version fällt sofort auf. Genau dafür gibt es Codex Design: Jede Richtung, die Codex erstellt, erscheint als Live-HTML neben den anderen.

Häufige Fragen

Ist es schlimm, wenn meine Website KI-generiert aussieht?

Es kostet Vertrauen. Besucher lesen eine Seite von der Stange als wenig Aufwand, und eine Seite, die jedes Produkt beschreiben könnte, erklärt deins nicht. Konkretes, bewusstes Design lässt das Produkt so echt wirken, wie es ist.

Kann ich verhindern, dass Codex diese Muster erzeugt?

Größtenteils ja. Schreib deine Art Direction und Vorgaben in DESIGN.md oder AGENTS.md, installiere einen Design-Skill und schließ mit dem Prüf-Prompt von oben ab. Das Ergebnis zu prüfen bleibt trotzdem deine Aufgabe.

Sind Verläufe und abgerundete Ecken immer falsch?

Nein. Jedes dieser Elemente kann die richtige Wahl sein, wenn es bewusst eingesetzt wird und zur Marke passt. Das Erkennungszeichen ist, sie alle standardmäßig zusammen zu verwenden, weil niemand etwas anderes entschieden hat.