Benvenuto nel vibe coding

1. Cos'è il vibe coding 10 min

Nel febbraio 2025 Andrej Karpathy — co-fondatore di OpenAI ed ex direttore AI di Tesla — descrive un nuovo modo di programmare: "ti abbandoni alle vibrazioni, dimentichi che il codice esiste". Descrivi all'AI cosa vuoi, guardi il risultato, chiedi modifiche. Il termine vibe coding nasce così, e in pochi mesi diventa il modo in cui milioni di persone senza alcuna formazione tecnica costruiscono siti e applicazioni reali.

La definizione operativa che useremo per tutto il corso è questa:

Attenzione a un equivoco comune: vibe coding non significa "premere un bottone e sperare". I risultati migliori arrivano quando tu fai bene tre cose che l'AI non può fare al posto tuo:

• Decidere cosa costruire — l'AI esegue, ma la visione del prodotto è tua.
• Giudicare il risultato — funziona? È chiaro? Un utente lo capirebbe?
• Guidare l'iterazione — dire cosa cambiare, in che ordine, e quando fermarsi.

In altre parole: tu sei il regista, l'AI è la troupe. Il regista non tiene in mano la telecamera, ma senza di lui il film non esiste.

2. Come "ragiona" un'AI (quel tanto che ti serve) 10 min

Non serve una laurea in informatica, ma capire tre proprietà dei modelli linguistici (LLM come Claude, GPT, Gemini) ti eviterà il 90% delle frustrazioni:

a) L'AI completa, non "sa"

Un LLM genera la continuazione più plausibile del testo che gli dai. Questo significa che la qualità di quello che ottieni dipende dalla qualità di quello che scrivi. Un prompt vago ("fammi un sito bello") produce un risultato generico; un prompt specifico produce un risultato specifico.

b) L'AI ha un contesto limitato

Ogni conversazione ha una "memoria di lavoro" (il contesto). Se il progetto cresce, l'AI può perdere pezzi. Regola pratica: una conversazione = un obiettivo. Nuova funzionalità? Spesso conviene una chat nuova, riassumendo dove sei arrivato.

c) L'AI a volte inventa (allucinazioni)

Può citare con sicurezza funzioni o servizi che non esistono, o dichiarare "fatto!" qualcosa che non funziona. Non è malafede, è statistica. L'antidoto è uno solo: verifica sempre il risultato con i tuoi occhi, aprendo la pagina e cliccando.

3. Come funziona il web in 10 minuti 10 min

Ti servono solo cinque concetti, spiegati con la metafora di un ristorante:

Distinzione fondamentale che userai già dal Modulo 3:

• Un sito statico è solo sala: pagine che si guardano (portfolio, vetrina, landing page). Facile e gratis da pubblicare.
• Una web app ha anche cucina e dispensa: gli utenti si registrano, salvano dati, interagiscono (una to-do list, un gestionale, un social).

Nel corso costruiremo prima il sito (Modulo 3), poi l'app (Modulo 4). Stessa logica, ambizione crescente.

4. La mentalità del vibe coder 10 min

Gli strumenti cambiano ogni mese; la mentalità resta. Le quattro abitudini che fanno la differenza:

1. Pensa in piccolo, costruisci a strati

Il principiante chiede "fammi un e-commerce completo" e ottiene un disastro. Il pro chiede prima la pagina prodotto, poi il carrello, poi il checkout. Una richiesta = una cosa. Ogni strato deve funzionare prima di aggiungere il successivo.

2. Descrivi il risultato, non la tecnologia

Non devi sapere come si fa una galleria fotografica: devi saper dire cosa deve fare ("quando clicco su una foto si ingrandisce, con una X per chiudere"). La tecnologia la sceglie l'AI.

3. L'errore è informazione, non fallimento

Quando qualcosa si rompe, il messaggio di errore è un indizio prezioso: si copia e si incolla all'AI, che nella maggior parte dei casi si corregge da sola. Il panico è opzionale.

4. Salva prima di osare

Prima di una modifica grossa, metti al sicuro la versione che funziona (vedrai come nel Modulo 6 con Git — per ora anche solo un duplicato del progetto). Così puoi sperimentare senza paura.

5. Anatomia di un buon prompt 10 min

Il prompt è il tuo strumento di lavoro principale. La struttura che useremo per tutto il corso ha quattro parti: Contesto → Obiettivo → Dettagli → Vincoli.

Fammi un sito per la mia attività.

[CONTESTO] Sono un fotografo di matrimoni a Firenze. Non so programmare.

[OBIETTIVO] Voglio una landing page a pagina singola per trovare nuovi clienti.

[DETTAGLI]
- Sezioni: hero con titolo e foto, portfolio con 6 immagini, 3 testimonianze, prezzi (3 pacchetti), modulo contatti
- Stile: elegante e minimale, tanto spazio bianco, colori crema e nero
- Testi in italiano, tono caldo e professionale

[VINCOLI]
- Deve essere un singolo file HTML che posso pubblicare gratis
- Perfettamente leggibile da smartphone
- Niente testi segnaposto tipo "lorem ipsum": scrivi testi realistici

Nota tre cose: il contesto dice chi sei (l'AI adatta tono e scelte), i dettagli sono elencati (non un muro di testo), i vincoli evitano i difetti che scopriresti solo dopo. Non serve che sia perfetto al primo colpo: il prompt apre la conversazione, l'iterazione la chiude.

6. Esercizio pratico 10 min

Cosa hai imparato:

• Cos'è il vibe coding e qual è il tuo ruolo (regista, non dattilografo)
• Le 3 proprietà dell'AI: completa, ha contesto limitato, a volte inventa
• Frontend, backend, database, hosting e dominio — la mappa del web
• Le 4 abitudini mentali: piccoli passi, risultato non tecnologia, errore = informazione, salva prima di osare
• La struttura del prompt perfetto: Contesto → Obiettivo → Dettagli → Vincoli