Vous pouvez passer d'une conception Figma à un site web en direct et déployé en un seul après-midi en utilisant Claude — aucune expérience en codage requise. Le flux de travail est simple : concevoir dans Figma, exporter ou décrire la conception à Claude, générer le code, déployer sur Vercel ou Netlify. Le tout coûte 0 $ si vous utilisez les niveaux gratuits.

Les gens publient des clips « Site web de 5 000 $ en 2 heures » sur X, mais la plupart d'entre eux sautent les étapes réelles. Ce guide comble cette lacune. Chaque prompt est inclus, chaque point de décision est expliqué, et les compromis sont honnêtes.

Faits rapides
Stack
Figma → Claude → Vercel ou Netlify
Temps
1,5–3 heures pour un site de 4–6 pages
Coût
Niveaux gratuits, ou ~20 $/mois avec Claude Pro
Compétences
Zéro codage — le sens du design aide
Idéal pour
Pages d'accueil, portfolios, sites de petites entreprises, MVPs
Dernière vérification
Avril 2026

Pourquoi cela fonctionne maintenant (et ne fonctionnait pas il y a un an)

Il y a un an, transformer une conception en code avec l'IA signifiait coller une capture d'écran et récupérer une approximation grossière qui nécessitait des heures de nettoyage. Aujourd'hui, la fenêtre de contexte de 1M tokens de Claude signifie que vous pouvez lui fournir un système de conception complet — couleurs, typographie, espacement, détails des composants — et récupérer du code de qualité production qui correspond étroitement à votre conception dès la première tentative.

L'insight clé : la qualité de ce que vous obtenez dépend presque entièrement de la qualité de votre description de la conception. Des descriptions vagues produisent des sites vagues. Des descriptions spécifiques et structurées produisent des sites spécifiques et soignés.

Ce dont vous avez besoin

Trois outils, tous avec des niveaux gratuits :

Figma — pour votre conception. Le niveau gratuit fonctionne très bien. Si vous n'avez pas de conception, récupérez un modèle gratuit dans la Figma Community et personnalisez-le.

Claude — pour la génération de code. Le niveau gratuit vous donne Sonnet, qui gère bien cela. Pro (20 $/mois) vous donne Opus 4.7 pour les sites plus complexes.

Vercel ou Netlify — pour le déploiement. Les deux ont des niveaux gratuits. Connectez votre dépôt GitHub, poussez le code, et le site devient en direct.

Étape 1 : Préparez votre conception Figma

Avant d'impliquer Claude, organisez votre fichier Figma. Cette étape détermine la qualité de tout ce qui suit.

Votre conception devrait avoir des pages clairement définies (Accueil, À propos, Contact, etc.), un espacement et un alignement cohérents, une palette de couleurs visible (notez les valeurs hexadécimales exactes), des polices identifiées, et des points de rupture réactifs pour le bureau et le mobile si possible.

Ne vous souciez pas de la perfection au pixel. Claude gère bien les détails d'implémentation. Ce qui importe, c'est que votre conception communique clairement la structure, la hiérarchie et le style visuel.

Conseil pro : Nommez vos calques Figma de manière significative. « Hero Section », « Feature Cards », « Pricing Table » sont beaucoup plus utiles que « Frame 247 » lorsque vous rédigez des prompts.

Étape 2 : Exportez les informations de votre conception

Claude ne peut pas lire un fichier Figma directement, vous devez donc traduire votre conception en informations avec lesquelles Claude peut travailler. Vous avez trois approches, de la plus facile à la plus précise :

Approche A : Capture d'écran + description. Prenez des captures d'écran pleine page de chaque page de votre conception. Téléchargez-les dans Claude avec une description écrite de la mise en page, des couleurs et des interactions. C'est l'approche la plus rapide et fonctionne étonnamment bien.

Approche B : Exportation Figma Dev Mode. Si vous avez le plan payant de Figma, utilisez Dev Mode pour exporter les valeurs CSS, les tokens d'espacement et les spécifications des composants. Alimentez-les à Claude aux côtés des captures d'écran pour un résultat plus précis.

Approche C : Spécification de conception écrite. Écrivez une description détaillée de chaque section — en-tête, héros, fonctionnalités, témoignages, pied de page — y compris les couleurs, polices, tailles et mise en page. Cela prend plus de temps mais vous donne le plus de contrôle sur le résultat. Si vous construisez sans conception Figma, c'est votre chemin.

Étape 3 : Rédigez votre prompt initial

C'est là que la plupart des gens se trompent. Ils écrivent « construire moi un site web qui ressemble à cette capture d'écran » et obtiennent un résultat générique. Voici la structure de prompt qui produit régulièrement des résultats de qualité :

Construisez un site web de [nombre] pages avec les spécifications suivantes : SYSTÈME DE CONCEPTION : - Couleur primaire : [hex] - Couleur secondaire : [hex] - Arrière-plan : [hex] - Texte : [hex] - Police : [nom de police] pour les en-têtes, [nom de police] pour le corps - Rayon de bordure : [valeur] - Échelle d'espacement : [valeurs] PAGE 1 — ACCUEIL : - Section héros : [description exacte — texte de titre, sous-titre, texte du bouton CTA, traitement de l'arrière-plan] - Section fonctionnalités : [nombre] cartes, chacune avec [icône/image, titre, description] - Témoignages : [description de la mise en page] - Section CTA : [description] - Pied de page : [liens et mise en page] PAGE 2 — À PROPOS : [même niveau de détail] TECHNIQUE : - Utilisez Next.js avec Tailwind CSS - Réactif sur mobile - Défilement fluide entre les sections - Toutes les images comme divs d'espace réservé avec couleurs d'arrière-plan (j'ajouterai les vraies images plus tard)

Plus vous êtes spécifique sur ce que l'utilisateur voit, meilleur est le résultat. Ne décrivez pas le code — décrivez l'expérience. Si vous avez besoin d'aide pour affiner ce prompt avant de l'envoyer, notre optimiseur de prompt gratuit peut aider à le structurer pour de meilleurs résultats.

Étape 4 : Examen et itération

Le premier résultat de Claude capture généralement 60–80 % de votre conception. Les 20–40 % restants proviennent de l'itération. C'est l'étape où la plupart des tutoriels de « vibe coding » s'arrêtent, mais c'est là que la vraie qualité se produit.

Examinez le résultat en vérifiant trois choses : la mise en page correspond-elle à votre conception ? Les couleurs et la typographie vous semblent-elles justes ? Semble-t-il bon sur mobile ?

Ensuite, itérez avec des commentaires spécifiques. Ne dites pas « améliore-le ». Dites :

  • « La section héros a besoin de plus de remplissage vertical — ajouter 120px haut et bas »
  • « Les cartes de fonctionnalités doivent être dans une grille de 3 colonnes sur le bureau, une seule colonne sur mobile »
  • « Le bouton CTA doit avoir un effet de survol — assombrir l'arrière-plan de 10 % et augmenter légèrement »
  • « Les liens de pied de page doivent être disposés en 4 colonnes : Produit, Entreprise, Ressources, Légal »

Chaque série de commentaires doit aborder 3–5 problèmes spécifiques. Trois séries vous rapprochent généralement de 95 % de votre conception.

Trouvez-vous de la valeur dans cela ? Nous publions un deep-dive par semaine sur les flux de travail IA, les outils et les guides pratiques. Rejoignez les lecteurs qui le découvrent en premier →

Étape 5 : Ajoutez du contenu réel et des images

Remplacez le texte d'espace réservé par votre vrai contenu. Remplacez les divs d'images d'espace réservé par de vraies images. Si vous avez besoin d'aide pour rédiger le contenu de votre site web, Claude excelle à cela — alimentez-le avec votre description de marque et demandez-lui une copie de page d'accueil qui correspond à votre ton.

Pour les images, utilisez du stock gratuit d'Unsplash ou Pexels, ou générez des images personnalisées avec un outil d'image IA. Déposez les fichiers image dans le dossier /public de votre projet et mettez à jour les attributs src.

Étape 6 : Déployez en un clic

Si vous avez utilisé Next.js (recommandé), le déploiement sur Vercel prend 60 secondes :

  1. Poussez votre code dans un dépôt GitHub
  2. Allez sur vercel.com et connectez-vous avec GitHub
  3. Cliquez sur « Import Project » et sélectionnez votre dépôt
  4. Vercel détecte automatiquement Next.js et configure tout
  5. Cliquez sur « Deploy »

Votre site est en direct avec une URL .vercel.app. Connectez un domaine personnalisé dans les paramètres de Vercel si vous en avez un.

Netlify fonctionne presque de manière identique — importer depuis GitHub, détecter automatiquement le framework, déployer. Les deux plateformes gèrent automatiquement SSL, CDN et le déploiement continu. Chaque fois que vous poussez vers GitHub, votre site se met à jour.

Pas sûr de la plateforme de déploiement à utiliser ? Nous avons écrit une comparaison complète : Où déployez-vous après Vibe Coding ?

Les erreurs courantes qui posent des problèmes

1. Donner à Claude une capture d'écran sans contexte écrit. Les captures d'écran aident, mais Claude a besoin de descriptions écrites des couleurs, polices, espacement et mise en page pour produire un code précis. La capture d'écran est une référence — le texte est l'instruction.

2. Essayer de construire tout en un seul prompt. Un site web de 6 pages avec des animations, des formulaires et un CMS, c'est trop pour une seule tentative. Construisez page par page, section par section. Commencez par la page d'accueil, peaufinez-la, puis passez à la page suivante.

3. Ignorer la réactivité mobile. Si vous ne mentionnez pas mobile dans votre prompt, Claude construira une mise en page de bureau uniquement. Incluez toujours « réactif sur mobile » dans vos exigences techniques et testez le résultat à une largeur de 375px.

4. Ne pas tester les interactions. Cliquez sur chaque bouton, remplissez chaque formulaire, parcourez chaque page. Le code généré par l'IA semble souvent correct mais a des liens cassés, des formulaires non fonctionnels ou des états de survol manquants. Testez avant de déployer.

5. Perfectionnisme avant le déploiement. Lancez à 90 % et itérez. Votre premier déploiement ne doit pas être parfait — il doit être en direct. Vous pouvez pousser les mises à jour en secondes.

Construire pour des clients ? Lisez notre guide sur 5 erreurs de sécurité que tout vibe coder commet avant de livrer.

Le résultat final

Le flux de travail Figma-to-Claude-to-deploy est le moyen le plus rapide de transformer une conception en site web fonctionnant sans écrire le code vous-même. La qualité dépend de la spécificité de vos prompts, pas de vos compétences en codage. Trois séries d'itération vous rapprochent généralement de la première ébauche à la production.

Commencez par un projet simple — un portfolio ou une page d'accueil — et parcourez le cycle complet une fois. La deuxième fois, cela prendra la moitié du temps car vous saurez exactement comment structurer vos prompts.

Pas sûr quel outil IA est le meilleur pour votre flux de travail ? Répondez à notre quiz Model Picker de 60 secondes pour le savoir, ou consultez la comparaison complète de l'État des modèles IA.

C'est ce que nous faisons chaque semaine. Un deep-dive sur les outils IA, les flux de travail et les avis honnêtes — sans battage médiatique, sans remplissage. Rejoignez-nous →

Divulgation : Certains liens de cet article sont des liens d'affiliation. Nous recommandons uniquement les outils que nous avons testés personnellement et utilisons régulièrement. Consultez notre politique complète de divulgation.