«I knew it was claude just by looking at the design.» Das war der Top-Kommentar unter einem viralen Post über AI-gebaute Websites. Ein anderer Kommentar ergänzte trocken: «his trademark: italic serif highlight». Die Pointe: AI-Design ist 2026 erkennbar geworden. Wer viele AI-generierte Sites gesehen hat, erkennt die nächste auf den ersten Blick.
Diese Website hier ist komplett mit Claude gebaut. Jede Komponente, jeder Shader, jede Zeile Copy ist durch eine AI-Pipeline gelaufen. Trotzdem besteht sie ein dokumentiertes Anti-Klischee-Audit, nicht weil das Werkzeug ein anderes wäre, sondern weil die Entscheide andere sind.
Das ist keine Stilfrage für Designer. Wer AI-Arbeit einkauft, sollte wissen, woran man Template-Output erkennt und was gerichtete Arbeit anders macht. Diese Site ist das Anschauungsobjekt, an dem ich das zeigen kann.
Woran man AI-Design erkennt
Anthropic selbst benennt im offiziellen frontend-design-Skill drei Klischee-Cluster, in die AI-generierte Sites immer wieder fallen:
- Cream + Serif + Terracotta: warme Creme-Töne, Serifenschrift, kursive Highlights. Das «italic serif highlight» aus dem Kommentar oben.
- Near-Black + Acid-Accent: fast schwarzer Hintergrund, ein leuchtender Akzent, austauschbare Gradient-Deko. Der Standard-Look für alles, was «Tech» sein soll.
- Broadsheet-Hairlines: Zeitungs-Ästhetik mit feinen Rasterlinien.
Dazu kommen die Marker im Detail: Inter als Schrift, lila-blauer Gradient-Glow, ein «AI-Powered»-Badge über der Headline, Statistik-Banner ohne Quelle. Jedes einzelne Element ist harmlos. In Kombination sind sie eine Signatur, und zwar nicht die eigene.
Der Grund dafür hat einen Namen: distributional convergence. Modelle sind auf den statistischen Mittelpunkt ihrer Trainingsdaten optimiert. Fragt man ohne Vorgaben nach einer Landing Page, bekommt man den Durchschnitt aller Landing Pages. Der ist nicht schlecht. Er ist beliebig.
Was dagegen hilft: drei Entscheide
1. Ein Brief, der Gesetz ist
Vor dem ersten Prompt stand ein Design-Brief mit harten Regeln. Die wichtigste: Zweifarb-Disziplin. Cyan gehört der Oberfläche, Magenta existiert ausschliesslich im Würfel-Nebel und im Wordmark. Kein Gradient-Konfetti, keine dritte Akzentfarbe, egal wie hübsch ein Zwischenergebnis aussieht. Jede Design-Runde wurde gegen diesen Brief geprüft, nicht gegen Geschmack.
2. Verbotslisten statt Hoffnung
Die Content-Pipeline dieser Site bekommt in ihrem System-Prompt eine explizite Verbotsliste: revolutionär, nahtlos, Game-Changer, bahnbrechend, «tauchen wir ein», seamless, cutting-edge und insgesamt knapp 60 weitere Wörter und Wendungen. Es ist dieselbe Liste, an der man AI-Texte erkennt, nur als Regel gegen sich selbst angewandt. Auch Gedankenstriche als Satzverbindung sind verboten. Das Muster «Aussage, Strich, Folgerung» ist eines der zuverlässigsten AI-Signale im Deutschen.
3. Ein Element statt fünf Effekte
Die Site hat genau ein Signature-Element: einen 3D-Würfel aus Wireframe und Partikel-Nebel, mit einer selbst programmierten Partikelbewegung, die wie Rauch strömt (für Techniker: ein Curl-Noise-Shader). Sonst nichts. Kein Parallax-Zoo, keine fünf konkurrierenden Animationen. Und auf dem Handy lädt die Seite null Bytes Three.js, dort steht ein komponiertes Poster-Bild. Wer weniger Bewegung eingestellt hat (prefers-reduced-motion), bekommt keinen abgeschalteten Rest, sondern einen gestalteten Zustand: Poster-Hero, statisches Sternenfeld.
Der Härtetest, mit Zahlen
Behaupten kann man viel. Deshalb läuft gegen diese Site ein wiederholbares Prüf-Script, angelehnt an den Selbsttest, mit dem Awards-Juroren Sites auseinandernehmen:
- Motion wegdenken: Screenshot pro Section ohne Animation. Trägt das statische Bild? Bei allen sieben Sections ja, bei einer davon (den Services-Karten) laut eigenem Audit nur bedingt. Dazu gleich mehr.
- CPU 4x gedrosselt plus Fast-3G: das simuliert ein günstiges Handy im langsamen Netz. Ergebnis: konstant rund 60 Bilder pro Sekunde, auch im Worst-Case, der Klick-Explosion der Partikel.
- Lighthouse, Googles Standard-Test für Ladezeit, Zugänglichkeit, Code-Qualität und Auffindbarkeit (separat gemessen in der Review vom 7. Juli): Desktop 99/100/100/100, Mobile 95/100/100/100.
- 412-Pixel-Viewport: der Mid-Range-Android-Test, nicht nur das Entwickler-MacBook.
Ehrlicherweise: Das ist eine Selbstprüfung, kein Fremdurteil. Deshalb liegen Script, Messmethode und Einschränkungen offen im Repository, jede Zahl ist nachmessbar. Das ist der Unterschied zwischen einem Claim und einem Beweis.
Die ehrliche Stelle
Das Audit ist kein Freispruch, und genau das macht es glaubwürdig.
Diese Site liegt selbst nahe am zweiten Klischee-Cluster. Sie ist dunkel und hat einen leuchtenden Akzent. Der Unterschied zum Cluster liegt in der Farbbindung, dem einen Signature-Element und der Craft-Schicht, nicht in der Grundpalette. Das bleibt ein Wachsamkeitspunkt bei jeder neuen Section.
Und die Services-Karten waren im eigenen Audit der Grenzfall: fünf uniforme Icon-Karten mit gleichem Padding streifen exakt das Anti-Pattern «austauschbare Icon-Cards». Der Befund wurde dokumentiert und adressiert, für Mobile ist die Darstellung bereits entschärft, auf dem Desktop steht der Umbau noch aus. Auch das gehört zur Ehrlichkeit.
Diese Selbstkritik ist nicht Bescheidenheit, sie ist das Argument. Der Unterschied zwischen AI-Slop und AI-Craft ist ein Prozess: Brief schreiben, bauen, auditieren, Befunde fixen, wieder auditieren. Kein Prompt der Welt ersetzt diese Schleife.
Was das für Ihr Projekt heisst
Wenn Sie AI-generierte Arbeit einkaufen, egal ob Website, Produktbilder oder Texte, stellen Sie eine Frage: «Zeigen Sie mir Ihren Prüfprozess.» Wer nur ein Ergebnis zeigt, hat vermutlich den Durchschnitt geliefert. Wer einen Brief, ein Audit und eine Befundliste zeigen kann, hat gerichtet gearbeitet.
Genau diese Disziplin biete ich für Kundenprojekte an, mit denselben Werkzeugen, die diese Site gebaut haben. Der erste Schritt ist ein kostenloses Erstgespräch, 30 Minuten, danach wissen Sie, ob sich ein Prototyp lohnt.
Weiterführende Links
- Anthropic frontend-design-Skill: der offizielle Skill, der die drei AI-Design-Klischees benennt und Gegenmittel definiert
- 10 Award-Winning Websites of 2026, Judged: der Juror-Selbsttest (Motion wegdenken, CPU drosseln, Reduced Motion togglen), an dem sich unser Härtetest orientiert
- prefers-reduced-motion (web.dev): warum der Reduced-Motion-Pfad gestaltet sein sollte, nicht nur abgeschaltet