Il termine "vibe coding" è diventato popolare per descrivere un modo nuovo di costruire software: invece di scrivere codice riga per riga, descrivi a parole l'app che vuoi e lasci che l'intelligenza artificiale la generi, la mostri in anteprima e la corregga mentre dialoghi con lei. In questa guida costruiremo una piccola web app — un registro delle spese personali — partendo da zero e senza scrivere una sola riga di codice a mano.
A chi serve e cosa otterrai
È pensata per chi ha un'idea ma non sa programmare: liberi professionisti, studenti, piccoli imprenditori, curiosi. Al termine avrai un'app web funzionante, visibile nel browser, con la possibilità di pubblicarla online e condividerla con un link. I prerequisiti sono minimi: un computer con un browser aggiornato, una connessione e un account su uno degli strumenti che vedremo. Nessuna installazione obbligatoria.
Quali strumenti usare: il confronto
Esistono diversi strumenti di vibe coding, con filosofie differenti. Ecco i principali e quando convengono:
| Strumento | Punti di forza | Costi/limiti | Ideale per |
|---|---|---|---|
| Claude (Artifacts) | Crea strumenti interattivi al volo dentro la chat; ottimo per prototipi e piccole app | Piano gratuito disponibile, con limiti d'uso giornalieri | Prototipi rapidi, calcolatori, mini-tool |
| Lovable | Genera app complete con database e login; flusso guidato | Free limitato, poi a crediti mensili | App vere con dati e utenti |
| Bolt.new | App full-stack nel browser, anteprima istantanea, deploy facile | Free a token limitati, poi a pagamento | Chi vuole vedere subito il risultato girare |
| v0 (Vercel) | Eccellente per interfacce e componenti curati; integrazione con Vercel | Free con crediti, piani a pagamento | Landing page e UI raffinate |
Prima scelta consigliata: per imparare senza spendere, parti da Claude con gli Artifacts, perché vedi subito l'app dentro la conversazione e iteri a costo zero. Quando vorrai un'app vera con database e accessi utente, passa a Lovable o Bolt.new.
Passo 1 – Descrivere l'app con un buon prompt
Il segreto del vibe coding è la chiarezza della richiesta. Più sei specifico, meno dovrai correggere dopo. Apri lo strumento scelto e incolla un prompt come questo:
"Crea una web app 'Registro Spese'. Voglio: un modulo per aggiungere una spesa con descrizione, importo in euro, categoria (a scelta tra Casa, Cibo, Trasporti, Svago) e data; una tabella sotto che elenca tutte le spese inserite; in alto il totale speso e il totale per categoria. Interfaccia pulita in italiano, colori sobri, adatta anche al telefono. I dati restano salvati nel browser."
Risultato atteso: lo strumento genera l'app e la mostra in anteprima. Potrai già inserire una spesa di prova e vederla comparire nella tabella con il totale aggiornato.
Passo 2 – Iterare e correggere a parole
Quasi mai la prima versione è perfetta: il bello è che migliori l'app conversando. Esempi di richieste successive:
"Aggiungi un pulsante per eliminare una singola spesa dalla tabella."
"Mostra il totale per categoria con un piccolo grafico a torta."
"Quando l'importo è sopra i 100 euro, evidenzia la riga in arancione."
Procedi un cambiamento alla volta: è più facile capire cosa è andato storto se modifichi poco per volta.
Passo 3 – Pubblicare l'app online
Con Claude, l'Artifact vive dentro la conversazione e puoi condividerlo tramite il link della chat. Con Lovable, Bolt o v0 c'è un pulsante Publish o Deploy: in pochi clic l'app riceve un indirizzo web pubblico. Questi strumenti permettono anche di collegare un account GitHub per salvare il codice e, nel caso di v0, di pubblicare su Vercel. Da quel momento potrai inviare il link a chiunque.
Passo 4 – Scrivere prompt che funzionano
La qualità del risultato dipende quasi tutta da come formuli le richieste. Dopo decine di prove, questi sono i principi che fanno la differenza:
- Definisci lo scopo in una frase: comincia sempre dicendo cosa deve fare l'app e chi la userà. "Un'app per tenere il conto delle spese di casa" orienta tutte le scelte successive.
- Elenca le funzioni come una lista: invece di un paragrafo confuso, usa punti chiari. L'IA li traduce in elementi dell'interfaccia uno per uno.
- Specifica lo stile: "interfaccia minimale", "colori pastello", "adatta al telefono" cambiano radicalmente il risultato visivo.
- Indica dove salvare i dati: "salva nel browser" per un prototipo, "usa un database" per un'app seria. È la fonte di metà dei malintesi.
- Dai esempi: se vuoi un formato preciso (date in italiano, importi in euro), mostra un esempio nel prompt.
Un prompt avanzato, da provare quando hai preso confidenza, potrebbe essere:
"Trasforma il Registro Spese in un'app multi-utente: aggiungi una schermata di login con email e password, fai in modo che ogni utente veda solo le proprie spese, e salva tutto su un database. Aggiungi una pagina 'Statistiche' con la spesa mensile degli ultimi 6 mesi in un grafico a barre."
Con Lovable o Bolt, una richiesta del genere porta lo strumento a proporti il collegamento a un servizio come Supabase per gestire database e autenticazione: accetta e segui la procedura guidata.
Capire (un po') cosa succede sotto il cofano
Non serve saper programmare, ma capire le basi ti rende molto più efficace. Questi strumenti generano un'app web vera, fatta di tre ingredienti: l'HTML che definisce la struttura della pagina, il CSS per l'aspetto grafico e il JavaScript per il comportamento (cosa succede quando premi un pulsante). Quando l'IA "scrive l'app", sta producendo questi file al posto tuo. Sapere che esistono ti aiuta a chiedere modifiche mirate: "cambia il colore di sfondo" agisce sul CSS, "fai partire un messaggio quando salvo" agisce sul JavaScript. Strumenti come Bolt e v0 ti mostrano anche il codice generato: dargli un'occhiata, senza panico, è il modo migliore per imparare gradualmente e, un domani, mettere mano a piccoli ritocchi da solo.
Errori comuni e come uscirne
- L'app si blocca o mostra una schermata bianca: copia l'eventuale messaggio d'errore e incollalo nello strumento scrivendo "Ho questo errore, correggilo". L'IA quasi sempre lo risolve.
- Hai chiesto troppo in una volta: l'app diventa confusa. Torna indietro e procedi per piccoli passi.
- "Hai esaurito i crediti / il limite giornaliero": attendi il reset, passa a un altro strumento del confronto o valuta un piano a pagamento.
- I dati spariscono ricaricando la pagina: chiedi esplicitamente di "salvare i dati nel browser" (localStorage) o, per un'app seria, di collegare un database come Supabase.
Varianti, casi avanzati e quando NON usarlo
Una volta presa la mano, puoi chiedere funzioni più avanzate: login degli utenti, salvataggio su database, invio di email, esportazione in CSV. Lovable e Bolt gestiscono bene questi scenari collegando servizi come Supabase per i dati e l'autenticazione. Il vibe coding, però, ha dei limiti: non è la scelta giusta per software critici, applicazioni che trattano dati sensibili senza una revisione di sicurezza, o sistemi che devono scalare per migliaia di utenti. In quei casi serve comunque uno sviluppatore che verifichi codice e architettura. Per idee, prototipi, strumenti interni e piccoli progetti personali, invece, è oggi il modo più rapido per passare dall'idea a qualcosa che funziona davvero. Il passo successivo? Prova a ricostruire la stessa app con due strumenti diversi: capirai presto quale si adatta meglio al tuo modo di pensare.
