UI generata dall’AI: i 6 segnali che la fanno sembrare AI slop e come correggerli in pochi minuti

Una UI generata dall’AI si riconosce da sei dettagli: font di default, gradiente viola, tre card identiche, testo tutto centrato, dimensioni del testo incoerenti e maiuscola su ogni parola. Claude Code, Codex, Cursor e Lovable possono generare ottime interfacce, ma ricadono spesso negli stessi pattern. Correggere questi sei punti richiede pochi minuti e rende la web app più curata, riconoscibile e professionale.

Perché le UI generate con l’AI sembrano tutte uguali?

Gli strumenti di AI generativa, se non ricevono indicazioni, scelgono le soluzioni più comuni. Il risultato sono web app che si somigliano tutte: stessi font, stessi colori, stessa struttura della landing page. Chi le guarda le associa subito al cosiddetto AI slop, cioè contenuto prodotto in serie dall’AI senza una scelta consapevole dietro.

Il problema riguarda la percezione del prodotto. Una UI che sembra generata in automatico comunica poca cura, anche quando il software sotto funziona bene. Ho visto lo stesso effetto sui testi: ne ho parlato nell’articolo sull’AI slop su LinkedIn.

Quali sono i 6 segnali da correggere?

1. Font di default

Inter, Roboto e Open Sans ormai sono ovunque. Sono i font che l’AI sceglie quando non le dici niente. Cambiare il font è la modifica più rapida e da sola genera un impatto visivo molto diverso sulla web app.

2. Gradiente viola

Il gradiente viola è diventato sinonimo di AI slop. La correzione è semplice: sostituisci il viola con il colore del tuo brand. La UI diventa subito più originale e più coerente con il resto della tua comunicazione.

3. Le solite tre card identiche

Le tre card affiancate che descrivono le feature del prodotto o del servizio sono uno dei pattern più ripetuti nelle landing page generate dall’AI. Conviene rompere questa simmetria con componenti diversi tra loro, anche asimmetrici. La sezione delle feature smette di sembrare un modello già visto.

4. Tutto il testo centrato

Quando la landing page è generata dall’AI, headline, CTA e qualsiasi altro testo finiscono quasi sempre al centro. L’allineamento va scelto in modo consapevole: per ogni blocco capisci dove ha più senso il testo, a sinistra o a destra, e centra solo dove serve davvero.

5. Dimensioni del testo incoerenti

Anche piccole differenze nella dimensione del font si notano. La soluzione è definire uno stile tipografico coerente e darlo sempre a Claude Code, così lo rispetta in ogni schermata. Il testo avrà sempre le stesse dimensioni per lo stesso ruolo. Questo dettaglio rende la UI molto più professionale.

6. Maiuscola su ogni parola

Scrivere ogni parola con l’iniziale maiuscola è un’abitudine tipica dei titoli generati dall’AI. Usa la maiuscola solo all’inizio della frase. Il testo diventa più leggibile e anche più corretto.

Come si applicano queste correzioni con Claude Code?

Il punto in comune dei sei segnali è uno: l’AI sceglie il default quando non riceve regole. Il modo più efficace per evitarli è dare a Claude Code, Cursor o Codex le scelte di design prima di generare l’interfaccia, invece di correggerle una schermata alla volta.

In pratica, le indicazioni da preparare sono queste:

• il font da usare al posto di Inter, Roboto o Open Sans;
• la palette del brand, senza gradiente viola;
• una scala tipografica con le dimensioni per titoli, sottotitoli e testo;
• le regole di allineamento e di uso delle maiuscole;
• l’indicazione di evitare sezioni con card tutte uguali.

È lo stesso principio dello spec-driven development applicato al design: più la specifica è chiara, meno l’agente deve inventare.

Da dove partire?

Se hai già una web app generata con l’AI, riguardala con questi sei segnali in mente. Bastano pochi minuti per cambiare completamente la percezione del tuo prodotto, e il primo passo può essere già il font.