De Figma à Vercel avec l'IA : livrer un site web fonctionnel et automatiser ses assets visuels, sans savoir coder
Product Designer indépendant, Tiburce Coquillet livrait des maquettes Figma — jamais de prototype fonctionnel, faute de compétences en code. En 4 séances sur la certification RS6776, il construit un site web de A à Z avec Claude Code depuis son wireframe, le déploie lui-même sur Vercel, entraîne un style visuel custom sur Recraft, et connecte 5 MCPs à son environnement de travail.
Claude CodeRecraft (style custom)Hugging Face / FLUX.1LoveableFigma (MCP)Gmail / Google Calendar (MCP)Notion (MCP)
Vercel
Tiburce CoquilletProduct Designer freelanceCoaching : Marie Jolly
Avant / après
Ce qui coinçait, et ce qui tourne depuis. Les deux colonnes décrivent la même production, à quelques semaines d'écart.
- Livrait uniquement des maquettes Figma — jamais de prototype fonctionnel sans développeur
- ComfyUI testé et abandonné : « c'est une usine à gaz », interface nodale trop complexe
- Aucune automatisation en place : « c'est du temps d'apprentissage que je n'ai pas encore débloqué »
- Génération d'images fragmentée (Recraft, DALL-E) sans cohérence de style d'un livrable à l'autre
- Claude, ChatGPT, Gemini utilisés en silos, sans connexion aux outils de travail
- Site web complet déployé sur Vercel, construit seul depuis un wireframe Figma avec Claude Code
- Style visuel custom entraîné sur Recraft (10 images de référence) : palette pastels cohérente sur tous les livrables
- 5 MCPs connectés à Claude : Figma, Gmail, Google Calendar, Notion, Outlook — tout l'environnement dans un seul contexte
- Connecteur Hugging Face (FLUX.1) configuré pour la génération d'images open source sans abonnement fixe
- Vision business concrète : proposer sites vitrine + apps de gestion aux petits commerçants, en combinant expertise UX et outils IA
Comment ça s'est passé
Tiburce Coquillet est Product Designer freelance — spécialisé en UX, conception d'interfaces et discovery produit, avec des clients dans le secteur assurantiel et bancaire. Il voit ses pairs migrer vers Loveable, Framer, Cursor pour livrer des prototypes fonctionnels, et veut en être. Ses trois blocages : il ne sait pas coder, donc il ne peut livrer que des maquettes Figma statiques ; il a tenté ComfyUI pour automatiser ses illustrations et a abandonné (« c'est une usine à gaz ») ; il n'a jamais eu le temps d'apprendre Make ou N8N pour ses automatisations (« c'est du temps d'apprentissage que je n'ai pas encore débloqué »).
Quatre séances de coaching individuel sur la certification RS6776 (création de contenus rédactionnels et visuels par l'IA, éligible CPF), avec Marie Jolly comme formatrice. Fil conducteur : le projet personnel « Canicule », un site de premiers soins pour chiens en période de canicule. À chaque séance, la formatrice s'appuie sur ce que Tiburce a construit en autonomie depuis la précédente — sans redoubler les modules e-learning qu'il a déjà assimilés.
Tiburce repart avec un site web complet déployé sur Vercel, construit en Claude Code depuis un wireframe Figma avec le système Material Design. Cinq MCPs opérationnels (Figma, Gmail, Google Calendar, Notion, Outlook). Un style d'image pastel custom entraîné sur Recraft. Un connecteur Hugging Face (modèle FLUX.1) configuré pour la génération d'images open source. Et une méthode d'apprentissage continu : « je n'ai pas appris des compétences figées à un instant T, mais la manière d'aller chercher l'information et de me maintenir à jour ».
Étape par étape
Le coaching part de ce que la personne produit déjà. Voici les jalons réels du parcours, blocages compris.
- Séance 1
Poser le cadre et le projet fil rouge
Calibrage du niveau (déjà intermédiaire), comparaison live des modèles IA, introduction à la tokenisation et aux MCPs. Le site « Canicule » est posé comme fil conducteur. Démo en live d'une automatisation Make sur un vrai cas client (chatbot Airbnb d'un avocat).
- Séance 2
5 MCPs connectés en autonomie avant la séance
Entre les séances, Tiburce connecte seul Figma, Gmail, Google Calendar, Notion et Outlook à Claude. En séance, Loveable est exploré en profondeur (database, déploiement GitHub, analytics, logs temps réel) à partir d'un projet Steam Deck / Nintendo DS que Tiburce a construit lui-même à titre de test.
- Séance 3
La page d'accueil du site Canicule, depuis un wireframe Figma
Tiburce présente une page d'accueil Material Design construite en Claude Code depuis son wireframe — responsive, sans écrire une ligne de code. Recraft est exploré : style custom entraîné sur 10 images de référence (palette pastels). Le connecteur MCP Recraft est découvert et installé en live. Stratégie d'hébergement posée : GitHub + Vercel.
- Séance 4
Site déployé sur Vercel (en autonomie) + connecteur Hugging Face
Entre les séances 3 et 4, Tiburce déploie lui-même le site sur Vercel — sans aide de Claude pour la partie hébergement. En séance 4, un connecteur Hugging Face est configuré (modèle FLUX.1, crédits mensuels gratuits suffisants). Clôture sur la vision business : des sites et apps pour petits commerçants (menuisier, pâtissier).
Franchement, c'est ouf. [...] C'est une manière de travailler. C'est différent. C'est un état d'étude, en fait.
Ce qui a été construit
Pas des exercices : des outils qui tournent après la formation.
- Site web « Canicule » construit en Claude Code depuis un wireframe Figma (Material Design, responsive), déployé sur Vercel en autonomie
- 5 MCPs connectés à Claude : Figma, Gmail, Google Calendar, Notion, Outlook — tout l'environnement de travail dans un seul contexte
- Style visuel custom entraîné sur Recraft (10 images de référence, palette pastels cohérente sur l'ensemble des livrables)
- Connecteur Hugging Face (modèle FLUX.1) configuré pour la génération d'images open source
- Vision business : offre de sites vitrine + apps pour petits commerçants (menuisier, pâtissier), en combinant expertise UX et outils IA
- Formation financée CPF avec 150 € de reste à charge
Ce qui a été dit
« Franchement, c'est ouf. [...] C'est une manière de travailler. C'est différent. C'est un état d'étude, en fait. »
« Je n'ai pas envie de rester sur le trottoir, de laisser le train partir. Donc, j'ai envie de m'y mettre. »
« je n'ai pas appris une manière de faire des compétences figées à un instant T, mais aussi la manière d'aller chercher l'information et comment me maintenir à jour dans la physique de compétence. Parce que ça va si vite, ça ne sert à rien d'avoir appris des trucs qui, dans trois mois, vont être obsolètes. Donc là, je sais exactement comment faire. »
« L'illustration, ça prend du temps. Et j'aimerais pouvoir automatiser un peu ça. »
Ce qu'on nous demande sur ce sujet
Les questions réellement posées autour de ce cas, répondues à partir de ce qui s'est passé pendant la formation.
Comment passer d'un wireframe Figma à un site web déployé avec l'IA, sans savoir coder ?
Avec Claude Code et un wireframe Figma comme point de départ, un Product Designer peut décrire le design souhaité en langage naturel — « comme si on briefait un graphiste » — et obtenir le code HTML/CSS correspondant. Tiburce a choisi le système Material Design pour sa flexibilité, découpé son wireframe en sections, et guidé Claude Code section par section. Le site a été déployé sur Vercel en autonomie, sans aide supplémentaire pour la partie hébergement.
Comment générer des images visuellement cohérentes pour ses projets de design avec l'IA ?
En entraînant un style custom sur un générateur d'images IA. Tiburce a fourni 10 images de référence sur Recraft pour ancrer un style pastel cohérent sur l'ensemble de ses livrables. Pour les cas d'usage plus avancés (génération locale, modèles open source), il a configuré un connecteur Hugging Face (modèle FLUX.1) — sans abonnement fixe, avec des crédits mensuels gratuits suffisants pour ses besoins de design.
Quels MCPs un Product Designer peut-il connecter à Claude pour automatiser ses tâches quotidiennes ?
Tiburce a connecté Figma (pour travailler directement avec ses maquettes dans Claude), Gmail et Google Calendar (synchronisation des invitations pro vers son agenda personnel), Notion (structuration de contenu), et Outlook (rédaction de brouillons d'emails). Ces 5 MCPs ont été configurés en autonomie entre les séances de coaching, sans assistance.
Un freelance peut-il financer une formation IA via le CPF, et quel est le reste à charge ?
Oui. Tiburce a financé sa formation RS6776 (certification inscrite au Répertoire Spécifique, éligible CPF) via son compte personnel de formation. Le reste à charge a été de 150 €. La formation inclut 4 séances de coaching individuel sur mesure et un accès e-learning à vie.
Votre projet mérite le même traitement
Le programme est le même pour tout le monde. Le coaching, lui, part de vos outils, de vos fichiers et de ce que vous voulez construire.
Découvrir la Certification RS6776 — Création de contenus rédactionnels et visuels par l'IAD'autres entreprises l'ont fait
Conseil SEO / Digital
