Geoffroy de Bellabre, consultant Product chez IKXO, nous partage son retour d’expérience sur la création du site de Manon Guyot-Francis, avocate, à l’aide de Figma Make, du MCP Figma, de WordPress et de Codex.
Le projet allait bien au-delà de la conception d’un simple site vitrine. Il comprenait le site principal du cabinet, plusieurs pages d’atterrissage orientées SEO, un mini-site consacré à l’audition d’enfant et un système capable de préparer des articles directement dans WordPress avant validation humaine.
Cette expérience lui a permis de tester jusqu’où le vibe coding peut aller lorsqu’il quitte le terrain du prototype pour s’intégrer à un véritable environnement de production.
Concevoir une base exploitable avec Figma Make
Le projet a commencé par la structuration de l’expérience et la création des premières directions visuelles.
Figma Make a permis à Geoffroy de prototyper rapidement plusieurs pistes, de tester différentes hiérarchies de contenus et de construire une première base de pages réutilisables. Le MCP Figma a ensuite servi de pont entre les maquettes et leur implémentation.
Les choix réalisés dans Figma devaient pouvoir être traduits en composants et en structures réellement exploitables dans le site final. Cette contrainte a orienté le travail dès la phase de conception : chaque section devait rester cohérente, réutilisable et suffisamment flexible pour accueillir différents types de contenus.
Transformer les maquettes en site WordPress
Le design a ensuite été reconstruit dans WordPress à partir d’une base propre, composée de pages, de blocs et de modèles réutilisables. Le site principal rassemble les pages essentielles du cabinet, comme l’accueil, la présentation du cabinet, les honoraires, les publications ou la prise de contact. Il comprend également plusieurs pages d’atterrissage correspondant à des sujets juridiques et à des intentions de recherche précises.
Les formats d’articles peuvent intégrer différents appels à l’action en fonction du contenu. Certains orientent le lecteur vers une prise de rendez-vous, tandis que d’autres l’accompagnent vers un parcours plus pédagogique.
Cette organisation permet de faire évoluer le site sans devoir reconstruire chaque nouvelle page indépendamment.
Adapter l’expérience à des publics différents
Une partie du projet portait sur la création d’un mini-site consacré à l’audition d’enfant. Cet espace est intégré à la même base WordPress, mais dispose de son propre ton éditorial, de sa propre navigation et de pages adaptées à différents publics. Les enfants et les parents peuvent ainsi accéder à des contenus pensés pour leurs besoins respectifs, ainsi qu’à une section dédiée aux podcasts.
Le sujet de l’audition d’enfant demande une approche plus accessible, pédagogique et rassurante que les pages institutionnelles du cabinet. La création de cet espace distinct permet de porter les engagements de Maître Guyot-Francis sans mélanger les prises de parole ni les parcours de navigation.
Ce choix rappelle aussi qu’une expérience cohérente ne repose pas nécessairement sur une interface uniforme. Elle peut venir de la capacité à adapter le ton, la structure et les contenus à chaque public, tout en conservant un socle commun.
Construire une chaîne de production reproductible
Le passage des maquettes au site final a demandé une véritable logique de préproduction et de synchronisation.
Geoffroy a utilisé Codex pour piloter les scripts, préparer les pages dans l’environnement de préproduction, reconstruire les sections et injecter les contenus dans WordPress et Elementor.
Le processus suit une chaîne structurée : conception de la maquette, définition des composants, génération des structures, intégration des contenus et mise à jour du site.
Cette logique permet de reproduire les opérations et de faire évoluer les pages plus facilement. Le travail ne dépend plus d’une succession de copier-coller visuels ou de modifications manuelles difficiles à maintenir.
Automatiser la préparation des contenus SEO
La deuxième partie du projet concernait la production de contenus. Geoffroy a construit un pipeline capable de transformer une logique SEO en brouillons WordPress prêts à être relus. Le système peut partir d’un fichier de mots-clés et a également été conçu pour exploiter les requêtes observées dans Search Console lorsque l’accès est disponible.
À partir de ces données, il propose des sujets, prépare une première version des articles, construit un HTML compatible avec WordPress et renseigne les principaux éléments SEO. Les brouillons sont déposés directement dans WordPress avec leur slug, leur métadescription, leur mot-clé principal et, lorsque le sujet s’y prête, une structure de FAQ.
Le pipeline réduit ainsi le temps consacré à la préparation technique des contenus et facilite le passage de l’identification d’une opportunité SEO à la création d’un premier brouillon exploitable.
Garder la validation humaine au cœur du système
Dans une activité aussi sensible que le droit, la maîtrise éditoriale reste essentielle. Aucun article n’est publié automatiquement. Le système prépare une première structure et remplit les principaux champs nécessaires à sa publication. Maître Guyot-Francis peut ensuite relire, corriger, reformuler, enrichir, valider ou refuser chaque proposition.
La vérification des informations juridiques, des formulations et des positions exprimées reste entièrement entre ses mains. Ce fonctionnement correspond au niveau d’automatisation recherché pour une profession experte : l’outil prend en charge une partie du travail préparatoire, tandis que la responsabilité du contenu et la décision finale restent humaines.
Prévoir des garde-fous opérationnels
Le pipeline intègre également plusieurs mécanismes de contrôle. Il vérifie les titres et les slugs afin d’éviter de créer un article déjà traité. Il gère les erreurs rencontrées dans WordPress et peut utiliser un fichier de sujets local lorsque Search Console n’est pas accessible. À la fin de chaque exécution, un résumé indique les brouillons créés, les doublons ignorés et les éventuelles erreurs.
Ces éléments paraissent secondaires au moment de construire une première démonstration. Ils deviennent pourtant indispensables dès que le système doit fonctionner régulièrement et rester compréhensible pour ses utilisateurs. La valeur du dispositif repose autant sur la qualité des contenus générés que sur sa capacité à gérer les cas d’erreur, à éviter les doublons et à rendre chaque exécution traçable.
Les difficultés apparaissent au passage en production
Le projet a rencontré plusieurs frictions : contraintes propres à WordPress, accès aux champs SEO via l’API REST, intégration avec Yoast, disponibilité de Search Console, gestion des identifiants et des différents environnements. Des exécutions simultanées ont également pu générer des doublons. Les résumés d’exécution et les solutions de repli ont dû être progressivement fiabilisés.
Ces blocages ont constitué une partie importante de l’apprentissage. Une démonstration permet de vérifier qu’une idée fonctionne dans des conditions maîtrisées. Un projet réel doit aussi gérer les accès manquants, les erreurs, les exceptions, les contraintes de l’environnement existant et la maintenance dans le temps.
Le passage en production déplace rapidement le sujet. La génération initiale devient une étape parmi d’autres. La fiabilité de la structure, la gestion des données et la capacité à faire évoluer le système prennent une place tout aussi importante.
Quand le vibe coding devient un levier de production
Ce projet montre que le vibe coding prend tout son intérêt lorsqu’il dépasse la génération rapide d’une interface. Figma Make a accéléré l’exploration et la conception des pages. Le MCP Figma a facilité le passage des maquettes à leur implémentation. WordPress et Elementor ont fourni le socle éditorial. Codex a permis d’orchestrer les scripts, de transformer les contenus, de corriger les intégrations et d’automatiser certaines tâches.
Le résultat repose sur l’articulation de ces outils au sein d’un même système : un site principal, des pages d’atterrissage cohérentes, un espace éditorial consacré à l’audition d’enfant et un pipeline de préparation des contenus. La vitesse de génération reste utile, mais elle ne suffit pas. La valeur vient surtout de la structure construite autour des outils : des composants réutilisables, des règles explicites, des garde-fous opérationnels et une responsabilité humaine clairement définie.
Pour les professions expertes, cette approche peut faciliter la structuration et la diffusion de connaissances très spécialisées. Elle leur donne les moyens de rendre leur expertise plus visible, plus lisible et plus accessible, tout en conservant la maîtrise de leur parole. C’est à cette condition que le vibe coding devient autre chose qu’un moyen de produire rapidement un prototype. Il devient un véritable levier de production.
Si cet article vous a plu, découvrez aussi Vibe coding : définition, usages et enjeux pour les Product Managers.
