De bedste design-to-code AI-værktøjer, sorteret efter hvad du starter med

Et indlæg i community-forummet hos Figma beskriver, hvordan en bruger valgte et komponent- og variabelbibliotek i Figma Make og fik »farver med næsten ingen kontrast og skriftstørrelser, der ikke giver mening« tilbage. Samme bruger fortæller, at resultaterne var omkring 90 % bedre helt uden valgt bibliotek. Det er den fejl, du skal måle ethvert værktøj op imod: Enten bygger det med dit teams eksisterende komponenter, eller også bygger det en parallel UI, som du skal rydde op i senere.

De bedste design-to-code AI-værktøjer konkurrerer ikke på én rangliste, fordi de starter fra forskellige input. Et screenshot, en Figma-fil, en skrevet prompt og en eksisterende kodebase indeholder meget forskellige mængder struktur.

Vælg ud fra det, du har i hånden. En Figma-fil går til en konverter som den indbyggede kodegenerering i Figma, Anima eller Builder.io Visual Copilot. Et screenshot går til screenshot-to-code. En prompt går til v0, Lovable eller Bolt. En eksisterende kodebase går til en kodeagent, der læser dit design system via Model Context Protocol (MCP).

TL;DR

• Brug den indbyggede kodegenerering i Figma, hvis du betaler for Figma; screenshot-to-code kun når der ikke findes en designfil; v0, Lovable eller bolt.diy afhængigt af deploy-mål, afregning og behov for egne modelnøgler; og Figma MCP med Code Connect-mapping, når du har en kodebase og et design system.
• Før du tager et værktøj i brug, så generér én skærm, du allerede har komponenter til, og tjek outputtet for hardcodede hex-farver og pixelværdier samt for nyerklærede komponenter, hvor der burde være imports fra dit bibliotek.
• Du kan køre bolt.diy, screenshot-to-code og Penpot på en server, du selv styrer, men hver har et forbehold: Commits til bolt.diy gik i stå fra februar til oktober 2026, og den seneste taggede release er fra maj 2025, screenshot-to-code kræver en API-nøgle til en model, og selvhostet Penpot halter efter cloududgaven.
• Genbrug af komponenter fungerer bedst, når et værktøj har eksplicit mapping, som Figma MCP med Code Connect eller Builder.io’s design system-indeksering, men genereret output skal stadig reviewes, så sæt tid af til oprydning på alle veje.

Vælg værktøjet efter det, du starter med

Et screenshot indeholder pixels og intet andet. En Figma-fil tilføjer komponentnavne, variabler og layoutregler, og en kodebase indeholder selve komponenterne. Derfor afgør inputtet, hvilken slags værktøj der har noget at arbejde med.

Én-skærm-testen for genbrug af komponenter og tokens

Make-brugeren, der fik bedre resultater uden valgt bibliotek, behøvede ikke en uges brug for at finde problemet. Det viste sig i de første genererede sider, og derfor er én skærm nok til at teste enhver kandidat:

1. Vælg en skærm, dit team har bygget af eksisterende komponenter, fx en indstillingsformular eller et priskort.
2. Generér den skærm med det værktøj, du overvejer, og brug den samme slags input, som du ville bruge til nyt arbejde.
3. Søg i outputtet efter hardcodede værdier: rå hex-farver som #3B82F6, skriftstørrelser i pixels som font-size: 14px og fast spacing. Sammenlign det med, hvor ofte dine tokennavne, CSS-variabler eller temaklasser bliver brugt.
4. Tjek dine imports. Output, der erklærer en ny Button eller Card i stedet for at importere dine fra komponentbiblioteket, har bygget en parallel UI.
5. Bekræft, at framework og styling-tilgang matcher repoet. Ren HTML med inline styles er en omskrivning, uanset hvordan preview ser ud.

I Stack Overflow Developer Survey 2025 nævnte 66 % af udviklerne »AI-løsninger, der er næsten rigtige, men ikke helt« som deres største frustration ved AI. Det er et resultat om AI-kodeværktøjer generelt, ikke en design-to-code-undersøgelse, men en skærm, der ser korrekt ud, mens hver eneste farve er hardcodet, er »næsten rigtig« i præcis den forstand.

Bemærk: Kør dette tjek, før et værktøj rulles ud i hele teamet. Én genereret skærm koster et par minutter; en måneds merget output med hardcodede værdier koster et oprydningssprint.

Tjekket læser koden. Om den renderede skærm stadig matcher designet, er et separat spørgsmål til et værktøj, du kan selvhoste, som BackstopJS, der kører visuelle regressionstjek.

Hvis du har en færdig Figma-fil

Figma-to-code AI-værktøjerne i denne gruppe starter alle fra den samme fil, og den praktiske forskel på dem er, hvor koden ender: i canvas, i en hostet prototype eller i en eksport fra en tredjepart.

Den indbyggede kodegenerering i Figma

Du vælger en frame, komponent eller sektion i Figma Design, åbner agenten og beder om HTML og CSS, React-komponenter eller et bestemt framework. Ifølge Figma kan du pege agenten mod dit design system, så outputtet refererer til dine tokens, variabler og komponentstruktur i stedet for generiske placeholders. Samme side oplyser, at funktionen er tilgængelig på alle betalte Figma-abonnementer. Pr. oktober 2026 er funktionen i åben beta, så kreditforbrug og grænser kan ændre sig.

Outputtet bliver i filen som en tråd, dine udviklere kan åbne. Der er intet hosting- eller deploy-trin, hvilket er en begrænsning, hvis du ville have en kørende prototype, og en fordel, hvis du ville have kode at indsætte i dit repo.

Figma Make

Figma Make er en separat, promptstyret flade. Ifølge Figma leverer Make HTML, CSS og JavaScript til frontend-prototyper med en indbygget editor til ændringer. Du kan prøve det på det gratis Starter-abonnement, og det understøtter en Supabase-integration til at simulere live data.

De flader, Figma selv har, løser forskellige opgaver. Make laver en fungerende prototype ud fra en prompt plus en frame. Generatoren i canvas omsætter valgte frames til kode med filens bibliotek. Figma MCP lader en kodeagent i dit repo læse komponenter og variabler direkte.

Anima, Builder.io Visual Copilot og Locofy

Builder.io’s Visual Copilot angiver output til React, Qwik og Angular plus Kotlin og Flutter til mobil, stylet med Tailwind CSS eller CSS Modules. Til genbrug nævner samme side Custom Component Mapping, som kobler Figma-komponenter til komponenter i din kodebase. Builders dokumentation markerer nu manuel komponentmapping som forældet til fordel for komponentindeksering og angiver den som en funktion i Enterprise-abonnementet, så tjek først den aktuelle dokumentation og dit abonnement.

Det gratis abonnement hos Anima giver 5 kodegenereringer i Figma-pluginnet samt 5 chatbeskeder om dagen og 5 Figma-importer i AI Playground. Enterprise-priser starter ved 500 dollar om måneden ved årlig betaling (pr. oktober 2026).

Anima kører også en MCP-server, og kode genereret gennem den tæller med i den samme kvote for kodegenerering. Locofy er endnu en konverter til Figma-filer i denne kategori.

Hvilken Figma-konverter du skal starte med

Start med den indbyggede kodegenerering i Figma, hvis dit team betaler for Figma: Den læser filens bibliotek uden et eksporttrin, og på et betalt abonnement kræver én-skærm-testen intet nyt abonnement. Skift til Builder.io Visual Copilot, når du vil have output, der importerer komponenterne fra din kodebase (tjek dens dokumentation for, hvordan mapping eller komponentindeksering gælder for dit abonnement), eller når du vil have det mobile output i Kotlin eller Flutter, som det nævner ved navn.

Brug Figma Make til en klikbar prototype, du vil vise til andre. Kode, du vil merge, hører hjemme i kodegenereringen i Figma-canvas eller i Builder.io Visual Copilot.

Hvis du kun har et screenshot

screenshot-to-code er standardvalget inden for open source her: MIT-licens, omkring 80.000 stjerner på GitHub og stadig nye commits i 2026. Giv det et billede, og det returnerer HTML med Tailwind eller CSS, React eller Vue, blandt andre stacks. Der findes en hostet udgave på screenshottocode.com, hvis du helst ikke vil køre noget selv.

Screenshot-to-code AI kan kun arbejde med det, billedet viser, så begrænsningen ligger i inputtet. Et screenshot har ingen komponentidentitet, ingen variabler, ingen hover- eller fokus-states og ingen responsive breakpoints. Det, der kommer tilbage, er en rekonstruktion af én statisk frame i én bredde, og hver token skal gættes ud fra pixelfarver.

screenshot-to-code er det rigtige værktøj, når der ikke findes en designfil, fx når du skal ramme et referencelayout eller genopbygge en ældre side, som ingen har en Figma-fil til. Findes der en Figma-fil, så start fra den i stedet, for filen indeholder den information, som screenshottet smider væk.

Hvis du kun har en prompt

Uden et design system at matche flytter afvejningerne over på tre andre punkter: hvordan værktøjet tager betaling, hvor meget af koden du kan redigere, og hvor langt den genererede app kan vokse.

v0

v0’s gratis abonnement har en daglig grænse på 7 beskeder plus deploys til Vercel, GitHub-synkronisering og en visuel Design Mode. Betalt brug afregnes pr. token, og tokenpriserne for v0-modellerne varierer på tværs af fire modelniveauer, fra v0 Mini til v0 Max Fast. Prisen på en session afhænger af, hvilket niveau du vælger, og hvor længe samtalen kører.

Lovable

Lovable afregner i credits. I Default Mode varierer prisen med opgavens kompleksitet, mens Plan Mode koster 1 credit pr. besked. Det gratis abonnement indeholder en daglig tildeling på 5 build-credits, dog højst 30 om måneden.

En kommentator i en Reddit-tråd, der sammenligner Bolt og Lovable, skrev, at Bolt gav »næsten fuld kontrol« over koden, mens Lovable tilsyneladende kun viste kodediffs »uden redigeringsadgang«. Det er én brugers oplevelse, så tjek den nuværende editor, før du går ud fra, at det stadig holder.

Bolt.new og bolt.diy

Bolt.new er det hostede produkt. bolt.diy er open source-modstykket, som lader dig vælge LLM for hver prompt blandt mere end 21 udbydere, inklusive lokale modeller via Ollama. Det har ikke et hårdt krav om en database; Supabase er en valgfri integration. Tjek commithistorikken og licensvilkårene, før du bygger videre på det.

Google Stitch

Google relancerede Stitch i marts 2026 med et uendeligt canvas, stemmeinteraktion og en designagent, ifølge artiklen fra Winbuzzer om redesignet. Samme artikel siger, at designs kan eksporteres til Figma-format eller kodeframeworks som React, og at en MCP-server forbinder Stitch med Claude Code, Gemini CLI, Cursor og Antigravity. Det placerer Stitch mellem prompt-vejen og kodebase-vejen: Det starter fra en prompt, men kan give designs videre til en agent, der arbejder i dit repo.

Hvilket promptværktøj du skal starte med

I en Hacker News-diskussion om Lovable og Bolt argumenterede en kommentator for, at loftet for at bygge brugbar software med de to er »utroligt lavt«, når backenden er outsourcet til Supabase. Kommentatoren oplyste selv at være i gang med at bygge et konkurrerende produkt, så læs det som en kvalificeret holdning med egne interesser, ikke som en måling.

Har du en Figma-fil, udelukker det heller ikke automatisk denne vej. I den samme Reddit-tråd om Bolt og Lovable skrev en anden kommentator, at vedkommende aldrig havde trukket Figma ind, fordi det virkede »sværere og mere irriterende end bare at prompte« til det design, de ville have.

Vælg v0, når dit team deployer på Vercel og vil have GitHub-synkronisering fra dag ét. Vælg Lovable, når du vil planlægge et build i Plan Mode-beskeder til fast pris, før du bruger build-credits, og tjek editoren først, hvis du forventer at ændre kode i hånden.

Vælg bolt.diy, når du har brug for dine egne modelnøgler eller vil køre en lokal model, og betragt det som et prototypeværktøj, medmindre den fornyede aktivitet holder. Prøv Stitch, når du vil have promptgenererede designs, som du senere kan give videre til en kodeagent i dit repo via dets MCP-server.

Hvis du allerede har en kodebase og et design system

Denne vej arbejder inde i dit repo, hvor agenten læser selve komponenterne. Prisen er opsætningsarbejde, og selv da øger de dokumenterede mekanismer kun chancen for genbrug; ingen af dem er dokumenteret til at garantere det.

Figma MCP

Ifølge Help Center hos Figma kan Figma MCP-serveren generere kode ud fra valgte frames, efter at den har læst komponenter, variabler, layoutdata, FigJam-indhold og Make-ressourcer. Den bruger Code Connect til at holde koden på linje med dine komponenter, og den eksterne server kan skrive tilbage til canvas.

Den findes i to versioner: en remote server, som Figma anbefaler til de fleste brugere, og en desktopserver til særlige organisations- og enterprise-tilfælde.

Rent mekanisk giver MCP din kodeagent et struktureret feed af designet. Når agenten inspicerer en frame, sender serveren framens komponenter, styles og variabler, og bloggen hos Figma forklarer, at når de elementer er mappet til kode via Code Connect, kan agenten hente fra dine koderessourcer. Uden den mapping får den stadig styling-kontekst og skriver komponenten fra bunden.

Agenten vælger du selv. Opsætningsguiden fra Figma er skrevet til Claude Code, og MCP-dokumentationen fra OpenCode dækker både lokale og eksterne servere. Valget mellem Claude Code eller OpenCode handler om administreret bekvemmelighed over for kontrol med udbyderen, og intet ved det valg er specifikt for designarbejde.

Penpot MCP

Penpot er open source-pendanten, og dokumentationen beskriver tre centrale dele: en MCP-server, et MCP-plugin, der kører inde i Penpot og forbinder din åbne fil, og MCP-klienten, hvor du skriver prompts. Du konfigurerer det fra siden Integrations på din Penpot-konto med en personlig MCP-nøgle. Gennem den kan en agent læse og ændre komponenter, styles, tokens og lag.

Projektets struktur er ændret for nylig. Det selvstændige penpot-mcp-repository har en meddelelse om, at det blev arkiveret i februar 2026, og indholdet er flyttet ind i hovedrepositoryet for Penpot. Guides skrevet ud fra det gamle repo kan beskrive en anden opsætning.

Claude Design

Anthropic lancerede Claude Design i april 2026 som en research preview fra Anthropic Labs for abonnenter på Pro, Max, Team og Enterprise. Under onboarding bygger Claude et design system til dit team ved at læse din kodebase og dine designfiler, anvender det på senere projekter og pakker færdige designs i en handoff-pakke til Claude Code.

UXPin, der selv sælger designværktøjer, skrev dette i lanceringsugen:

»Designere, der testede Claude Design i denne uge, rapporterede forkerte skrifttyper, forkerte knapfarver og inkonsekvent spacing allerede i deres første par sessioner.«

Hvilken kodebase-opsætning du skal starte med

Brug Figma MCP med en kodeagent, når dit design system bor i Figma, og du er villig til at lave Code Connect-mappingen, for det er den mapping, der skiller importerede komponenter fra restylede kopier.

Brug Penpot MCP, når du vil have et open source-designværktøj, som din agent kan læse og redigere. Penpot kan selvhostes, men MCP-dokumentationen beskriver opsætningen via en Penpot-konto, så bekræft forløbet på din egen instans, før du gør dig afhængig af det.

Brug Claude Design, når dit team betaler for Claude og vil have mindst mulig opsætning, og kør én-skærm-testen, før du stoler på dets version af dit design system.

Kør open source-mulighederne på din egen server

Tre af disse værktøjer kan køre på en server, du selv styrer. Det bytter en leverandørs hosting ud med din egen vedligeholdelse og, for bolt.diy og screenshot-to-code, en creditmåler ud med dine egne modelnøgler. Pr. oktober 2026 har hvert af dem en ulempe.

bolt.diy. Projektet fik ikke ét eneste commit fra 7. februar til 4. oktober 2026, og den seneste taggede release, v1.0.0, udkom i maj 2025, ifølge repositoryets commithistorik. Projektet er MIT-licenseret, men den WebContainers API, det afhænger af (det runtime i browseren, der kører den genererede kode), kræver licens til produktionsbrug i en kommerciel sammenhæng med profit for øje.

Prototyper og proofs of concept kræver ikke den licens. I praksis er bolt.diy fint til prototyper med dine egne nøgler; tjek aktiviteten igen, før du bygger et produkt på det.

screenshot-to-code. Hvis du selv kører det, kræver det mindst én nøgle fra en modeludbyder, fra OpenAI, Anthropic eller Gemini, plus en server, du vedligeholder. Driftsomkostningen er modelforbruget pr. generering, afregnet af den udbyder, hvis nøgle du konfigurerer.

Penpot. Penpot kan selvhostes via Docker Compose eller det officielle Helm-chart på Kubernetes, OpenShift eller Rancher. Dokumentationen bemærker, at selvhostede Docker-images udgives kort efter SaaS-opdateringer, så en ny cloudfunktion når din instans med en forsinkelse.

Hvor du skal køre dem, afhænger af, hvem der bruger dem. En laptop er fin til at prøve bolt.diy eller screenshot-to-code alene. En server giver mening, når et team deler en Penpot-instans, eller når værktøjerne skal være tilgængelige, mens din laptop er lukket.

Der er intet officielt minimum for bolt.diy, så regn med omkring 4 GB RAM og 2 vCPU med NVMe-lager som udgangspunkt for en enkelt Node-app som den. Hjælpecentret hos Penpot siger, at 4 CPU’er og 16 GB RAM er tilstrækkeligt til at understøtte tusindvis af brugere, og at du kan være konservativ, når du tildeler ressourcer; til et lille teams instans plus en kodeagent på samme server er noget tættere på 8 til 12 GB RAM en fornuftig start. Hvis agenten også skal køre i en browser-IDE på den maskine, er dimensionering til Code Server med Claude Code en beregning for sig.

Selvhosting betyder, at du kører serveren, installerer opdateringerne og passer på modelnøglerne. Vil du hellere springe installationen over, tilbyder vi one-click-deployments af bolt.diy til et prototypemiljø og af Penpot til et fælles designworkspace på en Linux VPS med root-adgang. Kodeagenter som Claude Code og OpenCode deployes på samme måde, som separate apps. Vedligeholdelsen er stadig din; opsætningen er ikke.

Ofte stillede spørgsmål

Hvad er bedst, Figma Make eller v0?

Dit udgangspunkt afgør det. Figma Make arbejder inde i Figma, tager en frame plus en prompt og leverer HTML, CSS og JavaScript til frontend-prototyper. v0 starter fra en prompt alene, deployer til Vercel og synkroniserer med GitHub. Vælg Make, når designet findes i Figma, og v0, når du starter fra en beskrivelse.

Kan AI omsætte et screenshot til fungerende kode?

Ja. Open source-projektet screenshot-to-code omsætter et screenshot til HTML-, React- eller Vue-kode med en API-nøgle fra OpenAI, Anthropic eller Gemini. Resultatet er dog en rekonstruktion af én statisk frame uden komponentidentitet, interaktions-states eller responsive breakpoints, så en Figma-fil er bedre input, hvis du har en.

Findes der et open source-alternativ til v0, Bolt eller Lovable?

Ja. bolt.diy er open source-modstykket til Bolt.new og den mulighed blandt de prompt-to-app-værktøjer, der er gennemgået her, som du kan selvhoste. Det er MIT-licenseret og virker med dine egne modelnøgler, inklusive lokale modeller via Ollama. Dets commits gik i stå fra februar til oktober 2026, og afhængigheden af WebContainers kræver en kommerciel licens til produktionsbrug med profit for øje, så tjek både aktiviteten og licensen, før du bygger et produkt på det.

Hvorfor ignorerer AI-genereret kode mit design system?

Mange værktøjer ser dit design som pixels eller en fladtrykt frame og tilnærmer farver, skrifttyper og spacing ud fra det. Værktøjer, der læser variabler og komponentstruktur direkte, som Figma MCP, kan importere dine rigtige komponenter, når de er mappet til kode via Code Connect. Uden den mapping bruger agenten dine styles som kontekst og skriver nye komponenter.