Les meilleurs outils d'IA design-to-code, classés selon votre point de départ

Un message sur le forum communautaire de Figma décrit la sélection d'une bibliothèque de composants et de variables dans Figma Make, avec en retour « des couleurs presque sans contraste et des tailles de police qui n'ont aucun sens ». Le même utilisateur rapporte des résultats environ 90 % meilleurs sans aucune bibliothèque sélectionnée. C'est l'échec à l'aune duquel mesurer tout outil : soit il construit avec les composants existants de votre équipe, soit il construit une UI parallèle qu'il faudra réconcilier plus tard.

Les meilleurs outils d'IA design-to-code ne s'affrontent pas sur une seule échelle, car ils partent d'entrées différentes. Une capture d'écran, un fichier Figma, un prompt écrit et une base de code existante contiennent des quantités de structure très différentes.

Choisissez selon ce que vous avez en main. Un fichier Figma va vers un convertisseur comme la génération de code intégrée de Figma, Anima ou Builder.io Visual Copilot. Une capture d'écran va vers screenshot-to-code. Un prompt va vers v0, Lovable ou Bolt. Une base de code existante va vers un agent de code qui lit votre design system via le Model Context Protocol (MCP).

En bref

• Utilisez la génération de code intégrée de Figma si vous payez Figma ; screenshot-to-code seulement quand aucun fichier de design n'existe ; v0, Lovable ou bolt.diy selon la cible de déploiement, la facturation et le besoin de clés de modèle ; et Figma MCP avec un mapping Code Connect quand vous avez une base de code et un design system.
• Avant d'adopter un outil, générez un écran pour lequel vous avez des composants et cherchez dans le résultat les couleurs hexadécimales et les valeurs en pixels codées en dur, ainsi que les composants nouvellement déclarés là où il devrait y avoir des imports depuis votre bibliothèque.
• Vous pouvez faire tourner bolt.diy, screenshot-to-code et Penpot sur un serveur que vous contrôlez, mais chacun a sa réserve : les commits de bolt.diy ont été en pause de février à octobre 2026 et sa dernière version taguée date de mai 2025, screenshot-to-code a besoin d'une clé API de modèle, et Penpot auto-hébergé est en retard sur la version cloud.
• La réutilisation des composants est la meilleure quand un outil dispose d'un mapping explicite, comme Figma MCP avec Code Connect ou l'indexation du design system de Builder.io, mais le code généré doit quand même être relu, alors prévoyez du temps de nettoyage quelle que soit la piste.

Choisir l'outil selon votre point de départ

Une capture d'écran contient des pixels et rien d'autre. Un fichier Figma y ajoute des noms de composants, des variables et des règles de mise en page, et une base de code contient les composants eux-mêmes : c'est donc l'entrée qui décide quel type d'outil a de quoi travailler.

Le test d'un écran pour la réutilisation des composants et des tokens

L'utilisateur de Make qui a obtenu de meilleurs résultats sans bibliothèque sélectionnée n'a pas eu besoin d'une semaine d'usage pour repérer le problème. Il est apparu dès les premières pages générées, et c'est pourquoi un seul écran suffit pour tester n'importe quel candidat :

1. Choisissez un écran que votre équipe a construit avec des composants existants, comme un formulaire de paramètres ou une carte de tarifs.
2. Générez cet écran avec l'outil envisagé, en utilisant le même type d'entrée que pour un nouveau travail.
3. Cherchez dans le résultat les valeurs codées en dur : couleurs hexadécimales brutes comme #3B82F6, tailles de police en pixels comme font-size: 14px et espacements fixes. Comparez avec la fréquence à laquelle il utilise vos noms de tokens, vos variables CSS ou vos classes de thème.
4. Vérifiez les imports. Un résultat qui déclare un nouveau Button ou Card au lieu d'importer les vôtres depuis la bibliothèque de composants a construit une UI parallèle.
5. Vérifiez que le framework et l'approche de style correspondent au dépôt. Du HTML brut avec des styles inline, c'est une réécriture, quel que soit le rendu de l'aperçu.

Dans l'enquête Stack Overflow 2025 auprès des développeurs, 66 % des développeurs citaient « des solutions d'IA presque justes, mais pas tout à fait » comme leur plus grande frustration avec l'IA. C'est un constat sur les outils de code IA en général, pas une étude sur le design-to-code, mais un écran qui a l'air correct tout en codant chaque couleur en dur est « presque juste » exactement dans ce sens.

Remarque : faites ce contrôle avant de déployer un outil dans toute l'équipe. Un écran généré coûte quelques minutes ; un mois de code fusionné avec des valeurs codées en dur coûte un sprint de nettoyage.

Ce contrôle lit le code. Savoir si l'écran rendu correspond toujours au design est une autre question, qui relève d'un outil auto-hébergeable comme BackstopJS, lequel effectue des tests de régression visuelle.

Si vous avez un fichier Figma finalisé

Les outils d'IA Figma-to-code de ce groupe partent tous du même fichier, et la différence pratique entre eux tient à l'endroit où le code atterrit : sur le canevas, dans un prototype hébergé ou dans un export tiers.

La génération de code intégrée de Figma

Vous sélectionnez une frame, un composant ou une section dans Figma Design, ouvrez l'agent et demandez du HTML et du CSS, des composants React ou un framework précis. Figma indique que vous pouvez orienter l'agent vers votre design system pour que le résultat référence vos tokens, vos variables et votre structure de composants plutôt que des placeholders génériques. La même page précise que c'est disponible sur toutes les offres payantes de Figma. En octobre 2026, la fonction est en bêta ouverte : la consommation de crédits et les limites peuvent donc évoluer.

Le résultat reste dans le fichier, sous forme de fil que vos développeurs peuvent ouvrir. Il n'y a ni hébergement ni étape de déploiement, ce qui est une limite si vous vouliez un prototype fonctionnel et un atout si vous vouliez du code à coller dans votre dépôt.

Figma Make

Figma Make est une surface distincte, pilotée par prompt. Selon Figma, Make produit du HTML, du CSS et du JavaScript pour des prototypes front-end, avec un éditeur intégré pour les modifications. Vous pouvez l'essayer avec l'offre gratuite Starter, et il prend en charge une intégration Supabase pour simuler des données réelles.

Les surfaces de Figma ont chacune leur rôle. Make produit un prototype fonctionnel à partir d'un prompt et d'une frame. Le générateur dans le canevas transforme les frames sélectionnées en code à l'aide de la bibliothèque du fichier. Figma MCP permet à un agent de code dans votre dépôt de lire directement les composants et les variables.

Anima, Builder.io Visual Copilot et Locofy

Visual Copilot de Builder.io annonce une sortie pour React, Qwik et Angular, plus Kotlin et Flutter pour le mobile, stylée avec Tailwind CSS ou CSS Modules. Pour la réutilisation, la même page cite Custom Component Mapping, qui relie les composants Figma aux composants de votre base de code. La documentation de Builder indique désormais que le mapping manuel des composants est obsolète au profit de l'indexation des composants et le présente comme une fonctionnalité de l'offre Enterprise : vérifiez donc d'abord la documentation actuelle et votre offre.

L'offre gratuite d'Anima permet 5 générations de code dans le plugin Figma, avec 5 messages de chat par jour et 5 imports Figma dans son AI Playground. En octobre 2026, le tarif Enterprise commence à 500 $ par mois, facturé annuellement.

Anima fait aussi tourner un serveur MCP, et le code généré par ce biais est décompté du même quota de génération de code. Locofy est un autre convertisseur de fichiers Figma dans cette catégorie.

Par quel convertisseur Figma commencer

Commencez par la génération de code intégrée de Figma si votre équipe paie Figma : elle lit la bibliothèque du fichier sans étape d'export, et sur une offre payante, le test d'un écran n'ajoute aucun abonnement. Passez à Builder.io Visual Copilot quand vous voulez un résultat qui importe les composants de votre base de code (consultez sa documentation pour savoir comment le mapping ou l'indexation des composants s'applique à votre offre), ou quand vous voulez la sortie mobile Kotlin ou Flutter qu'il cite nommément.

Utilisez Figma Make pour un prototype cliquable que vous montrerez à d'autres. Le code que vous comptez fusionner a sa place dans la génération de code du canevas Figma ou dans Builder.io Visual Copilot.

Si vous n'avez qu'une capture d'écran

screenshot-to-code est ici l'option open source par défaut : sous licence MIT, environ 80 000 étoiles sur GitHub, et toujours des commits en 2026. Donnez-lui une image et il renvoie du HTML avec Tailwind ou CSS, du React ou du Vue, entre autres stacks. Une version hébergée existe sur screenshottocode.com si vous préférez ne rien faire tourner.

Une IA screenshot-to-code ne peut travailler qu'avec ce que montre l'image : la limite se trouve donc dans l'entrée. Une capture d'écran ne porte ni identité de composant, ni variables, ni états hover ou focus, ni breakpoints responsive. Ce qui revient est la reconstruction d'une seule frame statique à une seule largeur, et chaque token doit être deviné d'après les couleurs des pixels.

screenshot-to-code est le bon outil quand aucun fichier de design n'existe, par exemple pour reproduire une mise en page de référence ou reconstruire une ancienne page dont personne n'a le fichier Figma. Si un fichier Figma existe, partez plutôt de lui, car il contient les informations que la capture d'écran jette.

Si vous n'avez qu'un prompt

Sans design system auquel se conformer, les compromis se déplacent vers trois autres points : la façon dont l'outil vous facture, la part du code que vous pouvez modifier et jusqu'où l'app générée peut grandir.

v0

L'offre gratuite de v0 inclut une limite de 7 messages par jour, plus les déploiements Vercel, la synchro GitHub et un Design Mode visuel. L'usage payant est facturé au token, et les tarifs par token des modèles v0 varient selon quatre niveaux de modèle, de v0 Mini à v0 Max Fast. Le coût d'une session dépend du niveau choisi et de la durée de la conversation.

Lovable

Lovable facture en crédits. En Default Mode, le coût varie selon la complexité de la tâche, tandis que Plan Mode coûte 1 crédit par message. L'offre gratuite inclut 5 crédits de build par jour, plafonnés à 30 par mois.

Un commentateur, dans un fil Reddit comparant Bolt et Lovable, écrivait que Bolt donnait « un contrôle presque total » sur le code, tandis que Lovable semblait n'afficher que des diffs « sans accès en modification ». C'est le témoignage d'un seul utilisateur : vérifiez l'éditeur actuel avant de supposer que c'est toujours vrai.

Bolt.new et bolt.diy

Bolt.new est le produit hébergé. bolt.diy est son équivalent open source, qui vous permet de choisir le LLM pour chaque prompt parmi plus de 21 fournisseurs, y compris des modèles locaux via Ollama. Il n'exige aucune base de données ; Supabase est une intégration optionnelle. Vérifiez son historique de commits et ses conditions de licence avant de bâtir dessus.

Google Stitch

Google a relancé Stitch en mars 2026 avec un canevas infini, une interaction vocale et un agent de design, selon l'article de Winbuzzer sur cette refonte. Le même article indique que les designs s'exportent au format Figma ou vers des frameworks de code comme React, et qu'un serveur MCP connecte Stitch à Claude Code, Gemini CLI, Cursor et Antigravity. Stitch se situe donc entre la piste prompt et la piste base de code : il part d'un prompt, mais peut transmettre les designs à un agent qui travaille dans votre dépôt.

Par quel outil de prompt commencer

Dans une discussion Hacker News sur Lovable et Bolt, un commentateur estimait qu'avec le backend confié à Supabase, le plafond pour construire un logiciel utile avec ces deux outils est « incroyablement bas ». Ce commentateur a précisé qu'il développait un produit concurrent : lisez-le comme un avis informé mais intéressé, pas comme une mesure.

Avoir un fichier Figma n'exclut pas non plus automatiquement cette piste. Dans le même fil Reddit sur Bolt et Lovable, un autre commentateur disait n'avoir jamais fait appel à Figma parce que cela semblait « plus difficile et plus pénible que de simplement écrire des prompts » pour le design voulu.

Choisissez v0 quand votre équipe déploie sur Vercel et veut la synchro GitHub dès le premier jour. Choisissez Lovable quand vous voulez planifier un build avec des messages Plan Mode à coût fixe avant de dépenser des crédits de build, et vérifiez d'abord son éditeur si vous comptez modifier le code à la main.

Choisissez bolt.diy quand vous devez apporter vos propres clés de modèle ou faire tourner un modèle local, et traitez-le comme un outil de prototypage tant que sa reprise d'activité ne s'est pas confirmée. Essayez Stitch quand vous voulez des designs générés par prompt que vous pourrez ensuite confier à un agent de code dans votre dépôt via son serveur MCP.

Si vous avez déjà une base de code et un design system

Cette piste fonctionne dans votre dépôt, là où l'agent lit les composants eux-mêmes. La contrepartie est le travail de mise en place, et même alors, les mécanismes documentés améliorent les chances de réutilisation ; aucun n'est documenté comme la garantissant.

Figma MCP

Selon le centre d'aide de Figma, le serveur Figma MCP peut générer du code à partir des frames sélectionnées après avoir lu les composants, les variables, les données de mise en page, le contenu FigJam et les ressources Make. Il utilise Code Connect pour garder ce code aligné sur vos composants, et le serveur distant peut écrire en retour sur le canevas.

Il existe en deux versions : un serveur distant, que Figma recommande à la plupart des utilisateurs, et un serveur desktop pour certains cas propres aux organisations et aux entreprises.

Concrètement, MCP donne à votre agent de code un flux structuré du design. Quand l'agent inspecte une frame, le serveur envoie ses composants, styles et variables, et le blog de Figma explique que lorsque ces éléments sont mappés au code via Code Connect, l'agent peut puiser dans vos ressources de code. Sans ce mapping, il reçoit tout de même le contexte de style et écrit le composant de zéro.

L'agent est à votre choix. Le guide de configuration de Figma est écrit pour Claude Code, et la documentation MCP d'OpenCode couvre les serveurs locaux comme distants. Choisir entre Claude Code et OpenCode revient à arbitrer entre la commodité d'un service géré et le contrôle du fournisseur, et rien dans ce choix n'est propre au travail de design.

Penpot MCP

Penpot est l'équivalent open source, et sa documentation décrit trois éléments clés : un serveur MCP, un plugin MCP qui tourne dans Penpot et connecte votre fichier ouvert, et le client MCP où vous écrivez vos prompts. Vous le configurez depuis la page Integrations de votre compte Penpot avec une clé MCP personnelle. Grâce à lui, un agent peut lire et modifier les composants, styles, tokens et calques.

La structure du projet a changé récemment. Le dépôt autonome penpot-mcp affiche un avis indiquant qu'il a été archivé en février 2026, son contenu ayant été intégré au dépôt principal de Penpot. Les guides écrits pour l'ancien dépôt peuvent décrire une autre configuration.

Claude Design

Anthropic a lancé Claude Design en avril 2026, en préversion de recherche Anthropic Labs pour les abonnés Pro, Max, Team et Enterprise. Pendant l'onboarding, Claude construit un design system pour votre équipe en lisant votre base de code et vos fichiers de design, l'applique aux projets suivants et regroupe les designs finalisés dans un bundle de transmission pour Claude Code.

UXPin, qui vend ses propres outils de design, a écrit ceci pendant la semaine du lancement :

« Les designers qui ont testé Claude Design cette semaine ont signalé de mauvaises polices, des couleurs de boutons incorrectes et des espacements incohérents dès leurs premières sessions. »

Par quelle configuration de base de code commencer

Utilisez Figma MCP avec un agent de code quand votre design system vit dans Figma et que vous êtes prêt à faire le mapping Code Connect, car c'est ce mapping qui distingue les composants importés des copies restylées.

Utilisez Penpot MCP quand vous voulez un outil de design open source que votre agent peut lire et modifier. Penpot lui-même s'auto-héberge, mais sa documentation MCP décrit la configuration via un compte Penpot : vérifiez donc le fonctionnement sur votre propre instance avant d'en dépendre.

Utilisez Claude Design quand votre équipe paie Claude et veut le moins de configuration possible, et faites le test d'un écran avant de vous fier à sa version de votre design system.

Faire tourner les options open source sur votre propre serveur

Trois de ces outils peuvent tourner sur un serveur que vous contrôlez, ce qui échange l'hébergement d'un fournisseur contre votre maintenance et, pour bolt.diy et screenshot-to-code, un compteur de crédits contre vos clés de modèle. En octobre 2026, chacun comporte un compromis.

bolt.diy. Le projet n'a reçu aucun commit du 7 février au 4 octobre 2026, et sa dernière version taguée, v1.0.0, est sortie en mai 2025, d'après l'historique des commits du dépôt. Le projet est sous licence MIT, mais l'API WebContainers dont il dépend (le runtime dans le navigateur qui exécute le code généré) nécessite une licence pour un usage en production dans un cadre commercial à but lucratif.

Les prototypes et preuves de concept n'ont pas besoin de cette licence. En pratique, bolt.diy convient au prototypage avec vos clés ; revérifiez son activité avant de bâtir un produit dessus.

screenshot-to-code. Pour le faire tourner vous-même, il faut au moins une clé de fournisseur de modèle, chez OpenAI, Anthropic ou Gemini, plus un serveur que vous maintenez. Le coût de fonctionnement est l'usage du modèle à chaque génération, facturé par le fournisseur dont vous avez configuré la clé.

Penpot. Penpot s'auto-héberge via Docker Compose, ou via le chart Helm officiel sur Kubernetes, OpenShift ou Rancher. Sa documentation précise que les images Docker auto-hébergées sont publiées peu après les mises à jour SaaS, si bien qu'une nouveauté cloud arrive sur votre instance avec un décalage.

L'endroit où les faire tourner dépend de qui les utilise. Un portable suffit pour essayer bolt.diy ou screenshot-to-code en solo. Un serveur devient pertinent dès qu'une équipe partage une instance Penpot, ou dès que les outils doivent rester accessibles quand votre portable est fermé.

Il n'y a pas de minimum officiel pour bolt.diy : considérez environ 4 Go de RAM et 2 vCPU avec un stockage NVMe comme point de départ pour une app Node unique comme celle-ci. Le centre d'aide de Penpot indique que 4 CPU et 16 Go de RAM suffisent pour des milliers d'utilisateurs et que vous pouvez allouer les ressources avec modération ; pour l'instance d'une petite équipe plus un agent de code sur le même serveur, viser plutôt 8 à 12 Go de RAM est un point de départ raisonnable. Si l'agent doit aussi tourner dans un IDE dans le navigateur sur cette machine, le dimensionnement de Code Server avec Claude Code est un calcul à part.

L'auto-hébergement signifie que vous gérez le serveur, appliquez les mises à jour et protégez les clés de modèle. Si vous préférez sauter l'installation, nous proposons des déploiements en un clic de bolt.diy pour monter un environnement de prototypage et de Penpot pour un espace de design partagé, sur un VPS Linux avec accès root. Les agents de code comme Claude Code et OpenCode se déploient de la même façon, comme apps séparées. La maintenance reste à votre charge ; la mise en place, non.

Foire aux questions

Lequel est le meilleur, Figma Make ou v0 ?

Votre point de départ tranche. Figma Make fonctionne dans Figma, prend une frame plus un prompt, et produit du HTML, du CSS et du JavaScript pour des prototypes front-end. v0 part d'un simple prompt, déploie sur Vercel et se synchronise avec GitHub. Choisissez Make quand le design existe dans Figma, et v0 quand vous partez d'une description.

L'IA peut-elle convertir une capture d'écran en code fonctionnel ?

Oui. Le projet open source screenshot-to-code transforme une capture d'écran en code HTML, React ou Vue à l'aide d'une clé API OpenAI, Anthropic ou Gemini. Le résultat reste toutefois la reconstruction d'une seule frame statique, sans identité de composant, sans états d'interaction ni breakpoints responsive : un fichier Figma est donc une meilleure entrée quand il existe.

Existe-t-il une alternative open source à v0, Bolt ou Lovable ?

Oui. bolt.diy est l'équivalent open source de Bolt.new et l'option auto-hébergeable parmi les outils prompt-vers-app présentés ici. Il est sous licence MIT et fonctionne avec vos clés de modèle, y compris des modèles locaux via Ollama. Ses commits ont été en pause de février à octobre 2026, et sa dépendance WebContainers exige une licence commerciale pour un usage en production à but lucratif : vérifiez donc son activité et la licence avant de bâtir un produit dessus.

Pourquoi le code généré par l'IA ignore-t-il mon design system ?

Beaucoup d'outils voient votre design comme des pixels ou une frame aplatie, et en déduisent approximativement les couleurs, les polices et les espacements. Les outils qui lisent directement les variables et la structure des composants, comme Figma MCP, peuvent importer vos vrais composants quand ceux-ci sont mappés au code via Code Connect. Sans ce mapping, l'agent utilise vos styles comme contexte et écrit de nouveaux composants.