Vibe Coding liefert in einer Viertelstunde eine Seite, die funktioniert. Sie sieht nur aus wie alle anderen: ein Verlauf von Lila nach Blau, eine mittige Überschrift, drei gleiche Karten mit Icons, Sätze wie Unlock the power of. Leute erkennen diesen Look inzwischen auf den ersten Blick, und mit ihm halten sie auch das Angebot dahinter für austauschbar. Das liegt nicht am Werkzeug, sondern daran, dass ein Sprachmodell ohne Vorgaben den Durchschnitt baut. Dieser Beitrag zeigt die typischen Merkmale, erklärt, woher sie kommen, und gibt vier Gegenmittel: Regeln in der AGENTS.md, fertige Komponenten, eigene Design-Tokens und eine Prüfliste vor dem Livegang.
- Der KI-Look ist eine Summe von Standardentscheidungen: Indigo bis Lila als Verlauf, mittiger Hero mit zwei Knöpfen, drei gleiche Karten, Glas und Leuchten, Icons ohne Aussage, Floskeln und erfundene Zahlen.
- Er entsteht, weil ein Modell ohne Vorgaben das Wahrscheinlichste baut. Stilwörter wie modern, clean oder premium ändern daran nichts, sie beschreiben genau diesen Durchschnitt.
- Was hilft, sind Vorgaben mit Werten: Farben als Hexwert, zwei Schriften, ein Radius, ausdrückliche Verbote. Sie gehören in die Datei, die das Werkzeug bei jeder Anfrage liest, nicht in den einzelnen Prompt.
- In Tailwind 4 entfernt --color-*: initial die ganze Standardpalette. Dann gibt es bg-indigo-500 schlicht nicht mehr, und der Agent muss die eigenen Farben nehmen.
Woran erkennt man eine Seite, die nach KI aussieht?
An einer Handvoll Standardentscheidungen, die zusammen auftreten. Einzeln ist keine davon falsch, aber in dieser Kombination steht sie auf so vielen generierten Seiten, dass Leute sie als Muster lesen und nicht mehr als Gestaltung.
- Farbe: ein Verlauf von Indigo über Violett nach Lila, gern auch als Verlauf in der Überschrift.
- Aufbau: Hero mittig, darüber ein kleines Badge mit Funkel-Symbol, darunter zwei Knöpfe nebeneinander.
- Karten: drei oder sechs gleich große Karten mit einem Icon im farbigen Quadrat, Schatten und Anheben beim Hovern.
- Material: Glas-Karten mit Unschärfe und leuchtenden Rändern auf dunklem Grund, ohne dass dahinter etwas zu sehen wäre.
- Icons: ein Funkeln für alles mit KI, ein Blitz für Geschwindigkeit, ein Schild für Sicherheit, oder gleich Emojis.
- Text: Unlock the power of, seamless, supercharge your workflow, built for the future.
- Belege: runde Zahlen ohne Quelle wie 10,000+ happy customers und Stimmen von Personen, die es nicht gibt.
Die letzten beiden Punkte sind mehr als ein Stilproblem. Erfundene Zahlen und Stimmen auf einer echten Seite sind irreführend, und sie fallen auf, sobald jemand nachfragt.
Warum sehen vibe-gecodete Seiten alle gleich aus?
Weil ein Sprachmodell ohne Vorgaben das wahrscheinlichste Ergebnis baut, und das wahrscheinlichste Ergebnis ist der Durchschnitt aus allem, was es gesehen hat. Jede Entscheidung, die man nicht trifft, trifft das Modell, und zwar jedes Mal gleich.
Dazu kommen die Werkzeuge selbst. Lovable und v0 setzen ihre Projekte mit React, Tailwind und den Grundbausteinen von shadcn/ui auf. Tailwind 4.2 bringt eine Palette von 26 Farbtönen in je 11 Stufen mit, darunter indigo-500, violet-500 und purple-500, deren Farbtöne bei 277, 293 und 304 Grad liegen. Ein Verlauf über knapp 27 Grad sieht immer stimmig aus, also ist er die sichere Wahl. Bei den Icons ist es ähnlich: lucide-react bringt in Version 0.575 genau 1688 Icons mit, und das Modell nimmt die, deren Namen zu den Wörtern im Prompt passen.
Stilwörter helfen dabei nicht. Modern, clean, sleek oder premium sind keine Vorgaben, sondern Beschreibungen des Durchschnitts. Ein Prompt mit diesen Wörtern bestätigt dem Modell, dass der Standard gewünscht ist.
- Build a modern, clean, professional landing page for my booking app.
- Landing page for a booking app for physiotherapy practices. Background #f6f4ef, text #1c1917, one accent #c2410c. Headings in Fraunces, body in Albert Sans. Hero left aligned with a photo of a treatment room on the right. No gradients, no emoji, no invented numbers.
Welche Regeln gehören in die AGENTS.md gegen den KI-Look?
Verbote und Werte statt Stilwörter: welche Farben es gibt, welche Schriften, welcher Radius, und welche Muster nicht vorkommen dürfen. Ein Modell hält sich an eine Liste mit Hexwerten deutlich besser als an ein Gefühl, weil es sie wörtlich übernehmen kann.
Die Regeln gehören in die Datei, die das Werkzeug bei jeder Anfrage liest, nicht in den einzelnen Prompt. AGENTS.md ist das offene Format dafür und wird unter anderem von Codex und Cursor gelesen. Claude Code liest CLAUDE.md; eine Zeile @AGENTS.md darin übernimmt dieselben Regeln. Die App-Builder haben eigene Orte: Lovable die Instructions in den Projekteinstellungen und zusätzlich eine AGENTS.md im Repository, Bolt das Feld Knowledge, v0 seine Instructions, Replit die Datei replit.md.
## Design rules - Colors: background #f6f4ef, text #1c1917, one accent #c2410c. No other hues. - No gradients. Never purple, violet or indigo. - Fonts: Fraunces 600 for headings, Albert Sans 400 for body. Nothing else. - Radius: 8px on controls, 12px on cards. - No glass, no glow, no shadows on cards. - Icons only where they carry meaning, never emoji. - Never three equal feature cards in a row. - Copy: short, concrete sentences. Never unlock, seamless, supercharge, elevate, the power of. - No invented numbers, logos or quotes. Use a TODO.
Hilft eine Komponenten-Bibliothek per MCP gegen den KI-Look?
Teilweise. Sie ersetzt das, was das Modell am schlechtesten erfindet, also Aufbau, Abstände und Bewegung, aber sie löst weder Texte noch Bilder noch eine fehlende Marke.
Holt der Agent eine Section über einen MCP-Server, bekommt er fertigen Code, den jemand gestaltet und geprüft hat, und muss nichts aus dem Durchschnitt zusammensetzen. Das ist der größte Hebel gegen die drei gleichen Karten und den mittigen Standard-Hero. Manche Server liefern Komponenten auch gleich in den Farben und Schriften einer Marke, Systra Tools etwa über get_component_styled.
Drei Grenzen bleiben. Erstens: Wenn viele dieselbe Bibliothek unverändert einsetzen, sehen ihre Seiten wieder ähnlich aus, nur auf einem anderen Niveau. Zweitens schreiben App-Builder übernommenen Code gern um und nehmen dabei oft genau die Details heraus, wegen derer man ihn ausgesucht hat. Drittens kommen Texte und Bilder weiterhin vom Agenten, und dort entsteht der KI-Eindruck genauso.
Wie bekommt eine generierte Seite die eigene Marke?
Über Design-Tokens, die vor dem ersten Prompt feststehen: eine Handvoll Farben, zwei Schriften, ein oder zwei Radien als CSS-Variablen, auf die jede Komponente zugreift. Der Agent setzt dann keine Farbe mehr ein, sondern einen Namen wie bg-accent.
In Tailwind 4 stehen die Tokens im @theme-Block. Die erste Zeile ist die wichtigste: --color-*: initial entfernt die ganze Standardpalette. Danach erzeugen bg-indigo-500 und from-indigo-500 kein CSS mehr, und der Agent kann eine Farbe, die es nicht gibt, auch nicht versehentlich benutzen. Weiß und Schwarz fallen dabei mit weg und müssen neu angelegt werden.
Wer noch keine Marke hat, nimmt sie von einer Seite, deren Wirkung passt: Farben, Schriften und Abstände lassen sich aus einer bestehenden Website auslesen und als Tokens übernehmen. Dazu ein bis drei Referenzbilder im Chat, die zeigen, was gemeint ist; Lovable, Bolt und v0 nehmen Bilder im Prompt an.
@theme { --color-*: initial; --color-white: #ffffff; --color-paper: #f6f4ef; --color-ink: #1c1917; --color-accent: #c2410c; --font-display: "Fraunces", serif; --font-sans: "Albert Sans", sans-serif; --radius-control: 8px; --radius-card: 12px;}
Wie prüft man eine generierte Seite, bevor sie live geht?
Mit einer kurzen Liste, die jedes Merkmal aus dem ersten Abschnitt einzeln abfragt, am besten mit frischem Blick oder in einem neuen Chat ohne den bisherigen Verlauf. Wer die Seite gerade gebaut hat, sieht den Durchschnitt nicht mehr.
- Farbe: Kommt im Code noch indigo, violet, purple oder ein Verlauf vor? Die Befehle unten finden es in Sekunden.
- Aufbau: Haben zwei benachbarte Sections denselben Aufbau? Dann eine davon anders lösen.
- Icons: Sagt jedes Icon etwas, das der Text daneben nicht schon sagt? Sonst weg damit.
- Text: Steht eine der verbotenen Floskeln drin, und lässt sich jede Aussage belegen?
- Belege: Ist jede Zahl, jedes Logo und jede Stimme echt? Was nicht echt ist, kommt raus, auch als Platzhalter.
- Logo-Test: Könnte man das Logo gegen ein anderes tauschen, ohne dass es auffällt? Dann fehlt der Seite noch etwas Eigenes.
# default palette hues and gradient utilitiesgrep -rnE "(indigo|violet|purple)-[0-9]+" src/grep -rnE "bg-(linear|gradient)-to-" src/ # stock phrases in the copygrep -rniE "unlock the power|seamless|supercharge" src/
Wenn man das Logo tauschen kann, ohne dass es auffällt, ist die Seite noch nicht fertig.
