Créer des sites clients en Next.js avec l'IA quand on part de WordPress, sans background de dev
Stéphanie est webdesigner freelance, auto-formée sur Figma, WordPress et Divi depuis deux ans. Elle sentait qu'elle atteignait les limites de sa stack — projets lents à corriger, impossible de proposer apps ou e-commerce. En 6 séances avec Nathan Vidal, elle a reconstruit son portfolio en Next.js, livré un site pour une architecte d'intérieur et démarré un projet pour un théâtre, en répliquant à chaque fois le même workflow Claude Design → Claude Code → Vercel.
Claude DesignClaude CodeNext.js
Vercel
GitHubFigmaWordPress HeadlessWooCommerceGraphQLACFStripe
CursorCoaching : Nathan Vidal
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.
- Stack auto-apprise : Figma + WordPress + Divi, sans background de développement
- Blocages techniques récurrents — une maquette difficile pouvait mobiliser une journée
- Impossible de proposer des applications ou des e-commerces techniques aux clients
- Portfolio sur WordPress en cours de refonte, trop long à faire évoluer
- Workflow Claude Design → Claude Code → Next.js → Vercel, reproductible sur chaque commande
- Portfolio refait en Next.js, déployé en production après les séances
- Site architecte d'intérieur livré + projet théâtre démarré avec le même pipeline
- Architecture WooCommerce + ACF + GraphQL + Stripe pour l'e-commerce maîtrisée
- Moins d'une heure par page en moyenne, 10× plus rapide sur les corrections avec Claude Code
Comment ça s'est passé
Freelance depuis deux ans, Stéphanie livrait des sites sur une stack auto-apprise — Figma pour les maquettes, WordPress et Divi pour le développement. Sans background de développement, elle se heurtait régulièrement à des blocages techniques qui ralentissaient ses projets : une maquette qui ne répondait pas bien à ses corrections pouvait mobiliser une journée entière. Elle voulait passer à une stack plus moderne et pouvoir proposer des apps et des e-commerces à ses clients, sans dépendre d'un développeur extérieur.
Nathan Vidal a construit un parcours sur mesure autour des projets clients réels de Stéphanie. Séances 1-2 : setup d'un environnement de développement complet (Homebrew, Node, Git, Cursor, Next.js) et première conversion d'une maquette Figma en site déployable. Inter-séances : Stéphanie refait entièrement son portfolio en Next.js de façon autonome. Séance 3 : comparaison Claude Design vs Stitch vs Midjourney sur ses cas réels — et identification de Claude Code pour les corrections (résultat : moins d'une heure par page en moyenne). Séances 4-6 : livraison d'un site client architecte d'intérieur avec le même pipeline, architecture WooCommerce + ACF + GraphQL + Stripe pour un e-commerce, démarrage du projet théâtre en Headless WordPress + Next.js.
En 6 séances, Stéphanie a reconstruit son portfolio en Next.js et livré un site pour une architecte d'intérieur avec le workflow Claude Design → Claude Code → GitHub → Vercel. Sur ses nouvelles bases, Claude Code est dix fois plus rapide pour les corrections — ce qui change la rentabilité de ses projets. Elle a aussi maîtrisé une architecture WooCommerce + ACF + GraphQL + Stripe pour répondre aux demandes e-commerce de ses clients, et réplique le même pipeline sur chaque nouvelle commande.
Étape par étape
Le coaching part de ce que la personne produit déjà. Voici les jalons réels du parcours, blocages compris.
- Séances 1–2
Setup pro et premier site Next.js
Installation complète d'un environnement de développement (Homebrew, Node, Git, Cursor, Next.js, skills Claude). Première conversion d'une maquette Figma en site Next.js fonctionnel en local, déployable sur Vercel — un vrai livrable dès la première journée.
- Inter-séances
Portfolio refait en Next.js de façon autonome
Entre les séances 2 et 3, Stéphanie refait entièrement son portfolio avec Claude Design puis Claude Code, en testant en parallèle Stitch (Google) et Midjourney. Elle arrive à la séance 3 avec du travail déjà accompli.
« Ça, c'était Claude Design qui m'a fait un truc où j'ai tout bricolé et je suis arrivée à ça. »
- Séance 3
Moins d'une heure par page — le bon outil identifié
Comparaison des trois outils sur ses cas réels. Nathan identifie qu'elle consommait 4× trop de tokens sur Claude Fable et lui explique pourquoi Claude Code est plus efficace que Claude Design pour les corrections. Résultat : moins d'une heure par page en moyenne sur son portfolio.
- Séances 4–5
Site architecte d'intérieur + architecture e-commerce
Livraison d'un site client pour une architecte d'intérieur avec le workflow Claude Design → Claude Code → Vercel. En parallèle : création de Custom Post Types, Custom Fields (ACF), requêtes GraphQL et structure WooCommerce + Stripe pour répondre aux demandes e-commerce.
- Séance 6
Réplication du workflow sur le projet théâtre
Démarrage du site pour un client théâtre en Headless WordPress + Next.js, en réutilisant exactement le pipeline maîtrisé pour l'architecte d'intérieur.
« Du coup, je pensais à faire exactement ce qu'on avait fait pour l'architecte d'intérieur. »
Je me suis beaucoup amusée à le faire. Ça ne m'a pas pris très longtemps en vrai.
Ce qui a été construit
Pas des exercices : des outils qui tournent après la formation.
- Portfolio entièrement refait en Next.js, déployé en production
- Site architecte d'intérieur livré avec le pipeline Claude Design → Claude Code → Vercel
- Architecture WooCommerce + ACF + GraphQL + Stripe maîtrisée pour les projets e-commerce
- Projet théâtre démarré en Headless WordPress + Next.js avec le même workflow
- Moins d'une heure par page en moyenne — 10× plus rapide sur les corrections avec Claude Code
Ce qui a été dit
« Je me suis auto-formée sur Divi, sur WordPress. [...] Maintenant, je sens que je suis à la limite du truc et qu'il faut que je passe à la vitesse supérieure. »
« Cloud Code, à chaque fois que j'ai voulu faire des corrections, c'est nickel tout de suite [...] ça va dix fois plus vite. Il est beaucoup plus efficace. »
« Mon workflow, je le connais. Il y a juste une partie qui bug ou que je ne sais pas maîtriser. »
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 un webdesigner freelance peut-il créer des sites clients en Next.js sans savoir coder ?
Stéphanie est partie de Figma + WordPress/Divi, sans background de développement. En 6 séances, elle a appris un workflow en deux temps : Claude Design génère la structure visuelle depuis la maquette, Claude Code prend le relais pour les corrections et les ajustements fins. Le résultat est déployé sur Vercel depuis GitHub. Elle réplique ce pipeline sur chaque nouveau projet client — le site de l'architecte d'intérieur et le projet théâtre ont été construits avec la même recette.
Quelle est la différence entre Claude Design et Claude Code pour créer un site web ?
Stéphanie a testé les deux en séance 3. Claude Design génère rapidement une structure visuelle à partir d'une maquette ou d'un brief, mais les corrections sont lentes et nécessitent de nombreuses itérations. Claude Code est beaucoup plus précis pour les ajustements — il corrige en une passe, sans régression. Sa conclusion : Claude Design pour l'ébauche visuelle, Claude Code pour les corrections et l'affinement. Ce découpage lui a permis de passer sous la barre d'une heure par page.
Comment passer de WordPress et Divi à une stack moderne avec l'IA quand on est non-développeur ?
Stéphanie a suivi un parcours progressif : setup de l'environnement (Homebrew, Node, Git, Cursor) dès les premières séances, conversion d'une maquette Figma en Next.js, déploiement Vercel. Elle a ensuite répliqué ce workflow sur son portfolio, puis sur ses projets clients, sans écrire une seule ligne de code à la main. Le passage de WordPress/Divi à Next.js ne nécessite pas de comprendre React — Claude Code s'en charge. Ce qui compte, c'est de maîtriser le workflow : Figma → Claude Design → Claude Code → GitHub → Vercel.
Peut-on intégrer WooCommerce et des paiements Stripe dans un projet Next.js avec l'IA ?
Oui, c'est exactement ce que Stéphanie a fait en séances 4-5 : création de Custom Post Types (CPT) pour les témoignages, configuration de Custom Fields (ACF), requêtes GraphQL pour communiquer entre WordPress headless et le front Next.js, et intégration Stripe pour les paiements. Nathan lui a expliqué l'architecture API REST vs GraphQL pour WooCommerce — et elle a créé une mini-boutique e-commerce fonctionnelle pendant la séance.
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 Formation IA pour WebdesignerD'autres entreprises l'ont fait
Conseil SEO / Digital
