De beste design-to-code AI-tools, ingedeeld naar je startpunt

Een bericht op het communityforum van Figma beschrijft hoe iemand in Figma Make een component- en variabelenbibliotheek selecteerde en “kleuren met bijna geen contrast en lettergroottes die nergens op slaan” terugkreeg. Dezelfde gebruiker meldt dat de resultaten zo’n 90% beter waren zonder geselecteerde bibliotheek. Dat is de fout waaraan je elke tool moet toetsen: hij bouwt met de bestaande componenten van je team, of hij bouwt een parallelle UI die je later moet rechttrekken.

De beste design-to-code AI-tools strijden niet op één ranglijst, want ze beginnen bij verschillende input. Een screenshot, een Figma-bestand, een geschreven prompt en een bestaande codebase bevatten heel verschillende hoeveelheden structuur.

Kies op basis van wat je in handen hebt. Een Figma-bestand gaat naar een converter, zoals de ingebouwde codegeneratie van Figma, Anima of Builder.io Visual Copilot. Een screenshot gaat naar screenshot-to-code. Een prompt gaat naar v0, Lovable of Bolt. Een bestaande codebase gaat naar een coding agent die je design system leest via het Model Context Protocol (MCP).

TL;DR

• Gebruik de ingebouwde codegeneratie van Figma als je voor Figma betaalt; screenshot-to-code alleen als er geen designbestand is; v0, Lovable of bolt.diy afhankelijk van je deploydoel, de manier van afrekenen en of je eigen modelsleutels nodig hebt; en Figma MCP met Code Connect-mapping als je een codebase en een design system hebt.
• Genereer voordat je een tool invoert één scherm waarvoor je al componenten hebt, en controleer de output op hardcoded hexkleuren en pixelwaarden, en op nieuw gedeclareerde componenten waar imports uit je bibliotheek hadden moeten staan.
• Je kunt bolt.diy, screenshot-to-code en Penpot draaien op een server die je zelf beheert, maar elk heeft een kanttekening: de commits van bolt.diy lagen stil van februari tot oktober 2026 en de laatste getagde release dateert van mei 2025, screenshot-to-code heeft een API-sleutel voor een model nodig, en self-hosted Penpot loopt achter op de cloudversie.
• Hergebruik van componenten werkt het best als een tool expliciete mapping heeft, zoals Figma MCP met Code Connect of de design system-indexering van Builder.io, maar gegenereerde output heeft nog steeds review nodig, dus plan op elke route tijd in om op te schonen.

Kies de tool op basis van je startpunt

Een screenshot bevat pixels en verder niets. Een Figma-bestand voegt componentnamen, variabelen en layoutregels toe, en een codebase bevat de componenten zelf. De input bepaalt dus welk soort tool iets heeft om mee te werken.

De één-schermtest voor hergebruik van componenten en tokens

De Make-gebruiker die betere resultaten kreeg zonder geselecteerde bibliotheek had geen week gebruik nodig om het probleem te vinden. Het dook op in de eerste gegenereerde pagina’s, en daarom is één scherm genoeg om elke kandidaat te testen:

1. Kies een scherm dat je team met bestaande componenten heeft gebouwd, zoals een instellingenformulier of een prijskaart.
2. Genereer dat scherm met de tool die je overweegt, met hetzelfde soort input dat je voor nieuw werk zou gebruiken.
3. Doorzoek de output op hardcoded waarden: kale hexkleuren zoals #3B82F6, lettergroottes in pixels zoals font-size: 14px en vaste spacing. Vergelijk dat met hoe vaak je tokennamen, CSS-variabelen of themaklassen worden gebruikt.
4. Controleer de imports. Output die een nieuwe Button of Card declareert in plaats van de jouwe uit de componentbibliotheek te importeren, heeft een parallelle UI gebouwd.
5. Controleer of het framework en de stylingaanpak bij de repo passen. Kale HTML met inline styles is een herschrijving, hoe de preview er ook uitziet.

In de Stack Overflow Developer Survey van 2025 noemde 66% van de developers “AI-oplossingen die bijna kloppen, maar net niet” hun grootste frustratie met AI. Dat is een bevinding over AI-codingtools in het algemeen, geen design-to-code-onderzoek, maar een scherm dat er goed uitziet terwijl elke kleur hardcoded is, is precies in die zin “bijna goed”.

Let op: doe deze check voordat een tool teambreed wordt uitgerold. Eén gegenereerd scherm kost een paar minuten; een maand gemergede output met hardcoded waarden kost een opruimsprint.

De check leest de code. Of het gerenderde scherm nog overeenkomt met het design is een aparte vraag, voor een self-hostable tool zoals BackstopJS, die visuele regressietests uitvoert.

Als je een afgerond Figma-bestand hebt

De Figma-to-code AI-tools in deze groep beginnen allemaal bij hetzelfde bestand, en het praktische verschil tussen ze is waar de code terechtkomt: op het canvas, in een gehost prototype of in een export van een derde partij.

De ingebouwde codegeneratie van Figma

Je selecteert een frame, component of sectie in Figma Design, opent de agent en vraagt om HTML en CSS, React-componenten of een specifiek framework. Volgens Figma kun je de agent naar je design system laten kijken, zodat de output naar je tokens, variabelen en componentstructuur verwijst in plaats van naar generieke placeholders. Op dezelfde pagina staat dat het beschikbaar is op alle betaalde Figma-abonnementen. Per oktober 2026 zit het in een open bèta, dus creditverbruik en limieten kunnen veranderen.

De output blijft in het bestand staan als een thread die je developers kunnen openen. Er is geen hosting- of deploystap, wat een beperking is als je een draaiend prototype wilde, en een voordeel als je code wilde om in je repo te plakken.

Figma Make

Figma Make is een aparte omgeving die je met prompts aanstuurt. Volgens Figma levert Make HTML, CSS en JavaScript voor front-endprototypes, met een ingebouwde editor voor aanpassingen. Je kunt het proberen op het gratis Starter-abonnement, en het ondersteunt een Supabase-integratie om live data te simuleren.

De eigen omgevingen van Figma doen verschillende dingen. Make maakt een werkend prototype van een prompt plus een frame. De generator in het canvas zet geselecteerde frames om in code met de bibliotheek van het bestand. Met Figma MCP leest een coding agent in je repo componenten en variabelen rechtstreeks uit.

Anima, Builder.io Visual Copilot en Locofy

Builder.io’s Visual Copilot noemt output voor React, Qwik en Angular, plus Kotlin en Flutter voor mobiel, gestyled met Tailwind CSS of CSS Modules. Voor hergebruik noemt dezelfde pagina Custom Component Mapping, dat Figma-componenten koppelt aan componenten in je codebase. De documentatie van Builder markeert handmatige componentmapping nu als verouderd ten gunste van componentindexering en noemt het een functie van het Enterprise-abonnement, dus check eerst de actuele documentatie en je abonnement.

Het gratis abonnement van Anima staat 5 codegeneraties in de Figma-plugin toe, naast 5 chatberichten per dag en 5 Figma-imports in de AI Playground. Enterprise-prijzen beginnen bij $500 per maand, jaarlijks gefactureerd (per oktober 2026).

Anima draait ook een MCP-server, en code die daarmee wordt gegenereerd telt mee voor hetzelfde tegoed aan codegeneraties. Locofy is nog een converter voor Figma-bestanden in deze categorie.

Met welke Figma-converter je begint

Begin met de ingebouwde codegeneratie van Figma als je team voor Figma betaalt: die leest de bibliotheek van het bestand zonder exportstap, en op een betaald abonnement kost de één-schermtest geen nieuw abonnement. Stap over op Builder.io Visual Copilot als je output wilt die de componenten uit je codebase importeert (check in de documentatie hoe mapping of componentindexering voor je abonnement werkt), of als je de mobiele output in Kotlin of Flutter wilt die het bij naam noemt.

Gebruik Figma Make voor een klikbaar prototype dat je aan anderen laat zien. Code die je wilt mergen hoort in de codegeneratie in het Figma-canvas of in Builder.io Visual Copilot.

Als je alleen een screenshot hebt

screenshot-to-code is hier de standaard open-sourcekeuze: MIT-licentie, rond de 80.000 sterren op GitHub en in 2026 nog steeds actief met commits. Geef het een afbeelding en je krijgt HTML met Tailwind of CSS, React of Vue terug, naast andere stacks. Er is een gehoste versie op screenshottocode.com als je liever zelf niets draait.

Screenshot-to-code AI kan alleen werken met wat de afbeelding laat zien, dus de grens ligt bij de input. Een screenshot bevat geen componentidentiteit, geen variabelen, geen hover- of focus-states en geen responsive breakpoints. Wat terugkomt is een reconstructie van één statisch frame op één breedte, en elke token moet worden afgeleid uit pixelkleuren.

screenshot-to-code is de juiste tool als er geen designbestand bestaat, bijvoorbeeld om een referentielayout na te bouwen of een legacy-pagina te herbouwen waar niemand een Figma-bestand van heeft. Bestaat er wel een Figma-bestand, begin dan daarmee, want dat bestand bevat de informatie die de screenshot weggooit.

Als je alleen een prompt hebt

Zonder design system om op aan te sluiten, verschuiven de afwegingen naar drie andere punten: hoe de tool je laat betalen, hoeveel van de code je kunt bewerken en hoe ver de gegenereerde app kan doorgroeien.

v0

Het gratis abonnement van v0 heeft een daglimiet van 7 berichten, plus deploys naar Vercel, GitHub-synchronisatie en een visuele Design Mode. Betaald gebruik wordt per token afgerekend, en de tokentarieven van de v0-modellen verschillen over vier modelniveaus, van v0 Mini tot v0 Max Fast. Wat een sessie kost hangt af van het niveau dat je kiest en hoe lang het gesprek duurt.

Lovable

Lovable rekent af in credits. In Default Mode hangen de kosten af van hoe complex de taak is, terwijl Plan Mode 1 credit per bericht kost. Het gratis abonnement bevat een dagelijks tegoed van 5 buildcredits, met een maximum van 30 per maand.

Iemand in een Reddit-thread die Bolt en Lovable vergelijkt schreef dat Bolt “bijna volledige controle” over de code gaf, terwijl Lovable alleen codediffs leek te tonen “zonder bewerkrechten”. Dat is het verslag van één gebruiker, dus controleer de huidige editor voordat je aanneemt dat het nog klopt.

Bolt.new en bolt.diy

Bolt.new is het gehoste product. bolt.diy is de open-sourcetegenhanger, waarmee je per prompt de LLM kiest uit meer dan 21 providers, waaronder lokale modellen via Ollama. Een database is niet verplicht; Supabase is een optionele integratie. Controleer de commitgeschiedenis en de licentievoorwaarden voordat je erop gaat bouwen.

Google Stitch

Google lanceerde Stitch in maart 2026 opnieuw, met een oneindig canvas, spraakinteractie en een design-agent, volgens het artikel van Winbuzzer over het nieuwe ontwerp. Volgens hetzelfde artikel exporteren designs naar het Figma-formaat of naar codeframeworks zoals React, en verbindt een MCP-server Stitch met Claude Code, Gemini CLI, Cursor en Antigravity. Daarmee zit Stitch tussen de promptroute en de codebaseroute in: het begint bij een prompt, maar kan designs doorgeven aan een agent die in je repo werkt.

Met welke prompttool je begint

In een Hacker News-discussie over Lovable en Bolt stelde iemand dat, met de backend uitbesteed aan Supabase, het plafond voor het bouwen van bruikbare software met die twee “ongelooflijk laag” ligt. Diegene gaf aan zelf een concurrerend product te bouwen, dus lees het als een geïnformeerde mening met een belang, niet als een meting.

Een Figma-bestand hebben sluit deze route ook niet automatisch uit. In dezelfde Reddit-thread over Bolt en Lovable zei iemand anders dat hij Figma nooit had gebruikt, omdat dat “lastiger en vervelender leek dan gewoon prompten” voor het design dat hij wilde.

Kies v0 als je team op Vercel deployt en vanaf dag één GitHub-synchronisatie wil. Kies Lovable als je een build wilt plannen in Plan Mode-berichten met vaste kosten voordat je buildcredits uitgeeft, en bekijk eerst de editor als je verwacht code met de hand aan te passen.

Kies bolt.diy als je je eigen modelsleutels wilt gebruiken of een lokaal model wilt draaien, en behandel het als prototypingtool, tenzij de hernieuwde activiteit standhoudt. Probeer Stitch als je met prompts gegenereerde designs wilt die je later via de MCP-server ervan doorgeeft aan een coding agent in je repo.

Als je al een codebase en een design system hebt

Deze route werkt binnen je repo, waar de agent de componenten zelf leest. De prijs is setupwerk, en zelfs dan vergroten de gedocumenteerde mechanismen alleen de kans op hergebruik; van geen van alle is gedocumenteerd dat ze het garanderen.

Figma MCP

Volgens het Help Center van Figma kan de Figma MCP-server code genereren uit geselecteerde frames nadat hij componenten, variabelen, layoutdata, FigJam-content en Make-resources heeft gelezen. Hij gebruikt Code Connect om die code in lijn te houden met je componenten, en de remote server kan terugschrijven naar het canvas.

Er zijn twee versies: een remote server, die Figma voor de meeste gebruikers aanraadt, en een desktopserver voor specifieke organisatie- en enterprise-situaties.

Technisch gezien geeft MCP je coding agent een gestructureerde feed van het design. Als de agent een frame inspecteert, stuurt de server de componenten, stijlen en variabelen van dat frame mee, en de blog van Figma legt uit dat de agent uit je coderesources kan putten wanneer die elementen via Code Connect aan code zijn gekoppeld. Zonder die mapping krijgt hij nog steeds stylingcontext en schrijft hij de component vanaf nul.

De agent kies je zelf. De setupgids van Figma is geschreven voor Claude Code, en de MCP-documentatie van OpenCode behandelt zowel lokale als remote servers. De keuze tussen Claude Code of OpenCode komt neer op beheerd gemak tegenover controle over de provider, en niets aan die keuze is specifiek voor designwerk.

Penpot MCP

Penpot is het open-sourcealternatief, en de documentatie beschrijft drie hoofdonderdelen: een MCP-server, een MCP-plugin die binnen Penpot draait en je geopende bestand koppelt, en de MCP-client waarin je prompts schrijft. Je configureert het via de pagina Integrations van je Penpot-account met een persoonlijke MCP-sleutel. Daarmee kan een agent componenten, stijlen, tokens en lagen lezen en aanpassen.

De structuur van het project is onlangs veranderd. De losse penpot-mcp-repository bevat een melding dat hij in februari 2026 is gearchiveerd, waarbij de inhoud is opgenomen in de hoofdrepository van Penpot. Handleidingen die op de oude repo zijn gebaseerd, kunnen een andere setup beschrijven.

Claude Design

Anthropic lanceerde Claude Design in april 2026 als research preview van Anthropic Labs voor abonnees van Pro, Max, Team en Enterprise. Tijdens de onboarding bouwt Claude een design system voor je team door je codebase en designbestanden te lezen, past het toe op latere projecten en verpakt afgeronde designs in een handoff-bundel voor Claude Code.

UXPin, dat zelf designtools verkoopt, schreef dit in de lanceringsweek:

“Designers die Claude Design deze week testten, meldden binnen hun eerste paar sessies verkeerde lettertypen, onjuiste knopkleuren en inconsistente spacing.”

Met welke codebase-setup je begint

Gebruik Figma MCP met een coding agent als je design system in Figma leeft en je bereid bent de Code Connect-mapping te doen, want die mapping maakt het verschil tussen geïmporteerde componenten en opnieuw gestylede kopieën.

Gebruik Penpot MCP als je een open-source designtool wilt die je agent kan lezen en bewerken. Penpot zelf kun je self-hosten, maar de MCP-documentatie beschrijft de setup via een Penpot-account, dus controleer de werkwijze op je eigen instance voordat je erop gaat bouwen.

Gebruik Claude Design als je team voor Claude betaalt en zo min mogelijk setup wil, en doe de één-schermtest voordat je zijn versie van je design system vertrouwt.

De open-sourceopties op je eigen server draaien

Drie van deze tools kunnen draaien op een server die je zelf beheert. Dan ruil je de hosting van een leverancier in voor je eigen onderhoud en, bij bolt.diy en screenshot-to-code, een creditmeter voor je eigen modelsleutels. Per oktober 2026 heeft elk ervan een keerzijde.

bolt.diy. Het project kreeg van 7 februari tot 4 oktober 2026 geen enkele commit, en de laatste getagde release, v1.0.0, verscheen in mei 2025, volgens de commitgeschiedenis van de repository. Het project heeft een MIT-licentie, maar is afhankelijk van de WebContainers API (de runtime in de browser die gegenereerde code uitvoert), die een licentie vereist voor productiegebruik in een commerciële setting met winstoogmerk.

Prototypes en proofs of concept hebben die licentie niet nodig. In de praktijk is bolt.diy prima om mee te prototypen met je eigen sleutels; controleer de activiteit opnieuw voordat je er een product op bouwt.

screenshot-to-code. Zelf draaien vereist minstens één sleutel van een modelprovider, van OpenAI, Anthropic of Gemini, plus een server die je onderhoudt. De lopende kosten zijn het modelgebruik per generatie, afgerekend door de provider van wie je de sleutel instelt.

Penpot. Penpot kun je self-hosten via Docker Compose of de officiële Helm-chart op Kubernetes, OpenShift of Rancher. De documentatie merkt op dat self-hosted Docker-images kort na SaaS-updates verschijnen, dus een nieuwe cloudfeature bereikt je instance met enige vertraging.

Waar je ze draait hangt af van wie ze gebruikt. Een laptop volstaat om bolt.diy of screenshot-to-code in je eentje te proberen. Een server past zodra een team een Penpot-instance deelt, of zodra de tools bereikbaar moeten blijven terwijl je laptop dicht is.

Er is geen officieel minimum voor bolt.diy, dus neem ongeveer 4 GB RAM en 2 vCPU met NVMe-opslag als startpunt voor één Node-app zoals deze. Het helpcentrum van Penpot zegt dat 4 CPU’s en 16 GB RAM voldoende zijn voor duizenden gebruikers en dat je voorzichtig mag zijn met het toewijzen van resources; voor de instance van een klein team plus een coding agent op dezelfde server is iets richting 8 tot 12 GB RAM een redelijk begin. Als de agent op die machine ook in een browser-IDE draait, is de sizing voor Code Server met Claude Code een aparte berekening.

Self-hosten betekent dat jij de server draait, de updates installeert en de modelsleutels veilig houdt. Wil je de installatiestap liever overslaan, dan bieden we one-click deployments van bolt.diy om een prototypingomgeving op te zetten en van Penpot voor een gedeelde designwerkplek, op een Linux VPS met root-toegang. Coding agents zoals Claude Code en OpenCode deploy je op dezelfde manier, als aparte apps. Het onderhoud blijft bij jou; de setup niet.

Veelgestelde vragen

Wat is beter, Figma Make of v0?

Je startpunt beslist. Figma Make werkt binnen Figma, neemt een frame plus een prompt en levert HTML, CSS en JavaScript voor front-endprototypes. v0 begint bij alleen een prompt, deployt naar Vercel en synchroniseert met GitHub. Kies Make als het design in Figma bestaat en v0 als je vanuit een beschrijving begint.

Kan AI een screenshot omzetten in werkende code?

Ja. Het open-sourceproject screenshot-to-code zet een screenshot om in HTML-, React- of Vue-code met een API-sleutel van OpenAI, Anthropic of Gemini. Het resultaat is wel een reconstructie van één statisch frame, zonder componentidentiteit, interactie-states of responsive breakpoints, dus een Figma-bestand is betere input als je dat hebt.

Is er een open-sourcealternatief voor v0, Bolt of Lovable?

Ja. bolt.diy is de open-sourcetegenhanger van Bolt.new en de self-hostable optie onder de prompt-to-app-tools die hier aan bod komen. Het heeft een MIT-licentie en werkt met je eigen modelsleutels, inclusief lokale modellen via Ollama. De commits lagen stil van februari tot oktober 2026, en de WebContainers-afhankelijkheid vereist een commerciële licentie voor productiegebruik met winstoogmerk, dus controleer zowel de activiteit als de licentie voordat je er een product op bouwt.

Waarom negeert AI-gegenereerde code mijn design system?

Veel tools zien je design als pixels of een platgeslagen frame en benaderen de kleuren, lettertypen en spacing op basis daarvan. Tools die variabelen en componentstructuur rechtstreeks lezen, zoals Figma MCP, kunnen je echte componenten importeren als die via Code Connect aan code zijn gekoppeld. Zonder die mapping gebruikt de agent je stijlen als context en schrijft hij nieuwe componenten.