1. Il progetto di oggi 5 min
Costruiremo insieme una landing page professionale a pagina singola — l'esempio guida è un personal trainer, ma la ricetta è identica per qualunque attività o progetto. Perché una landing page come primo progetto?
- È un sito statico: solo frontend, niente database — perfetto per iniziare.
- È utile davvero: ogni attività ne ha bisogno; potresti già venderla.
- Si pubblica gratis in 2 minuti.
Il flusso completo che imparerai vale per qualsiasi sito: prompt → genera → guarda → chiedi modifiche → pubblica.
2. Generare il sito 15 min
Crea una cartella nuova (es. sito-trainer), aprila in Antigravity e avvia Claude Code nel terminale integrato (o usa l'agente di Antigravity), come hai imparato nel Modulo 2. Poi usa la struttura del Modulo 1. Ecco il prompt guida — copialo e adattalo:
[CONTESTO] Sono un personal trainer a Bologna, specializzato in persone che riprendono ad allenarsi dopo i 40 anni. Non so programmare. [OBIETTIVO] Crea una landing page a pagina singola per acquisire clienti. [DETTAGLI] - Sezioni nell'ordine: hero (titolo forte + sottotitolo + bottone "Prenota una prova gratuita"), 3 benefici, come funziona in 3 passi, 2 testimonianze, prezzi (3 pacchetti, evidenzia quello centrale), FAQ (4 domande), contatti con bottone WhatsApp - Stile: moderno ed energico, colori: verde scuro e bianco, font leggibili - Testi realistici in italiano, tono motivante ma concreto (niente frasi fatte) [VINCOLI] - Un SOLO file index.html completo, con CSS incluso nel file - Perfetto da smartphone (la maggior parte dei clienti arriva da Instagram) - Nessuna immagine esterna: usa colori, icone emoji e forme CSS - Quando hai finito, dimmi come vedere il risultato
L'agente creerà il file index.html direttamente nella cartella del progetto. Per vederlo: fai doppio click sul file (si apre nel browser), oppure chiedi all'agente di avviarti un'anteprima locale. Da questo momento, ogni modifica che l'agente farà la vedrai ricaricando la pagina.
Un sito può essere fatto di decine di file, ma per iniziare un file unico è imbattibile: niente pezzi che si perdono, facilissimo da salvare, spostare e pubblicare. Quando i progetti crescono, l'AI dividerà i file per te.
3. Iterare come un pro 15 min
Il primo risultato sarà buono ma non perfetto: è normale, è il punto di partenza. Ora inizia il vero vibe coding. Regole per iterare bene:
Una modifica alla volta, mirata
› Il titolo della hero è debole. Proponimi 5 alternative più incisive, poi applica quella che ti sembra migliore. › La sezione prezzi non si distingue abbastanza: metti in risalto il pacchetto centrale con un bordo colorato e un'etichetta "Più scelto". › Su smartphone i bottoni sono troppo piccoli: rendili larghi quanto lo schermo e più alti. › Aggiungi una barra fissa in alto con il logo testuale e un bottone "Prenota" sempre visibile.
Descrivi il problema, anche senza sapere la soluzione
Non serve il linguaggio tecnico: "la pagina sembra vuota a sinistra", "i colori sono tristi", "non si capisce cosa devo cliccare" sono richieste perfettamente valide. L'AI traduce le sensazioni in soluzioni tecniche — è per questo che si chiama vibe coding.
Controlla sempre da smartphone
Apri il sito dal telefono (o restringi la finestra del browser). La maggior parte dei tuoi visitatori sarà da mobile: se qualcosa è storto lì, è un bug prioritario.
A volte una modifica ne guasta un'altra. Niente panico: "Con l'ultima modifica il menu è sparito su mobile. Ripristina il menu e mantieni il resto." E se il file diventa un pasticcio, chiedi: "Riscrivi il file completo, pulito, con tutte le modifiche fatte finora."
4. Immagini e contenuti 10 min
Tre modi per avere immagini, dal più semplice al più professionale:
- Niente foto (per ora): gradienti, icone emoji e forme CSS — come nel prompt guida. Sorprendentemente elegante.
- Foto gratuite: Unsplash e Pexels offrono foto professionali libere. Scaricale, mettile nella stessa cartella del sito e di' all'AI: "usa l'immagine hero.jpg nella sezione hero".
- Immagini generate: strumenti come le funzioni immagine di ChatGPT/Gemini creano illustrazioni su misura del tuo brand.
Per i testi, ricorda: l'AI è anche un ottimo copywriter. Chiedile di riscrivere una sezione in tono più diretto, di accorciare, di aggiungere una FAQ. Testi veri e specifici battono sempre testi generici: dai all'AI informazioni reali sulla tua attività.
5. Pubblicare gratis 10 min
Il momento magico — e con un agente è una sola richiesta. La via da pro, che useremo per tutto il corso, passa da GitHub:
Voglio pubblicare questo sito gratis su GitHub Pages. 1. Prepara il progetto con git e crea un commit 2. Guidami passo passo per creare il repository sul mio account GitHub e caricarci il sito 3. Spiegami dove attivare GitHub Pages e dammi l'indirizzo finale
L'agente farà i comandi git per te e ti guiderà nei (pochi) click su GitHub. Alla fine avrai un indirizzo tipo tuonome.github.io/sito-trainer, online e con https. Bonus enorme: il progetto è già "in cassaforte" su GitHub — ogni versione salvata per sempre, come vedremo nel Modulo 6.
L'alternativa lampo: Netlify Drop
Per una prova al volo senza account GitHub: vai su app.netlify.com/drop e trascina la cartella del sito nella pagina. Online in 2 minuti a un indirizzo nome.netlify.app. (Anche Vercel funziona allo stesso modo, collegando il repository GitHub.)
Modificato qualcosa? Di' all'agente: "salva una versione e aggiorna il sito pubblicato". Con GitHub Pages il sito si aggiorna a ogni push; nel Modulo 6 renderemo questo flusso completamente automatico anche su Netlify/Vercel.
6. Esercizio: il TUO sito 5 min + pratica
- Riprendi il progetto che hai definito nell'esercizio del Modulo 1.
- Scrivi il prompt con la struttura completa e genera la tua landing page.
- Fai almeno 5 iterazioni: titolo, colori, mobile, una sezione in più, testi.
- Pubblica con l'agente su GitHub Pages (o, per fare prima, su Netlify Drop).
- Manda il link a due persone e chiedi: "si capisce cosa offro e cosa devi fare?". Applica il feedback con un'altra iterazione.
Cosa hai imparato:
- Il flusso completo: prompt → genera → guarda → itera → pubblica
- Come chiedere modifiche mirate, una alla volta
- Come descrivere problemi senza linguaggio tecnico
- Come gestire immagini e testi reali
- Come pubblicare gratis con l'agente e GitHub Pages — il tuo primo sito è online! 🎉