Vuoi creare la tua prima applicazione con l'IA ma non sai da dove iniziare? La todo app è il progetto perfetto per iniziare con il vibe coding. In un'ora esatta, costruirai un'applicazione funzionante che ti permette di aggiungere, spuntare e eliminare attività. Nessuna conoscenza di programmazione richiesta: dovrai semplicemente descrivere quello che vuoi a Claude Code, e l'IA genererà il codice per te. Questa guida ti mostra esattamente cosa scrivere, in quale ordine, e come risolvere i problemi comuni. Alla fine, avrai una vera applicazione che potrai mostrare, migliorare e usare quotidianamente.
Perché iniziare con una todo app in vibe coding?
Una todo app riunisce tutti i fondamentali dello sviluppo senza la complessità tecnica. Quando crei una lista di attività, impari a gestire la visualizzazione delle informazioni, l'aggiunta di nuovi dati, la loro modifica e la loro eliminazione. Queste quattro operazioni (che nel gergo si chiamano CRUD: Create, Read, Update, Delete) costituiscono l'80% di quello che fanno le applicazioni moderne.
Il vibe coding rende questo progetto accessibile in un'ora dove ci vorrebbero diverse settimane a un principiante con i metodi tradizionali. Non hai bisogno di capire la sintassi JavaScript, gli eventi DOM o la gestione dello stato. Descrivi semplicemente quello che vuoi, e Claude Code traduce le tue intenzioni in codice funzionante.
Secondo uno studio di GitHub pubblicato nel 2025, gli sviluppatori che utilizzano assistenti IA completano i loro progetti il 55% più velocemente di quelli che codificano manualmente. Per un principiante assoluto, il guadagno di tempo è ancora più spettacolare: passi da diversi mesi di apprendimento a poche ore di pratica.
Questo primo progetto ti dà anche una base concreta per capire come funziona il vibe coding. Vedrai in tempo reale come le tue descrizioni si trasformano in interfaccia, come correggere gli errori e come migliorare progressivamente la tua applicazione.
Gli strumenti necessari per il tuo primo progetto
Hai bisogno di tre elementi: un account Claude Code, un browser web moderno e un editor di testo di base. Niente da installare, niente da configurare. Claude Code funziona completamente online e genera codice che puoi testare direttamente nel tuo browser.
Per creare il tuo account Claude Code, vai su claude.ai e iscriviti con la tua email. La versione gratuita è più che sufficiente per questo progetto: hai diritto a 50 messaggi al giorno, più che abbastanza per costruire la tua todo app e perfezionarla. Se vuoi più dettagli sulla configurazione iniziale, consulta il nostro tutorial Claude Code per principianti.
Per quanto riguarda il browser, Chrome, Firefox, Safari o Edge vanno perfettamente bene. Dovrai semplicemente aprire un file HTML locale per testare la tua applicazione. Nessun server web necessario per questo primo progetto.
Per l'editor di testo, il Blocco note di Windows o TextEdit su Mac funzionano, ma ti consiglio Visual Studio Code (gratuito su code.visualstudio.com). Colora il codice automaticamente, il che rende la lettura più facile, anche se non capisci ancora tutto.
Facoltativo, prepara una cartella sul tuo computer dove salverai il tuo progetto. Chiamala "mia-todo-app" per esempio. Ci metterai i file che Claude genererà.
Il prompt di partenza per lanciare la tua todo app
Inizia con questo prompt preciso: "Crea una todo app semplice in HTML, CSS e JavaScript in un unico file. Voglio poter aggiungere attività, spuntarle come completate ed eliminarle. Design minimalista e moderno." Questo prompt contiene tutti gli elementi essenziali senza entrare in dettagli tecnici che non conosci ancora.
La precisazione "un unico file" è cruciale per iniziare. Claude genererà un file HTML che contiene tutto: la struttura della pagina, lo stile visivo e la logica funzionante. Hai solo un file da gestire, il che semplifica enormemente le cose.
La menzione "design minimalista e moderno" guida Claude verso un'interfaccia pulita e piacevole all'occhio, senza fronzoli che complicassero il codice. Avrai tempo di aggiungere funzionalità avanzate più tardi.
Quando invii questo prompt, Claude di solito risponde in 10-20 secondi con un blocco di codice completo. Vedrai un blocco che inizia con <!DOCTYPE html> e termina con </html>. È normale: è il codice della tua applicazione.
Copia l'intero codice, incollalo nel tuo editor di testo, e salva il file con il nome todo.html nella tua cartella progetto. Poi, fai doppio clic su questo file: si apre nel tuo browser e vedi già la tua prima applicazione funzionante.
Se Claude ti dà più file separati (HTML, CSS, JS), chiedigli di nuovo: "Puoi mettere tutto in un unico file HTML?" Fonderà tutto per te.
Testare e migliorare la tua applicazione passo dopo passo
Apri il tuo file todo.html nel browser e testa ogni funzionalità: aggiungi un'attività, spuntala, eliminala. Se tutto funziona al primo colpo, complimenti! Altrimenti, annota esattamente cosa non funziona. Per esempio: "Quando clicco su Aggiungi, non succede nulla" o "Le attività si visualizzano ma non posso eliminarle".
Torna a Claude e descrivi il problema con le tue stesse parole. Non hai bisogno di capire perché è bugato: spiega semplicemente quello che osservi. Claude analizzerà il codice che ha generato e ti proporrà una correzione. Copia il nuovo codice, sostituisci il vecchio nel tuo file, salva e aggiorna il tuo browser (F5).
Questo ciclo test-correzione-test è il cuore del vibe coding. Non hai bisogno di debuggare il codice da solo: descrivi semplicemente cosa non va, e l'IA corregge. Secondo i dati di Anthropic, Claude Code risolve il 73% dei bug al primo tentativo quando la descrizione del problema è chiara.
Una volta che le funzionalità di base funzionano, migliora la tua applicazione progressivamente. Ecco alcune richieste semplici che trasformano la tua todo app:
- "Aggiungi un contatore che mostra il numero di attività rimanenti"
- "Cambia il colore di sfondo in azzurro e i pulsanti in verde"
- "Fai in modo che le attività completate appaiano barrate e grigie"
- "Aggiungi un'animazione quando elimino un'attività"
- "Salva le attività in modo che rimangano anche se chiudo il browser"
Ogni richiesta impiega 30 secondi per scrivere e 20 secondi a Claude per generare la modifica. Copi, testi, convalidi. In 10 minuti, puoi trasformare la tua applicazione di base in qualcosa di veramente personale.
Gli errori comuni e come risolverli
L'errore numero uno: dimenticare di salvare il file dopo aver incollato il nuovo codice. Copi il codice da Claude, chiudi il browser, e non vedi nessun cambiamento. Soluzione: salva sempre (Ctrl+S o Cmd+S) prima di aggiornare il browser.
Secondo errore frequente: copiare solo una parte del codice. Claude a volte genera risposte lunghe, e puoi perdere la fine se non scorri fino in fondo. Verifica sempre che copi da <!DOCTYPE html> a </html> incluso.
Terza trappola: dare istruzioni contraddittorie. Se chiedi "rendi i pulsanti rossi" poi due messaggi dopo "voglio un tema blu ovunque", Claude cercherà di conciliare i due e il risultato può essere strano. Soluzione: se cambi idea, dillo chiaramente: "Finalmente, dimentica il rosso, voglio tutto in blu".
Quarto problema: il file non si apre nel browser ma nell'editor di testo. Succede se l'estensione del file è .txt invece di .html. Quando salvi, assicurati di digitare bene todo.html con il .html alla fine. Su Windows, potresti dover attivare la visualizzazione delle estensioni di file nelle opzioni di Esplora risorse.
Quinto errore: chiedere troppo in una volta. "Aggiungi categorie, date di scadenza, un sistema di priorità e una modalità scura" probabilmente genererà codice bugato. Procedi per tappe: una funzionalità alla volta, testa, convalida, poi passa alla successiva.
Se veramente nulla funziona dopo diversi tentativi, chiedi di nuovo a Claude: "Generami una todo app completa in un unico file HTML, versione il più semplice possibile, solo aggiungere ed eliminare attività". Riparte da questa base minimalista e costruisci progressivamente.
Andare oltre dopo la tua prima todo app
Una volta che la tua todo app è funzionante, hai acquisito le basi del vibe coding e puoi affrontare progetti più ambiziosi. La logica rimane la stessa: descrivi quello che vuoi, testi, correggi, migliori. Ma ora puoi mirare ad applicazioni più complesse.
Prossimo passo naturale: aggiungi la persistenza dei dati. Chiedi a Claude: "Salva le attività nel localStorage del browser in modo che rimangano anche dopo la chiusura". Questa funzionalità trasforma la tua todo app in uno strumento veramente utilizzabile quotidianamente.
Poi, esplora le categorie: "Aggiungi la possibilità di creare liste diverse (Lavoro, Personale, Spesa) con schede per passare da una all'altra". Inizi a strutturare dati più complessi senza scrivere una riga di codice.
Per andare ancora più lontano, impara a creare un'applicazione completa con l'IA. Questa guida ti mostra come passare da un progetto semplice a una vera applicazione web con database e autenticazione.
Puoi anche migliorare i tuoi prompt applicando le tecniche del prompt engineering. Meglio comunichi con Claude, più il codice generato corrisponde esattamente a quello che vuoi.
Infine, diversifica i tuoi progetti: crea un calcolatore di mancia, un generatore di citazioni casuali, un timer Pomodoro. Ogni progetto ti fa scoprire nuove possibilità. Su Skilzy, ti guidiamo attraverso 12 progetti progressivi che ti portano da principiante assoluto a creatore di applicazioni funzionanti.
Il vibe coding apre un mondo dove puoi costruire quello che immagini senza passare mesi a imparare la sintassi. La tua todo app è la prima pietra. Continua a sperimentare, a testare, a chiedere. È così che si impara.
Conclusione
Hai appena creato la tua prima applicazione in vibe coding. In un'ora, sei passato da zero a una todo app funzionante che puoi usare e migliorare. Questo metodo ti permette di costruire progetti concreti dal primo giorno, senza annegare nella teoria. Continua a sperimentare con altre idee, e unisciti a Skilzy per strutturare il tuo apprendimento con progetti progressivi e un accompagnamento personalizzato.
