Perché i siti fatti con l’AI si somigliano tutti
Se il gusto non lo scegli tu, lo sceglie Claude Code — e sceglie quello che ha già scelto per tutti gli altri:
-
Inter, e un blu-viola che sfuma. Angoli arrotondati a 12px su tutto.
-
Ombre morbide sotto ogni scheda, schede dentro altre schede.
-
Spaziature identiche ovunque, titoli generici, icone Lucide di serie.
È l’aspetto che si riconosce a distanza come «fatto con l’AI», e non ci casca solo chi il gusto non ce l’ha: finché le tue ragioni restano nella tua testa, l’agente non le legge e mette le sue. Il gusto va scritto — è il punto di Emil Kowalski, design engineer di Linear: non è magia, sono ragioni che si possono mettere per iscritto.
Il punto 7 di docs/ux-ui.md aveva rinviato apposta — «lo stile visivo NON è scelto in questo documento», e al suo posto quattro test. Si chiude adesso.
Otto direzioni con un nome
Non si inventa: si prende una direzione che esiste già e ha un nome. Queste sono le otto a cui torniamo più spesso in pratica.
Apri una carta per vederne i dettagli.
Ogni carta tiene insieme cinque cose — colore, carattere, angoli, ombre, movimento: una direzione non è un colore. E ognuna ha il suo modo di rompersi, nell’ultima riga: il neo-brutalism diventa chiasso, il luxury si svuota sul telefono, il claymorphism scivola nell’infantile.
La scelta per PawSoul
La direzione non si sceglie a gusto: si sceglie da quello che il cliente ha già detto. Il brief della parte 1 ha un gruppo intero su questo — stile visivo, palette, riferimenti, emozioni da comunicare, elementi da evitare — e per PawSoul dice: allegro ma non infantile, Duolingo per il tono, Tinder solo per il funzionamento; da evitare le app bancarie, i grigi, i testi piccoli.
Poi i quattro test del punto 7 tagliano. Servono a escludere, non a confermare: il claymorphism cade sul secondo (pastelli più cuccioli = app per bambini), lo swiss cade sullo stesso dall’altro lato (adulto, allegro mai), il luxury cade sul terzo (vive di foto trattate, e qui sono cani fotografati col telefono), il modern dark sul primo (è il vestito di mezzo internet). Ne resta una.
Neo-brutalism
Crema al posto del bianco, nero pieno per testo e bordi, rosso e giallo come colori d’azione, ombre dure senza sfocatura, angoli vivi, tipografia pesante. Non è Tinder a colpo d’occhio, è allegro senza essere infantile, incornicia le foto invece di trattarle, e a 390px resta sé stesso — bordo, ombra e colore pieno occupano lo stesso spazio su ogni schermo.
Da direzione a istruzioni: docs/ui.md
Il nome della direzione da solo non basta all’agente. Diventa un file, come il documento della parte 1: docs/ui.md, fatto di valori verificabili invece che di aggettivi. «Moderno e pulito» l’agente lo traduce nel suo default; «fondo #FFFDF5, bordo nero 4px, ombra 8px senza sfocatura» si controlla guardando lo schermo.
# Direzione estetica — PawSoul
Direzione scelta: neo-brutalism.
Il chiasso sta in superficie, mai nell'impianto: griglia regolare, spaziature
costanti, un solo pulsante primario per schermata.
## Colore
- Fondo: #FFFDF5 (crema, mai bianco puro).
- Inchiostro: #000000 per testo, bordi e ombre. Nessun grigio: mai #333, mai #666.
- Azione: #FF6B6B. Secondario: #FFD93D. Terzo: #C4B5FD per le sezioni alternate.
- Ogni testo passa il contrasto AA sul proprio fondo.
## Tipografia
- Un carattere solo: Space Grotesk. Pesi 700 e 900; niente sotto il 500.
- Titoli in maiuscolo, corpo in minuscolo, corpo a 18px e mai sotto i 16px.
## Forma
- Raggio 0 ovunque. Unica eccezione: pillola piena per filtri ed etichette.
- Bordo nero da 4px su ogni elemento: schede, pulsanti, campi, barra.
- Niente sfumature, niente trasparenze, niente vetro smerigliato.
## Profondità
- Ombra dura, nera, senza sfocatura: 4px sui pulsanti, 8px sulle schede, sempre
in basso a destra. Alla pressione l'elemento scende di 4px e l'ombra sparisce.
## Movimento
- Transizioni da 100 a 200ms, in uscita. Niente dissolvenze lunghe.
- Lo scorrimento della scheda segue il dito 1:1.
## Le foto degli animali
- Non si toccano: nessun filtro, nessuna velatura sopra, nessun ritaglio a cerchio.
- Riquadro con bordo nero e ombra dura, almeno metà della scheda.
## Vietato
- Grigi, sfumature, sfocature, ombre morbide.
- Angoli arrotondati intermedi (8-16px): o vivo, o pillola piena.
- Testi sotto i 16px e righe più larghe di 70 caratteri.
- Emoji al posto delle icone.L’ultima sezione, «vietato», è la più corta e la più utile: sono i segni dell’aspetto AI dell’inizio — grigi, ombre morbide, angoli a 12px — scritti come divieti. Senza quella sezione tornano una schermata alla volta, e nessuno se ne accorge finché non sono tutte e dieci.
Adesso i tre file dicono tutto: cosa si costruisce (docs/ux-ui.md, parte 1), con cosa (Next.js e shadcn/ui, parti 2 e 3) e che aspetto ha (docs/ui.md, questa). Nella parte 5 si mettono in un prompt solo e si generano le dieci schermate.