Come insegnare a un agente AI a creare siti web e scrivere componenti React

Mi sono recentemente ritrovato a pensare: ci siamo abituati alle reti neurali che scrivono codice, ma il processo assomiglia ancora a passare blocchi di testo avanti e indietro in una chat. Copi un prompt, ottieni una parete di codice, lo incolli nel tuo progetto, ti rendi conto che hai dimenticato gli import o che gli stili si sono rotti... Routine familiare?

Sembra che i ragazzi di Google Labs si siano stancati della stessa cosa e abbiano lanciato stitch-skills. Non è un altro "assassino di programmatori", ma piuttosto un insieme di skill concrete per agenti AI che funzionano attraverso l'MCP (Model Context Protocol). Per semplificare: sono istruzioni e strumenti che permettono al tuo Claude, Cursor o Gemini di non limitarsi a generare testo, ma di manipolare consapevolmente la struttura del progetto, seguire i design system e persino assemblare siti web completi da una singola frase.

Cos'è in sostanza

Il progetto è una libreria di skill su misura per lavorare con Stitch — un server per la generazione di design visivi e interfacce. La caratteristica principale qui è la standardizzazione. Ogni skill nel repository è confezionata seguendo un template unificato: c'è un manifesto per l'agente (SKILL.md), script di validazione ed esempi "golden standard".

Questo serve affinché l'agente non debba indovinare cosa fare, ma segua un algoritmo chiaro. Ad esempio, se chiedi di trasformare uno sketch in componenti React, l'agente usa lo skill react-components, che conosce le regole del gioco: come verificare la sintassi e non perdere i design token.

A cosa serve nella pratica

Il repository attualmente ha circa una dozzina di skill pronte. Ho evidenziato quelle che fanno effettivamente risparmiare tempo, piuttosto che sembrare solo appariscenti nelle demo.

Generazione di siti completi tramite stitch-loop

Invece di chiedere "creami una landing page" e ottenere un solo file index.html, questo skill fa sì che l'agente dispieghi una struttura completa. Crea autonomamente le pagine necessarie, organizza i file e verifica che tutto funzioni effettivamente. In sostanza, è un'automazione della costruzione di prototipi.

Rifinire le idee con enhance-prompt

Spesso una rete neurale dà un risultato scadente perché il prompt era qualcosa come "rendilo carino." Lo skill enhance-prompt prende le tue idee frammentarie e le trasforma in una specifica con termini UI/UX e contesto del design system. È come avere un lead esperto che rivede il task prima di inviarlo a uno sviluppatore.

Documentazione tramite design-md

La mia parte "preferita" del lavoro — descrivere perché il bottone è esattamente di quel colore e come funziona lo spacing. Lo skill design-md analizza il progetto e genera autonomamente il file DESIGN.md. Non è solo un elenco di stili, ma una descrizione del design system in linguaggio umano che poi aiuta lo stesso agente AI a generare nuove schermate in modo più accurato.

Conversione in React e shadcn/ui

Per chi ha già giocato con i prototipi e vuole portarli in produzione, ci sono gli skill react-components e shadcn-ui. Assicurano che quando si trasferisce il design in codice, la logica dei componenti non venga persa e vengano utilizzate le librerie corrette.

Come funziona sotto il cofano

Se guardi dentro qualsiasi cartella di skill, vedrai una struttura rigorosa. I ragazzi di Google Labs sono chiaramente fautori della prevedibilità:

• SKILL.md: essenzialmente un system prompt che spiega il task dell'agente.
• scripts/: file eseguibili per validare il risultato. Se l'agente ha sbagliato il codice, lo script glielo comunicherà.
• examples/: esempi di riferimento. Il modello impara da questi (few-shot learning) per capire quale risultato è atteso.

L'installazione degli skill è resa il più semplice possibile tramite CLI:

npx skills add google-labs-code/stitch-skills --skill react:components --global

Il comando stesso troverà gli strumenti che hai installato (come Cursor o Claude Code) e aggiungerà nuove capacità a questi.

Vale la pena provare

Il progetto è specifico. Se scrivi codice alla vecchia maniera in Vim senza assistenza AI, probabilmente non ti sarà utile. Ma se hai già spostato parte della tua routine su Cursor o usi server MCP, allora stitch-skills è un ottimo esempio di come puoi strutturare il lavoro con le reti neurali.

Questo piacerà specialmente agli sviluppatori frontend e a chi costruisce rapidamente MVP. La possibilità di trasformare uno sketch astratto in un progetto strutturato con documentazione e componenti React in un paio di minuti è qualcosa a cui prima o poi arriveremo comunque.

Come svantaggio: la documentazione è in alcuni punti un po' scarsa, e il progetto non è ufficialmente supportato da Google come prodotto commerciale (è un esperimento di Google Labs). Ma come base per creare i tuoi skill personalizzati o per velocizzare il tuo attuale lavoro di layout — è un'opzione molto degna.

Puoi controllare tutti gli skill disponibili e leggere le specifiche nel repository del progetto.