Cos'è la modalità Work e perché cambia il modo di creare un sito
La modalità Work è l'ambiente agentico di ChatGPT: non risponde più a una domanda per volta, ma porta avanti un task completo — scrive codice, lo esegue, naviga il web con un browser remoto, crea file e, per gli account idonei, pubblica direttamente online. Nell'interfaccia appare come un cursore/menu in alto che permette di scegliere tra "Chat" e "Work". A differenza della chat classica, in modalità Work il sistema mostra un piano operativo visibile (cosa sta facendo, cosa ha completato, cosa manca) e si ferma nei punti strategici per chiederti una decisione — più simile a un collaboratore che sottopone alternative prima di procedere, che a un semplice generatore di testo.
Genera HTML/CSS/JS completo
Piano operativo visibile
Browser remoto integrato
Pubblicazione diretta (account idonei)
🔧 Cosa succede "sotto il cofano" quando costruisci un sito
✍️
Generazione del codice
ChatGPT scrive HTML, CSS e JavaScript completi in base al tuo prompt — spesso un unico file autonomo con CSS e JS incorporati.
👁️
Anteprima live
Il canvas (o l'output renderizzato) mostra il risultato prima di qualsiasi pubblicazione — vedi il sito come lo vedrebbe un visitatore, non solo il codice.
🌍
Browser remoto
Work Mode può navigare siti reali, aprire pagine, seguire link, compilare moduli — utile per prendere riferimenti di stile o raccogliere contenuti da integrare.
🚀
Hosting/pubblicazione
Per gli account idonei, un pulsante "Pubblica/Condividi" nel canvas genera una URL live senza servizi esterni. Altrimenti si esporta il file e si pubblica altrove (vedi sotto).
💡 Work Mode richiede piano Plus, Team o Enterprise (non disponibile su ChatGPT Go/Free) e i modelli più recenti (GPT-4o e successivi) per le funzioni di generazione ed esecuzione codice.
🥪 Il metodo "Context Sandwich" — la tecnica per un primo risultato già buono
Il fattore che più determina se il primo risultato è utile o frustrante è come scrivi il prompt. "Fammi un sito per la mia palestra" produce un sito generico che richiederà 5 giri di correzioni. Il metodo Context Sandwich risolve il problema incapsulando la richiesta tra due strati di contesto:
🍞 Strato superiore — chi sei, per chi è il sito
Chi sei, cosa fa la tua attività, chi sono i visitatori/clienti tipo, che sensazione deve trasmettere il sito.
🥬 Farcitura — la richiesta specifica
Cosa vuoi costruito: sezioni, struttura, elementi interattivi, contenuti da includere.
🍞 Strato inferiore — vincoli, stile, cosa NON fare
Palette colori, font, tono del testo, vincoli tecnici, cosa escludere esplicitamente.
📝 Esempio completo di Context Sandwich:
Strato superiore: "Gestisco un piccolo studio di yoga a Bologna. I miei clienti sono soprattutto professionisti tra i 30 e i 45 anni. Voglio un sito che trasmetta calma e qualità, non un'aria clinica o commerciale."
Farcitura: "Crea un sito a una pagina con: hero con CTA verso gli orari dei corsi, sezione 'chi siamo', sezione servizi a tre colonne con icone, testimonianze, modulo di contatto in fondo."
Strato inferiore: "Usa una palette bianco caldo e verde salvia. Niente foto stock generiche — preferisco blocchi di colore pieno. Font pulito e moderno. Nessun pop-up, nessun contenuto in autoplay."
⚠️ Senza lo strato inferiore, ChatGPT sceglie ciò che è più comune: pulsanti blu, font predefinito, immagini segnaposto con scritto "La tua immagine qui". Definire i vincoli in anticipo chiude i vuoti più prevedibili prima che si verifichino.
📋 Come si usa — dal prompt al sito online, passo per passo
1
Apri una chat nuova, seleziona Work
Usa una conversazione pulita (non una vecchia chat piena di storico) per una finestra di contesto più chiara. Verifica di essere sul modello più recente disponibile.
2
Scrivi il prompt con il metodo Context Sandwich
Dedica 5 minuti a scriverlo bene. Se hai già una brand identity, incolla i codici colore esatti (hex), i nomi dei font e i testi che vuoi usare parola per parola (payoff, contatti, descrizioni servizi).
3
Rivedi l'anteprima come un visitatore
Non come uno sviluppatore: la gerarchia visiva è chiara? La call-to-action salta all'occhio? Qualcosa sembra rotto restringendo la finestra?
4
Itera con richieste mirate
Non ripartire da zero. Un cambiamento alla volta, descritto come lo vedrebbe un designer, non un programmatore: "Lo spazio tra header e prima sezione sembra troppo stretto, aggiungi respiro" funziona meglio di istruzioni tecniche in CSS.
5
Pubblica il sito
Pulsante integrato (se disponibile) oppure una delle opzioni di hosting gratuito qui sotto.
🚀 Dove pubblicare il file HTML — 4 opzioni gratuite
A · GitHub Pages
Carichi il file .html in un repository, attivi Pages nelle impostazioni → URL live in circa 2 minuti. Nessuna configurazione server.
B · Netlify Drop
La più veloce: trascini il file HTML nella finestra del browser su Netlify Drop → URL live immediata. Piano gratuito generoso per siti statici.
C · Vercel
Simile a Netlify, interfaccia più orientata agli sviluppatori. Piano gratuito adatto a pagine statiche singole (vedi anche la guida Vercel v0).
D · Hosting integrato ChatGPT
Per account idonei: pulsante "Pubblica/Condividi" nel canvas → URL live senza servizi esterni. Verifica se è disponibile nel tuo account.
🎯 Dare feedback efficace nelle iterazioni
Non serve conoscere il CSS per dare un buon feedback: descrivi cosa vedi e cosa vuoi, non la sintassi tecnica.
❌
Evita
"Cambia il padding-top a 48px" — è un'istruzione tecnica che a volte confonde più che aiutare.
✅
Preferisci
"Lo spazio tra header e prima sezione è troppo stretto, aggiungi respiro" — descrivi l'intento, ChatGPT lo traduce in codice.
💡 Usa siti di riferimento per la direzione stilistica: se fai fatica a descrivere lo stile che vuoi, indica un sito che lo rappresenta: "il layout generale deve somigliare a una moderna pagina SaaS — pulito, molto spazio bianco, gerarchia chiara, tipo la home di Notion." Dà un ancoraggio stilistico forte senza dover definire ogni dettaglio.
⚠️ Errori comuni da evitare
🌫️
Prompt vaghi seguiti da frustrazione
Un prompt debole produce un output generico. Il Context Sandwich costa 5 minuti in più e ne risparmia un'ora di iterazioni.
📚
Impilare troppe modifiche in un solo messaggio
Chiedere 6 cambiamenti insieme spesso produce risultati parziali. Una modifica chiara alla volta, specialmente per il layout.
📱
Non testare su mobile
Molti primi draft hanno problemi di layout a 375px di larghezza. Verifica sempre con gli strumenti sviluppatore del browser.
🦻
Dimenticare accessibilità e SEO
ChatGPT spesso omette alt text sulle immagini, meta description e tag Open Graph a meno che tu non li richieda esplicitamente nello strato inferiore del prompt.
🔂
Trattarlo come "one-and-done"
Work Mode è iterativo per natura. Anche un ottimo primo draft richiede qualche passaggio — mettilo in conto nella pianificazione del tempo.
⚠️ I limiti onesti da conoscere prima di iniziare
ChatGPT Work Mode produce ottimi siti statici: landing page, portfolio, pagine evento, siti personali, pagine prodotto, pagine prezzi. Tutto ciò che richiede logica lato server, autenticazione utenti o interrogazioni a database è fuori dalla portata di un singolo file HTML — per questo, nel corso, colleghiamo questa guida a Supabase/Strapi/Directus (backend) e a Pipedream (automazioni) quando il sito deve anche "fare qualcosa" (moduli che scrivono su un CRM, prenotazioni, aree riservate).
✏️ Esercitazioni pratiche
ESERCIZIO 1Il tuo primo Context Sandwich
Scegli un'attività reale o immaginaria (studio professionale, piccolo e-commerce, evento) e scrivi il prompt completo seguendo i 3 strati: superiore, farcitura, inferiore. Generalo con ChatGPT in modalità Work → osserva l'anteprima → annota 3 cose che il prompt ha reso corrette al primo colpo grazie ai vincoli espliciti (cosa sarebbe successo senza lo strato inferiore?).
⏱️ 60 min📦 Consegna: prompt nei 3 strati + screenshot anteprima + analisi👤 Individuale
ESERCIZIO 2Tre iterazioni mirate, senza ripartire da zero
Prendi il sito dell'esercizio 1 e miglioralo con 3 richieste mirate consecutive, una alla volta (mai più di una modifica per messaggio): una sulla gerarchia visiva, una sulla responsività mobile, una su accessibilità/SEO (alt text, meta description). Documenta per ciascuna: cosa hai chiesto, cosa è cambiato, se ChatGPT ha rispettato la modifica senza rompere altro.
⏱️ 50 min📦 Consegna: 3 richieste + 3 screenshot before/after👤 Individuale
ESERCIZIO 3Dal file al sito online
Pubblica il sito completato usando una delle 4 opzioni di hosting gratuito (consigliata: Netlify Drop per la velocità). Verifica il sito pubblicato da smartphone reale (non solo simulatore): tutto funziona? Documenta l'URL live e i passaggi seguiti — questo esercizio produce un artefatto reale e verificabile, non solo teoria.
⏱️ 40 min📦 Consegna: URL live + passaggi documentati👥 Coppia
ESERCIZIO 4Statico o dinamico? La decisione del cliente
Tre brief clienti: (a) un ristorante vuole solo un sito vetrina con menu e orari; (b) un e-commerce vuole un modulo di contatto che scriva automaticamente su un foglio Google e invii una notifica email; (c) una palestra vuole un sistema di prenotazione corsi con calendario in tempo reale. Per ciascuno: ChatGPT Work Mode basta da solo, o serve integrarlo con altri strumenti del corso (Supabase, Pipedream, Directus)? Motiva ogni risposta.
⏱️ 45 min📦 Consegna: 3 schede decisionali motivate👥 Gruppo 3-4
🌐 Apri ChatGPT →