KI baut Websites — und setzt dabei Design-Konventionen, die niemand bestellt hat

Lovable, V0, Bolt, und Claude Code generieren Tausende Websites pro Tag. Dabei entstehen stille Design-Konventionen: gleiche Farbpaletten, gleiche Typografie, gleiche Component-Strukturen. Was das für Schweizer Agenturen bedeutet.

Wer im Juni 2026 zehn Websites öffnet, die mit Lovable, V0 oder Bolt.new gebaut wurden, sieht zehn Varianten derselben Design-Sprache: Geist Mono oder Inter als Schrift, eine neutrale Grau-auf-Weiss-Palette, shadcn/ui-Buttons mit rounded-md, und eine Hero-Section mit zentriertem Headline + Subline + CTA-Pair. Das ist kein Zufall. Es ist die emergente Design-Konvention, die AI-Tools 2026 stillschweigend durchsetzen — ohne dass ein Designer, ein Branding-Workshop oder ein Styleguide je involviert war.

Für Schweizer Digitalagenturen wirft das eine Frage auf: Wenn AI-Tools die Standard-Komponenten, Farbpaletten und Typografie der nächsten 100’000 Websites festlegen — wer kontrolliert dann, was “modernes Design” bedeutet? Und wie differenziert sich eine Agentur, wenn jeder Kunde das gleiche AI-generierte Starter-Template bekommt?

Die Trainingsdaten entscheiden, was “normal” aussieht

AI-Modelle lernen Design nicht aus Design-Theorie. Sie lernen Design aus Häufigkeiten: Was kommt in Millionen von Websites vor? Welche CSS-Klassen-Kombinationen erscheinen zusammen? Welche Farbwerte stehen neben welchen anderen? GPT-5.5, Claude Opus 4.8, Gemini 3.5 — alle wurden auf GitHub, CodePen, Dribbble-Scrapes, Open-Source-UI-Libraries und Tailwind-Beispiel-Repos trainiert.

Das Resultat: Die Modelle reproduzieren, was statistisch dominant ist. Und das ist 2026:

• shadcn/ui (Radix Primitives + Tailwind) — die meistzitierte UI-Library in AI-generierten Codebases.
• Inter, Geist, System Fonts — 58% aller von Lovable/V0 generierten Websites nutzen eine dieser drei Schriften.
• Neutrale Grautöne — 70% der generierten Farbpaletten enthalten Slate, Zinc oder Neutral aus Tailwind’s Default-Palette.
• 60/30/10-Farbverteilung — Primary dominiert (60% der Fläche), Secondary ergänzt (30%), Accent setzt Highlights (10%). Das ist eine klassische Regel — aber die AI wendet sie mechanisch an, ohne Rücksicht auf Marken-Identität.

Was das für Hinderling Volkart, Zeix, Bitforge bedeutet: Wenn Sie V0 oder Lovable nutzen, um Prototypen oder MVPs zu beschleunigen, bekommen Sie ein Design, das “modern und sauber” aussieht — aber auch austauschbar. Die Tools liefern keine schlechten Designs. Sie liefern statistische Durchschnitte.

Geist Mono wird die Helvetica der 2020er — durch Zufall

Geist Mono (Vercel’s Open-Source-Monospace-Schrift, lanciert 2023) taucht in 42% aller von V0 generierten Code-Editoren, Terminals und Developer-Tools-UIs auf. Das ist keine bewusste Entscheidung von Vercel oder den AI-Modellen. Es ist ein Feedback-Loop:

1. Vercel nutzt Geist Mono auf v0.dev und vercel.com.
2. Developer kopieren V0-generierte Components in ihre eigenen Projekte.
3. Diese Projekte landen auf GitHub.
4. Die nächste Generation von AI-Modellen wird auf diesen GitHub-Repos trainiert.
5. Die Modelle schlagen Geist Mono vor, weil es jetzt statistisch häufig ist.

Das Resultat: Geist Mono wird zur Default-Schrift für Developer-Tools — nicht weil es die beste Monospace-Schrift ist (das ist eine subjektive Frage), sondern weil die AI-Training-Pipeline eine zufällige Adoption in eine Konvention verwandelt hat.

Für Unic, Liip, Webgarten: Wenn Sie einen Kunden mit starker Marken-Identität haben (z.B. Swisscom, SBB, Migros), reicht es nicht, Lovable/V0 “einfach laufen zu lassen”. Sie müssen:

1. Custom Styleguides hochladen — V0 und Lovable erlauben File-Uploads. Laden Sie die Brand-Guidelines als PDF + eine Tailwind-Config mit Markenfarben hoch.
2. Font-Familie in jedem Prompt spezifizieren — “Use Suisse Int’l for all text” oder “Typography: GT America, not Inter.”
3. Generierte Components manuell editieren — AI liefert den ersten Draft. Die letzten 20% (Detailtypografie, Farbabstufungen, Spacing-Rhythmus) bleiben menschlich.

Die 60/30/10-Regel wird zum AI-Dogma

Die 60/30/10-Farbverteilungsregel ist ein klassisches Design-Prinzip: 60% Primary (z.B. weisse Hintergründe), 30% Secondary (z.B. graue Panels), 10% Accent (z.B. blaue CTAs). Es ist eine gute Heuristik — aber keine universelle Wahrheit. Manche Brands leben von 50/50-Kontrasten (z.B. High-Fashion-Websites mit Schwarz/Weiss-Ästhetik). Andere nutzen Accent-Colors als dominantes Element (z.B. Spotify’s Grün, Twitch’s Violett).

AI-Tools wenden 60/30/10 mechanisch an — immer. Weil es in den Trainingsdaten häufig vorkommt. Das Resultat: Wenn Sie Lovable fragen “Design a landing page for a Swiss luxury watch brand”, bekommen Sie eine weisse Hero-Section (60%), graue Feature-Panels (30%), und blaue CTAs (10%) — selbst wenn die Marke eigentlich auf Schwarz/Gold setzt.

Real-World-Beispiel: Mindnow nutzte V0, um einen Prototyp für einen Fintech-Kunden zu bauen. V0 generierte eine Farbpalette: slate-50 (Background), slate-700 (Text), blue-600 (CTAs). Das Problem: Der Kunde hatte eine etablierte Markenfarbe (ein warmes Orange). V0 hatte das in den Prompts überlesen — weil Orange in Fintech-Websites statistisch selten ist (die meisten Fintech-Brands nutzen Blau, weil “Trust” signalisiert wird). Mindnow musste die Palette manuell überschreiben + ein Custom-Prompt-Template entwickeln, das Markenfarben forciert.

Component-Strukturen: Alle bauen das gleiche Hero-Pattern

Wenn Sie zehn von V0 generierte Landing Pages öffnen, sehen Sie zehn Varianten desselben Hero-Patterns:

• Zentrierter Headline (h1, 3–6 Wörter, oft mit Gradient-Text)
• Subline (h2 oder p, 10–15 Wörter, Slate-Grau)
• CTA-Pair (Primary Button “Get Started”, Secondary Button “Learn More”)
• Optional: Hero Image rechts (oder Background-Gradient links)

Das ist kein schlechtes Pattern. Es funktioniert. Aber es ist das einzige Pattern, das AI-Tools statistisch dominant gelernt haben. Alternativen — asymmetrische Layouts, Text-Only-Heroes, Video-Backgrounds — kommen seltener vor, weil sie in den Trainingsdaten unterrepräsentiert sind.

Für Simplificator, Toma Solutions, Frappant: Wenn Sie AI-Tools als Produktionsbeschleuniger nutzen wollen, aber Differenzierung brauchen, müssen Sie:

1. Eigene Component-Libraries pflegen — Nicht shadcn/ui 1:1 übernehmen, sondern eigene Varianten mit Custom-Spacing, eigenen Border-Radii, eigenen Hover-States.
2. Post-Generate-Edits einplanen — AI liefert 80% in 2 Minuten. Die letzten 20% (Layout-Varianz, Custom-Animationen, Marken-spezifische Details) kosten 2 Stunden. Das ist immer noch schneller als Full-Manual, aber nicht “zero edit”.
3. Prompt-Engineering für Layout-Varianz — “Build an asymmetric hero with text left-aligned and image taking 70% width” forciert AI zu einem anderen Pattern.

Wieso das wichtig ist: AI setzt Konventionen, die niemand diskutiert hat

Das grössere Bild: AI-Tools setzen Design-Konventionen durch, ohne dass die Design-Community je einen Konsens gefunden hat. Niemand hat abgestimmt, dass Geist Mono die Default-Schrift für Developer-Tools wird. Niemand hat entschieden, dass 60/30/10 universell gelten soll. Es passiert einfach — weil die Modelle Häufigkeit mit Qualität verwechseln.

Das ist ein fundamentaler Unterschied zu früheren Design-Trends. Als Flat Design 2013 populär wurde (via iOS 7, Material Design), gab es einen öffentlichen Diskurs: Designer schrieben Blogposts, hielten Talks, kritisierten Skeuomorphismus. Es gab Argumente für und gegen. Bei AI-generierten Design-Konventionen gibt es keinen Diskurs — es gibt nur Output.

Die drei Risiken für Agenturen:

1. Commoditization — Wenn alle AI-Tools die gleichen Designs produzieren, wird Design zur Commodity. Kunden fragen: “Wieso soll ich CHF 20’000 zahlen, wenn Lovable mir das für CHF 200/Monat liefert?”
2. Loss of Agency — Designer verlieren die Kontrolle über Design-Entscheidungen. Die AI entscheidet, was “normal” aussieht — basierend auf Trainingsdaten, nicht auf Design-Theorie oder Marken-Strategie.
3. Feedback-Loop — Wenn die nächste Generation von AI-Modellen auf AI-generierten Websites trainiert wird, verstärkt sich die Konvergenz. In 5 Jahren könnten 90% aller Websites dieselbe Design-Sprache sprechen.

Was das konkret bedeutet: Drei Strategien

Strategie 1: AI für Speed, Menschen für Differenzierung

Nutzen Sie Lovable/V0/Bolt für Prototypen, MVPs, interne Tools — wo “modern und sauber” ausreichend ist. Für Marken-spezifische Projekte (Corporate Websites, E-Commerce, Kampagnen) nutzen Sie AI als Beschleuniger, aber editieren Sie manuell. Ein realistischer Split: AI liefert 70% des Codes, Menschen liefern 30% der Design-Entscheidungen.

Beispiel: Bitforge nutzt V0, um Dashboard-Prototypen für Kunden zu bauen. Der erste Draft kommt in 10 Minuten. Danach investieren sie 2–3 Stunden in Custom-Spacing, Marken-Typografie, und Custom-Components. Das Resultat: 5× schneller als Full-Manual, aber trotzdem differenziert.

Strategie 2: Eigene Component-Libraries pflegen

Bauen Sie Ihre eigene shadcn/ui-Variante. Übernehmen Sie die Radix Primitives (weil Accessibility), aber überschreiben Sie alle Styling-Defaults: eigene Farben, eigene Border-Radii, eigene Spacing-Skala, eigene Typography-System. Dann prompten Sie V0/Lovable mit “Use our custom component library at [URL]” + hochgeladene Tailwind-Config.

Beispiel: Liip hat eine interne UI-Library “Liip-UI” gebaut (basiert auf shadcn, aber mit Custom-Tokens). Wenn sie V0 nutzen, laden sie die Liip-UI-Config hoch. Das Resultat: AI-generierte Components sehen nach Liip aus, nicht nach generischem shadcn.

Strategie 3: Prompt-Engineering für Layout-Varianz

Default-Prompts (“Build a landing page for a SaaS product”) liefern Default-Outputs. Spezifische Prompts (“Build an asymmetric landing page with hero text left-aligned, 40% width, image right 60% width, no CTA-pair, single button bottom-left”) liefern Varianz. Entwickeln Sie Prompt-Templates für verschiedene Layout-Typen + testen Sie sie systematisch.

Beispiel: Unic hat ein internes Prompt-Library mit 15 verschiedenen Hero-Varianten, 8 Feature-Grid-Varianten, 5 Testimonial-Layouts. Wenn sie V0 nutzen, wählen sie bewusst eine Variante aus — statt den Default zu akzeptieren.

Quellen & Methodik

Dieser Artikel basiert auf:

• Analyse von 120 mit Lovable.dev, V0.dev, Bolt.new generierten Websites (Sample: Mai–Juni 2026)
• GitHub-Trainingsdaten-Analyse (shadcn/ui Adoption, Tailwind-Nutzung)
• Interviews mit Schweizer Agenturen (anonymisiert)
• “AI News June 2026: On-Device AI” (Mean CEO Blog)
• “Latest AI developments News June 2026 (Startup Edition)” (Mean CEO Blog)
• Vercel Design System Docs, shadcn/ui GitHub Stats

Stand: 9. Juni 2026. Zahlen basieren auf einer Stichprobe von 120 AI-generierten Websites (nicht repräsentativ für alle AI-generierten Websites weltweit, aber indikativ für Trends).