Se hai un sito web, che sia il portfolio di un videomaker, la landing page di un prodotto, un e-commerce o un blog, prima o poi ti rendi conto che potrebbe servirti qualcosa in più di una semplice pagina statica. Un calcolatore, un configuratore, un box dinamico, un quiz, un assistente o un piccolo strumento utile per chi arriva sul sito. In una parola: un widget. Sul mio sito ne puoi trovare diversi e negli ultimi tempi ho iniziato a realizzarli quasi tutti attraverso l’intelligenza artificiale. Se segui il blog sai che mi occupo da anni anche di siti web e ho già raccontato perché secondo me competenze visive, comunicazione e sviluppo di un sito dovrebbero dialogare tra loro. In questo articolo, però, non voglio spiegarti come creare un intero sito con l’IA, né entrare nel confronto tra builder, Claude, Codex o piattaforme no-code.

Voglio concentrarmi su qualcosa di molto più specifico: come creare piccoli strumenti funzionanti da integrare tramite codice embed in un sito già esistente, a prescindere da come sia stato realizzato. Fino a qualche anno fa, per ottenere qualcosa del genere avresti dovuto metterti a studiare JavaScript per ore, cercare snippet online oppure rivolgerti direttamente a uno sviluppatore. Oggi esiste una possibilità in più: descrivere quello che vuoi a ChatGPT o Codex e farti aiutare a trasformare quell’idea in codice. Non significa essere diventati programmatori dall’oggi al domani. Ma significa poter prototipare qualcosa che prima, probabilmente, non avremmo nemmeno provato a costruire.

ChatGPT e Codex Non SonoEsattamente la Stessa Cosa

Qui bisogna fare subito una distinzione. Nel linguaggio comune diciamo spesso che “ChatGPT mi ha creato il widget”, ma ChatGPT e Codex non sono esattamente la stessa cosa. ChatGPT è l’assistente generalista con cui possiamo scrivere, ragionare, fare ricerca e anche generare codice. Codex, invece, è lo strumento di OpenAI specificamente orientato al lavoro di programmazione: può scrivere e correggere codice, lavorare sui file di un progetto, individuare errori e affrontare operazioni tecniche in maniera più strutturata. Per creare un widget semplice può essere sufficiente partire direttamente da ChatGPT. Quando però iniziano le revisioni, aumentano le interazioni o hai bisogno di correggere problemi tra HTML, CSS e JavaScript, Codex diventa decisamente più interessante.

Il principio rimane comunque lo stesso: l’intelligenza artificiale non materializza magicamente un widget dentro il sito, ma genera e modifica il codice necessario per farlo funzionare. HTML per la struttura, CSS per l’aspetto grafico e JavaScript per interazioni e comportamento.

Il vantaggio è soprattutto nel metodo. Invece di cercare per ore uno snippet che faccia quasi ciò che desideri e poi tentare di adattarlo, puoi partire direttamente dal problema e chiedere una soluzione costruita attorno alle tue esigenze. Per chi lavora nel video, nel marketing o nella comunicazione può significare integrare nel proprio sito strumenti realmente utili per chi lo visita: un calcolatore di preventivo, un quiz interattivo, un comparatore, un configuratore di servizi, una FAQ dinamica, un sistema per filtrare contenuti o qualsiasi altra piccola funzione abbia senso per il proprio pubblico. Ed è qui che l’IA diventa interessante: non perché elimina la programmazione, ma perché abbassa enormemente la barriera che separava un’idea dalla possibilità di provarla.

1. Tutto Inizia dal Prompt

La qualità del widget dipende moltissimo da come formuli la richiesta e da quanto contesto riesci a fornire a ChatGPT. Un prompt generico produce facilmente una soluzione generica. Più informazioni dai all’inizio, meno tempo perderai successivamente a correggere ciò che il modello ha interpretato male.
 

Se scrivi semplicemente:

“Fammi un widget per il mio sito.”

stai lasciando all’IA praticamente ogni decisione.
 

Meglio qualcosa del genere:

“Crea un widget interattivo in HTML, CSS e JavaScript per il mio sito portfolio. Deve permettere all’utente di selezionare il tipo di video — evento, corporate o spot — la durata e il numero di giornate di ripresa, per poi calcolare un preventivo indicativo. Voglio un design moderno e responsive, facilmente leggibile anche da smartphone. Restituisci il codice in un unico blocco pronto per essere inserito tramite embed. Non utilizzare librerie esterne se non indispensabili e fai in modo che CSS e JavaScript del widget non modifichino altri elementi della pagina.”
 

Quest’ultima indicazione è molto più importante di quanto sembri. Quando inserisci codice dentro una pagina già esistente, infatti, uno dei problemi più fastidiosi può essere il conflitto con gli stili del sito. Un CSS scritto male potrebbe modificare pulsanti, testi o elementi che non appartengono affatto al widget. Per questo oggi chiedo quasi sempre di racchiudere tutto dentro un contenitore identificabile e di limitare gli stili esclusivamente a quell’elemento.

Nel prompt puoi specificare anche:
 

• dimensioni minime e massime;
• colori e font già utilizzati dal sito;
• comportamento su smartphone e tablet;
• eventuali animazioni;
• cosa deve accadere quando l’utente clicca un pulsante;
• quali dati devono essere salvati e quali no;
• se vuoi evitare completamente dipendenze e librerie esterne;
• requisiti minimi di accessibilità, come contrasto, etichette comprensibili e navigazione da tastiera.
   

Più il brief assomiglia a quello che daresti a una persona, più diventa semplice ottenere qualcosa di realmente utilizzabile.

2. Il widget Deve Funzionare Anche Fuori da ChatGPT

Una volta ottenuto il codice arriva la prova più importante: metterlo davvero dentro il sito. Se utilizzi una delle piattaforme no-code per creare siti web di cui ho parlato in passato, devi prima capire quale tipo di codice consente di incorporare. Alcuni builder permettono di inserire direttamente HTML, CSS e JavaScript; altri impongono maggiori limitazioni o richiedono strumenti specifici. Su Flazio, che utilizzo anche per questo sito e che ho recensito approfonditamente dopo anni di utilizzo, il mio approccio è molto semplice: preparo il componente, lo inserisco attraverso il codice embed e poi inizio la parte che, paradossalmente, richiede più tempo della prima generazione: testarlo e correggerlo. Su WordPress esiste invece il blocco HTML personalizzato, anche se quando il progetto diventa più complesso può essere preferibile gestire CSS e JavaScript separatamente invece di concentrare tutto dentro una pagina.

In generale puoi seguire due strade:

• mantenere HTML, CSS e JavaScript all’interno di un unico componente, soluzione comoda per widget piccoli e facilmente trasportabili;
• dividere struttura, stile e script in file separati, soluzione più ordinata quando il progetto cresce e hai maggiore controllo sul sito.
   

Il punto è che il codice che funziona nell’anteprima di ChatGPT o in un ambiente di test non è automaticamente pronto per essere pubblicato. Devi provarlo sul sito reale. Desktop, smartphone e tablet. Chrome, Firefox, Safari quando possibile. Devi cliccare tutti i pulsanti, inserire valori sbagliati, provare campi vuoti, ridimensionare la finestra e cercare volontariamente di romperlo. Un widget moderno deve essere responsive. Se sul computer è bellissimo ma su uno smartphone esce dallo schermo, sovrappone i testi o rende impossibile premere un pulsante, non hai creato un valore aggiunto: hai creato un nuovo problema. Questo è widget per le recensioni che ho integrato sul mio sito. Come lo vedi?

3. I miei Widget sono nati Attraverso Decine di Piccole Correzioni

Uno degli errori più facili è fermarsi nel momento in cui il widget finalmente funziona. Funzionare non significa essere finito. Puoi chiedere a ChatGPT o Codex di adattare colori, font, spaziature, bordi, micro-animazioni e comportamento allo stile grafico del tuo sito. Personalmente preferisco procedere per iterazioni: prima faccio funzionare la struttura, poi intervengo sulla grafica, successivamente sulle interazioni e soltanto alla fine rifinisco la versione mobile. È esattamente quello che ho fatto con diversi strumenti che trovi oggi sul mio sito, come il widget dedicato alle recensioni o l’assistente in chat. Sono nati attraverso Codex, ma non sono usciti pronti al primo prompt.
 

Ho iniziato fornendo il contesto del sito e spiegando ciò che volevo ottenere. Poi, versione dopo versione, ho corretto dimensioni, colori, animazioni, pulsanti, testi, comportamento e adattamento ai vari schermi. Nella mia esperienza, proprio la versione mobile continua a richiedere più attenzione: su desktop il codice tende a essere più semplice da controllare, mentre su uno schermo piccolo basta una larghezza impostata male, un elemento troppo grande o un comportamento imprevisto per compromettere l’intera esperienza. Il parallelismo con il montaggio video viene quasi naturale: prima costruisci la struttura, poi trovi il ritmo e infine rifinisci. 

Non cerco quindi di ottenere tutto con un unico prompt gigantesco. Preferisco lavorare attraverso richieste successive:

“Riduci gli spazi verticali.”

“Su mobile il pulsante esce dal contenitore: correggi soltanto questo problema senza modificare la versione desktop.”

“Rendi l’animazione più discreta.”

“Il font deve essere Poppins e deve ereditare correttamente le dimensioni dal sito.”

“Analizza il codice e dimmi se ci sono elementi ridondanti che possiamo eliminare senza cambiare grafica e funzioni.”
 

Questa modalità permette anche di capire cosa sta cambiando. E secondo me è fondamentale, perché affidare tutto all’IA senza comprendere minimamente ciò che sta facendo è il modo più semplice per ritrovarsi con un problema che non sai più correggere.

4. Se Qualcosa Non Funziona, Segnala l’errore all’IA

Una delle cose che trovo più utili è la capacità di utilizzare l’intelligenza artificiale anche nella fase di debugging. Se il widget non funziona, non limitarti a scrivere “non va”. Spiega cosa dovrebbe succedere, cosa succede realmente e in quale momento compare il problema. Ancora meglio: apri gli strumenti per sviluppatori del browser e controlla la console. Se compare un errore JavaScript, copialo e incollalo nella conversazione insieme al codice interessato.

Puoi scrivere:
“Quando clicco sul pulsante Calcola non succede nulla. Nella console appare questo errore. Analizza il codice, individua la causa e restituiscimi esclusivamente le parti che devo sostituire.”

È molto più efficace che chiedere di rigenerare ogni volta l’intero widget. Lo stesso vale per i problemi grafici. Uno screenshot può essere più utile di dieci righe di spiegazione: mostra ciò che accade su mobile, descrivi ciò che vorresti ottenere e chiedi di non modificare gli elementi che già funzionano. Qui emerge uno degli utilizzi dell’IA che considero più interessanti anche al di fuori della programmazione: non soltanto creare qualcosa da zero, ma avere un interlocutore con cui affrontare un problema per tentativi successivi. Se stai pensando di utilizzare ChatGPT in maniera più continuativa per attività di questo tipo, sul blog trovi anche il mio confronto aggiornato tra ChatGPT Gratis, Plus e Pro e le differenze tra i vari piani.

5. Attenzione: il Codice Va Controllato Prima di Pubblicarlo

C’è però una parte meno divertente, ma fondamentale. Non incollare alla cieca qualsiasi codice generato dall’intelligenza artificiale dentro il tuo sito. Un semplice calcolatore che esegue qualche operazione direttamente nel browser è una cosa. Un widget che gestisce dati personali, effettua pagamenti, accede a database, utilizza account degli utenti o comunica con servizi esterni è qualcosa di molto diverso. Il primo controllo riguarda le prestazioni. Evita librerie enormi se servono soltanto per ottenere una piccola animazione, riduci le chiamate a servizi esterni e verifica che la console del browser non mostri continuamente errori. Un widget dovrebbe migliorare l’esperienza di chi visita il sito, non rallentare l’intera pagina per mostrare un contatore.

Il secondo riguarda la sicurezza. Se un widget utilizza un servizio attraverso API, non inserire password, token o chiavi private direttamente nel JavaScript pubblico della pagina. Il codice eseguito dal browser può essere ispezionato dall’utente: una chiave API inserita lì dentro non è realmente segreta. In questi casi è necessario utilizzare un backend o un sistema intermedio capace di custodire le credenziali. E poi c’è il buon senso. Se stai realizzando un configuratore di prezzi puoi sperimentare tranquillamente. Se stai costruendo un sistema che raccoglie informazioni sensibili o gestisce transazioni economiche, probabilmente è arrivato il momento di coinvolgere qualcuno che sappia realmente cosa sta facendo.

Non devi diventare uno sviluppatore full stack per creare un widget. Ma dovresti almeno capire cosa stai incollando nel tuo sito. L’IA è un acceleratore, non un sostituto della responsabilità tecnica.

Creare Piccoli Strumenti Non è Mai Stato Così Accessibile

Creare widget funzionanti e moderni oggi è molto più accessibile di quanto lo fosse soltanto pochi anni fa. Con ChatGPT puoi trasformare un’idea in una prima struttura di codice in pochi minuti; con Codex puoi spingerti più avanti nella programmazione, correggere problemi e lavorare progressivamente su versioni più complesse. Ma la parte che trovo veramente interessante non è la velocità con cui viene generato il primo codice. È la possibilità di sperimentare. Puoi avere un’idea alle dieci del mattino, costruire un primo prototipo, scoprire che non funziona, correggerlo, cambiarne completamente l’interfaccia e, magari, pubblicarne una versione funzionante senza avere passato settimane a studiare un linguaggio di programmazione soltanto per capire se quell’idea avesse senso.
 

Per chi lavora nel video, nella comunicazione o gestisce autonomamente la propria presenza online significa avere più controllo sul proprio ecosistema digitale. Non soltanto pagine belle da vedere, ma strumenti che le persone possono realmente utilizzare. Ed è forse questo l’aspetto dell’intelligenza artificiale che mi interessa di più: non fare tutto al posto nostro, ma permetterci di avvicinarci ad ambiti che fino a ieri sembravano troppo complessi persino per provare. Se vuoi vedere come applico questo approccio anche alla progettazione di siti, puoi scoprire come lavoro nella creazione e nel restyling di siti web. Se invece hai già un sito, il mio consiglio è molto più semplice: pensa a una piccola funzione che sarebbe realmente utile a chi lo visita e prova a descriverla a ChatGPT. Il primo widget probabilmente non sarà perfetto. Ma nemmeno il primo montaggio lo è mai.

Se vuoi saperne di più di come uso ChatGPT e l'IA nel mio lavoro, contattami: sarò felice di fare una chiacchierata.