Un'immagine vale più di mille token

Parte del mio lavoro in Repaint consiste nel far generare all'IA siti web che siano davvero belli. È sorprendentemente difficile. I modelli di IA tendono a ricadere negli stessi cliché visivi più e più volte. È così sistematico che "sito web fatto con l'IA" sta diventando un'estetica riconoscibile.

Abbiamo testato decine di modi per rompere questo schema. Nel percorso, abbiamo acquisito una comprensione molto più profonda dei modelli, che volevamo condividere.

Questo è un sito web generato dall'IA piuttosto standard: stile generico, contenuto minimo e layout abusati. E naturalmente, l'occasionale pulsante illeggibile.

Gli ho dato solo una direzione minima. Potrebbe sembrare ingiusto, ma credo sia un buon test. Ovviamente, se continui a dare istruzioni, potresti trasformarlo progressivamente in un ottimo sito web. Ma in quel caso sei tu a fare tutto il design. Il modello sta solo programmando. La maggior parte delle persone non sa farlo. La vera svolta è quando l'IA riesce a fare design senza che un umano specifichi ogni dettaglio.

Lo stile predefinito dell'IA è fondamentalmente un problema universale. Eccolo su un sito per terapeuti. Si penserebbe che un sito per terapeuti apparirebbe drasticamente diverso. Invece no, produce più o meno lo stesso sito con pulsanti verdi.

Come si possono migliorare i siti web generati dall'IA?

Design system

Una prima mossa ovvia: pre-costruire colori, font, bordi arrotondati e ombre. Queste decisioni sono difficili da azzeccare guardando solo il codice. Far partire l'IA con un buon set significa meno possibilità di sbagliare.

Aiuta un po'. Si ottengono meno errori di colore gravi. E qui ha usato uno sfondo con immagine. Ma nel complesso i layout, la densità dei contenuti e la struttura generale sono sostanzialmente gli stessi. Un design system dà al modello una tavolozza; non gli insegna a comporre.

Coaching

Un altro approccio: dare al modello un ampio set di istruzioni su come progettare. Istruirlo a fare cose che normalmente non farebbe. Il chatbot principale di Claude AI ha una skill che fa esattamente questo:

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.

È un vero miglioramento. Il layout complessivo è simile al precedente. Ma finalmente sembra un vero sito per terapeuti, con font più morbidi e uno stile di pulsante unico. Se sostituissi la tua immagine, potresti tranquillamente pubblicarlo.

Nei nostri test, abbiamo scoperto che le istruzioni personalizzate non risolvono la ripetitività. Il modello continua a ricorrere agli stessi pattern, quindi fondamentalmente sembra ancora il classico sito dell'IA. Solo in una versione molto più curata.

Inoltre, è più difficile evitare i pattern abusati di quanto il prompt di Claude lasci intendere. Dicono:

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

Così, invece, il modello abusa di altri font come Jost e Cormorant Garamond. E ora non riesce a gestire le situazioni in cui Inter è la scelta giusta. In sostanza, puoi forzare l'eliminazione delle sue cattive abitudini, ma in un modo o nell'altro, finirà per fare le stesse cose ripetutamente.

Immagini di riferimento

E se saltassi le parole del tutto e mostrassi semplicemente al modello quello che vuoi? Dargli in pasto uno screenshot di un design che ti piace e chiedergli di costruire qualcosa di simile.

Questa è stata la prima tattica in cui il modello ha creato nuovi layout al di fuori dei soliti 2-3 che fa sempre. Non fa mai un'immagine a metà schermo da solo.

Le immagini sono un modo super efficiente per condividere molte informazioni. Il modello coglie layout, spaziatura, relazioni cromatiche e densità tutto in una volta: cose che non penseresti mai di descrivere in un prompt. Ma è fragile. Non riesce a riprodurre layout complessi o animazioni. E se il modello deve riempire contenuti al di fuori del riferimento, torna allo stile predefinito.

Template di codice e stile

Questa è forse l'idea più a forza bruta. Semplicemente dagli del codice. È quello che fa ChatGPT in questo momento. Usa una libreria di template quando crea siti.

Quando fai così, ovviamente la qualità sale molto. Stai semplicemente dando le risposte all'IA. Ma la maggior parte delle persone non ha già del codice per quello che vuole. Quindi questa è principalmente una tattica per chi costruisce piattaforme, creando uno strumento per altre persone.

C'è però un problema:

"Make a therapist website"

"Make a lawyer website"

"Make a plumber website"

"Make a bakery website"

Se dai esempi all'IA, genera siti web che si assomigliano notevolmente, facendo gli aggiustamenti minimi necessari per adattarsi al contesto. Quindi quando ChatGPT crea siti in questo momento, indipendentemente dal prompt, sembra la stessa startup tecnologica.

Sfortunatamente, anche con tutte queste tattiche, non sono sicuro che abbiamo prodotto qualcosa di meglio di un template generico di Wix.

Auto-iterazione

Perché non lasciare che il modello guardi il proprio output e lo migliori? Un designer di Wix può fare molte iterazioni, dopotutto.

In teoria questo risolve tutto. In pratica lavora per 20 minuti, spende $10 in token e raggiunge rapidamente un plateau. Per esempio, gli ho fatto iterare sul sito lighthouse di prima. Non ha nemmeno notato il pulsante illeggibile.

L'auto-iterazione è probabilmente il futuro. Ma i modelli di oggi non sono ancora del tutto pronti.

Dopo aver esplorato tutti questi approcci, avevamo alcune opzioni reali per migliorare lo stile. Ma oltre a questo, sentivamo di aver capito come funzionano i modelli di IA a un livello molto più profondo.

Cosa abbiamo imparato sui modelli di IA

I modelli preferiscono davvero lo stile predefinito

C'è un'estetica predefinita incorporata nei modelli. È come il sito web medio nei dati di addestramento. Ogni volta che prende una decisione, usa lo stile predefinito a meno che non abbia un motivo esplicito per non farlo. Ecco perché i siti IA sono così riconoscibili, e perché l'auto-iterazione non porta da nessuna parte. Il modello non converge verso un design unico. Converge verso il predefinito. Se vuoi che l'IA rompa lo schema, devi darle qualcosa che la allontani dal predefinito, come immagini di riferimento o campioni di codice.

Le immagini hanno più larghezza di banda delle parole

È difficile guidare il modello con le parole. Puoi scrivere un paragrafo su come vuoi qualcosa di "pulito, moderno, con tanto spazio bianco" ma è quasi inutile. Finisci sempre con lo stile predefinito. Le immagini riescono a far creare al modello design unici perché trasportano più informazione. Uno screenshot codifica centinaia di micro-decisioni su spaziatura, colori e layout che non puoi definire con le parole. Quindi, a meno che tu non abbia campioni di codice, le immagini di riferimento sono il modo migliore per guidare l'IA.

Pre-costruire è una curva di compromesso

Ogni tattica che abbiamo provato era una forma di prendere decisioni in anticipo per l'IA. Quando le dai di più, puoi alzare il tetto della qualità, ma perde flessibilità. Prepararsi per ogni caso d'uso potenziale è importante solo per una piattaforma generale come Repaint. Se è solo per te, puoi (e dovresti) dare all'IA riferimenti specifici per massimizzare la qualità visiva.

Come creare design migliori con l'IA

Il modo più semplice per evitare il generico è dare all'IA riferimenti visivi unici, come immagini di siti che ti piacciono, campioni di codice, o entrambi. Una volta che hai lo stile, l'IA dovrebbe essere in grado di generare altre sezioni che lo rispettino. Questo è molto più efficace che continuare a dare istruzioni ripetutamente, che è quello che fa la maggior parte delle persone.

Oppure, se trovare riferimenti e costruire uno stile ti sembra troppo impegnativo, potresti provare Repaint. Abbiamo costruito una grande libreria di stili con campioni di codice e variabili di design. L'IA non è costretta in un unico stile perché abbiamo molte opzioni.

Più in generale, in qualsiasi strumento visivo basato sull'IA, che si tratti di design di app, generazione di immagini o generazione di video, invece di dire "rendilo più premium," prova a dargli più screenshot ed esempi. È drasticamente più efficace.