Creare un sito web con l'AI — Parte 2: Configurazione

Nella Parte 1 hai installato Cursor e preparato i contenuti del sito con Gemini. Ora configuriamo Cursor per lavorare nel modo giusto: con controllo totale su quello che l’AI fa, anche senza sapere programmare.

---

La Plan Mode: guidare l’AI senza programmare

Cursor ha una funzione che cambia tutto: la Plan Mode. Quando è attiva, l’AI non scrive codice subito. Prima analizza quello che gli chiedi, fa domande per capire meglio, e crea un piano dettagliato di quello che intende fare.

Tu leggi il piano, lo modifichi se qualcosa non ti convince, e solo quando sei soddisfatto gli dici di procedere. È come avere un architetto che ti mostra il progetto prima di iniziare a costruire.

Come attivarla

1. Apri la chat AI con Ctrl+L (o Cmd+L su Mac)
2. Premi Shift+Tab per attivare la Plan Mode (oppure clicca sul selettore in basso nella chat)

Quando è attiva, vedrai l’indicazione “Plan” nella chat. Da questo momento, ogni richiesta che fai passerà prima per la fase di pianificazione.

E quindi? La Plan Mode è il tuo strumento di controllo. Non devi capire il codice — devi solo leggere il piano in linguaggio normale e dire “sì, vai” oppure “no, cambia questo”. L’AI fa il lavoro tecnico, tu prendi le decisioni.

---

Impostare le regole del progetto

Cursor permette di creare delle regole: file di testo che dicono all’AI come deve lavorare. Pensa alle regole come a un briefing che daresti a un collaboratore: “il sito deve essere fatto così, con queste tecnologie, seguendo questi standard”.

Le regole si salvano nella cartella .cursor/rules/ dentro il tuo progetto. Non devi crearle a mano — chiedi a Cursor di farlo.

Prompt da copiare-incollare

Apri la chat di Cursor (Ctrl+L) e incolla questo:

Crea una regola di progetto nella cartella .cursor/rules/ con queste indicazioni:

- Sito statico con HTML, CSS e JavaScript puro (no framework)
- Design moderno e pulito, ispirato ai siti premiati su Awwwards
- Mobile-first: progettato prima per smartphone, poi adattato a schermi più grandi
- Completamente responsive (si adatta a qualsiasi dimensione di schermo)
- Animazioni fluide e leggere
- Performance ottimali (caricamento veloce)
- Accessibilità WCAG 2.1 (utilizzabile da tutti, anche con disabilità)
- Struttura cartelle pulita e ordinata

Cursor creerà un file con queste regole. Da quel momento, ogni volta che gli chiederai di scrivere codice, seguirà queste indicazioni automaticamente.

---

Il Dev Server: vedere il sito in tempo reale

Il dev server è un programmino che fa girare il tuo sito sul tuo computer, così puoi vederlo nel browser mentre lo costruisci. Invece di aprire i file uno per uno, vai a un indirizzo tipo localhost:3000 e vedi il sito esattamente come lo vedrebbe un visitatore. Ogni modifica si aggiorna automaticamente.

Prompt da copiare-incollare

Configura un dev server semplice per il progetto. Deve:
- Servire i file HTML/CSS/JS dalla cartella del progetto
- Aggiornarsi automaticamente quando modifico un file
- Aprirsi nel browser all'avvio

Cursor installerà quello che serve e ti dirà come avviarlo. Di solito basta un comando nel terminale (la finestra nera in basso in Cursor) — te lo indicherà lui.

Nota importante: questa è probabilmente la parte più tecnica di tutta la guida. Se qualcosa non funziona al primo tentativo, non preoccuparti. Scrivi a Cursor nella chat qual è il problema e lascia che lo risolva. Se ti trovi davvero bloccato, è il momento giusto per chiedere una mano a qualcuno con più esperienza.

---

Cosa hai ottenuto fin qui

• Plan Mode attivata — hai il controllo su ogni decisione
• Regole di progetto impostate — l’AI sa come deve lavorare
• Dev server configurato — puoi vedere il sito nel browser in tempo reale

Nella Parte 3 — Costruzione passiamo all’azione: userai i contenuti preparati con Gemini per costruire il sito, pagina per pagina.