Et billede siger mere end tusind tokens

En del af mit arbejde hos Repaint er at få AI til at generere hjemmesider, der rent faktisk ser godt ud. Det er overraskende svært. AI-modeller har en tendens til at falde i de samme visuelle klichéer igen og igen. Det er så konsekvent, at en "AI-hjemmeside" er ved at blive en genkendelig æstetik.

Vi testede dusinvis af måder at bryde det mønster på. Undervejs fik vi en meget dybere forståelse af modellerne, som vi gerne ville dele.

Dette er en ret standard AI-hjemmeside lige ud af boksen: generisk stil, minimalt indhold og overbrugte layouts. Og selvfølgelig den lejlighedsvise ulæselige knap.

Jeg gav den kun en minimal mængde retning. Det kan virke unfair, men jeg synes, det er en god test. Selvfølgelig kan du, hvis du bliver ved med at prompte, gradvist forvandle dette til en fantastisk hjemmeside. Men så er det dig, der laver alt designet. Modellen koder bare. De fleste mennesker ved ikke, hvordan man gør det. Det store gennembrud er, når AI kan designe uden at et menneske specificerer hver eneste detalje.

AI's standardstil er grundlæggende et universelt problem. Her ses det på en terapeut-hjemmeside. Man skulle tro, at en terapeut-hjemmeside ville se dramatisk anderledes ud. Men nej, den laver bare nogenlunde den samme side med grønne knapper.

Hvordan kan man forbedre AI-hjemmesider?

Designsystemer

Et oplagt første skridt: forhåndsbyg farverne, skrifttyperne, afrundingerne og skyggerne. Disse beslutninger er svære at ramme rigtigt, når man bare kigger på kode. At starte AI'en med et godt sæt betyder færre muligheder for at lave fejl.

Det hjælper en lille smule. Man får færre grove farvefejl. Og den brugte en billedbaggrund her. Men overordnet set er layouts, indholdstæthed og den generelle struktur stort set den samme. Et designsystem giver modellen en palette; det lærer den ikke at komponere.

Coaching

En anden tilgang: giv modellen et stort sæt instruktioner om, hvordan den skal designe. Prompt den til at gøre ting, den normalt ikke ville gøre. Den primære Claude AI-chatbot har en evne, der gør præcis 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 reel forbedring. Det overordnede layout ligner det forrige. Men det ligner endelig en rigtig terapeut-hjemmeside, med blødere skrifttyper og en unik knapstil. Hvis du byttede dit billede ind, kunne du sagtens udgive den.

I vores tests fandt vi, at brugerdefinerede instruktioner ikke løser gentagelse. Modellen griber stadig efter de samme mønstre, så den ligner stadig grundlæggende standard-AI-hjemmesiden. Bare en meget pænere version af den.

Desuden er det sværere at undgå overbrugte mønstre, end Claudes prompt antyder. De siger:

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

Så i stedet overbruger modellen andre skrifttyper som Jost og Cormorant Garamond. Og nu kan den ikke håndtere situationer, hvor Inter er det rigtige valg. Så grundlæggende kan du tvinge dens dårlige vaner væk, men på den ene eller anden måde vil den gøre de samme ting gentagne gange.

Referencebilleder

Hvad hvis du springer ordene helt over og bare viser modellen, hvad du vil have? Giv den et skærmbillede af et design, du kan lide, og bed den bygge noget lignende.

Dette var den første taktik, hvor modellen lavede nye layouts uden for de samme 2-3, den altid laver. Den laver aldrig et halvskærms-billede på egen hånd.

Billeder er en super effektiv måde at dele en masse information på. Modellen opfanger layout, afstand, farverelationer og tæthed på én gang: ting, man aldrig ville tænke på at beskrive i en prompt. Men det er skrøbeligt. Den kan ikke genskabe komplekse layouts eller animationer. Og hvis modellen skal udfylde mere indhold uden for referencen, hopper den tilbage til standarden.

Kode- og stilskabeloner

Dette er måske den mest brutale idé. Giv den bare kode. Det er det, ChatGPT gør lige nu. Den bruger et skabelonbibliotek, når den laver hjemmesider.

Når du gør dette, stiger kvaliteten selvfølgelig markant. Du giver bare AI'en svarene. Men de fleste mennesker har ikke allerede kode til det, de vil have. Så dette er primært en taktik for platformsbyggere, der laver et værktøj til andre mennesker.

Men der er en hage:

"Make a therapist website"

"Make a lawyer website"

"Make a plumber website"

"Make a bakery website"

Hvis du giver AI'en eksempler, laver den hjemmesider, der ligner hinanden bemærkelsesværdigt meget, og den laver de minimale justeringer, der kræves for at matche konteksten. Så når ChatGPT laver hjemmesider lige nu, uanset prompten, ligner det den samme tech-startup.

Desværre, selv med alle disse taktikker, er jeg ikke sikker på, at vi har lavet noget bedre end en generisk Wix-skabelon.

Selviteration

Hvorfor ikke lade modellen se på sit eget output og forbedre det? En Wix-designer får jo lov til at lave mange iterationer.

I teorien løser dette alt. I praksis arbejder den i 20 minutter, bruger $10 i tokens og når hurtigt et plateau. For eksempel fik jeg den til at iterere på lighthouse-hjemmesiden fra tidligere. Den bemærkede ikke engang den ulæselige knap.

Selviteration er sandsynligvis fremtiden. Men dagens modeller er ikke helt klar endnu.

Efter at have udforsket alle disse tilgange havde vi nogle reelle muligheder for at forbedre stilen. Men derudover følte vi, at vi forstod, hvordan AI-modeller fungerer på et meget dybere niveau.

Hvad vi lærte om AI-modeller

Modeller kan virkelig godt lide standardstilen

Der er en standardæstetik bagt ind i modellerne. Den er som den gennemsnitlige hjemmeside i træningsdataene. Hver gang den træffer en beslutning, bruger den standardstilen, medmindre den har en eksplicit grund til ikke at gøre det. Derfor er AI-hjemmesider så genkendelige, og derfor fører selviteration faktisk ikke nogen steder hen. Modellen konvergerer ikke mod unikt design. Den konvergerer mod standarden. Hvis du vil have AI til at bryde mønstret, skal du give den noget, der får den væk fra standarden, som referencebilleder eller kodeeksempler.

Billeder har større båndbredde end ord

Det er svært at styre modellen med ord. Du kan skrive et afsnit om at ville have noget "rent, moderne, med masser af hvidt rum," men det er næsten nytteløst. Du ender altid med standardstilen. Billeder kan få modellen til at lave unikke designs, fordi de bærer mere information. Et skærmbillede indkoder hundredvis af mikrobeslutninger om afstand, farver og layouts, som du ikke kan definere med ord. Så medmindre du har kodeeksempler, er referencebilleder den bedste måde at styre AI på.

Forhåndsbygning er en afvejningskurve

Hver taktik, vi prøvede, var en form for forhåndsbeslutninger for AI'en. Når du giver den mere, kan du hæve kvalitetsloftet, men den mister fleksibilitet. At forberede sig på alle potentielle brugsscenarier er kun vigtigt for en generel platform som Repaint. Hvis det bare er til dig selv, kan du (og bør du) give AI'en specifikke referencer for at maksimere den visuelle kvalitet.

Sådan laver du bedre designs med AI

Den simpleste måde at undgå det generiske på er at give AI'en unikke visuelle referencer, som billeder af hjemmesider du kan lide, kodeeksempler, eller begge dele. Når du har stilen, burde AI'en kunne generere flere sektioner, der matcher. Dette er langt mere effektivt end bare at prompte igen og igen, hvilket er det, de fleste mennesker gør.

Eller hvis det virker uoverskueligt at finde referencer og bygge en stil, kan du prøve Repaint. Vi har bygget et stort bibliotek af stilarter med kodeeksempler og designvariabler. AI'en er ikke tvunget ind i én enkelt stil, fordi vi har mange muligheder.

Mere bredt, på tværs af alle visuelle AI-værktøjer, uanset om det er app-design, billedgenerering eller videogenerering: i stedet for at sige "gør det mere premium," prøv at give den flere skærmbilleder og eksempler. Det er dramatisk mere effektivt.