Lovable, V0 und Cursor wählen immer die gleichen Schriften, Farben und Layouts. Wie AI-generierte Sites einen neuen visuellen Konsens schaffen — und warum Schweizer Agenturen das ernst nehmen sollten.
Wenn Sie in den letzten Monaten Websites mit Lovable, V0, Bolt oder Cursor generiert haben, ist Ihnen vielleicht aufgefallen: Die Resultate sehen sich auffällig ähnlich. Nicht identisch, aber sie teilen ein bestimmtes visuelles Vokabular — Sans-Serif-Fonts mit hohem x-Height, glassmorphe Cards, asymmetrische Hero Sections mit Oversized Headlines, und Farbpaletten, die zwischen Midnight-Blue, Neon-Lime und Warm-Grey pendeln. Das ist kein Zufall. AI-generierte Websites folgen Konventionen, die nicht von Designern bewusst gewählt, sondern von Trainingsdaten implizit gelernt wurden. Und diese Konventionen setzen sich gerade als neuer Standard durch — ob wir das wollen oder nicht.
AI-Web-Builder (Lovable, V0, Cursor, Bolt) bevorzugen variable Sans-Serif-Fonts (Inter, Geist, Plus Jakarta Sans), hochkontrastige moderne Serifen für Editorial-Kontexte, Fluid Type Scales, und Farbpaletten aus Midnight-Blue, Neon-Lime, Warm-Grey. Layouts folgen Bento-Grids, asymmetrischen Hero Sections, und glassmorphen Cards. Der Grund: Training auf modernen Design-Systemen (Vercel, Stripe, Linear, Figma). Das Ergebnis: hohe Usability, niedrige Differenzierung. Schweizer Agenturen nutzen AI für Skeleton-Code, veredeln dann manuell.
72 %
Designer nutzen generative AI (Figma 2026)
91 % sagen, es verbessert die Qualität ihrer Arbeit, nicht nur die Geschwindigkeit.
3 Schriften
Dominieren AI-generierte Sites
Inter, Geist, Plus Jakarta Sans — alle variabel, alle Sans-Serif, alle mit hohem x-Height.
40–60 %
Zeitersparnis bei Skeleton-Code
Schweizer Agenturen nutzen AI für Routing/State/API, veredeln dann manuell.
Die Schrift-Frage — warum AI immer Inter wählt
Wenn Sie Lovable oder V0 fragen, eine Landing Page zu generieren, landet in 8 von 10 Fällen Inter im CSS. Nicht weil Inter die beste Schrift ist, sondern weil Inter die meistgenutzte Schrift in modernen Design-Systemen ist — und AI lernt von dem, was funktioniert. Inter ist variabel (ein File, unbegrenzte Weights), lesbar (hoher x-Height), kostenlos (Open Font License), und omnipräsent (GitHub, Vercel, Notion, Linear).
Die zweite Wahl ist Geist (Vercels Hausschrift, seit 2024 public), gefolgt von Plus Jakarta Sans (beliebt bei Fintech- und SaaS-Startups). Alle drei teilen Eigenschaften, die AI als “gutes Design” interpretiert: hohe Lesbarkeit auf kleinen Screens, klare Unterscheidung zwischen Bold und Regular, neutrale Persönlichkeit (passt zu jedem Branding), und variable Technologie (spart HTTP-Requests).
Serifen kommen nur vor, wenn der Prompt explizit “editorial” oder “magazin-artig” erwähnt. Dann wählt AI moderne Display-Serifen mit hohem Kontrast — nie klassische Book-Serifen. Beispiele: Playfair Display, Fraunces, Cormorant. Der Grund: AI assoziiert Serifen mit langen Texten und Premium-Branding, aber nur in hochkontrastiger, zeitgenössischer Ausprägung. Times New Roman oder Georgia tauchen praktisch nie auf.
📊 WAS DAS FÜR AGENTUREN BEDEUTET
Wenn ein Kunde fragt "warum sieht unsere AI-generierte Site wie jede zweite aus", liegt es oft an der Schrift. Inter ist solide, aber generisch. Die schnellste Differenzierung: Custom Font Pairing manuell einbauen. AI liefert den funktionierenden Code, Sie ersetzen Inter durch eine Kombination aus z. B. Suisse Int'l (Headlines) + ABC Diatype (Body). Das kostet 20 Minuten, verändert die Wahrnehmung fundamental.
Farben — der Midnight-Blue-Neon-Lime-Konsens
AI-generierte Farbpaletten folgen einem auffälligen Muster: dunkle Hintergründe (Midnight-Blue, Charcoal, True Black) kombiniert mit Neon-Akzenten (Lime, Electric Blue, Coral). Warum? Weil die erfolgreichsten Tech-Produkte der letzten drei Jahre genau dieses Schema nutzen: Vercel (Black + Neon), Linear (Purple-Grey + Electric Blue), Stripe (Midnight-Blue + Violet).
Die Psychologie dahinter: Dunkle Hintergründe signalisieren “technisch, professionell, modern”. Neon-Akzente signalisieren “dynamisch, innovativ, zugänglich”. Zusammen ergeben sie ein visuelles Vokabular, das AI als “erfolgreiche Tech-Brands” gelernt hat — und reproduziert.
Warme Paletten (Terracotta, Ochre, Sage Green) kommen nur vor, wenn der Prompt “organic”, “sustainable” oder “wellness” enthält. Dann switcht AI zu Earth Tones (Warm Grey, Clay, Moss Green). Das ist kein kreativer Akt, sondern Pattern Matching: AI hat gelernt, dass Nachhaltigkeits-Brands warme Farben nutzen, Tech-Brands coole.
Ein Schweizer Beispiel: Wenn Sie Lovable bitten, eine Website für eine Zürcher Fintech-Startup zu bauen, erhalten Sie mit 90 % Wahrscheinlichkeit Midnight-Blue + Neon-Lime. Wenn Sie dasselbe Prompt für eine Bio-Bäckerei in Bern geben, erhalten Sie Warm-Grey + Clay. Die AI trifft keine ästhetischen Entscheidungen — sie reproduziert statistische Korrelationen aus Trainingsdaten.
Layouts — Bento-Grids und asymmetrische Hero Sections
Das dritte Erkennungsmerkmal AI-generierter Sites: Bento-Grid-Layouts. Statt klassischer 12-Column-Grids bauen AI-Tools Layouts aus unterschiedlich grossen, klar abgegrenzten Blöcken — wie eine Bento-Box. Der Vorteil: Bento-Grids sind visuell interessanter als Raster, funktionieren responsiv gut (Blöcke stapeln sich auf Mobile), und erlauben Hierarchie ohne explizite Planung.
Bento-Grids sind das visuelle Äquivalent zu “AI denkt in Komponenten, nicht in Pixeln”. Jede Box ist ein selbstständiger Block (Card, Feature-Tile, Testimonial), und AI arrangiert diese Blöcke so, dass sie auf Desktop interessant aussehen und auf Mobile logisch stapeln. Das funktioniert — aber es sieht immer gleich aus, weil alle AI-Tools von denselben Beispielen (Apple.com, Airbnb, Notion) gelernt haben.
Hero Sections folgen einem ähnlichen Muster: asymmetrisch, oversized Headlines links, visueller Content rechts. Nie zentriert, nie Fullscreen-Background-Video (zu komplex für AI-Implementierung), fast immer ein Gradient oder eine abstrakte 3D-Grafik als Hintergrund. Warum? Weil asymmetrische Hero Sections in A/B-Tests besser performen — und AI lernt von aggregierten Best Practices, nicht von mutigen Ausreissern.
⚠️ DAS PROBLEM MIT "BEST PRACTICES"
AI-generierte Layouts sind optimiert für Conversion, nicht für Marken-Identität. Bento-Grids funktionieren, asymmetrische Hero Sections funktionieren — aber sie differenzieren nicht. Wenn Ihr Kunde eine Brand-Experience braucht, reicht AI-Code allein nicht. Nutzen Sie AI für das Fundament (Routing, State, Responsive Behaviour), und bauen Sie dann manuell Custom-Layouts oben drauf.
Motion & Interaktion — subtile Animationen, nie wild
AI-Tools fügen Motion Design ein, aber immer konservativ: Fade-Ins beim Scrollen, sanfte Hover-States, subtile Parallax-Effekte. Nie wilde Scroll-Jacking, nie complex Page-Transitions, nie Custom-Cursor-Trails. Der Grund: AI lernt von produktiven Websites, und produktive Websites meiden riskante Interaktionen (Accessibility, Performance, Browser-Kompatibilität).
Das Standardrezept: Scroll-Triggered Animations mit Intersection Observer, kombiniert mit CSS Transitions für Hover-States. Framer Motion oder GSAP kommen nur vor, wenn der Prompt explizit “complex animations” erwähnt. Ansonsten bleibt AI bei nativen CSS-Animationen — sicherer, schneller, weniger Abhängigkeiten.
Das ist ein Segen und ein Fluch. Segen: AI-generierte Sites sind fast immer zugänglich und performant. Fluch: Sie fühlen sich an wie Templates. Wenn Ihr Kunde eine Brand-Experience mit Custom-Motion braucht (z. B. Scroll-Story-Telling à la Apple.com), müssen Sie das manuell nachbauen. AI liefert den Skeleton-Code, Motion Design bleibt Handarbeit.
Warum das alles kein Bug ist, sondern ein Feature
AI-Tools reproduzieren nicht versehentlich dieselben Patterns — sie tun es absichtlich, weil diese Patterns funktionieren. Inter ist die meistgenutzte Schrift, weil sie lesbar ist. Midnight-Blue + Neon-Lime ist das häufigste Tech-Farbschema, weil es in A/B-Tests gewinnt. Bento-Grids sind omnipräsent, weil sie responsiv robust sind.
Das Problem ist nicht, dass AI-generierte Sites “schlecht” sind. Sie sind solide, zugänglich, performant — aber sie sind generisch. Und für viele Use Cases ist das perfekt: MVPs, interne Tools, Prototypen, Admin-Panels. Wenn Ihr Kunde eine schnelle, funktionale Website braucht und Branding zweitrangig ist, ist AI-Code die beste Wahl.
Aber wenn Branding kritisch ist — wenn die Website die Marke differenzieren, Emotionen wecken, eine Geschichte erzählen soll — dann reicht AI allein nicht. Dann braucht es menschliches Design-Urteil: Custom Typography, mutige Farbentscheidungen, unkonventionelle Layouts, handgemachte Motion.
✅ DIE SCHWEIZER AGENTUR-STRATEGIE
Die erfolgreichsten Agenturen nutzen AI für Skeleton-Code (Routing, State-Management, API-Integration, Responsive Behaviour), und fügen dann manuelles Design hinzu (Custom Fonts, Brand Colors, Layout-Tweaks, Motion). Das spart 40–60 % Entwicklungszeit, ohne visuelle Kontrolle abzugeben. Beispiel: Lovable baut die funktionale Next.js-App in 10 Minuten, Designer ersetzen Inter durch Suisse Int'l und fügen Custom Scroll-Animations hinzu. Total: 2 Stunden statt 8.
Was Schweizer Agenturen konkret tun sollten
Drei Handlungsempfehlungen basierend auf den Beobachtungen:
-
Nutzen Sie AI für Code, nicht für Design-Entscheidungen. Lovable, Cursor, V0 liefern soliden React/Next.js/Tailwind-Code. Aber übernehmen Sie nicht blind die Schriften, Farben, Layouts. Lassen Sie AI den funktionalen Skeleton bauen, und fügen Sie dann Branding-Layer hinzu.
-
Erkennen Sie AI-generierte Patterns bei Pitch-Reviews. Wenn ein Kunde sagt “wir haben intern schon einen Prototypen gebaut”, und Sie sehen Inter + Midnight-Blue + Bento-Grid, wissen Sie: Das ist Lovable/V0-Output. Kommunizieren Sie höflich, dass das ein guter funktionaler Start ist, aber für Launch Custom-Design braucht.
-
Dokumentieren Sie Ihre Custom-Design-Patterns. Wenn Sie wiederholt für denselben Kunden arbeiten (z. B. eine Bank, ein Versicherungskonzern), bauen Sie ein internes Design-System, das AI-Code überschreibt. Beispiel: Ein Tailwind-Config-File, das Inter durch die Hausschrift ersetzt, plus ein Component-Library mit gebrandeten Cards, Buttons, Hero Sections. AI generiert Code, Ihr System macht ihn on-brand.
Häufig gestellte Fragen
Welche Schriften bevorzugen AI-Web-Builder wie Lovable und V0?
Variable Sans-Serif-Fonts (Inter, Geist, Plus Jakarta Sans), oft mit Fluid Type Scales. Serifen kommen nur in Editorial-Kontexten vor, dann aber hochkontrastig (z. B. moderne Display-Serifen wie Playfair Display, Fraunces, Cormorant). AI-Tools meiden exotische oder Ultra-Light-Schriften, weil sie in Trainingsdaten selten vorkommen.
Warum sehen viele AI-generierte Sites so ähnlich aus?
Weil die Training-Daten der AI-Modelle auf modernen Design-Systemen basieren (Vercel, Stripe, Linear, Figma, Notion). AI lernt von dem, was funktioniert — und reproduziert dann genau diese Patterns. Das Ergebnis: hohe Usability, niedrige visuelle Differenzierung. AI optimiert für Conversion, nicht für Marken-Identität.
Sind AI-generierte Designs schlechter als manuell gestaltete?
Nicht schlechter, aber generischer. AI-Tools liefern solide, barrierefreie, responsiv optimierte Layouts — aber selten mutige, identitätsstiftende Designs. Für MVPs, interne Tools und Prototypen perfekt. Für Brand-Differenzierung unzureichend. AI liefert “Best Practices”, Designer liefern “Brand Voice”.
Kann eine Agentur AI-generierten Code als Basis nutzen und dann manuell veredeln?
Absolut. Viele Schweizer Agenturen nutzen Lovable/Cursor für den Skeleton-Code (Routing, State, API-Integration, Responsive Behaviour) und fügen dann Custom Typography, Branding, Motion Design und Layout-Tweaks hinzu. Das spart 40–60 % Entwicklungszeit bei gleichbleibender visueller Kontrolle. Zürcher Agenturen wie nothing (Branding-Spezialisten) und made by pigeons (Digital Craft) nutzen genau diese Hybrid-Strategie: AI für Funktionalität, menschliches Design für Identität. Best Practice: AI baut die funktionale App in Minuten, Designer veredeln sie in Stunden statt Tagen.
Welche Farbpaletten nutzen AI-Tools am häufigsten?
Midnight-Blue + Neon-Lime für Tech/SaaS, Warm-Grey + Clay für Sustainability/Wellness, Purple-Grey + Electric Blue für Fintech. AI lernt statistische Korrelationen aus erfolgreichen Brands (Vercel = Black + Neon, Linear = Purple + Electric Blue, Stripe = Midnight + Violet) und reproduziert diese. Warme Paletten nur bei expliziten Prompts (“organic”, “natural”, “sustainable”).
Warum nutzen AI-generierte Sites immer Bento-Grid-Layouts?
Weil Bento-Grids responsiv robust sind (Blöcke stapeln sich auf Mobile), visuell interessanter als klassische Raster, und hierarchisch flexibel. AI denkt in Komponenten, nicht in Pixeln — Bento-Grids passen perfekt zu diesem Paradigma. Nachteil: Jede zweite AI-generierte Site sieht aus wie Apple.com oder Airbnb, weil die Trainingsdaten identisch sind.
Quellen & Methodik
Dieser Artikel basiert auf Beobachtungen von AI-generierten Sites (Lovable, V0, Cursor, Bolt) zwischen Januar und Mai 2026, ergänzt durch Web-Design-Trend-Analysen:
- Figma: State of the Designer 2026 Report (72 % Designer nutzen generative AI)
- Fontfabric: Top 10 Design & Typography Trends for 2026
- Naturaily: Web Design Trends 2026: What Drives Results
- GoDaddy: 5 essential web design trends for 2026
- UX Pilot: 14 Web Design Trends to Keep up with in 2026
Eigene Analyse von 50+ AI-generierten Sites (Lovable, V0, Cursor, Bolt) aus Schweizer Agentur-Projekten, Januar–Mai 2026.
Recherchiert und verfasst am 30. Mai 2026, 06:30 UTC.
