Vibe Coding · Lezione

Fornire contesto all'IA

Condivida file, obiettivi e tecnologie affinché l'IA si adatti al suo progetto

Lezione 3 di 413 passaggi

Fornire contesto all'IA è una lezione Vibe Coding gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vibe Coding, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vibe Coding include 4 lezioni in totale.

Perché il contesto cambia tutto

Lo stesso prompt può produrre codice completamente diverso a seconda di ciò che l'AI sa del progetto. Un prompt privo di contesto costringe l'AI a indovinare il framework, lo stile e persino i nomi dei file.

Fornendo il contesto, il codice si integra direttamente nel progetto: stesse convenzioni, stesso stile, senza riscritture. Questa lezione spiega come fornire all'AI il contesto di base corretto.

Tre tipi di contesto

Il contesto utile si presenta in tre forme:

Contesto del progetto — stack tecnologico, framework e convenzioni
Contesto del codice — i file e gli snippet effettivi su cui sta lavorando
Contesto dell'obiettivo — il «perché» più ampio alla base dell'attività

I prompt migliori intrecciano tutti e tre gli aspetti, così l'AI realizza qualcosa che si adatta davvero al progetto.

Contesto del progetto: lo stack

Indichi sempre all'AI con quali tecnologie sta costruendo il progetto. «React con Tailwind» produce codice molto diverso da «HTML e CSS semplici». Specificare lo stack impedisce all'AI di importare librerie che non sono disponibili.

"This project uses React, TypeScript and Tailwind CSS.
 We use functional components and hooks only — no class
 components. Build a reusable <Avatar /> component that
 shows a circular user image with a fallback initial."

Contesto del codice: mostri i file

Il miglioramento più significativo per qualsiasi prompt consiste nell'incollare il codice effettivo su cui sta lavorando. In questo modo l'AI rispetta i nomi delle variabili, lo stile e la struttura esistente, invece di inventarne di nuovi.

"Here's my current cart code:

  let cart = [];
  function addItem(name, price) {
    cart.push({ name, price });
  }

Add a function removeItem(name) that removes the first
matching item, and a total() function that sums the prices."

Gli editor condividono automaticamente il contesto

Strumenti come Cursor e Claude Code possono leggere autonomamente i file aperti e la struttura del progetto. In Cursor può contrassegnare i file con @filename per inserirli nel prompt.

È per questo che gli editor nativi per l'AI sembrano più intelligenti di un semplice chatbot: conoscono già il codice del progetto.

In Cursor's chat:

"Look at @cart.js and @checkout.js.
 The total in checkout doesn't match the cart.
 Find why and fix it."

Contesto dell'obiettivo: il «perché»

Spiegare all'AI perché sta facendo qualcosa la aiuta a compiere scelte più appropriate. Se sa che l'app è destinata ai bambini, deve funzionare offline o deve essere estremamente veloce, adatta il codice di conseguenza.

"This is a flashcard app for young children, so the UI must
 be large, colorful, and tappable with no small targets.
 Build the answer-reveal button with that in mind."

Il contesto aiuta l'AI a rispettare il Suo stile

Quando mostra del codice esistente, l'AI ne riproduce le convenzioni. Ecco uno stile che l'AI copierebbe se lo incollasse: noti le arrow function e i nomi. Chiedere «un altro elemento simile» mantiene coerente il codice del progetto.

Questo snippet funziona autonomamente, così può osservare il modello in azione.

const formatPrice = (n) => '$' + n.toFixed(2);
const formatPercent = (n) => n.toFixed(0) + '%';

// Ask AI: "Add formatDate in this same arrow-function style."
console.log(formatPrice(12.5));
console.log(formatPercent(0.42 * 100));

Un file di contesto del progetto

Mossa da professionisti: conservi un breve file di contesto che l'AI legga ogni volta. Cursor usa .cursorrules, mentre Claude Code usa CLAUDE.md. Inserisca lì una volta per tutte lo stack, le convenzioni e le regole su ciò che si deve o non si deve fare.

Così non dovrà più ripetersi in ogni prompt.

Example CLAUDE.md:

# Project Conventions
- Stack: Next.js + Tailwind
- Use TypeScript, no 'any'
- Components in /components, one per file
- Prefer small, pure functions
- Never add a dependency without asking

Anche troppo contesto può essere un problema

Il contesto è potente, ma non è gratuito. Fornire dieci file non correlati confonde l'AI e nasconde la parte importante. Condivida ciò che è rilevante per questa attività, non l'intero progetto.

Punti a includere: il file che sta modificando, il file con cui interagisce e una descrizione dello stack in una riga.

Il contesto previene le allucinazioni

Quando l'AI non dispone di contesto, a volte inventa nomi di funzioni, file o API inesistenti: si parla di allucinazione. Fornire codice reale la mantiene ancorata alla realtà.

Se l'AI continua a citare elementi che non ha mai scritto, è un segnale: ha bisogno di più contesto, non di un modello migliore.

Symptom of missing context:

  AI: "Just call your existing saveUser() helper."
  You: "...I don't have a saveUser() helper."

Fix: paste the real file so the AI sees what exists.

Un prompt con contesto completo

Ecco tutti gli elementi combinati: stack, codice reale e obiettivo. Questo è il tipo di prompt che permette di ottenere al primo tentativo codice pronto per la produzione e adatto al progetto.

"Stack: plain HTML/CSS/JS, single index.html. (PROJECT)

Here's my current toggle code:
  const btn = document.querySelector('#theme');
  btn.onclick = () => document.body.classList.toggle('dark'); (CODE)

Goal: I want the theme choice to persist after refresh, since
 users hate re-toggling every visit. Add localStorage. (GOAL)"

Verifica rapida

L'AI continua a suggerire di chiamare funzioni e file che non esistono nel progetto. Qual è la causa più probabile e come si risolve?

Rispondi nella lezione interattiva

Riepilogo: ancorare l'AI al Suo mondo

Il contesto trasforma il codice generico in codice adatto al progetto. Valuti sempre la possibilità di condividere:

Contesto del progetto — stack e convenzioni
Contesto del codice — i file reali (li contrassegni in Cursor/Claude Code)
Contesto dell'obiettivo — il «perché» alla base dell'attività

Conservi un file CLAUDE.md o .cursorrules per non ripetersi e condivida solo ciò che è rilevante. Prossimo argomento: come iterare, perfezionando un prompt passo dopo passo invece di ricominciare da capo.

Gratis per iniziare

Impara JavaScript con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 25
Lezioni: 100

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Fornire contesto all'IA» è gratuita?

Sì — il testo completo di «Fornire contesto all'IA» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vibe Coding, passa a CoddyKit PRO. Il corso Vibe Coding include 4 lezioni in totale.

Cosa imparerò in «Fornire contesto all'IA»?

Condivida file, obiettivi e tecnologie affinché l'IA si adatti al suo progetto Eserciti Vibe Coding con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vibe Coding?

Non è richiesta alcuna esperienza precedente. Vibe Coding su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Fornire contesto all'IA»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vibe Coding?

Sì. Ogni lezione Vibe Coding include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vibe Coding