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
Apri claude.ai e 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 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
Claude genererà il file e (su claude.ai) te lo mostrerà in anteprima come "artifact". Per vederlo sul tuo computer:
- Scarica il file (o copia il codice in un file di testo) e salvalo come index.html — attenzione: proprio .html, non .txt.
- Fai doppio click sul file: si apre nel browser. Questo è il tuo sito.
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. Tre opzioni gratuite; per oggi usiamo la prima, la più semplice in assoluto:
Netlify Drop (2 minuti, zero configurazione)
- Vai su app.netlify.com/drop.
- Trascina la cartella che contiene il tuo index.html (e le eventuali immagini) dentro la pagina.
- Fine. Netlify ti dà un indirizzo tipo nome-casuale.netlify.app, già online e con https.
- Dalle impostazioni puoi cambiare il nome in qualcosa di sensato, es. mario-pt-bologna.netlify.app.
Le alternative (equivalenti)
- Vercel — stessa semplicità, perfetto se in futuro userai v0.
- GitHub Pages — richiede un repository GitHub: lo faremo nel Modulo 6, ed è ideale quando vorrai la cronologia delle versioni.
Modificato qualcosa? Su Netlify Drop basta ritrascinare la cartella: la nuova versione sostituisce la vecchia, stesso indirizzo. Nel Modulo 6 automatizzeremo anche questo.
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 su Netlify Drop e personalizza l'indirizzo.
- 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 Netlify Drop — il tuo primo sito è online! 🎉