Descrivere un'interfaccia utente a parole

Benvenuto in Progettare interfacce utente tramite prompt. Ecco la magia del vibe coding: non deve essere un designer né imparare a usare software complessi come Figma per ottenere un'interfaccia splendida. Descriva il look and feel in un linguaggio naturale e strumenti come v0 e Lovable genereranno una UI reale e funzionante.

In questa lezione imparerà a trasformare un'idea vaga che ha in mente ("una landing page pulita e moderna") in un prompt preciso che l'AI può effettivamente realizzare.

Un buon prompt per una UI risponde generalmente a quattro domande: Che cos'è (una pagina, una scheda, un modulo)? A chi è destinata? Quale atmosfera dovrebbe avere? E quali contenuti deve includere?

I prompt vaghi producono risultati vaghi. I prompt specifici generano il design che avevate in mente. Confrontate i due prompt di esempio qui sotto.

La parola più potente in assoluto in un prompt per una UI è l'aggettivo. Parole come minimalista, giocoso, brutalista, elegante, rétro, aziendale, futuristico orientano immediatamente l'intero design.

Non limitatevi a dire "bello": per un'AI non significa nulla. Scegliete 2 o 3 parole concrete per descrivere l'atmosfera e combinatele. Strumenti come v0 e Lovable reagiscono molto bene a questo tipo di indicazioni.

Un trucco da professionisti: citate app e brand che l'AI già conosce. Dire "come Stripe" o "come Airbnb" racchiude mille decisioni di design in due parole.

Funziona perché i modelli alla base di v0 e Lovable hanno già analizzato questi design molto conosciuti. Usateli come scorciatoie, poi personalizzateli.

Oltre all'atmosfera, potete descrivere la struttura. Usate parole spaziali che l'AI comprende: in alto, hero, due colonne, griglia, barra laterale, intestazione fissa, piè di pagina.

Immaginate di fare uno schizzo usando frasi. Descrivete la pagina dall'alto verso il basso.

Potete indicare all'AI una direzione cromatica senza scegliere codici hex precisi. Dite, per esempio, "toni caldi e terrosi" oppure "un blu scuro come colore primario con un accento corallo".

Per i font, descrivete la sensazione: "un sans-serif arrotondato e amichevole" oppure "un serif serio per uno studio legale". Definirete i valori precisi in seguito: per ora, stabilite l'atmosfera.

La maggior parte degli strumenti moderni per le UI (v0, Lovable, Bolt) consente di caricare uno screenshot o uno schizzo. Un'immagine elimina subito ogni ambiguità.

Va bene anche una foto scattata con il telefono a uno schizzo approssimativo su un tovagliolo. Abbinate l'immagine alle parole: "Costruisci questo layout, ma rendilo moderno e usa i colori del mio brand". È il modo più rapido per ottenere esattamente ciò che avevate immaginato.

Sotto il cofano, l'AI sta scrivendo vero HTML. Non dovete saperlo leggere, ma riconoscerne la struttura vi aiuta a descrivere ciò che volete. Una sezione 'hero' spesso è semplicemente un'intestazione e un pulsante all'interno di un contenitore.

Ecco il tipo di markup semplice prodotto da un prompt per una UI.

La prima schermata generata è un punto di partenza, non la risposta definitiva. La vera abilità consiste nel perfezionarla con prompt successivi: "rendi la hero più alta", "sposta il pulsante a destra", "aggiungi più spazio bianco".

Consideratela una conversazione con un designer. Piccoli aggiustamenti specifici sono più efficaci che ridefinire da zero l'intera pagina.

Tenete a portata di mano un modello da completare, così non vi troverete mai a fissare una casella vuota. Riunite in un unico blocco scopo, pubblico, atmosfera, struttura e colori, poi lasciate che lo strumento faccia il resto.

Aprite v0.dev o Lovable, incollate un modello compilato e osservate come una UI reale prende forma in pochi secondi. Poi esercitatevi con il ciclo di iterazione: generate, osservate, modificate, ripetete.

Più concrete saranno le vostre parole, meno correzioni dovrete fare in seguito. Questa singola abilità — descrivere con precisione le UI — è alla base di tutto il corso.

Avete imparato a trasformare un aspetto e una sensazione vaghi in un prompt preciso. La ricetta è: indicate che cos'è e a chi è destinato, definite un'atmosfera concreta (usando app di riferimento come scorciatoie), descrivete il layout dall'alto verso il basso, date indicazioni su colori e font e, se volete, allegate uno schizzo.

Poi iterate con piccoli aggiustamenti successivi invece di ricominciare. Prossimamente: generare singoli componenti come pulsanti, schede e moduli quando servono.