En bild säger mer än tusen tokens

En del av mitt jobb på Repaint är att få AI att generera webbplatser som faktiskt ser bra ut. Det är förvånansvärt svårt. AI-modeller tenderar att falla in i samma visuella klichéer om och om igen. Det är så konsekvent att en "AI-webbplats" håller på att bli en igenkännbar estetik.

Vi testade dussintals sätt att bryta det mönstret. På vägen fick vi en mycket djupare förståelse för modellerna, som vi ville dela med oss av.

Det här är en ganska typisk AI-webbplats direkt ur lådan: generisk stil, minimalt innehåll och överanvända layouter. Och förstås, den enstaka oläsbara knappen.

Jag gav den bara en liten mängd vägledning. Det kan verka orättvist, men jag tycker det är ett bra test. Självklart, om du fortsätter ge instruktioner kan du successivt göra om detta till en fantastisk webbplats. Men då gör du all design. Modellen kodar bara. De flesta kan inte göra det. Det stora genombrottet är när AI kan designa utan att en människa specificerar varje detalj.

AI:ns standardstil är i princip ett universellt problem. Här syns det på en terapeutwebbplats. Man skulle tro att en terapeutwebbplats skulle se dramatiskt annorlunda ut. Men nej, den gör ungefär samma webbplats med gröna knappar.

Hur kan man förbättra AI-webbplatser?

Designsystem

Ett uppenbart första steg: förbygg färger, typsnitt, rundningar och skuggor. Dessa beslut är svåra att få rätt när man bara tittar på kod. Att starta AI:n med en bra uppsättning innebär färre sätt att göra fel.

Det hjälper lite. Man får färre grova färgmisstag. Och den använde en bildbakgrund här. Men överlag är layouterna, innehållsdensiteten och den övergripande strukturen i princip desamma. Ett designsystem ger modellen en palett; det lär den inte hur man komponerar.

Coaching

Ett annat tillvägagångssätt: ge modellen en stor uppsättning instruktioner om hur man designar. Instruera den att göra saker den normalt inte skulle göra. Claude AI:s huvudchattbot har en funktion som gör precis detta:

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 är en verklig förbättring. Den övergripande layouten liknar den förra. Men den ser äntligen ut som en riktig terapeutwebbplats, med mjukare typsnitt och en unik knappstil. Om du bytte ut bilden skulle du utan problem kunna publicera den.

I våra tester fann vi att anpassade instruktioner inte löser upprepningen. Modellen använder fortfarande samma mönster, så den ser fortfarande i princip ut som standard-AI-webbplatsen. Bara en mycket snyggare version av den.

Dessutom är det svårare att undvika överanvända mönster än vad Claudes prompt antyder. De säger:

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

Så i stället överanvänder modellen andra typsnitt som Jost och Cormorant Garamond. Och nu kan den inte hantera situationer där Inter är rätt val. I princip kan du tvinga bort dess dåliga vanor, men på ett eller annat sätt kommer den att göra samma saker upprepade gånger.

Referensbilder

Tänk om du skippar ord helt och bara visar modellen vad du vill ha? Mata den med en skärmdump av en design du gillar och be den bygga något liknande.

Det här var den första taktiken där modellen skapade nya layouter utanför de samma 2-3 den alltid gör. Den gör aldrig en halvskärmsbild på egen hand.

Bilder är ett supereffektivt sätt att dela mycket information. Modellen fångar upp layout, avstånd, färgrelationer och densitet på en gång: saker du aldrig skulle tänka på att beskriva i en prompt. Men det är skört. Den kan inte reproducera komplexa layouter eller animationer. Och om modellen måste fylla i mer innehåll utanför referensen, faller den tillbaka till standardstilen.

Kod- och stilmallar

Det här är kanske den mest brutala idén. Ge den bara kod. Det här är vad ChatGPT gör just nu. Den använder ett mallbibliotek när den skapar webbplatser.

När du gör det här ökar kvaliteten naturligtvis mycket. Du ger bara AI:n svaren. Men de flesta har inte redan kod för det de vill ha. Så det här är framför allt en taktik för plattformsbyggare, som skapar ett verktyg för andra.

Fast det finns en hake:

"Make a therapist website"

"Make a lawyer website"

"Make a plumber website"

"Make a bakery website"

Om du ger AI:n exempel skapar den webbplatser som ser anmärkningsvärt lika ut, och gör minimala justeringar för att passa kontexten. Så när ChatGPT skapar webbplatser just nu, oavsett prompt, ser det ut som samma teknikstartup.

Tyvärr, även med alla dessa taktiker, är jag inte säker på att vi har gjort något bättre än en generisk Wix-mall.

Själviteration

Varför inte låta modellen titta på sitt eget resultat och förbättra det? En Wix-designer får ju göra massor av iterationer.

I teorin löser det här allt. I praktiken kör den i 20 minuter, spenderar $10 i tokens och platåar snabbt. Till exempel lät jag den iterera på lighthouse-webbplatsen från tidigare. Den märkte inte ens den oläsbara knappen.

Själviteration är förmodligen framtiden. Men dagens modeller är inte riktigt redo.

Efter att ha utforskat alla dessa tillvägagångssätt hade vi några verkliga alternativ för att förbättra stilen. Men utöver det kände vi att vi förstod hur AI-modeller fungerar på en mycket djupare nivå.

Vad vi lärde oss om AI-modeller

Modeller föredrar verkligen standardstilen

Det finns en standardestetik inbyggd i modellerna. Den är som den genomsnittliga webbplatsen i träningsdatan. Varje gång den fattar ett beslut använder den standardstilen om den inte har en uttrycklig anledning att inte göra det. Det är därför AI-webbplatser är så igenkännbara, och varför själviteration egentligen inte leder någonstans. Modellen konvergerar inte mot unik design. Den konvergerar mot standarden. Om du vill att AI:n ska bryta mönstret måste du ge den något som får den bort från standarden, som referensbilder eller kodexempel.

Bilder har högre bandbredd än ord

Det är svårt att styra modellen med ord. Du kan skriva ett stycke om att vilja ha "rent, modernt, med gott om vitt utrymme" men det är nästan meningslöst. Du hamnar alltid med standardstilen. Bilder kan få modellen att skapa unika designer eftersom de bär mer information. En skärmdump kodar hundratals mikrobeslut om avstånd, färger och layouter som du inte kan definiera med ord. Så om du inte har kodexempel är referensbilder det bästa sättet att styra AI:n.

Att förbygga är en avvägningskurva

Varje taktik vi provade var en form av att fatta beslut åt AI:n i förväg. När du ger den mer kan du höja kvalitetstaket, men den förlorar flexibilitet. Att förbereda sig för varje tänkbart användningsfall är bara viktigt för en generell plattform som Repaint. Om det bara är för dig själv kan (och bör) du ge AI:n specifika referenser för att maximera den visuella kvaliteten.

Hur man skapar bättre designer med AI

Det enklaste sättet att undvika det generiska är att ge AI:n unika visuella referenser, som bilder på webbplatser du gillar, kodexempel, eller bådadera. När du har stilen bör AI:n kunna generera fler sektioner som matchar. Det här är mycket mer effektivt än att bara ge instruktioner om och om igen, vilket är vad de flesta gör.

Eller om det känns överväldigande att hitta referenser och bygga en stil kan du prova Repaint. Vi har byggt ett stort bibliotek av stilar med kodexempel och designvariabler. AI:n är inte låst till en enda stil eftersom vi har många alternativ.

Mer generellt, i alla visuella AI-verktyg, oavsett om det gäller appdesign, bildgenerering eller videogenerering, i stället för att säga "gör det mer premium," prova att ge den fler skärmdumpar och exempel. Det är dramatiskt mer effektivt.