Ein Bild sagt mehr als tausend Tokens

Ein Teil meiner Arbeit bei Repaint besteht darin, KI dazu zu bringen, Websites zu generieren, die tatsächlich gut aussehen. Das ist überraschend schwer. KI-Modelle neigen dazu, immer wieder in die gleichen visuellen Klischees zu verfallen. Es ist so konsistent, dass eine "KI-Website" zu einer erkennbaren Ästhetik wird.

Wir haben Dutzende von Möglichkeiten getestet, dieses Muster zu durchbrechen. Dabei haben wir ein viel tieferes Verständnis der Modelle gewonnen, das wir teilen wollten.

Das ist eine ziemlich typische Standard-KI-Website: generischer Stil, minimaler Inhalt und überstrapazierte Layouts. Und natürlich der gelegentliche unlesbare Button.

Ich habe nur minimale Anweisungen gegeben. Das mag unfair erscheinen, aber ich finde, es ist ein guter Test. Natürlich könnte man das durch weiteres Prompting schrittweise in eine großartige Website verwandeln. Aber dann macht man selbst das gesamte Design. Das Modell programmiert nur. Die meisten Leute wissen nicht, wie man das macht. Der große Durchbruch kommt, wenn KI Design ohne menschliche Vorgabe jedes Details übernehmen kann.

Der Standard-KI-Stil ist im Grunde ein universelles Problem. Hier sieht man ihn auf einer Therapeuten-Website. Man würde denken, eine Therapeuten-Website sähe dramatisch anders aus. Aber nein, es wird einfach ungefähr die gleiche Seite mit grünen Buttons erstellt.

Wie kann man KI-Websites verbessern?

Design-Systeme

Ein naheliegender erster Schritt: Farben, Schriftarten, Abrundungen und Schatten vorab festlegen. Diese Entscheidungen sind schwer richtig zu treffen, wenn man nur auf Code schaut. Die KI mit einem guten Set zu starten, bedeutet weniger Fehlermöglichkeiten.

Es hilft ein wenig. Man bekommt weniger gravierende Farbfehler. Und hier wurde ein Bildhintergrund verwendet. Aber insgesamt sind Layouts, Inhaltsdichte und Gesamtstruktur im Grunde gleich. Ein Design-System gibt dem Modell eine Palette; es bringt ihm nicht bei, wie man komponiert.

Coaching

Ein anderer Ansatz: dem Modell einen großen Satz von Anweisungen geben, wie es gestalten soll. Es dazu auffordern, Dinge zu tun, die es normalerweise nicht tun würde. Der Claude AI Chatbot hat eine Fähigkeit, die genau das tut:

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:

Purpose: What problem does this interface solve? Who uses it?
Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
Constraints: Technical requirements (framework, performance, accessibility).
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail

Frontend Aesthetics Guidelines
Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

Das ist eine echte Verbesserung. Das Gesamtlayout ist ähnlich wie zuvor. Aber es sieht endlich wie eine echte Therapeuten-Website aus, mit weicheren Schriftarten und einem einzigartigen Button-Stil. Wenn man sein eigenes Bild einfügen würde, könnte man das problemlos veröffentlichen.

In unseren Tests haben wir festgestellt, dass benutzerdefinierte Anweisungen die Wiederholung nicht beheben. Das Modell greift immer noch auf die gleichen Muster zurück, also sieht es im Grunde immer noch wie die Standard-KI-Website aus. Nur eine viel hübschere Version davon.

Außerdem ist es schwieriger, überstrapazierte Muster zu vermeiden, als der Prompt von Claude vermuten lässt. Dort heißt es:

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts)

Also überstrapaziert das Modell stattdessen andere Schriftarten wie Jost und Cormorant Garamond. Und jetzt kann es Situationen nicht mehr bewältigen, in denen Inter die richtige Wahl ist. Im Grunde kann man seine schlechten Gewohnheiten herausdrängen, aber so oder so wird es die gleichen Dinge wiederholt tun.

Referenzbilder

Was wäre, wenn man Worte ganz überspringt und dem Modell einfach zeigt, was man will? Ihm einen Screenshot eines Designs geben, das einem gefällt, und es bitten, etwas Ähnliches zu bauen.

Das war die erste Taktik, bei der das Modell neue Layouts außerhalb der immer gleichen 2-3 erstellt hat. Es macht von sich aus nie ein halbseitiges Bild.

Bilder sind eine super effiziente Art, viele Informationen zu teilen. Das Modell erfasst Layout, Abstände, Farbbeziehungen und Dichte auf einmal: Dinge, an die man beim Schreiben eines Prompts nie denken würde. Aber es ist fragil. Es kann komplexe Layouts oder Animationen nicht reproduzieren. Und wenn das Modell mehr Inhalt außerhalb der Referenz ergänzen muss, fällt es zurück auf den Standard.

Code- und Stil-Vorlagen

Das ist vielleicht die brachialste Idee. Einfach Code vorgeben. Das macht ChatGPT gerade. Es verwendet eine Vorlagenbibliothek beim Erstellen von Websites.

Wenn man das tut, steigt die Qualität natürlich deutlich. Man gibt der KI einfach die Antworten. Aber die meisten Leute haben keinen vorhandenen Code für das, was sie wollen. Das ist also hauptsächlich eine Taktik für Plattformentwickler, die ein Werkzeug für andere bauen.

Allerdings gibt es einen Haken:

"Make a therapist website"

"Make a lawyer website"

"Make a plumber website"

"Make a bakery website"

Wenn man der KI Beispiele gibt, erstellt sie Websites, die bemerkenswert ähnlich aussehen, und nimmt nur die minimalen Anpassungen vor, die nötig sind, um zum Kontext zu passen. Wenn ChatGPT also gerade Websites erstellt, sieht es unabhängig vom Prompt wie das gleiche Tech-Startup aus.

Leider bin ich mir nicht sicher, ob wir mit all diesen Taktiken etwas Besseres als eine generische Wix-Vorlage geschaffen haben.

Selbst-Iteration

Warum nicht das Modell seine eigene Ausgabe betrachten und verbessern lassen? Ein Wix-Designer darf schließlich viele Iterationen machen.

Theoretisch löst das alles. In der Praxis arbeitet es 20 Minuten, verbraucht 10 $ an Tokens und erreicht schnell ein Plateau. Zum Beispiel habe ich es auf der Lighthouse-Website von vorhin iterieren lassen. Es hat nicht einmal den unlesbaren Button bemerkt.

Selbst-Iteration ist wahrscheinlich die Zukunft. Aber die heutigen Modelle sind noch nicht ganz so weit.

Nachdem wir all diese Ansätze untersucht hatten, hatten wir einige echte Möglichkeiten, den Stil zu verbessern. Aber darüber hinaus hatten wir das Gefühl, dass wir verstanden haben, wie KI-Modelle auf einer viel tieferen Ebene funktionieren.

Was wir über KI-Modelle gelernt haben

Modelle mögen den Standardstil wirklich

Es gibt eine Standard-Ästhetik, die in die Modelle eingebaut ist. Sie entspricht der durchschnittlichen Website in den Trainingsdaten. Jedes Mal, wenn das Modell eine Entscheidung trifft, verwendet es den Standardstil, es sei denn, es hat einen expliziten Grund dagegen. Deshalb sind KI-Websites so erkennbar, und deshalb bringt einen Selbst-Iteration nicht wirklich weiter. Das Modell konvergiert nicht zu einem einzigartigen Design. Es konvergiert zum Standard. Wenn man möchte, dass KI das Muster durchbricht, muss man ihr etwas geben, das sie vom Standard abbringt, wie Referenzbilder oder Code-Beispiele.

Bilder haben eine höhere Bandbreite als Worte

Es ist schwer, das Modell mit Worten zu steuern. Man kann einen Absatz darüber schreiben, dass man etwas "Sauberes, Modernes mit viel Weißraum" möchte, aber es ist fast zwecklos. Man landet immer beim Standardstil. Bilder können das Modell dazu bringen, einzigartige Designs zu erstellen, weil sie mehr Informationen tragen. Ein Screenshot kodiert Hunderte von Mikro-Entscheidungen über Abstände, Farben und Layouts, die man mit Worten nicht definieren kann. Sofern man also keine Code-Beispiele hat, sind Referenzbilder der beste Weg, KI zu steuern.

Vorab bauen ist eine Abwägungskurve

Jede Taktik, die wir ausprobiert haben, war eine Form der Vorab-Entscheidung für die KI. Wenn man ihr mehr gibt, kann man die Qualitätsobergrenze anheben, aber sie verliert an Flexibilität. Sich auf jeden möglichen Anwendungsfall vorzubereiten, ist allerdings nur für eine allgemeine Plattform wie Repaint wichtig. Wenn es nur für einen selbst ist, kann (und sollte) man der KI spezifische Referenzen geben, um die visuelle Qualität zu maximieren.

Wie man mit KI bessere Designs erstellt

Der einfachste Weg, Generisches zu vermeiden, ist der KI einzigartige visuelle Referenzen zu geben, wie Bilder von Websites, die einem gefallen, Code-Beispiele oder beides. Sobald man den Stil hat, sollte die KI weitere passende Abschnitte generieren können. Das ist viel effektiver, als immer wieder neue Anweisungen zu geben, was die meisten Leute tun.

Oder wenn das Finden von Referenzen und Aufbauen eines Stils einschüchternd wirkt, könnte man Repaint ausprobieren. Wir haben eine große Bibliothek von Stilen mit Code-Beispielen und Design-Variablen aufgebaut. Die KI wird nicht in einen einzigen Stil gezwungen, weil wir viele Optionen haben.

Allgemeiner gesagt: Egal welches visuelle KI-Tool man nutzt, ob App-Design, Bildgenerierung oder Videogenerierung, statt zu sagen "mach es hochwertiger," sollte man der KI mehr Screenshots und Beispiele geben. Das ist dramatisch effektiver.