Een beeld zegt meer dan duizend tokens

Een deel van mijn werk bij Repaint is om AI websites te laten genereren die er echt goed uitzien. Het is verrassend moeilijk. AI-modellen vervallen steeds weer in dezelfde visuele clichés. Het is zo consistent dat een "AI-website" een herkenbare esthetiek aan het worden is.

We hebben tientallen manieren getest om dat patroon te doorbreken. Onderweg kregen we een veel dieper begrip van de modellen, dat we wilden delen.

Dit is een vrij standaard kant-en-klare AI-website: generieke stijl, minimale inhoud en overmatig gebruikte layouts. En natuurlijk de af en toe onleesbare knop.

Ik gaf slechts een minimale hoeveelheid richting. Dat lijkt misschien oneerlijk, maar ik vind het een goede test. Natuurlijk kun je door te blijven aansturen dit stap voor stap omvormen tot een geweldige website. Maar dan doe jij al het ontwerpwerk. Het model programmeert alleen maar. De meeste mensen weten niet hoe ze dat moeten doen. De grote doorbraak is wanneer AI kan ontwerpen zonder dat een mens elk detail specificeert.

De standaard AI-stijl is in feite een universeel probleem. Hier zie je het op een therapeut-website. Je zou denken dat een therapeut-website er dramatisch anders uitziet. Maar nee, het maakt gewoon ongeveer dezelfde site met groene knoppen.

Hoe kun je AI-websites verbeteren?

Ontwerpsystemen

Een voor de hand liggende eerste stap: bouw de kleuren, lettertypen, afronding en schaduwen vooraf op. Deze beslissingen zijn moeilijk goed te krijgen als je alleen naar code kijkt. De AI starten met een goede set betekent minder mogelijkheden om fouten te maken.

Het helpt een beetje. Je krijgt minder grove kleurfouten. En het gebruikte hier een achtergrondafbeelding. Maar over het geheel genomen zijn de layouts, inhoudsdichtheid en algehele structuur in feite hetzelfde. Een ontwerpsysteem geeft het model een palet; het leert het niet hoe het moet componeren.

Coaching

Een andere aanpak: geef het model een grote set instructies over hoe te ontwerpen. Stuur het aan om dingen te doen die het normaal niet zou doen. De hoofd-chatbot van Claude AI heeft een vaardigheid die precies dit doet:

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.

Het is een echte verbetering. De algehele layout is vergelijkbaar met hiervoor. Maar het ziet er eindelijk uit als een echte therapeut-website, met zachtere lettertypen en een unieke knopstijl. Als je je eigen afbeelding zou invoegen, zou je dit zo kunnen publiceren.

In onze tests ontdekten we dat aangepaste instructies de herhaling niet oplossen. Het model grijpt nog steeds naar dezelfde patronen, dus het ziet er in feite nog steeds uit als de standaard AI-site. Alleen een veel mooiere versie ervan.

Bovendien is het moeilijker om overmatig gebruikte patronen te vermijden dan de prompt van Claude zou suggereren. Ze zeggen:

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

Dus in plaats daarvan gebruikt het model andere lettertypen te veel, zoals Jost en Cormorant Garamond. En nu kan het situaties niet aan waar Inter de juiste keuze is. In feite kun je de slechte gewoonten er wel uit dwingen, maar op de een of andere manier gaat het steeds dezelfde dingen doen.

Referentieafbeeldingen

Wat als je woorden helemaal overslaat en het model gewoon laat zien wat je wilt? Voer een screenshot van een ontwerp dat je leuk vindt en vraag het om iets vergelijkbaars te bouwen.

Dit was de eerste tactiek waarbij het model nieuwe layouts maakte buiten de 2-3 die het altijd doet. Het maakt nooit uit zichzelf een afbeelding over een halve pagina.

Afbeeldingen zijn een superefficiënte manier om veel informatie te delen. Het model pikt layout, witruimte, kleurverhoudingen en dichtheid allemaal tegelijk op: dingen waar je nooit aan zou denken om te beschrijven in een prompt. Maar het is fragiel. Het kan geen complexe layouts of animaties reproduceren. En als het model meer inhoud moet aanvullen buiten de referentie, valt het terug naar de standaardstijl.

Code- en stijltemplates

Dit is misschien het meest brute-force idee. Geef het gewoon code. Dit is wat ChatGPT op dit moment doet. Het gebruikt een templatebibliotheek wanneer het sites maakt.

Als je dit doet, stijgt de kwaliteit uiteraard flink. Je geeft de AI gewoon de antwoorden. Maar de meeste mensen hebben niet al code voor wat ze willen. Dus dit is voornamelijk een tactiek voor platformbouwers, die een tool maken voor andere mensen.

Maar er is wel een valkuil:

"Make a therapist website"

"Make a lawyer website"

"Make a plumber website"

"Make a bakery website"

Als je de AI voorbeelden geeft, maakt het websites die opvallend op elkaar lijken, en doet het de minimale aanpassingen die nodig zijn om bij de context te passen. Dus wanneer ChatGPT nu sites maakt, ongeacht de prompt, lijkt het op dezelfde tech-startup.

Helaas, zelfs met al deze tactieken, weet ik niet zeker of we iets beters hebben gemaakt dan een generiek Wix-template.

Zelf-iteratie

Waarom laat je het model niet naar zijn eigen output kijken en het verbeteren? Een Wix-ontwerper mag tenslotte ook veel iteraties doen.

In theorie lost dit alles op. In de praktijk draait het 20 minuten, verbruikt het $10 aan tokens en bereikt het snel een plateau. Ik liet het bijvoorbeeld itereren op de lighthouse-site van eerder. Het merkte niet eens de onleesbare knop op.

Zelf-iteratie is waarschijnlijk de toekomst. Maar de modellen van vandaag zijn er nog niet helemaal klaar voor.

Na het verkennen van al deze benaderingen hadden we echte opties om de stijl te verbeteren. Maar daarnaast hadden we het gevoel dat we begrepen hoe AI-modellen werken op een veel dieper niveau.

Wat we leerden over AI-modellen

Modellen houden echt van de standaardstijl

Er is een standaard esthetiek ingebakken in de modellen. Het is als de gemiddelde website in de trainingsdata. Elke keer dat het een beslissing neemt, gebruikt het de standaardstijl tenzij het een expliciete reden heeft om dat niet te doen. Daarom zijn AI-sites zo herkenbaar, en daarom brengt zelf-iteratie je eigenlijk nergens. Het model convergeert niet naar een uniek ontwerp. Het convergeert naar de standaard. Als je wilt dat AI het patroon doorbreekt, moet je het iets geven dat het van de standaard afbrengt, zoals referentieafbeeldingen of codevoorbeelden.

Afbeeldingen hebben meer bandbreedte dan woorden

Het is moeilijk om het model met woorden te sturen. Je kunt een hele alinea schrijven over "strak, modern, met veel witruimte" maar het is bijna zinloos. Je eindigt altijd met de standaardstijl. Afbeeldingen kunnen het model unieke ontwerpen laten maken omdat ze meer informatie bevatten. Een screenshot codeert honderden microbeslissingen over witruimte, kleuren en layouts die je niet in woorden kunt vatten. Dus tenzij je codevoorbeelden hebt, zijn referentieafbeeldingen de beste manier om AI te sturen.

Vooraf bouwen is een afwegingscurve

Elke tactiek die we probeerden was een vorm van het vooraf nemen van beslissingen voor de AI. Wanneer je het meer geeft, kun je het kwaliteitsplafond verhogen, maar het verliest flexibiliteit. Je voorbereiden op elk potentieel gebruiksscenario is alleen belangrijk voor een algemeen platform zoals Repaint. Als het alleen voor jezelf is, kun je (en zou je) de AI specifieke referenties geven om de visuele kwaliteit te maximaliseren.

Hoe maak je betere ontwerpen met AI

De eenvoudigste manier om het generieke te vermijden is om de AI unieke visuele referenties te geven, zoals afbeeldingen van sites die je mooi vindt, codevoorbeelden, of beide. Zodra je de stijl hebt, zou de AI meer secties moeten kunnen genereren die daarbij passen. Dit is veel effectiever dan steeds opnieuw aansturen, wat de meeste mensen doen.

Of als het vinden van referenties en het opbouwen van een stijl intimiderend is, kun je Repaint proberen. We hebben een grote bibliotheek van stijlen gebouwd met codevoorbeelden en ontwerpvariabelen. De AI wordt niet gedwongen tot één stijl omdat we veel opties hebben.

In bredere zin, bij elke visuele AI-tool, of het nu app-ontwerp, beeldgeneratie of videogeneratie is, in plaats van te zeggen "maak het er meer premium uit laten zien," probeer meer screenshots en voorbeelden te geven. Het is dramatisch effectiever.