PipelineFigma → Code.
Sistemi multi-agente che generano codice React partendo dai design Figma e iterano in autonomia, confrontando lo schermo generato con il design originale, fino al 95% di corrispondenza visiva.
- Ambito
- Sistemi multi-agente, in produzione su un design system enterprise
- Stack
- Claude Code · MCP Figma + Playwright · React + Tailwind · Storybook · Vision diff · Orchestrazione Python
- Risultato
- 95% di corrispondenza visiva tra codice e design
Settimane di handoff.
Un team di design mantiene un design system maturo dentro Figma. Quando arriva il momento di costruire, gli sviluppatori ricostruiscono gli stessi componenti a mano in React. Il risultato sono settimane di handoff, deriva visiva tra design e codice, e interfacce che smettono di rispettare i token del design system.
Un anello chiuso.
Trattare la generazione del codice non come una traduzione una-tantum, ma come un anello chiuso. Un agente estrae i token reali del design system da Figma, senza tirare a indovinare i colori. Un secondo agente scrive il codice. Un terzo confronta lo screenshot del codice con il design e misura la differenza. Il ciclo si ripete, correzione dopo correzione, finché il match non raggiunge la soglia impostata.
Cinque fasi,
un solo ciclo.
Estrazione → generazione → render → confronto visivo → iterazione. Il ciclo si ripete, correzione dopo correzione, fino al 95% di match.
Legge Figma via MCP.
L’agente legge il file Figma via MCP ed estrae nodi semantici, token di colore, spaziatura e tipografia, variabili collegate e asset.
Il codice nasce dai token.
Un secondo agente sintetizza JSX e stili usando i token estratti. I valori arrivano dalle variabili del design system, mai colori scritti a mano.
Uno screenshot vero.
Il codice gira in locale su Storybook e viene catturato uno screenshot reale del componente renderizzato.
Misura la differenza.
Un terzo agente mette a confronto lo screenshot del codice con il design Figma tramite analisi visiva e quantifica gli scostamenti.
Corregge e riprova.
Per ogni differenza sopra soglia l’agente applica una correzione mirata — un padding sbagliato, un peso del font diverso — e ripete. Si ferma al 95% di match o al limite di iterazioni impostato.
95%
di corrispondenza visiva tra codice e design, soglia raggiunta in autonomia dal loop.
I limiti, scritti dentro.
Il codice della pipeline e i design dei clienti sono coperti da accordi di riservatezza enterprise. Quello che posso raccontare è il metodo: l’anello chiuso estrazione → generazione → render → confronto visivo → iterazione, e la disciplina dei token reali che lo regge.
Hai un problema
misurabile?
Scrivimi chi sei e su che progetto stai lavorando. Rispondo entro 48 ore lavorative.
Continua dal portfolio.
Case study · Ricerca UX
Skill clustering interviste
Skill che raggruppa interviste UX in cluster tematici in ~30 minuti contro 30 ore.
