Aggiornare un sito a una nuova versione del suo design system può sembrare un’attività soprattutto tecnica: cambiare alcune classi CSS, adeguare i componenti e verificare che tutto continui a funzionare. In realtà, quando il sito è composto da decine di template e serve più progetti, la migrazione diventa anche un esercizio di metodo.
Con il Team ICT della Scuola Normale Superiore abbiamo affrontato questo passaggio portando i template dei “siti federati” (i siti di laboratori e progetti di ricerca generati da un tema WordPress dedicato( da Bootstrap Italia 2.18 alla versione 3, ancora in beta nel momento in cui scrivo.
Il progetto è stato anche l’occasione per sperimentare l’uso di Claude Code, un assistente AI per lo sviluppo software, all’interno di un’attività reale: prima sul prototipo statico, poi sui template WordPress. Non per delegargli l’intero lavoro, ma per capire dove potesse accelerarlo e quali controlli fossero necessari per ottenere un risultato affidabile.
Non è soltanto un aggiornamento grafico
Bootstrap Italia traduce in componenti pronti all’uso le indicazioni del Design System del Paese. La versione 3 introduce cambiamenti che vanno oltre l’aspetto visivo: colori, tipografia e proprietà dei componenti fanno un uso più ampio delle CSS custom properties, le variabili native del browser, con il prefisso --bsi-*.
In precedenza molte personalizzazioni dipendevano dalle variabili Sass e dalla compilazione di un foglio di stile dedicato. Con il nuovo modello, una parte più consistente dell’identità visiva può essere governata attraverso variabili disponibili a runtime. Un bottone, un’intestazione o una card possono quindi leggere valori condivisi, invece di incorporare direttamente colori e dimensioni nel CSS compilato.
Per i siti federati questo comporta un vantaggio concreto. I colori istituzionali della Scuola, in particolare l’Ottanio #00728D e il Blu scuro #183F56, possono essere applicati intervenendo su un insieme circoscritto di variabili globali. La stessa architettura rende inoltre più semplice immaginare il riuso del tema da parte di un altro ente: cambia il sistema di valori, non il codice di ogni singolo componente.
Prima della migrazione: definire un percorso
L’AI può produrre codice molto velocemente. Proprio per questo, prima di usarla è stato importante stabilire il perimetro del lavoro.
Abbiamo iniziato con uno studio di fattibilità: analisi delle differenze tra le due versioni, valutazione dei rischi legati a una release ancora in beta, branch Git dedicato e suddivisione della migrazione in fasi. Dopo le fondazioni (token cromatici, tipografia e regole comuni) abbiamo scelto un piccolo gruppo di pagine rappresentative da usare come vertical slice, cioè come campione completo sul quale verificare l’approccio. Solo dopo questa prova siamo passati alle altre famiglie di pagina e, infine, al tema WordPress.
Questa preparazione ha dato all’assistente AI un contesto preciso e, allo stesso tempo, ha reso più semplice controllare le modifiche. Senza un piano, la velocità di generazione del codice avrebbe potuto moltiplicare anche incoerenze ed errori.
Filo: dare all’assistente fonti aggiornate
Uno dei rischi più concreti nell’uso dell’AI sul codice è la produzione di soluzioni plausibili ma non corrette: una classe ereditata dalla versione precedente, un attributo non più previsto o il nome verosimile di una variabile CSS che, in realtà, non esiste.
Per ridurre questo rischio abbiamo affiancato a Claude Code Filo, un server MCP sperimentale e non ufficiale sviluppato da Daniele Tabellini. MCP, acronimo di Model Context Protocol, è un protocollo che consente a un assistente AI di consultare strumenti e fonti esterne in forma strutturata.
Filo organizza informazioni provenienti dalle risorse del Design System Italia e permette di recuperare, tra le altre cose, il markup dei componenti di Bootstrap Italia 3, le varianti disponibili, le CSS custom properties e le indicazioni di accessibilità.
Nel nostro flusso di lavoro, prima di intervenire su header, footer, card, paginazione o carousel, l’assistente poteva quindi verificare la struttura prevista dalla nuova versione. La risposta del server non veniva però considerata una fonte definitiva: trattandosi di uno strumento sperimentale, veniva incrociata con il codice sorgente, la documentazione ufficiale e il comportamento effettivo nel browser.
È forse questo il passaggio più interessante dell’esperienza: l’AI diventa più utile quando non lavora soltanto sulla propria conoscenza generale, ma può interrogare fonti pertinenti e verificabili.
Accessibilità integrata nel lavoro
L’accessibilità non è stata trattata come un controllo conclusivo. Ogni pagina modificata, dal prototipo ai template WordPress, è stata verificata prima di essere considerata completa.
Abbiamo usato due livelli di controllo:
- Axe DevTools e Axe Linter in Visual Studio Code, per individuare già durante la scrittura problemi nel markup, come gerarchie dei titoli incoerenti, landmark mancanti, attributi ARIA non corretti o etichette assenti;
- Pa11y e axe-core sulla pagina renderizzata, per verificare aspetti che emergono soltanto nel browser, tra cui contrasto effettivo dei colori, comportamento dinamico e navigazione da tastiera.
Questo approccio ha permesso di intercettare problemi puntuali durante la migrazione, invece di accumularli fino alla fine. Ha anche aiutato a distinguere ciò che un controllo automatico può segnalare da ciò che richiede comunque una valutazione umana: la correttezza semantica, la comprensibilità dei contenuti e l’effettiva qualità dell’esperienza d’uso non possono essere affidate a un punteggio generato da uno strumento.
Dal prototipo al tema WordPress
La prima fase si è svolta su un prototipo HTML statico composto da circa trenta pagine rappresentative: elenchi, schede di dettaglio, risultati di ricerca, contatti e altre strutture ricorrenti. Era un ambiente isolato, adatto a sperimentare il nuovo markup e a verificare i componenti senza coinvolgere subito il tema in uso.
Una volta consolidato il modello, lo stesso metodo è stato applicato ai template WordPress che generano dinamicamente i siti dei laboratori e dei progetti.
L’intervento è rimasto intenzionalmente circoscritto alla struttura grafica: HTML, CSS e classi dei componenti. Non sono state modificate le interfacce di amministrazione né la configurazione dei contenuti. Ogni proposta prodotta dall’assistente è stata controllata da uno sviluppatore, sottoposta alle verifiche sintattiche e di accessibilità previste e mantenuta su un branch separato fino alla validazione.
Che cosa ha fatto davvero l’AI
Nel progetto l’assistente è stato particolarmente utile nelle attività estese e ripetitive: confrontare strutture simili, proporre l’adeguamento del markup, applicare trasformazioni coerenti su più template e aiutare a individuare parti ancora legate alla versione precedente.
Non ha invece sostituito le decisioni di progetto. La scelta dell’architettura, la definizione delle priorità, la valutazione degli impatti e l’accettazione finale del codice sono rimaste responsabilità umane. Lo stesso vale per l’accessibilità: i controlli automatici hanno fornito segnali preziosi, ma non una certificazione del risultato.
La produttività, in altre parole, non è derivata soltanto dalla capacità dell’AI di scrivere codice, ma dalla combinazione di quattro elementi:
- un perimetro definito prima di iniziare;
- fonti tecniche aggiornate e interrogabili;
- controlli automatici eseguiti durante tutto il processo;
- revisione umana prima dell’integrazione.
Un metodo riutilizzabile
Il risultato più visibile è un tema allineato a una versione più moderna e sostenibile di Bootstrap Italia. Quello forse più utile, però, è il metodo emerso dal lavoro.
Un assistente AI può ridurre il tempo dedicato alla parte meccanica di una migrazione e aiutare a mantenere coerenza fra molti file. Per farlo in modo affidabile deve però lavorare entro confini chiari, avere accesso a fonti verificabili ed essere inserito in un processo che preveda test e revisione.
Non basta quindi chiedere all’AI di “aggiornare il tema”. Occorre progettare anche il modo in cui l’assistente legge il contesto, propone le modifiche e viene controllato. È in questa organizzazione del lavoro, più che nella singola porzione di codice generata, che l’intelligenza artificiale ha mostrato il valore maggiore.
