Web app fatte con l’AI tutte uguali? 6 correzioni e il prompt da dare a Claude Code per ognuna

Le web app fatte con l’AI hanno più o meno sempre gli stessi colori e le stesse icone, e chi le guarda capisce al volo che le ha fatte l’AI. Per renderle diverse bastano sei correzioni: spaziature, colori, icone, testi, numeri e grafici. Per ognuna ti do la frase esatta da scrivere a Claude Code.

1. Spaziature: "Usa spaziature multiple di 8, sempre le stesse"
2. Colori: "Usa una sola palette neutra, niente gradienti e niente glow"
3. Emoticon: "Sostituisci le emoticon con icone a linea, tutte dalla stessa libreria"
4. Testi: "Al massimo due pesi per font. Non usare il maiuscolo"
5. Numeri: "Mostra i numeri senza decorazioni, con il confronto rispetto al mese prima"
6. Grafici: "Grafici con linee sottili, colori tenui, assi leggibili"

Perché le web app fatte con l’AI sembrano tutte uguali?

Quando non riceve regole, l’AI sceglie le soluzioni più comuni: le stesse palette, gli stessi effetti, la stessa struttura. Il risultato è una web app che somiglia a mille altre, anche quando il software sotto funziona bene. Ognuna delle sei correzioni toglie uno di questi default e lo sostituisce con una regola precisa che Claude Code può seguire in ogni schermata.

1. Come si sistemano le spaziature?

L’AI mette spesso le distanze a caso tra gli elementi. L’occhio lo percepisce anche se non sa dire perché, e la pagina sembra disordinata. La correzione è una regola fissa per tutte le distanze.

Usa spaziature multiple di 8, sempre le stesse.

Con una scala basata sui multipli di 8, margini e distanze tornano coerenti in tutta la web app.

2. Quali colori usare al posto dei gradienti viola?

Il marchio di fabbrica dell’AI sono i gradienti viola e i bagliori ovunque. Sono il segnale più riconoscibile di un’interfaccia generata. La correzione è ridurre la palette e togliere gli effetti.

Usa una sola palette neutra, niente gradienti e niente glow.

Con una palette neutra il contenuto torna al centro e la web app smette di sembrare un modello già visto.

3. Cosa usare al posto delle emoticon?

Le emoticon usate al posto delle icone fanno sembrare la web app un progetto amatoriale. Le icone a linea danno un aspetto più curato, a patto che vengano tutte dalla stessa libreria, così hanno lo stesso spessore e lo stesso stile.

Sostituisci le emoticon con icone a linea, tutte dalla stessa libreria.

4. Come si gestiscono grassetto e maiuscolo nei testi?

Se metti tutti i testi in grassetto e tutti in maiuscolo, niente spicca. La gerarchia tra titolo, etichetta e testo sparisce. La correzione è limitare gli strumenti a disposizione.

Al massimo due pesi per font. Non usare il maiuscolo.

Con due soli pesi, il grassetto torna a segnalare quello che conta davvero. Ho approfondito altri segnali tipografici, come la maiuscola su ogni parola, nell’articolo sui 6 segnali di una UI generata dall’AI.

5. Come si mostrano i numeri in una dashboard?

Punti esclamativi e badge colorati attorno ai numeri fanno sembrare la dashboard una pubblicità. Un numero diventa utile quando ha un termine di paragone, e le decorazioni non lo aggiungono.

Mostra i numeri senza decorazioni, con il confronto rispetto al mese prima.

Il confronto con il mese prima dice subito a chi legge se le cose vanno meglio o peggio, senza bisogno di colori o simboli.

6. Come devono essere i grafici?

Le barre enormi e colorate distraggono dai dati. Chi apre un grafico vuole leggere l’andamento, e ogni elemento in più rallenta la lettura.

Grafici con linee sottili, colori tenui, assi leggibili.

Con linee sottili e colori tenui i dati restano in primo piano, e gli assi leggibili permettono di capire i valori senza passare il mouse sopra ogni punto.

Come si applicano le sei correzioni con Claude Code?

Le sei frasi funzionano come prompt singoli su una web app già fatta: una correzione alla volta, controllando il risultato dopo ognuna. Funzionano ancora meglio se Claude Code le riceve prima di generare l’interfaccia, come regole valide per tutto il progetto. Un modo per raccoglierle in un posto solo è un file di regole di design, come quello che ho descritto nell’articolo su design.md per togliere l’AI slop dalle web app.

Se stai sviluppando la tua prima web app con l’AI, parti dalla correzione che ti salta all’occhio per prima: bastano sei frasi per dare al tuo progetto un aspetto che riflette le tue scelte.