Come progettare un'app dall'aspetto curato con l'AI

Per ottenere un'app ben curata dall'AI, smetti di chiederle di "renderla carina" e inizia a darle ciò che vorrebbe un designer: due o tre riferimenti che ti piacciono, una direzione di design con un nome e regole concrete per tipografia, colori e spaziature. Poi costruisci una schermata, sistemala finché non è giusta, e fai applicare lo stesso sistema al resto. Gran parte dell'"aspetto AI" nasce da prompt vaghi che producono risposte medie; un input specifico produce un design specifico.

Perché i design AI sembrano generici

Chiedi all'AI "una dashboard SaaS moderna e pulita" e ti darà il centro statistico di ogni dashboard che ha visto: lo stesso font sans-serif, un gradiente viola-blu, card arrotondate con ombre morbide, icone in cerchi stile emoji e un hero centrato con la scritta "Il tuo flusso di lavoro, semplificato". Nessuna di queste scelte è sbagliata in sé. Il problema è che nessuna è stata scelta per il tuo prodotto.

Un buon design è soprattutto un insieme di decisioni. Il tuo compito è prendere le poche decisioni che danno all'app un carattere, e lasciare che l'AI faccia in modo coerente le migliaia di piccole scelte restanti.

Passo 1: raccogli i riferimenti prima di scrivere il prompt

Dedica venti minuti a raccogliere da due a quattro riferimenti: app o siti web il cui aspetto si adatta al tuo prodotto. Buone fonti sono i prodotti che il tuo pubblico già usa, le gallerie di design e i siti delle aziende dei settori affini.

Per ciascuno, scrivi in parole semplici cosa ti piace:

• "Tanto spazio bianco, contenuto in una colonna stretta, piccole etichette grigie sopra numeri grandi."
• "Tabelle dense con separatori sottili, nessuna ombra sulle card, un solo colore d'accento per le azioni."
• "Titoli grandi con grazie, sfondo bianco caldo, fotografie invece di illustrazioni."

Poi passa queste descrizioni all'AI, e allega gli screenshot se il tuo strumento accetta immagini. Prendi ispirazione dalle qualità, non dal prodotto: copiare in blocco il layout, il branding o i testi di un'altra azienda comporta rischi legali e di credibilità.

Passo 2: scegli una direzione di design e dalle un nome

Una direzione è una breve descrizione dello stile. Serve all'AI come filtro per ogni decisione che prende. Alcune che funzionano bene:

Inseriscila nel primo prompt, insieme a chi usa l'app:

Crea un'app di prenotazione per uno studio yoga indipendente. Direzione di design: calma e minimale, come l'orario stampato di uno studio. Sfondo bianco caldo, testo quasi nero, un unico verde salvia tenue per i pulsanti e gli stati selezionati. Un serif per i titoli, un sans-serif pulito per il testo. Spaziature generose, nessun gradiente, nessuna ombra, niente emoji. Mobile-first.

Passo 3: definisci le regole — tipografia, colori e spaziature

Questi tre elementi determinano gran parte della qualità visiva. Essere espliciti su di essi è il miglioramento singolo più grande che puoi fare.

Tipografia

• Uno o due caratteri. Un carattere per i titoli e uno per il testo, oppure una sola famiglia in più pesi.
• Una scala tipografica. Poche dimensioni usate in modo coerente — per esempio 14, 16, 20, 28 e 40 px — invece di quello che sceglie ogni componente.
• Testo leggibile. Circa 16 px sul web, un'altezza di riga di circa 1,5 e una lunghezza di riga di 60–75 caratteri per i testi lunghi.
• Gerarchia tramite peso e dimensione, non colore. Titoli più grassi e più grandi; testo secondario più piccolo e di un grigio attenuato.

Colore

• Per lo più neutri. Sfondi, superfici, bordi e grigi del testo svolgono la maggior parte del lavoro.
• Un colore d'accento per le azioni e gli stati selezionati. Un secondo solo se ha una funzione chiara.
• Colori semantici per successo, avviso ed errore — usati solo per quello.
• Contrasto. Le WCAG 2 chiedono un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande. Il testo grigio chiaro su bianco spesso non lo rispetta; chiedi all'AI di verificarlo.
• Modalità scura, se la vuoi, progettata con cura e non semplicemente invertita.

Spaziatura e layout

• Una scala di spaziature come 4, 8, 12, 16, 24, 32, 48, 64 px. Tutto si allinea a questa scala.
• Allineamento. I bordi si allineano; il contenuto sta su una griglia o in una colonna con larghezza massima costante.
• Prossimità. Le cose correlate stanno vicine, quelle non correlate più distanti. Questa sola regola risolve la maggior parte delle schermate affollate.
• Meno contenitori. Non ogni elemento ha bisogno di una card. Bordi, separatori e spazio bianco spesso raggruppano il contenuto in modo più discreto.

Un prompt che imposta il sistema una volta sola:

Prima di costruire altre schermate, crea un piccolo sistema di design e usalo ovunque: una scala tipografica di 14/16/20/28/40 px, altezza di riga del testo 1,5, una scala di spaziature 4/8/12/16/24/32/48 px, neutri dal bianco quasi puro al nero quasi puro, un solo colore d'accento (#3F6B5A) solo per le azioni principali, e il rosso solo per gli errori. Pulsanti, campi e card devono condividere lo stesso raggio di bordo. Verifica che tutto il testo rispetti il contrasto WCAG AA.

Se lavori con un builder che lavora sul codice, questo di solito diventa dei design token — variabili CSS o un tema Tailwind — il che significa che le modifiche successive avvengono in un solo punto.

Passo 4: costruisci prima una schermata fatta bene

Non generare dodici schermate per poi cercare di sistemarle tutte. Scegli la schermata che gli utenti vedono di più — spesso la dashboard o la lista principale — e itera finché non è giusta. Poi:

Usa la dashboard come riferimento per tutte le altre pagine: stessa intestazione, spaziature, dimensioni del testo, stili dei pulsanti e stile delle tabelle. Aggiorna le pagine Impostazioni e Prenotazioni perché corrispondano.

Una schermata di riferimento finita comunica il tuo gusto molto meglio di qualsiasi aggettivo.

Passo 5: itera con richieste piccole e specifiche

Il feedback all'AI funziona come il feedback a un designer junior: specifico, un'area alla volta, e chiaro su cosa mantenere.

Aggiungi sempre cosa mantenere — "mantieni invariati tutte le rotte, i testi e le funzionalità" — così un passaggio visivo non rimuove in silenzio delle funzioni. E controlla ogni modifica su uno schermo di dimensione telefono prima di chiedere la successiva; vedi come creare un'app web ottimizzata per il mobile per capire cosa significa un buon risultato sui display piccoli.

Passo 6: i dettagli che separano il buono dal generico

Una volta che la struttura è corretta, questi piccoli elementi fanno sembrare un'app davvero finita:

• Stati vuoti. Ciò che vede un nuovo utente senza dati: una breve spiegazione e un'azione chiara, non una tabella vuota.
• Stati di caricamento. Scheletri con la forma del contenuto, non spinner ovunque.
• Stati di errore. Messaggi in linguaggio semplice accanto al campo che li ha causati.
• Stati di hover, focus e pressione su ogni elemento interattivo — gli anelli di focus contano per chi usa la tastiera.
• Contenuti reali. Sostituisci "Lorem ipsum" e "Mario Rossi" con testi e dati realistici; i contenuti segnaposto nascondono i problemi di layout.
• Icone di un unico set, in una o due dimensioni, con lo stesso spessore del tratto.
• Immagini con uno scopo. Foto reali del tuo prodotto, del tuo luogo o delle persone battono le immagini generiche di archivio. Quando usi immagini di archivio o generate, mantieni uno stile coerente.
• Testi. Etichette brevi e specifiche ("Prenota lezione", non "Invia") contribuiscono alla qualità percepita quanto qualsiasi scelta di colore.

Errori comuni

• Riprogettare tutto in un solo prompt. Le riscritture grandi introducono regressioni. Procedi pagina per pagina.
• Troppi colori d'accento. Se tutto è evidenziato, nulla risalta.
• Centrare tutto. Il testo centrato è difficile da scorrere oltre al titolo; allinea a sinistra la maggior parte dei contenuti.
• Testo piccolo e a basso contrasto che sembra elegante su un monitor grande ma è illeggibile su un telefono alla luce del sole.
• Decorazione al posto della gerarchia. Gradienti e ombre non possono sistemare una schermata in cui l'azione più importante non è evidente.
• Trascurare la landing page. Per molti prodotti è la prima impressione; vedi come creare una landing page che converte.

Per altri schemi di prompt oltre al design, leggi come scrivere prompt per i builder di app AI. Se il tuo lavoro è il prodotto stesso — un portfolio di design o di fotografia — come creare un sito portfolio approfondisce la presentazione.

Progettare con Mythex

In Mythex descrivi il design in chat, lo vedi nell'anteprima dal vivo e controlli la cornice di dimensione telefono prima della modifica successiva. La documentazione offre brevi schemi per questo: prompt per design e UI, su come indicare cosa cambiare e cosa mantenere, e ridisegnare la UI, per rinnovare una pagina alla volta senza perdere funzionalità. Mythex può anche cercare foto di archivio o generare un'immagine in chat — un'immagine hero, uno sfondo, un'immagine di condivisione — e inserirla nell'app quando lo chiedi. Se un passaggio va storto, torna al checkpoint precedente. Sfoglia i template se preferisci partire da un design esistente e adattarlo.

Domande