Et bilde er verdt tusen tokens

En del av jobben min i Repaint er å få AI til å generere nettsider som faktisk ser bra ut. Det er overraskende vanskelig. AI-modeller har en tendens til å falle inn i de samme visuelle klisjeene om og om igjen. Det er så konsekvent at en "AI-nettside" er i ferd med å bli en gjenkjennelig estetikk.

Vi testet dusinvis av måter å bryte det mønsteret på. Underveis fikk vi en mye dypere forståelse av modellene, som vi ønsket å dele.

Dette er en ganske standard AI-nettside rett ut av boksen: generisk stil, minimalt innhold og overbrukte oppsett. Og selvfølgelig, den tilfeldige uleselige knappen.

Jeg ga den bare en minimal mengde retning. Det kan virke urettferdig, men jeg synes det er en god test. Hvis du fortsetter å gi instruksjoner, kan du selvfølgelig gradvis gjøre dette til en flott nettside. Men da gjør du all designen. Modellen bare koder. De fleste vet ikke hvordan de skal gjøre det. Det store gjennombruddet er når AI kan designe uten at et menneske spesifiserer hver eneste detalj.

Standard AI-stilen er i bunn og grunn et universelt problem. Her ser du den på en terapeutnettside. Man skulle tro en terapeutnettside ville sett dramatisk annerledes ut. Men nei, den lager omtrent den samme siden med grønne knapper.

Hvordan kan du forbedre AI-nettsider?

Designsystemer

Et åpenbart første trekk: forhåndsbygg fargene, skrifttypene, avrundingen og skyggene. Disse beslutningene er vanskelige å få riktig når du bare ser på kode. Å starte AI-en med et godt sett betyr færre måter å gjøre feil på.

Det hjelper litt. Du får færre grove fargefeil. Og her brukte den en bildebakgrunn. Men totalt sett er oppsettene, innholdstettheten og den generelle strukturen i bunn og grunn den samme. Et designsystem gir modellen en palett, men det lærer den ikke å komponere.

Coaching

En annen tilnærming: gi modellen et stort sett med instruksjoner om hvordan den skal designe. Be den gjøre ting den normalt ikke ville gjort. Hoved-chatboten til Claude AI har en ferdighet som gjør akkurat dette:

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.

Det er en reell forbedring. Det overordnede oppsettet er likt som før. Men det ser endelig ut som en ekte terapeutnettside, med mykere skrifttyper og en unik knappestil. Hvis du byttet inn ditt eget bilde, kunne du absolutt publisert dette.

I testene våre fant vi at tilpassede instruksjoner ikke fikser gjentakelse. Modellen strekker seg fortsatt etter de samme mønstrene, så den ser fortsatt i bunn og grunn ut som standard AI-nettside. Bare en mye penere versjon av den.

Det er også vanskeligere å unngå overbrukte mønstre enn Claudes prompt antyder. De sier:

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

Så i stedet overbruker modellen andre skrifttyper som Jost og Cormorant Garamond. Og nå kan den ikke håndtere situasjoner der Inter er det riktige valget. I bunn og grunn kan du tvinge bort de dårlige vanene, men på en eller annen måte kommer den til å gjøre de samme tingene gjentatte ganger.

Referansebilder

Hva om du dropper ord helt og bare viser modellen hva du vil ha? Mate den med et skjermbilde av et design du liker og be den bygge noe lignende.

Dette var den første taktikken der modellen laget nye oppsett utenom de samme 2-3 den alltid bruker. Den lager aldri et halvskjermsbilde på egen hånd.

Bilder er en supereffektiv måte å dele mye informasjon på. Modellen fanger opp oppsett, mellomrom, fargeforhold og tetthet alt på en gang: ting du aldri ville tenkt på å beskrive i en prompt. Men det er skjørt. Den kan ikke reprodusere komplekse oppsett eller animasjoner. Og hvis modellen må fylle inn mer innhold utenfor referansen, hopper den tilbake til standarden.

Kode- og stilmaler

Dette er kanskje den mest brute-force-aktige ideen. Bare gi den kode. Dette er det ChatGPT gjør akkurat nå. Den bruker et malbibliotek når den lager nettsider.

Når du gjør dette, øker kvaliteten åpenbart mye. Du gir bare AI-en svarene. Men de fleste har ikke allerede kode for det de vil ha. Så dette er hovedsakelig en taktikk for plattformbyggere som lager et verktøy for andre.

Men det er en hake:

"Make a therapist website"

"Make a lawyer website"

"Make a plumber website"

"Make a bakery website"

Hvis du gir AI-en eksempler, lager den nettsider som ser bemerkelsesverdig like ut, og gjør de minimale justeringene som trengs for å matche konteksten. Så når ChatGPT lager nettsider akkurat nå, uansett prompt, ser det ut som den samme teknologistartupen.

Dessverre, selv med alle disse taktikkene, er jeg ikke sikker på at vi har laget noe bedre enn en generisk Wix-mal.

Selviterasjon

Hvorfor ikke la modellen se på sin egen utdata og forbedre den? En Wix-designer får tross alt gjøre mange iterasjoner.

I teorien løser dette alt. I praksis koker den i 20 minutter, bruker $10 i tokens og stagnerer raskt. For eksempel lot jeg den iterere på lighthouse-siden fra tidligere. Den la ikke engang merke til den uleselige knappen.

Selviterasjon er sannsynligvis fremtiden. Men dagens modeller er ikke helt klare ennå.

Etter å ha utforsket alle disse tilnærmingene hadde vi noen reelle alternativer for å forbedre stilen. Men utover det følte vi at vi forsto hvordan AI-modeller fungerer på et mye dypere nivå.

Hva vi lærte om AI-modeller

Modeller foretrekker virkelig standardstilen

Det er en standardestetikk innebygd i modellene. Den er som den gjennomsnittlige nettsiden i treningsdataene. Hver gang den tar en beslutning, bruker den standardstilen med mindre den har en eksplisitt grunn til å la være. Derfor er AI-nettsider så gjenkjennelige, og derfor fører ikke selviterasjon noen vei. Modellen konvergerer ikke mot et unikt design. Den konvergerer mot standarden. Hvis du vil at AI skal bryte mønsteret, må du gi den noe som får den bort fra standarden, som referansebilder eller kodeeksempler.

Bilder har høyere båndbredde enn ord

Det er vanskelig å styre modellen med ord. Du kan skrive et avsnitt om å ønske "rent, moderne, med mye luft," men det er nesten meningsløst. Du ender alltid opp med standardstilen. Bilder kan få modellen til å lage unike design fordi de bærer mer informasjon. Et skjermbilde koder hundrevis av mikrobeslutninger om mellomrom, farger og oppsett som du ikke kan definere med ord. Så med mindre du har kodeeksempler, er referansebilder den beste måten å styre AI på.

Forhåndsbygging er en avveiningskurve

Hver taktikk vi prøvde var en form for å ta beslutninger på forhånd for AI-en. Når du gir den mer, kan du heve kvalitetstaket, men den mister fleksibilitet. Å forberede seg på hvert potensielle brukstilfelle er bare viktig for en generell plattform som Repaint. Hvis det bare er for deg selv, kan (og bør) du gi AI-en spesifikke referanser for å maksimere visuell kvalitet.

Hvordan lage bedre design med AI

Den enkleste måten å unngå det generiske på er å gi AI-en unike visuelle referanser, som bilder av nettsider du liker, kodeeksempler, eller begge deler. Når du har stilen, bør AI-en kunne generere flere seksjoner som matcher. Dette er langt mer effektivt enn å bare gi instruksjoner om og om igjen, som er det de fleste gjør.

Eller hvis det er skremmende å finne referanser og bygge en stil, kan du prøve Repaint. Vi har bygget et stort bibliotek med stiler med kodeeksempler og designvariabler. AI-en er ikke tvunget inn i en enkelt stil fordi vi har mange alternativer.

Mer generelt, på tvers av alle visuelle AI-verktøy, enten det er appdesign, bildegenerering eller videogenerering: i stedet for å si "gjør det mer premium," prøv å gi den flere skjermbilder og eksempler. Det er dramatisk mer effektivt.