Come programmare con ChatGPT o Gemini: guida per principianti al vibe coding

Vibe coding significa descrivere a parole ciò che vuoi e lasciare che ChatGPT o Gemini scriva il codice. Per farlo bene da principiante, chiedi file completi, un piccolo passo alla volta, e salva ogni versione che funziona. L’estensione gratuita AI Code Harvester elenca tutti i file della chat e li scarica con un clic, così non devi scorrere per cercare il codice. Funziona nel browser e non richiede un account.

Cos’è il vibe coding e dove si bloccano i principianti

Nel vibe coding il codice non lo scrivi tu. Dici all’IA cosa costruire (una pagina per la mia panetteria), lei scrive i file, tu li provi e dici cosa cambiare. È un modo reale per iniziare, perché vedi i risultati in pochi minuti. Il problema arriva dopo un’ora. La chat è lunghissima, il codice è sparso in molte risposte e scorri su e giù per trovare l’ultima versione di ogni file. Copi, incolli, perdi il filo e rompi qualcosa che funzionava. Le abitudini qui sotto risolvono gran parte di questo.

Sette abitudini che rendono più facile programmare con un’IA

1. Parti da una frase chiara. Di’ cosa costruisci, per chi e che aspetto deve avere. Un sito di una pagina per un dog sitter, con foto, prezzi e modulo di contatto. Un obiettivo chiaro vale più di un prompt lungo.
2. Chiedi ogni volta il file completo. Scrivi: Mostra sempre il file completo, non solo le righe modificate. I frammenti sono il motivo numero uno per cui i principianti incollano il codice nel posto sbagliato.
3. Fai nominare ogni file all’IA. Chiedile di scrivere nome ed estensione sopra ogni blocco di codice, come index.html o style.css. Salvalo come regola fissa: in ChatGPT vai su Settings → Personalization → Custom Instructions.
4. Cambia una cosa alla volta. Una richiesta, poi la prova. Se chiedi dieci modifiche insieme e qualcosa si rompe, non saprai quale è stata.
5. Rimanda nella chat il messaggio di errore. Quando la pagina è vuota o un pulsante non fa nulla, incolla il testo esatto dell’errore e scrivi correggi questo. Non devi ancora capirlo.
6. Salva una versione funzionante prima di ogni modifica grossa. Scarica i file, mettili in una cartella e conserva quella copia. Se la risposta successiva rompe tutto, torni indietro in un minuto.
7. Chiedi il perché, con parole semplici. Di’ spiegami cosa fa questa parte come se fossi nuovo. Un breve corso sulle basi insieme alla chat aiuta molto, perché così capisci quando l’IA sbaglia.

L’aiuto che chiude con lo scorrimento: AI Code Harvester

• Un elenco di file, non una chat lunghissima. Il pannello mostra ogni blocco di codice dell’ultima risposta come una riga con il nome del file e un puntino colorato per il tipo.
• Copia o salta. Ogni riga ha un pulsante Copy e un pulsante con freccia che porta la chat a quel blocco.
• Scegli cosa salvare. Spunta o togli la spunta a Include in download per ogni file.
• Un clic per tutto. Download all as ZIP salva l’intera risposta in un solo ZIP. Preferisci file separati? Passa a 1-by-1.
• Extra utili. Un pulsante Jump to Bottom, un cursore di opacità perché il pannello non copra la chat e un pulsante che spiega la configurazione.
• Resta dove lo metti. Trascinalo, ridimensionalo o riducilo, e può ricordare la posizione.

Puoi anche cambiare l’aspetto. Nelle impostazioni scegli uno di quattro colori di accento: viola, blu, verde o ambra, e decidi dove vanno i file: una cartella AI_Code_Harvester dentro Download, direttamente in Download o chiedere ogni volta. La configurazione richiede un minuto: aggiungila dal Chrome Web Store e apri ChatGPT o Gemini.

Perché installarla dal primo giorno

Quando sei nuovo fai tanti piccoli tentativi e ognuno produce file. Senza aiuto, ognuno è lavoro manuale: scorrere, selezionare, copiare, incollare in un file, dargli un nome. Con Harvester è un clic e i file hanno già i nomi giusti, quindi la cartella del progetto resta in ordine dal primo giorno. Così l’abitudine sei (salvare una versione funzionante) costa quasi niente, ed è il motivo per cui l’estensione è più utile all’inizio. È gratuita, funziona solo su chatgpt.com e gemini.google.com, e le tue chat restano sul tuo computer. Altro sulla pagina di AI Code Harvester.

Limiti, con onestà

• Raccoglie solo blocchi di codice. Se l’IA dà solo un PDF, un’immagine o un link a un file, sullo schermo non c’è nulla da salvare.
• Non ricrea le cartelle. Lo ZIP è piatto, quindi sposti i file nelle cartelle da solo.
• Non scrive né corregge il codice. Resta compito dell’IA, e provarlo resta compito tuo.
• Le viste Canvas (la finestra laterale che alcune chat aprono) potrebbero non essere trovate. Chiedi all’IA di incollare il codice nella chat.

Conosci già la parte del salvataggio in ZIP? Il passo dopo passo è nella nostra guida per scaricare il codice dell’IA come ZIP.

Da sapere prima di iniziare

Domande frequenti