Nejlepší AI nástroje pro převod designu na kód podle toho, z čeho vycházíte

Příspěvek na komunitním fóru Figma popisuje, jak uživatel ve Figma Make vybral knihovnu komponent a proměnných a dostal zpět „barvy téměř bez kontrastu a velikosti písma, které nedávají smysl“. Tentýž uživatel uvádí, že výsledky byly zhruba o 90 % lepší, když nevybral žádnou knihovnu. Právě podle tohoto selhání je třeba měřit každý nástroj: buď staví ze stávajících komponent vašeho týmu, nebo vytvoří paralelní UI, které budete později slaďovat.

Nejlepší AI nástroje design-to-code nesoupeří na jednom žebříčku, protože vycházejí z různých vstupů. Screenshot, soubor Figma, napsaný prompt a existující kódová základna nesou velmi rozdílné množství struktury.

Vybírejte podle toho, co máte v ruce. Soubor Figma patří do konvertoru, jako je vestavěné generování kódu v aplikaci Figma, nástroj Anima nebo Builder.io Visual Copilot. Screenshot patří do screenshot-to-code. Prompt patří do v0, Lovable nebo Bolt. Existující kódová základna patří ke kódovacímu agentovi, který čte váš design systém přes Model Context Protocol (MCP).

Stručně

• Použijte vestavěné generování kódu v aplikaci Figma, pokud máte placený tarif Figma; screenshot-to-code jen tehdy, když žádný designový soubor neexistuje; v0, Lovable nebo bolt.diy podle cíle nasazení, způsobu účtování a potřeby vlastních klíčů k modelům; a Figma MCP s mapováním Code Connect, když máte kódovou základnu a design systém.
• Než jakýkoli nástroj zavedete, vygenerujte jednu obrazovku, pro kterou máte komponenty, a zkontrolujte ve výstupu natvrdo zapsané hex barvy a hodnoty v pixelech a také nově deklarované komponenty tam, kde by měly být importy z vaší knihovny.
• bolt.diy, screenshot-to-code i Penpot můžete provozovat na serveru, který máte pod kontrolou, ale každý má svůj háček: commity do bolt.diy se od února do října 2026 zastavily a jeho poslední označené vydání pochází z května 2025, screenshot-to-code potřebuje API klíč k modelu a self-hosted Penpot zaostává za cloudovou verzí.
• Opakované použití komponent funguje nejlépe, když má nástroj explicitní mapování, jako Figma MCP s Code Connect nebo indexování design systému v Builder.io, ale vygenerovaný výstup stejně potřebuje revizi, takže na každé cestě počítejte s časem na úklid.

Vyberte nástroj podle toho, z čeho vycházíte

Screenshot obsahuje pixely a nic jiného. Soubor Figma přidává názvy komponent, proměnné a pravidla rozvržení a kódová základna obsahuje samotné komponenty, takže právě vstup rozhoduje, který typ nástroje má vůbec s čím pracovat.

Test jedné obrazovky pro opakované použití komponent a tokenů

Uživatel Make, který dosáhl lepších výsledků bez vybrané knihovny, nepotřeboval týden používání, aby problém našel. Ukázal se hned na prvních vygenerovaných stránkách, a proto k otestování jakéhokoli kandidáta stačí jediná obrazovka:

1. Vyberte obrazovku, kterou váš tým postavil ze stávajících komponent, například formulář nastavení nebo cenovou kartu.
2. Vygenerujte tuto obrazovku nástrojem, který zvažujete, se stejným typem vstupu, jaký byste použili pro novou práci.
3. Prohledejte výstup kvůli natvrdo zapsaným hodnotám: surovým hex barvám jako #3B82F6, velikostem písma v pixelech jako font-size: 14px a pevným rozestupům. Porovnejte to s tím, jak často používá vaše názvy tokenů, CSS proměnné nebo třídy motivu.
4. Zkontrolujte importy. Výstup, který deklaruje novou komponentu Button nebo Card místo toho, aby importoval tu vaši z knihovny komponent, vytvořil paralelní UI.
5. Ověřte, že framework a způsob stylování odpovídají repozitáři. Čisté HTML s inline styly znamená přepis, ať náhled vypadá jakkoli.

V průzkumu Stack Overflow Developer Survey 2025 označilo 66 % vývojářů za největší frustraci s AI „řešení, která jsou skoro správně, ale ne úplně“. To je zjištění o AI nástrojích pro kódování obecně, ne studie o design-to-code, ale obrazovka, která vypadá správně a přitom má každou barvu natvrdo, je „skoro správně“ přesně v tomto smyslu.

Poznámka: Proveďte tuto kontrolu dřív, než nástroj zavedete v celém týmu. Jedna vygenerovaná obrazovka stojí pár minut; měsíc mergnutého výstupu s natvrdo zapsanými hodnotami stojí celý sprint na úklid.

Tato kontrola čte kód. Zda vykreslená obrazovka stále odpovídá designu, je samostatná otázka pro nástroj, který si můžete hostovat sami, jako je BackstopJS, jenž spouští vizuální regresní testy.

Pokud máte hotový soubor Figma

AI nástroje Figma-to-code v této skupině vycházejí ze stejného souboru a praktický rozdíl mezi nimi je v tom, kde kód skončí: na plátně, v hostovaném prototypu, nebo v exportu třetí strany.

Vestavěné generování kódu v aplikaci Figma

Ve Figma Design vyberete rámec, komponentu nebo sekci, otevřete agenta a požádáte o HTML a CSS, komponenty pro React nebo konkrétní framework. Figma uvádí, že můžete nasměrovat agenta na svůj design systém, aby výstup odkazoval na vaše tokeny, proměnné a strukturu komponent místo obecných zástupných hodnot. Na téže stránce stojí, že funkce je dostupná ve všech placených tarifech Figma. K říjnu 2026 je funkce v otevřené betě, takže se spotřeba kreditů a limity mohou změnit.

Výstup zůstává v souboru jako vlákno, které mohou vaši vývojáři otevřít. Nemá žádný krok hostingu ani nasazení, což je omezení, pokud jste chtěli běžící prototyp, a výhoda, pokud jste chtěli kód, který vložíte do repozitáře.

Figma Make

Figma Make je samostatné prostředí řízené prompty. Podle společnosti Figma Make generuje HTML, CSS a JavaScript pro front-endové prototypy a má vestavěný editor pro úpravy. Vyzkoušet ho můžete v bezplatném tarifu Starter a podporuje integraci se Supabase pro simulaci živých dat.

Vlastní nástroje společnosti Figma plní různé úkoly. Make vytvoří funkční prototyp z promptu a rámce. Generátor na plátně převede vybrané rámce na kód s využitím knihovny souboru. Figma MCP umožňuje kódovacímu agentovi ve vašem repozitáři číst komponenty a proměnné přímo.

Anima, Builder.io Visual Copilot a Locofy

Visual Copilot od Builder.io uvádí výstup pro React, Qwik a Angular a navíc Kotlin a Flutter pro mobilní platformy, se styly v Tailwind CSS nebo CSS Modules. Pro opakované použití stejná stránka jmenuje Custom Component Mapping, které propojuje komponenty Figma s komponentami ve vaší kódové základně. Dokumentace Builderu nyní označuje ruční mapování komponent za zastaralé ve prospěch indexování komponent a uvádí ho jako funkci tarifu Enterprise, proto si nejprve ověřte aktuální dokumentaci a svůj tarif.

Bezplatný tarif nástroje Anima umožňuje 5 generování kódu v pluginu pro Figma a k tomu 5 zpráv v chatu denně a 5 importů souborů Figma v AI Playground. Tarif Enterprise začíná na 500 USD měsíčně při roční platbě (stav k říjnu 2026).

Anima také provozuje MCP server a kód vygenerovaný jeho prostřednictvím se odečítá ze stejného limitu generování kódu. Locofy je další konvertor souborů Figma v této kategorii.

Kterým konvertorem pro Figma začít

Začněte vestavěným generováním kódu v aplikaci Figma, pokud váš tým platí tarif Figma: čte knihovnu souboru bez kroku exportu a na placeném tarifu vás test jedné obrazovky nestojí žádné nové předplatné. Na Builder.io Visual Copilot přejděte, když chcete výstup, který importuje komponenty z vaší kódové základny (v jeho dokumentaci si ověřte, jak se na váš tarif vztahuje mapování nebo indexování komponent), nebo když chcete mobilní výstup pro Kotlin či Flutter, který výslovně uvádí.

Figma Make použijte pro klikací prototyp, který budete ukazovat lidem. Kód, který plánujete mergnout, patří do generování kódu na plátně Figma nebo do Builder.io Visual Copilot.

Pokud máte jen screenshot

screenshot-to-code je tu výchozí open-source volba: licence MIT, kolem 80 000 hvězd na platformě GitHub a v roce 2026 stále dostává commity. Dejte mu obrázek a vrátí HTML s Tailwind nebo CSS, kód pro React nebo Vue a další stacky. Pokud nechcete nic provozovat, existuje hostovaná verze na screenshottocode.com.

AI typu screenshot-to-code umí pracovat jen s tím, co obrázek ukazuje, takže limit spočívá už ve vstupu. Screenshot nenese žádnou identitu komponent, žádné proměnné, žádné stavy hover nebo focus a žádné responzivní breakpointy. Cokoli dostanete zpět, je rekonstrukce jednoho statického rámce v jedné šířce a každý token se musí odhadnout z barev pixelů.

screenshot-to-code je správný nástroj, když žádný designový soubor neexistuje, například když chcete napodobit referenční layout nebo přestavět starou stránku, ke které nikdo nemá soubor Figma. Pokud soubor Figma existuje, začněte raději z něj, protože obsahuje informace, které screenshot zahodí.

Pokud máte jen prompt

Když není žádný design systém, se kterým se musíte shodovat, kompromisy se přesouvají na tři jiná místa: jak vám nástroj účtuje, jak velkou část kódu můžete upravovat a jak daleko může vygenerovaná aplikace vyrůst.

v0

Bezplatný tarif v0 má denní limit 7 zpráv a k tomu nasazení na Vercel, napojení na GitHub a vizuální Design Mode. Placené použití se účtuje za tokeny a ceny tokenů modelů v0 se liší napříč čtyřmi úrovněmi modelů, od v0 Mini po v0 Max Fast. Cena sezení závisí na tom, jakou úroveň zvolíte a jak dlouho konverzace trvá.

Lovable

Lovable účtuje v kreditech. V Default Mode se cena liší podle složitosti úlohy, zatímco Plan Mode stojí 1 kredit za zprávu. Bezplatný tarif zahrnuje denní příděl 5 kreditů na sestavení, maximálně 30 měsíčně.

Jeden komentující ve vlákně na webu Reddit, které srovnávalo Bolt a Lovable, napsal, že Bolt dával „téměř plnou kontrolu“ nad kódem, zatímco Lovable podle všeho ukazoval jen rozdíly v kódu „bez možnosti úprav“. Jde o zkušenost jednoho uživatele, takže si aktuální editor ověřte, než budete předpokládat, že to stále platí.

Bolt.new a bolt.diy

Bolt.new je hostovaný produkt. bolt.diy je jeho open-source protějšek, který umožňuje zvolit LLM pro každý prompt z více než 21 poskytovatelů, včetně lokálních modelů přes nástroj Ollama. Nemá pevný požadavek na databázi; Supabase je volitelná integrace. Než na něm začnete stavět, zkontrolujte historii commitů a licenční podmínky.

Google Stitch

Google znovu spustil Stitch v březnu 2026 s nekonečným plátnem, hlasovou interakcí a designovým agentem, podle článku webu Winbuzzer o redesignu. Tentýž článek uvádí, že návrhy lze exportovat do formátu Figma nebo do kódových frameworků, jako je React, a že MCP server propojuje Stitch s Claude Code, Gemini CLI, Cursor a Antigravity. Tím se Stitch ocitá mezi cestou přes prompt a cestou přes kódovou základnu: začíná od promptu, ale návrhy umí předat agentovi, který pracuje ve vašem repozitáři.

Kterým nástrojem pro prompty začít

V diskusi na Hacker News o Lovable a Bolt jeden komentující tvrdil, že když je backend outsourcovaný do Supabase, strop pro tvorbu užitečného softwaru s těmito dvěma nástroji je „neuvěřitelně nízko“. Tento komentující přiznal, že staví konkurenční produkt, takže to berte jako informovaný názor někoho, kdo má vlastní zájem, ne jako měření.

Ani soubor Figma tuto cestu automaticky nevylučuje. Ve stejném vlákně na webu Reddit o Bolt a Lovable jiný komentující napsal, že soubory Figma nikdy nenatahoval, protože mu to pro požadovaný design připadalo „těžší a otravnější než prostě psát prompty“.

Zvolte v0, když váš tým nasazuje na Vercel a chce napojení na GitHub od prvního dne. Zvolte Lovable, když chcete build naplánovat ve zprávách Plan Mode s pevnou cenou, než začnete utrácet kredity na sestavení, a nejdřív si prověřte jeho editor, pokud čekáte, že budete kód upravovat ručně.

Zvolte bolt.diy, když potřebujete použít vlastní klíče k modelům nebo provozovat lokální model, a berte ho jako nástroj pro prototypování, dokud se jeho obnovená aktivita neudrží. Stitch vyzkoušejte, když chcete návrhy vygenerované z promptu, které později předáte kódovacímu agentovi ve vašem repozitáři přes jeho MCP server.

Pokud už máte kódovou základnu a design systém

Tato cesta funguje přímo ve vašem repozitáři, kde agent čte samotné komponenty. Daní je práce s nastavením, a i potom zdokumentované mechanismy jen zvyšují šanci na opakované použití; u žádného z nich není zdokumentováno, že by ho zaručoval.

Figma MCP

Podle centra nápovědy Figma (Help Center) dokáže Figma MCP server generovat kód z vybraných rámců po načtení komponent, proměnných, dat rozvržení, obsahu FigJam a prostředků Make. Pomocí Code Connect udržuje tento kód v souladu s vašimi komponentami a vzdálený server umí zapisovat zpět na plátno.

Existuje ve dvou verzích: jako vzdálený server, který Figma doporučuje většině uživatelů, a jako desktopový server pro specifické případy organizací a enterprise zákazníků.

Mechanicky vzato dává MCP vašemu kódovacímu agentovi strukturovaný přísun dat o designu. Když agent zkoumá rámec, server pošle jeho komponenty, styly a proměnné, a blog společnosti Figma vysvětluje, že když jsou tyto prvky namapované na kód přes Code Connect, agent může čerpat z vašich kódových zdrojů. Bez tohoto mapování stále dostane kontext stylů a komponentu napíše od nuly.

Agenta si vybíráte sami. Průvodce nastavením od společnosti Figma je napsaný pro Claude Code a dokumentace OpenCode k MCP pokrývá lokální i vzdálené servery. Volba mezi Claude Code a OpenCode se scvrkává na spravované pohodlí versus kontrolu nad poskytovatelem a nic na této volbě není specifické pro práci s designem.

Penpot MCP

Penpot je open-source obdoba a jeho dokumentace popisuje tři klíčové části: MCP server, MCP plugin běžící uvnitř nástroje Penpot, který připojí váš otevřený soubor, a MCP klienta, ve kterém píšete prompty. Nastavuje se na stránce Integrations vašeho účtu Penpot pomocí osobního MCP klíče. Přes něj může agent číst a upravovat komponenty, styly, tokeny a vrstvy.

Struktura projektu se nedávno změnila. Samostatný repozitář penpot-mcp nese upozornění, že byl v únoru 2026 archivován a jeho obsah byl začleněn do hlavního repozitáře Penpot. Návody napsané pro starý repozitář mohou popisovat jiné nastavení.

Claude Design

Společnost Anthropic spustila Claude Design v dubnu 2026 jako výzkumný preview Anthropic Labs pro předplatitele Pro, Max, Team a Enterprise. Během onboardingu Claude vytvoří design systém pro váš tým na základě vaší kódové základny a designových souborů, použije ho v dalších projektech a hotové návrhy zabalí do balíčku pro předání do Claude Code.

Společnost UXPin, která sama prodává designové nástroje, během týdne uvedení napsala:

„Designéři, kteří tento týden testovali Claude Design, hlásili během prvních několika sezení špatná písma, nesprávné barvy tlačítek a nekonzistentní rozestupy.“

Kterým nastavením pro kódovou základnu začít

Figma MCP s kódovacím agentem použijte, když váš design systém žije v nástroji Figma a jste ochotni udělat mapování Code Connect, protože právě to mapování odlišuje importované komponenty od přestylovaných kopií.

Penpot MCP použijte, když chcete open-source designový nástroj, který váš agent umí číst a upravovat. Samotný Penpot lze hostovat sami, ale jeho dokumentace k MCP popisuje nastavení přes účet Penpot, takže si postup ověřte na vlastní instanci dřív, než se na něj spolehnete.

Claude Design použijte, když váš tým platí předplatné Claude a chce co nejméně nastavování, a než budete důvěřovat jeho verzi vašeho design systému, proveďte test jedné obrazovky.

Provoz open-source možností na vlastním serveru

Tři z těchto nástrojů mohou běžet na serveru, který máte pod kontrolou. Hosting dodavatele tím vyměníte za vlastní údržbu a u bolt.diy a screenshot-to-code také počítadlo kreditů za vlastní klíče k modelům. K říjnu 2026 má každý z nich svůj kompromis.

bolt.diy. Projekt byl od 7. února do 4. října 2026 bez jediného commitu a jeho poslední označené vydání, v1.0.0, vyšlo v květnu 2025, jak ukazuje historie commitů repozitáře. Projekt je pod licencí MIT, ale WebContainers API, na kterém závisí (běhové prostředí v prohlížeči, které spouští vygenerovaný kód), vyžaduje licenci pro produkční použití v komerčním, ziskovém prostředí.

Prototypy a proof of concept tuto licenci nepotřebují. V praxi je bolt.diy rozumná volba pro prototypování s vlastními klíči; než na něm postavíte produkt, znovu si ověřte jeho aktivitu.

screenshot-to-code. Vlastní provoz vyžaduje alespoň jeden klíč poskytovatele modelů, od OpenAI, Anthropic nebo Gemini, a k tomu server, který spravujete. Provozní náklady tvoří používání modelu za každé generování, které účtuje poskytovatel, jehož klíč nastavíte.

Penpot. Penpot se dá hostovat sám přes Docker Compose nebo oficiální Helm chart na platformách Kubernetes, OpenShift nebo Rancher. Jeho dokumentace uvádí, že self-hosted Docker image vycházejí krátce po aktualizacích SaaS, takže nová cloudová funkce se do vaší instance dostane se zpožděním.

Kde je provozovat, záleží na tom, kdo je používá. Na vyzkoušení bolt.diy nebo screenshot-to-code o samotě stačí notebook. Server se hodí, jakmile tým sdílí instanci Penpot, nebo jakmile nástroje musí zůstat dostupné, i když máte notebook zavřený.

Pro bolt.diy neexistuje žádné oficiální minimum, takže jako výchozí bod pro jednu Node aplikaci, jako je tato, berte zhruba 4 GB RAM a 2 vCPU s úložištěm NVMe. Centrum nápovědy Penpot uvádí, že 4 CPU a 16 GB RAM stačí pro podporu tisíců uživatelů a že při přidělování prostředků můžete být střídmí; pro instanci malého týmu plus kódovacího agenta na stejném serveru je rozumným začátkem spíše 8 až 12 GB RAM. Pokud bude agent na tomto stroji běžet i v IDE v prohlížeči, dimenzování pro Code Server s Claude Code je samostatný výpočet.

Hostování na vlastním serveru znamená, že server provozujete vy, instalujete aktualizace a chráníte klíče k modelům. Pokud chcete krok instalace přeskočit, nabízíme nasazení na jedno kliknutí pro bolt.diy, kterým rychle postavíte prostředí pro prototypování, a pro Penpot jako sdílený designový prostor na Linux VPS s root přístupem. Kódovací agenti jako Claude Code a OpenCode se nasazují stejně, jako samostatné aplikace. Údržba zůstává na vás; nastavení ne.

Časté dotazy

Co je lepší, Figma Make, nebo v0?

Rozhoduje váš výchozí bod. Figma Make funguje přímo v nástroji Figma, vezme rámec a prompt a vytvoří HTML, CSS a JavaScript pro front-endové prototypy. v0 začíná jen od promptu, nasazuje na Vercel a napojuje se na GitHub. Zvolte Make, když design existuje v nástroji Figma, a v0, když začínáte od popisu.

Dokáže AI převést screenshot na funkční kód?

Ano. Open-source projekt screenshot-to-code převede screenshot na kód v HTML, React nebo Vue pomocí API klíče od OpenAI, Anthropic nebo Gemini. Výsledek je ovšem rekonstrukce jednoho statického rámce bez identity komponent, stavů interakce a responzivních breakpointů, takže když soubor Figma existuje, je lepším vstupem.

Existuje open-source alternativa k v0, Bolt nebo Lovable?

Ano. bolt.diy je open-source protějšek Bolt.new a mezi zde probranými nástroji typu prompt-to-app ta možnost, kterou můžete hostovat sami. Je pod licencí MIT a funguje s vašimi klíči k modelům, včetně lokálních modelů přes Ollama. Jeho commity se od února do října 2026 zastavily a jeho závislost WebContainers vyžaduje komerční licenci pro produkční, ziskové použití, takže si před stavbou produktu ověřte jeho aktivitu i licenci.

Proč kód generovaný AI ignoruje můj design systém?

Mnoho nástrojů vidí váš design jako pixely nebo zploštělý rámec a podle toho odhaduje jeho barvy, písma a rozestupy. Nástroje, které přímo čtou proměnné a strukturu komponent, jako Figma MCP, umějí importovat vaše skutečné komponenty, pokud jsou namapované na kód přes Code Connect. Bez tohoto mapování agent použije vaše styly jako kontext a napíše nové komponenty.