Das Emoji im Pastellkreis: Woran man KI-Seiten sofort erkennt

Öffne die letzten fünf Seiten, die dir ein Generator gebaut hat. Scroll runter zum Feature-Bereich, also zu den drei oder vier Spalten unter einer Überschrift wie "Warum Teams sich für uns entscheiden". Und jetzt schau dir oben in jeder Card an, was da steht. Ein Kreis. Er ist h-12 w-12, er ist rounded-full, er ist mit bg-blue-100 gefüllt, und mittig drin sitzt ein Emoji. Eine Rakete. Ein Blitz. Ein Funkeln. Ein kleiner blauer Schild.

Dieser Kreis ist gerade einer der zuverlässigsten KI-Fingerabdrücke im Web, und die Leute, die ihn ausliefern, könnten ihn praktisch kostenlos entfernen. Tun sie aber nicht, weil sie ihn nicht sehen. Für sie sieht das fertig aus. Es hat Farbe, es hat eine Form, es hat ein Glyph, es sitzt in einem Raster. Es hakt jede Checkbox ab, die eine "Feature-Card" abhaken soll. Das Problem ist nur: Jede dieser Checkboxen wurde vom Modell abgehakt, nicht von jemandem, der sich das Ergebnis angeschaut und dabei irgendetwas gefühlt hat.

Das exakte Markup

Das hier fällt aus v0, Lovable, Bolt oder einer Cursor-Session raus, in der du nach "einer Features-Sektion" gefragt hast. Bis hin zur Reihenfolge der Klassen:

<div class="rounded-2xl border bg-white p-6 shadow-sm">
  <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-blue-100">
    <span class="text-2xl">🚀</span>
  </div>
  <h3 class="mb-2 text-lg font-semibold">Lightning Fast</h3>
  <p class="text-sm text-gray-600">
    Built for speed so your team can move quickly and ship with confidence.
  </p>
</div>

Genau dieses div hast du tausendmal gesehen. Der bg-blue-100-Kreis (#dbeafe), das text-2xl-Emoji, der mb-4-Abstand, der text-lg font-semibold-Titel, der text-sm text-gray-600-Fließtext, der nichts sagt. Tausch die Rakete gegen ⚡ und "Lightning Fast" gegen "Blazing Performance" aus, und es ist dieselbe Card. Das ist das verräterische Detail: nicht das Emoji selbst, sondern der Slot, in dem es sitzt. Ein Slot, der so generisch ist, dass er jedes Emoji und jedes beliebige Adjektiv reibungslos schluckt.

Die Varianten sind genauso vorhersehbar. Manchmal ist der Kreis bg-indigo-100, weil der Rest der Seite ohnehin schon den Tailwind-Blau-Lila-Verlauf-Pfad eingeschlagen hat. Manchmal ist er rounded-xl statt rounded-full, für den "modernen" Look. Manchmal kriegt das Emoji einen bg-gradient-to-br from-blue-500 to-purple-600-Kreis mit weißem Glyph obendrauf, was derselbe Trick im schickeren Mantel ist. Die Struktur darunter ändert sich nie: Pastell-Container, dekoratives Glyph, keine Information.

Warum der Generator danach greift

Das ist keine Faulheit im Modell. Es ist der Weg des geringsten Widerstands durch eine echte Beschränkung. Ein Emoji ist das einzige "Icon", das ein Generator mit null Abhängigkeiten produzieren kann.

Überleg mal, was ein echtes Icon voraussetzt. Du installierst lucide-react oder @heroicons/react. Du importierst das konkrete Icon, also import { Zap } from 'lucide-react'. Du renderst . Das ist ein Package in der package.json, ein funktionierender Import-Pfad, eine Komponente, die in genau dieser Library unter genau diesem Namen existieren muss. Halluziniert das Modell , und Lucide hat nur , bricht der Build. Ein Emoji bricht den Build nie. 🚀 ist ein Unicode-Zeichen. Es braucht keine Installation, keinen Import, keine Asset-Pipeline, kein SVG, keine viewBox, kein CDN, keine Font-Datei. Du kannst es in reinem HTML in ein werfen, und es rendert auf jedem Gerät.

Wenn ein Generator also auf "produziere etwas, das beim ersten Versuch läuft" optimiert, gewinnt das Emoji jeden Münzwurf. Es ist kostenlos. Es ist sicher. Es ist universell. Und das Modell hat es in geschätzt zehn Millionen Trainingsbeispielen von Landingpages gesehen, weil jede andere KI-gebaute Seite längst dasselbe getan hat. Eine Rückkopplungsschleife, in der Slop den nächsten Schwung Slop trainiert, worauf ich in der Bestandsaufnahme zum KI-generierten Web genauer eingehe.

Das Ergebnis ist im engen Sinne korrekt, es kompiliert und es rendert, und in jedem Sinne falsch, der für einen Menschen zählt, der gerade entscheidet, ob dein Produkt echt ist.

Warum es billig wirkt

Ein Emoji ist nicht deine Gestaltung. Das ist der Kern. Die Rakete in deiner Feature-Card wurde von Apples Design-Team für iOS gezeichnet, oder von Google für Android, oder von Microsoft für Segoe UI Emoji. Sie rendert auf jeder Plattform anders: Apples 🚀 ist ein glänzendes 3D-Shuttle mit oranger Flamme, Googles ist ein flacher Cartoon, Windows malt ein dünnes, umrissenes Ding, das mit keinem von beiden etwas zu tun hat. Du hast keine Kontrolle darüber, welche Version dein Besucher sieht. Dein "Marken-Icon" ist buchstäblich die Clipart des Betriebssystem-Herstellers, und es ändert sich je nachdem, wessen Handy gerade draufschaut.

Diese Inkonsistenz ist der erste Riss. Der zweite ist die Tonalität. Emoji tragen eine Sprachebene mit sich, nämlich locker, plaudernd, so wie du deinem Kumpel schreibst. Eine 🚀 neben "Sicherheit auf Enterprise-Niveau" ist ein Kostümbruch. Du bittest um einen sechsstelligen Vertrag mit einem Glyph, das im Gruppenchat "let's gooo" bedeutet. Manchmal ist genau diese verspielte Ebene das, was du willst. Aber Generatoren tragen sie wahllos auf, auf Fintech, auf Legal-SaaS, auf Medizin-Dashboards, weil das Modell nicht den Raum liest, sondern einen Slot füllt.

Der dritte Riss ist der Pastellkreis selbst. bg-blue-100 hinter einem Emoji ist das verräterische Detail im verräterischen Detail. Warum ist er da? Weil das Emoji allein zu klein und verloren über der Card schwebte, also packt das Template es in eine farbige Scheibe, um ihm Präsenz zu geben. Es kompensiert. Ein echtes Icon mit h-6 w-6, einem selbstbewussten Strich und einer text-blue-600-Farbe braucht keine Pastell-Blase, um gewollt zu wirken, es trägt sein eigenes Gewicht. Die Blase ist Gerüst, das das Design nie abgebaut hat, genau wie das Raster aus drei identischen Cards Gerüst ist, das niemand abgebaut hat.

Leg alle drei übereinander, und der Mustererkenner deines Besuchers feuert, bevor er die Überschrift zu Ende gelesen hat: *Genau diese Sektion habe ich diesen Monat auf vierzig anderen Seiten gesehen, und die meisten davon waren Luftschlösser.* Du hast deinen ersten Eindruck dafür ausgegeben, ihnen zu erzählen, dass du ein Template benutzt hast. Das ist eine teure Sache, um den ersten Eindruck dafür zu verbrennen.

Wie du deine eigene Seite in zehn Sekunden prüfst

Mach die DevTools auf, klick die Sektion an und lies das Markup. Siehst du ein oder ein nacktes Emoji-Zeichen in einem rounded-full bg-*-100-div, hast du es. Oder lass die DevTools ganz weg und schau in den Quelltext: Such die Seite nach den literalen Emoji-Zeichen ab. Taucht 🚀 oder ✨ oder ⚡ in deinem ausgelieferten HTML als Feature-Icon auf, ist das der Fund. (Dieses Audit auf Quelltext-Ebene ist die ganze Methode aus CSS lesen, um jede Seite zu auditieren, und das Emoji-im-Kreis ist einer der schnellsten Treffer auf der Liste.)

Bonus-Tell: Wenn alle drei oder vier Emoji in der Reihe aus demselben semantischen Cluster kommen, also 🚀 ⚡ ✨ 🔒, das "Speed / Power / Magie / Sicher"-Starterpack, dann hat hier ein Modell die statistisch häufigsten Feature-Glyphs gezogen und der Reihe nach abgelegt. Diese vier wählt kein Mensch absichtlich zusammen aus.

Was du stattdessen nimmst

Du hast drei gute Alternativen, und welche du nimmst, sollte davon abhängen, was die Card tatsächlich sagt.

1. Ein echtes Icon-Set, mit Zurückhaltung eingesetzt

Installier Lucide. Es ist MIT-lizenziert, tree-shakeable, rund 1.500 Icons auf einem konsistenten 24×24-Raster mit 2px-Strich gezeichnet, und es ist nicht ohne Grund der De-facto-Standard: Es ist sauber und es ist konsistent. Die Konsistenz ist der ganze Punkt. Jedes Icon teilt sich Strichstärke und Eckenradius, also liest sich eine Reihe davon als eine Familie statt als Clipart-Roulette.

import { Zap, ShieldCheck, GitBranch } from 'lucide-react'

<Zap className="h-5 w-5 text-blue-600" strokeWidth={1.75} />

Und dann brich den Default. Pack es nicht in bg-blue-100. Setz den Strich auf 1.75 statt auf die voreingestellten 2, für eine etwas feinere Linie. Färb es in deinem tatsächlichen Akzent ein, nicht in Tailwind-Blau, siehe wie du einen Akzent wählst, der nicht blue-600 ist. Richte es links auf derselben Grundlinie wie die Überschrift aus, statt es in einer zentrierten Blase zu stapeln. In dem Moment, in dem du aufhörst, ein Icon in einer Pastellscheibe zu zentrieren, hört die Card auf, generiert auszusehen, denn die Scheibe war der generierte Teil.

Wenn alle Lucide benutzen, ist das nicht seine eigene Monokultur? Doch, die Icons sind geteilt, aber die *Behandlung* ist deine: Strichstärke, Farbe, Größe, Platzierung, und ob du es mit einer Zahl oder einer Linie paarst. Das ist dasselbe Argument wie beim Ausbrechen aus der shadcn-Monokultur: Geteilte Primitive sind in Ordnung, identische Defaults sind das Problem.

2. Eine Zahl

Die Hälfte der Zeit sollte die Feature-Card gar kein Icon haben, sondern einen Fakt. Geht es in der Card um Geschwindigkeit, ist die ehrliche Version kein ⚡ in einem Kreis, sondern das hier:

<div class="rounded-2xl border border-gray-200 p-6">
  <div class="font-mono text-4xl font-semibold tracking-tight text-gray-900">
    40ms
  </div>
  <h3 class="mt-3 text-base font-medium">p99 response time</h3>
  <p class="mt-1 text-sm text-gray-500">
    Measured across 2.1B requests last quarter, US-East.
  </p>
</div>

Eine echte Zahl erledigt die Arbeit, die das Emoji nur vorgetäuscht hat. 40ms sagt "schnell" mit Beweis. 99.98% sagt "zuverlässig" mit Beweis. 12.000 Teams sagt "vertraut" mit Beweis. Die Rakete sagte "schnell" mit einer Stimmung. Zahlen lassen sich außerdem unmöglich überzeugend templaten, weil du sie tatsächlich haben musst, und genau deshalb lesen sie sich glaubwürdig. Setz sie in font-mono oder mit engem tracking-tight-Display-Gewicht, damit sie wie Messwerte auf einem Instrument wirken und nicht wie Fließtext.

3. Ein winziges Diagramm

Für Features, bei denen es darum geht, *wie etwas funktioniert*, also eine Pipeline, ein Sync, ein Branch, ein Flow, schlägt ein 24×40px großes Inline-SVG des tatsächlichen Mechanismus jedes Glyph. Drei Punkte, durch eine Linie verbunden, für "Echtzeit-Sync". Ein gegabelter Pfad für "Branching". Ein kleiner Balken, der nach oben steigt, für "skaliert mit dir". Das kostet zehn Minuten in Figma oder fünfzehn Zeilen handgeschriebenes SVG-, und kein Generator produziert es, weil es voraussetzt zu verstehen, was das Feature tut. Genau das ist der ganze Wert: Es lässt sich nicht von einem Modell faken, das einen Slot füllt.

Das Muster unter dem Muster

Das Emoji-im-Kreis ist nicht eine schlechte Entscheidung. Es ist das, was passiert, wenn ein System auf "rendert fehlerfrei" optimiert statt auf "bedeutet einem Menschen etwas". Dieselbe Grundursache wie beim Bento-Grid, das zum Default-Hero wurde, dieselbe Grundursache wie bei Fade-in-up bei jedem Scroll: Der Generator wählte die Option mit den wenigsten Abhängigkeiten und der meisten Rückendeckung im Trainingsset und erklärte sie für fertig.

Die Lösung ist nie ein besseres Emoji. 🚀 gegen 🎯 zu tauschen ändert nichts. Die Lösung ist, den Slot zu töten: Card für Card zu entscheiden, ob dieses Feature ein Icon, eine Zahl oder eine Zeichnung verdient, und ihm dann das eine zu geben, das es sich verdient hat. Diese Entscheidung sind zwei Minuten menschliches Urteilsvermögen pro Card. Es sind auch exakt die zwei Minuten, die der Generator übersprungen hat, und deshalb ist genau das die Arbeit, die deine Seite aufhören lässt, so auszusehen, als hätte der Generator sie gemacht.

Lösch den Pastellkreis. Überlebt die Card ohne ihn, hast du ihn nie gebraucht. Tut sie es nicht, war die Card leer und die Blase hat das versteckt, und das ist das Nützlichste, was das Emoji dir je gesagt hat.