I migliori strumenti di IA design-to-code, ordinati in base al tuo punto di partenza

Un post sul forum della community di Figma racconta di aver selezionato una libreria di componenti e variabili in Figma Make e di aver ricevuto «colori quasi senza contrasto e dimensioni dei font che non hanno alcun senso». Lo stesso utente riferisce che i risultati erano migliori di circa il 90% senza nessuna libreria selezionata. È questo il fallimento su cui misurare qualsiasi strumento: o costruisce con i componenti che il tuo team ha già, o costruisce una UI parallela che dovrai riconciliare più avanti.

I migliori strumenti di IA design-to-code non competono su un'unica scala, perché partono da input diversi. Uno screenshot, un file Figma, un prompt scritto e una codebase esistente contengono quantità di struttura molto diverse.

Scegli in base a ciò che hai in mano. Un file Figma va a un convertitore come la generazione di codice integrata di Figma, Anima o Builder.io Visual Copilot. Uno screenshot va a screenshot-to-code. Un prompt va a v0, Lovable o Bolt. Una codebase esistente va a un agente di coding che legge il tuo design system tramite il Model Context Protocol (MCP).

TL;DR

• Usa la generazione di codice integrata di Figma se paghi Figma; screenshot-to-code solo quando non esiste alcun file di design; v0, Lovable o bolt.diy a seconda della destinazione del deploy, della fatturazione e della necessità di chiavi dei modelli; e Figma MCP con mappatura tramite Code Connect quando hai una codebase e un design system.
• Prima di adottare qualsiasi strumento, genera una schermata per cui hai già i componenti e controlla nell'output la presenza di colori esadecimali e valori in pixel scritti a mano nel codice, e di componenti dichiarati da zero dove dovrebbero esserci import dalla tua libreria.
• Puoi eseguire bolt.diy, screenshot-to-code e Penpot su un server che controlli, ma ognuno ha un'avvertenza: i commit di bolt.diy si sono fermati da febbraio a ottobre 2026 e la sua ultima release con tag risale a maggio 2025, screenshot-to-code richiede una chiave API di un modello, e Penpot self-hosted è in ritardo rispetto alla release cloud.
• Il riuso dei componenti funziona meglio quando uno strumento ha una mappatura esplicita, come Figma MCP con Code Connect o l'indicizzazione del design system di Builder.io, ma l'output generato va comunque revisionato, quindi metti in conto tempo di pulizia su ogni percorso.

Scegli lo strumento in base al punto di partenza

Uno screenshot contiene pixel e nient'altro. Un file Figma aggiunge nomi dei componenti, variabili e regole di layout, e una codebase contiene i componenti stessi, quindi è l'input a decidere quale tipo di strumento ha qualcosa su cui lavorare.

Il test a una schermata per il riuso di componenti e token

L'utente di Make che ha ottenuto risultati migliori senza nessuna libreria selezionata non ha avuto bisogno di una settimana di utilizzo per trovare il problema. È emerso già nelle prime pagine generate, ed è per questo che una sola schermata basta per testare qualsiasi candidato:

1. Scegli una schermata che il tuo team ha costruito con componenti esistenti, come un modulo di impostazioni o una card dei prezzi.
2. Genera quella schermata con lo strumento che stai valutando, usando lo stesso tipo di input che useresti per un lavoro nuovo.
3. Cerca nell'output i valori scritti a mano nel codice: colori esadecimali grezzi come #3B82F6, dimensioni dei font in pixel come font-size: 14px e spaziature fisse. Confronta con quanto spesso usa i nomi dei tuoi token, le variabili CSS o le classi del tema.
4. Controlla gli import. Un output che dichiara un nuovo Button o Card invece di importare i tuoi dalla libreria di componenti ha costruito una UI parallela.
5. Verifica che il framework e l'approccio agli stili corrispondano a quelli del repo. HTML semplice con stili inline è una riscrittura, qualunque sia l'aspetto dell'anteprima.

Nel sondaggio Stack Overflow 2025 sugli sviluppatori, il 66% degli sviluppatori ha indicato «soluzioni di IA quasi giuste, ma non del tutto» come la loro principale frustrazione con l'IA. È un dato sugli strumenti di coding con IA in generale, non uno studio sul design-to-code, ma una schermata che sembra corretta mentre scrive a mano ogni colore nel codice è «quasi giusta» esattamente in quel senso.

Nota: fai questo controllo prima di estendere uno strumento a tutto il team. Una schermata generata costa pochi minuti; un mese di output unito al codice con valori scritti a mano costa uno sprint di pulizia.

Il controllo legge il codice. Se la schermata renderizzata corrisponda ancora al design è una questione a parte, da affidare a uno strumento self-hostable come BackstopJS, che esegue test di regressione visiva.

Se hai un file Figma completo

Gli strumenti di IA Figma-to-code di questo gruppo partono tutti dallo stesso file, e la differenza pratica tra loro è dove finisce il codice: sul canvas, in un prototipo ospitato o in un export di terze parti.

La generazione di codice integrata di Figma

Selezioni un frame, un componente o una sezione in Figma Design, apri l'agente e chiedi HTML e CSS, componenti React o un framework specifico. Figma dice che puoi indirizzare l'agente verso il tuo design system così che l'output faccia riferimento ai tuoi token, alle variabili e alla struttura dei componenti invece che a segnaposto generici. La stessa pagina indica che è disponibile su tutti i piani a pagamento di Figma. A ottobre 2026 è in beta aperta, quindi il consumo di crediti e i limiti potrebbero cambiare.

L'output resta nel file come un thread che i tuoi sviluppatori possono aprire. Non c'è hosting né passaggio di deploy, il che è un limite se volevi un prototipo funzionante e un vantaggio se volevi codice da incollare nel tuo repo.

Figma Make

Figma Make è una superficie separata, guidata dai prompt. Secondo Figma, Make produce HTML, CSS e JavaScript per prototipi front-end, con un editor integrato per le modifiche. Puoi provarlo con il piano gratuito Starter, e supporta un'integrazione con Supabase per simulare dati reali.

Le superfici di Figma svolgono compiti diversi. Make produce un prototipo funzionante a partire da un prompt e un frame. Il generatore nel canvas trasforma i frame selezionati in codice usando la libreria del file. Figma MCP permette a un agente di coding nel tuo repo di leggere direttamente componenti e variabili.

Anima, Builder.io Visual Copilot e Locofy

Visual Copilot di Builder.io elenca output per React, Qwik e Angular, oltre a Kotlin e Flutter per il mobile, con stili in Tailwind CSS o CSS Modules. Per il riuso, la stessa pagina cita Custom Component Mapping, che collega i componenti Figma ai componenti della tua codebase. La documentazione di Builder ora segna la mappatura manuale dei componenti come deprecata a favore dell'indicizzazione dei componenti e la indica come funzione del piano Enterprise, quindi controlla prima la documentazione attuale e il tuo piano.

Il piano gratuito di Anima consente 5 generazioni di codice nel plugin Figma, insieme a 5 messaggi di chat al giorno e 5 importazioni da Figma nel suo AI Playground. A ottobre 2026, il prezzo Enterprise parte da 500 $ al mese, con fatturazione annuale.

Anima offre anche un server MCP, e il codice generato tramite esso conta sulla stessa quota di generazioni di codice. Locofy è un altro convertitore di file Figma in questa categoria.

Da quale convertitore Figma partire

Parti dalla generazione di codice integrata di Figma se il tuo team paga Figma: legge la libreria del file senza passaggi di export, e con un piano a pagamento il test a una schermata non aggiunge nessun abbonamento. Passa a Builder.io Visual Copilot quando vuoi un output che importi i componenti della tua codebase (controlla nella documentazione come si applicano al tuo piano la mappatura o l'indicizzazione dei componenti), o quando ti serve l'output mobile in Kotlin o Flutter che cita esplicitamente.

Usa Figma Make per un prototipo cliccabile da mostrare ad altri. Il codice che intendi unire al repo va prodotto con la generazione di codice nel canvas di Figma o con Builder.io Visual Copilot.

Se hai solo uno screenshot

screenshot-to-code è qui la scelta open source predefinita: licenza MIT, circa 80.000 stelle su GitHub e commit ancora in arrivo nel 2026. Gli dai un'immagine e restituisce HTML con Tailwind o CSS, React o Vue, tra gli altri stack. Esiste una versione ospitata su screenshottocode.com se preferisci non eseguire nulla.

Un'IA screenshot-to-code può lavorare solo con ciò che mostra l'immagine, quindi il limite sta nell'input. Uno screenshot non porta con sé identità dei componenti, variabili, stati hover o focus, né breakpoint responsive. Ciò che torna indietro è la ricostruzione di un singolo frame statico a una sola larghezza, e ogni token va indovinato dai colori dei pixel.

screenshot-to-code è lo strumento giusto quando non esiste alcun file di design, ad esempio per riprodurre un layout di riferimento o ricostruire una vecchia pagina di cui nessuno ha il file Figma. Se un file Figma esiste, parti da quello, perché contiene le informazioni che lo screenshot butta via.

Se hai solo un prompt

Senza un design system con cui allinearsi, i compromessi si spostano su altri tre fronti: come lo strumento ti fa pagare, quanta parte del codice puoi modificare e fin dove può crescere l'app generata.

v0

Il piano gratuito di v0 prevede un limite di 7 messaggi al giorno, oltre a deploy su Vercel, sincronizzazione con GitHub e un Design Mode visuale. L'uso a pagamento è fatturato per token, e le tariffe per token dei modelli v0 variano tra quattro livelli di modello, da v0 Mini a v0 Max Fast. Il costo di una sessione dipende dal livello che scegli e da quanto dura la conversazione.

Lovable

Lovable fattura in crediti. In Default Mode il costo varia in base alla complessità del task, mentre Plan Mode costa 1 credito per messaggio. Il piano gratuito include una dotazione giornaliera di 5 crediti di build, con un tetto di 30 al mese.

Un utente, in un thread su Reddit che confronta Bolt e Lovable, ha scritto che Bolt dava un «controllo quasi totale» sul codice, mentre Lovable sembrava mostrare solo i diff del codice «senza accesso in modifica». È la testimonianza di un singolo utente, quindi controlla l'editor attuale prima di dare per scontato che valga ancora.

Bolt.new e bolt.diy

Bolt.new è il prodotto ospitato. bolt.diy è la sua controparte open source, che ti permette di scegliere l'LLM per ogni prompt tra oltre 21 provider, inclusi modelli locali tramite Ollama. Non richiede obbligatoriamente un database; Supabase è un'integrazione opzionale. Controlla la cronologia dei commit e i termini di licenza prima di costruirci sopra.

Google Stitch

Google ha rilanciato Stitch a marzo 2026 con un canvas infinito, interazione vocale e un agente di design, secondo l'articolo di Winbuzzer sul redesign. Lo stesso articolo dice che i design si esportano in formato Figma o verso framework di codice come React, e che un server MCP collega Stitch a Claude Code, Gemini CLI, Cursor e Antigravity. Questo colloca Stitch tra il percorso del prompt e quello della codebase: parte da un prompt, ma può passare i design a un agente che lavora nel tuo repo.

Da quale strumento di prompt partire

In una discussione su Hacker News su Lovable e Bolt, un utente sosteneva che, con il backend affidato a Supabase, il limite massimo per costruire software utile con questi due strumenti è «incredibilmente basso». Lo stesso utente ha dichiarato di stare sviluppando un prodotto concorrente, quindi leggilo come un'opinione informata ma di parte, non come una misurazione.

Avere un file Figma non esclude automaticamente nemmeno questo percorso. Nello stesso thread su Reddit su Bolt e Lovable, un altro utente ha detto di non aver mai coinvolto Figma perché gli sembrava «più difficile e più fastidioso che scrivere semplicemente prompt» per il design che voleva.

Scegli v0 quando il tuo team fa deploy su Vercel e vuole la sincronizzazione con GitHub dal primo giorno. Scegli Lovable quando vuoi pianificare una build con messaggi Plan Mode a costo fisso prima di spendere crediti di build, e controlla prima il suo editor se prevedi di modificare il codice a mano.

Scegli bolt.diy quando devi usare le tue chiavi dei modelli o eseguire un modello locale, e trattalo come uno strumento di prototipazione finché la ripresa delle attività non si conferma. Prova Stitch quando vuoi design generati da prompt da passare poi, tramite il suo server MCP, a un agente di coding nel tuo repo.

Se hai già una codebase e un design system

Questo percorso lavora dentro il tuo repo, dove l'agente legge i componenti stessi. Il prezzo è il lavoro di configurazione, e anche così i meccanismi documentati migliorano le probabilità di riuso; per nessuno è documentato che lo garantisca.

Figma MCP

Secondo l'Help Center di Figma, il server Figma MCP può generare codice dai frame selezionati dopo aver letto componenti, variabili, dati di layout, contenuti FigJam e risorse Make. Usa Code Connect per mantenere quel codice allineato ai tuoi componenti, e il server remoto può scrivere di ritorno sul canvas.

È disponibile in due versioni: un server remoto, che Figma consiglia alla maggior parte degli utenti, e un server desktop per casi specifici di organizzazioni e aziende.

In concreto, MCP fornisce al tuo agente di coding un flusso strutturato del design. Quando l'agente ispeziona un frame, il server invia componenti, stili e variabili di quel frame, e il blog di Figma spiega che quando questi elementi sono mappati al codice tramite Code Connect, l'agente può attingere alle tue risorse di codice. Senza quella mappatura, riceve comunque il contesto degli stili e scrive il componente da zero.

L'agente lo scegli tu. La guida di configurazione di Figma è scritta per Claude Code, e la documentazione MCP di OpenCode copre sia server locali sia remoti. Scegliere tra Claude Code e OpenCode si riduce a comodità gestita contro controllo sul provider, e niente di questa scelta è specifico del lavoro di design.

Penpot MCP

Penpot è l'equivalente open source, e la sua documentazione descrive tre elementi chiave: un server MCP, un plugin MCP che gira dentro Penpot e collega il file aperto, e il client MCP in cui scrivi i prompt. Lo configuri dalla pagina Integrations del tuo account Penpot con una chiave MCP personale. Attraverso di esso, un agente può leggere e modificare componenti, stili, token e livelli.

La struttura del progetto è cambiata di recente. Il repository autonomo penpot-mcp riporta un avviso secondo cui è stato archiviato a febbraio 2026, con i contenuti integrati nel repository principale di Penpot. Le guide scritte per il vecchio repo potrebbero descrivere una configurazione diversa.

Claude Design

Anthropic ha lanciato Claude Design ad aprile 2026 come research preview di Anthropic Labs per gli abbonati Pro, Max, Team ed Enterprise. Durante l'onboarding, Claude crea un design system per il tuo team leggendo la tua codebase e i tuoi file di design, lo applica ai progetti successivi e raccoglie i design finiti in un pacchetto di handoff per Claude Code.

UXPin, che vende strumenti di design propri, ha scritto questo durante la settimana del lancio:

«I designer che hanno testato Claude Design questa settimana hanno segnalato font sbagliati, colori dei pulsanti errati e spaziature incoerenti già nelle prime sessioni.»

Da quale configurazione di codebase partire

Usa Figma MCP con un agente di coding quando il tuo design system vive in Figma e sei disposto a fare la mappatura con Code Connect, perché è proprio quella mappatura a separare i componenti importati dalle copie ristilizzate.

Usa Penpot MCP quando vuoi uno strumento di design open source che il tuo agente possa leggere e modificare. Penpot in sé si può self-hostare, ma la sua documentazione MCP descrive la configurazione tramite un account Penpot, quindi verifica il flusso sulla tua istanza prima di farci affidamento.

Usa Claude Design quando il tuo team paga Claude e vuole la minima configurazione, e fai il test a una schermata prima di fidarti della sua versione del tuo design system.

Eseguire le opzioni open source sul tuo server

Tre di questi strumenti possono girare su un server che controlli, scambiando l'hosting di un fornitore con la tua manutenzione e, per bolt.diy e screenshot-to-code, un contatore di crediti con le tue chiavi dei modelli. A ottobre 2026, ognuno ha un compromesso.

bolt.diy. Il progetto non ha ricevuto commit dal 7 febbraio al 4 ottobre 2026, e la sua ultima release con tag, v1.0.0, è uscita a maggio 2025, secondo la cronologia dei commit del repository. Il progetto ha licenza MIT, ma la WebContainers API da cui dipende (il runtime nel browser che esegue il codice generato) richiede una licenza per l'uso in produzione in un contesto commerciale a scopo di lucro.

Prototipi e proof of concept non hanno bisogno di quella licenza. In pratica, bolt.diy è una scelta ragionevole per prototipare con le tue chiavi; ricontrolla la sua attività prima di costruirci sopra un prodotto.

screenshot-to-code. Per eseguirlo in autonomia serve almeno una chiave di un provider di modelli, di OpenAI, Anthropic o Gemini, più un server da mantenere. Il costo di esercizio è l'uso del modello per ogni generazione, fatturato dal provider di cui configuri la chiave.

Penpot. Penpot si può self-hostare con Docker Compose o con l'Helm chart ufficiale su Kubernetes, OpenShift o Rancher. La sua documentazione nota che le immagini Docker self-hosted vengono pubblicate poco dopo gli aggiornamenti SaaS, quindi una nuova funzione cloud arriva sulla tua istanza con un certo ritardo.

Dove eseguirli dipende da chi li usa. Un portatile va benissimo per provare bolt.diy o screenshot-to-code da soli. Un server ha senso quando un team condivide un'istanza Penpot, o quando gli strumenti devono restare raggiungibili mentre il portatile è chiuso.

Non esiste un requisito minimo ufficiale per bolt.diy, quindi considera circa 4 GB di RAM e 2 vCPU con storage NVMe come punto di partenza per una singola app Node come questa. L'help center di Penpot dice che 4 CPU e 16 GB di RAM sono sufficienti a supportare migliaia di utenti e che puoi essere prudente nell'allocare le risorse; per l'istanza di un piccolo team più un agente di coding sullo stesso server, partire da 8 a 12 GB di RAM è ragionevole. Se l'agente girerà anche in un IDE nel browser su quella macchina, il dimensionamento di Code Server con Claude Code è un calcolo a parte.

Fare self-hosting significa che gestisci tu il server, applichi gli aggiornamenti e custodisci le chiavi dei modelli. Se preferisci saltare l'installazione, offriamo deploy in un clic di bolt.diy per mettere in piedi un ambiente di prototipazione e di Penpot per uno spazio di design condiviso, su una VPS Linux con accesso root. Gli agenti di coding come Claude Code e OpenCode si distribuiscono allo stesso modo, come app separate. La manutenzione resta a te; la configurazione no.

Domande frequenti

Cosa è meglio, Figma Make o v0?

Decide il tuo punto di partenza. Figma Make lavora dentro Figma, prende un frame più un prompt e produce HTML, CSS e JavaScript per prototipi front-end. v0 parte da un semplice prompt, fa deploy su Vercel e si sincronizza con GitHub. Scegli Make quando il design esiste in Figma e v0 quando parti da una descrizione.

L'IA può convertire uno screenshot in codice funzionante?

Sì. Il progetto open source screenshot-to-code trasforma uno screenshot in codice HTML, React o Vue usando una chiave API di OpenAI, Anthropic o Gemini. Il risultato però è la ricostruzione di un singolo frame statico, senza identità dei componenti, stati di interazione o breakpoint responsive, quindi un file Figma è un input migliore quando esiste.

Esiste un'alternativa open source a v0, Bolt o Lovable?

Sì. bolt.diy è la controparte open source di Bolt.new e l'opzione self-hostable tra gli strumenti da prompt ad app trattati qui. Ha licenza MIT e funziona con le tue chiavi dei modelli, inclusi modelli locali tramite Ollama. I suoi commit si sono fermati da febbraio a ottobre 2026, e la sua dipendenza WebContainers richiede una licenza commerciale per l'uso in produzione a scopo di lucro, quindi controlla sia l'attività sia la licenza prima di costruirci sopra un prodotto.

Perché il codice generato dall'IA ignora il mio design system?

Molti strumenti vedono il tuo design come pixel o come un frame appiattito e ne approssimano colori, font e spaziature. Gli strumenti che leggono direttamente le variabili e la struttura dei componenti, come Figma MCP, possono importare i tuoi componenti reali quando sono mappati al codice tramite Code Connect. Senza quella mappatura, l'agente usa i tuoi stili come contesto e scrive componenti nuovi.