App generica fatta con l'AI: 5 ritocchi, prima e dopo
Perché un'app fatta con l'AI sembra uguale alle altre? Cinque ritocchi CSS da fare in un pomeriggio, con prima e dopo e un prompt pronto per il tuo agente.
Un'app fatta in fretta con l'AI sembra uguale alle altre quasi sempre per gli stessi cinque motivi. Si sistemano con un po' di CSS, in un pomeriggio, senza rifare il design. Qui trovi i cinque ritocchi, uno screenshot dopo ognuno e un prompt da incollare nel tuo agente per ogni passo.
La schermata l'abbiamo costruita noi, apposta: una piccola dashboard per le fatture, con dati inventati. Non è il prodotto di nessuno. Somiglia a quello che ottieni quando chiedi a un'AI "una dashboard SaaS pulita" e accetti la prima risposta.
Stessa struttura, stessi colori, stesso pulsante viola.
Il prima: i cinque sospettati
Niente è rotto, ed è proprio questo il problema: funziona, ma sembra una delle cento schermate che hai già visto. Spazi casuali, testi tutti uguali, parole segnaposto, icone mescolate, pulsanti che non reagiscono.
1. Usa una scala di spaziature
Cos'è: una breve lista di distanze consentite. Noi abbiamo usato 4, 8, 12, 16, 24 e 32 pixel, tutti multipli di quattro.
Perché serve: nel prima c'erano 13 pixel qui, 22 là, 7 tra i pulsanti. La schermata sembra "storta" anche se nessuno sa dire perché.
Come si fa: scrivi la lista una volta come variabili CSS (per esempio space-2 uguale a 8 pixel, space-4 uguale a 16) e usa solo quei nomi. Regola: le cose che stanno insieme hanno uno spazio piccolo, i gruppi uno più grande. L'etichetta sta 8 pixel sopra il suo numero, le card sono a 16 pixel l'una dall'altra, le sezioni a 32. Nel dubbio, scegli il valore più grande.
Definisci una scala di spaziature come variabili CSS: 4, 8, 12, 16, 24, 32px. Sostituisci ogni margine, padding e gap di questa schermata con un valore della scala, e vieta tutti gli altri numeri. Regola: spazio piccolo tra cose che stanno insieme, spazio grande tra gruppi (etichetta-numero 8px, card-card 16px, sezione-sezione 32px).
2. Dai ai testi una gerarchia chiara
Cos'è: la gerarchia tipografica, cioè grandezza e peso del testo che ti dicono cosa guardare per primo.
Perché serve: nel prima titolo, etichette e celle stavano tutti tra 14 e 22 pixel, quasi sempre in grassetto. Quando tutto urla, niente è importante.
Come si fa: un solo font e quattro grandezze, 13, 15, 18 e 30 pixel. Poi tre decisioni:
- Numeri forti, etichette tranquille. Importi a 30 pixel, etichette a 13 pixel e grigie. L'occhio va subito al "quanto".
- Grassetto solo dove significa qualcosa. Nella tabella resta in grassetto solo il numero della fattura.
- Numeri allineati. L'impostazione CSS tabular-nums dà a ogni cifra la stessa larghezza. Con gli importi allineati a destra, le colonne si confrontano a colpo d'occhio.
Riduci questa schermata a un solo font e quattro grandezze di testo: 13, 15, 18 e 30px. Il dato più importante va a 30px, le etichette a 13px in grigio, non in grassetto. Togli il grassetto ovunque tranne dove distingue un elemento (per esempio il numero di una fattura). Usa font-variant-numeric: tabular-nums per i numeri e allinea a destra gli importi in tabella.
3. Sostituisci i segnaposto con contenuti veri
Cos'è: parole credibili che fanno un lavoro. Non servono clienti veri.
Perché serve: è il passo che tutti saltano ed è quello che fa più differenza. "Metric 1" e "John Doe" dicono una cosa sola: questa schermata non è mai stata finita.
Come si fa: per ogni testo chiediti cosa vorrebbe sapere chi usa la schermata.
- "Welcome back, User!" con la manina diventa "Fatture di ottobre", con sotto una riga utile: 2.790 euro ancora da incassare, una fattura scaduta.
- "Metric 1, 2, 3" diventano "Pagato questo mese", "In attesa di pagamento" e "Scaduto", ognuno con una nota tipo "1 fattura, scadenza 15 ottobre".
- "Create New", "Action" e "Button" diventano "Nuova fattura", "Esporta CSV" e "Invia promemoria".
E i numeri devono tornare. Le due fatture in attesa, 1.450 e 700 euro, fanno i 2.150 euro della card. In attesa più scaduto fa i 2.790 del sottotitolo. Quando i numeri sono d'accordo, la schermata sembra vera.
Per scovare i segnaposto rimasti basta un piccolo script nella console del browser (tasto destro, Ispeziona, Console): sulla schermata di partenza ne ha trovati 15, su quella finale nessuno.
Sostituisci tutti i testi segnaposto di questa schermata con contenuti credibili per [descrivi la tua app in una frase]. Il sottotitolo deve essere una frase utile sulla situazione di chi la usa, non un saluto. Ogni pulsante deve dire l'azione precisa. I numeri devono tornare tra loro: i totali delle card devono corrispondere alla somma delle righe in tabella. Poi scrivimi uno script da incollare nella console del browser che elenca in una tabella i testi della pagina che contengono lorem, ipsum, John Doe, Jane Smith, Item 1 o Metric 1.
4. Fai combaciare icone e bordi
Cos'è: decidere una volta lo stile di icone, bordi, angoli e ombre.
Perché serve: nel prima convivevano emoji, icone piene e a contorno, tre tipi di bordo, due ombre e angoli di ogni forma. Sembra un collage, non un prodotto.
Come si fa:
- Un solo stile di icone. Tutte a contorno, 18 pixel, stesso spessore della linea. Noi abbiamo usato semplici SVG, va bene anche un solo set di icone.
- Un solo bordo. Una linea grigio chiaro da 1 pixel per card, righe della tabella e pulsante secondario.
- Una famiglia di angoli. 12 pixel per le card, 8 per pulsanti e voci del menu, tondi pieni per le piccole etichette di stato. Più l'elemento è piccolo, più l'angolo è piccolo.
- Niente ombre su ciò che non galleggia. Le card stanno appoggiate sulla pagina. Le ombre restano per menu e finestre che stanno sopra il resto.
Uniforma lo stile di questa schermata. Icone: tutte a contorno, 18px, stesso spessore della linea, niente emoji, un solo set. Bordi: una sola linea grigio chiaro da 1px per card, righe di tabella e pulsanti secondari. Angoli: 12px per le card, 8px per pulsanti e voci di menu, tondo pieno per le etichette di stato. Togli le ombre dagli elementi che non galleggiano; lasciale solo su menu e finestre sovrapposte.
5. Fai rispondere ogni pulsante
Cos'è: quattro stati visibili per ogni pulsante.
Perché serve: un pulsante che ha sempre lo stesso aspetto fa sembrare l'app piatta e un po' rotta. Il team di Vercel, nel suo articolo sul design engineering, mette tra le cose che contano le interazioni che fanno capire cosa si può fare e il supporto per tocco e puntatore.
Come si fa:
- Mouse sopra: il pulsante diventa un po' più scuro.
- Pressione: mentre lo tieni premuto scende al 97% della grandezza. Minimo, ma sembra un pulsante vero.
- Tastiera: un anello di 2 pixel ben visibile quando ti sposti con Tab. Il selettore :focus-visible lo mostra a chi usa la tastiera e lo nasconde dopo un clic.
- Disattivato: sbiadito, con il cursore che dice di no. Usa il vero attributo disabled dell'HTML, così la tastiera lo salta e i clic non fanno niente.
Su Chrome tutti e quattro funzionano: Tab passa da "Esporta CSV" a "Nuova fattura" con l'anello visibile e salta il pulsante disattivato.
Aggiungi a tutti i pulsanti di questa schermata quattro stati: hover leggermente più scuro; active con transform: scale(0.97); focus con un anello visibile di 2px usando :focus-visible; disabled con l'attributo HTML disabled, opacità ridotta e cursore not-allowed. Non togliere mai l'outline di focus senza sostituirlo.
Pronto da copiare: tutti e cinque insieme
Rivedi questa schermata in cinque passi, senza cambiare struttura, colori di marca o font. 1. Scala di spaziature 4, 8, 12, 16, 24, 32px come variabili CSS, nessun altro valore. 2. Quattro grandezze di testo (13, 15, 18, 30px), una sola cosa forte, etichette piccole e grigie, tabular-nums sui numeri. 3. Testi veri al posto dei segnaposto, numeri che tornano tra card e tabella. 4. Un solo stile di icone, un solo bordo da 1px, angoli 12/8px, ombre solo su ciò che galleggia. 5. Stati hover, active, focus-visible e disabled su ogni pulsante. Prima di toccare il codice, elencami cosa non va per ognuno dei cinque punti. Poi applica un punto alla volta e fermati dopo ognuno.
Prova piccola
Dieci minuti. Apri la tua app, premi Tab più volte e guarda: vedi sempre dove sei? Poi cerca nella pagina "Lorem", "Metric" e "John Doe". Se trovi un problema, incolla il prompt del passo 5 o 3 e riprova. È riuscita se con la sola tastiera arrivi a ogni pulsante vedendo l'anello, e non resta nessun segnaposto.
Attenzione a
- Lo script dei segnaposto non trova tutto. Non riconosce etichette generiche come "Action" o "Button". Leggi ad alta voce ogni pulsante almeno una volta.
- Non togliere mai l'anello di focus del browser senza metterne uno tuo. Chi usa la tastiera non saprebbe più dove si trova.
Questo articolo nasce da un prima e dopo di Alek pubblicato su Medium.
Passo successivo: applica lo stesso metodo ai moduli con Form che sembrano economici: 5 ritocchi. Per un'app intera, leggi Redesign di un'app con l'AI senza rompere il codice.
In breve: Un'app generica non ha bisogno di un nuovo look: le bastano spazi da una scala, una sola cosa forte per schermata, parole vere, uno stile unico per icone e bordi e pulsanti che reagiscono.
Newsletter
L'AI che funziona davvero, nella tua casella.
Le nuove pillole, gli strumenti che usiamo e quello che impariamo sui progetti. Poche mail, solo quando c’è qualcosa di utile.
