Je ne suis pas développeur. J’ai des bases en HTML et CSS, et j’ai passé des années sur WordPress. Mais coder un site from scratch en React ? Jamais fait.
En février 2026, j’ai voulu tester Claude Code, l’outil CLI d’Anthropic. Mon site professionnel était le cobaye parfait : il tournait sur WordPress, et je n’arrivais jamais à en tirer un résultat qui me satisfaisait côté UX et design. J’ai donc voulu tout reconstruire — sans écrire une seule ligne de code moi-même.
13 sessions et 60 pages plus tard, le site est en production.
Voici ce qui a fonctionné, ce que j’ai appris, et ce que je ferais différemment.
Les chiffres
Avant d’entrer dans le détail, voici un aperçu concret du projet :
- 13 sessions de travail avec Claude Code, étalées sur environ 3 semaines
- 60 pages créées (pages services, landing pages, articles, pages légales, etc.)
- ~40 heures de travail total, briefing et relecture compris
- 0 ligne de code écrite manuellement — tout a été généré et itéré via Claude Code
- Stack technique : Next.js 14, Sanity CMS, Tailwind CSS, déployé sur Vercel
- Coût estimé : environ 200 € en crédits API Anthropic (plan Max), contre 3 000 à 8 000 € chez un développeur freelance pour un projet équivalent
- Temps estimé économisé : entre 3 et 6 semaines de développement traditionnel
Ces chiffres ne sont pas là pour impressionner. Ils sont là pour montrer que le rapport coût/résultat de cette approche est concrètement intéressant — même pour quelqu’un qui n’a jamais touché à React.
Pourquoi quitter WordPress
Le problème n’était pas WordPress. Le problème, c’était moi devant WordPress.
Je passais des heures à me battre avec le CSS et le JavaScript pour obtenir des landing pages et une UX correctes, mais le résultat me satisfaisait rarement. WordPress est un outil extraordinaire quand on maîtrise son écosystème de thèmes et de plugins. Dans mon cas, je voulais un contrôle total sur chaque pixel, chaque interaction, chaque animation — et WordPress devenait un obstacle plutôt qu’un accélérateur.
L’arrivée de Claude Code a changé l’équation. Si une IA pouvait écrire du code React à ma place, alors je n’étais plus limité par mes compétences techniques. La question n’était plus « est-ce que je sais coder » mais « est-ce que je sais décrire précisément ce que je veux ».
J’ai choisi de reconstruire le site avec une stack moderne :
- Next.js 14 pour le framework React (App Router, Server Components)
- Sanity CMS comme headless CMS pour gérer le contenu de manière structurée
- Tailwind CSS pour le styling rapide et maintenable
- Vercel pour le déploiement et l’hébergement
Le tout forme un monorepo avec deux dossiers : studio/ (Sanity) et web/ (Next.js).
Comment j’ai travaillé avec Claude Code
Claude Code est un outil en ligne de commande. Vous ouvrez votre terminal, vous lancez claude, et vous discutez avec l’IA directement dans votre projet. L’IA voit vos fichiers, peut les lire, les modifier, lancer des commandes (npm run build, git commit), et même interagir avec des API externes via des serveurs MCP.
Ce n’est pas un chatbot. C’est un assistant de développement qui a accès à vos fichiers et à votre code. Son usage principal est le développement logiciel, mais il peut faire bien plus que cela en pratique.
Ma méthode de travail
Chaque session suivait à peu près le même schéma :
- Briefing : j’explique ce que je veux (ex : « crée les 7 pages services avec du contenu provenant de ces fichiers markdown »)
- Échange : Claude propose une approche, je valide ou je corrige la direction
- Exécution : Claude génère le code, crée les fichiers, installe les dépendances
- Vérification : je teste en local, je remonte les bugs ou les ajustements visuels
Un point important : je ne faisais jamais de sessions de plus de deux heures. Au-delà, la fenêtre de contexte sature et Claude commence à oublier des décisions prises en début de session. Mieux vaut faire des sessions courtes et ciblées, avec un objectif clair à chaque fois.
Entre les sessions, je notais systématiquement ce qui restait à faire et ce qui avait été décidé. Ce journal de bord s’est révélé indispensable pour maintenir la cohérence du projet d’une session à l’autre.
Vous pouvez aussi demander à Claude de créer un fichier de suivi de projet.
Ce qui a bien fonctionné
La rétention d’informations sur le contexte du projet.
Grâce au fichier CLAUDE.md à la racine du repo, Claude connaît la stack, les conventions, la charte graphique, l’architecture des fichiers. Quand je dis « ajoute un CTA sur la page à propos », il sait que le CTA utilise la couleur #527478, la police Space Grotesk, et qu’il doit pointer vers /contact. Ce fichier est le cerveau partagé entre vous et l’IA — c’est probablement l’élément le plus déterminant de la réussite du projet.
La fenêtre de contexte peut se remplir vite, mais les modèles récents gèrent beaucoup mieux ce problème qu’il y a quelques mois.
Le maquettage et les choix de design.
Je n’ai pas maquetté une seule page. J’ai décrit ce que je voulais et Claude a proposé des layouts. Précision importante : la description que j’ai donnée à Claude a nécessité pas mal de recherches de mon côté. J’ai dû chercher de l’inspiration sur des sites comme Dribbble et étudier du vocabulaire UX pour décrire précisément ce que je voulais.
L’IA ne remplace pas la vision; elle exécute la vôtre.
Quand le résultat ne me plaisait pas, je le disais et il corrigeait. Ce cycle de feedback est rapide et naturel, beaucoup plus qu’avec un développeur humain où chaque aller-retour peut prendre des jours.
La gestion du SEO technique et le maillage de base.
Balises title, meta descriptions, schéma JSON-LD, sitemap dynamique, robots.txt, balises canoniques — Claude a géré toute la base technique du SEO sans que j’aie besoin de lui expliquer les bonnes pratiques. Sur ce point, le résultat était solide dès la première itération.
La production de contenu multi-pages.
Créer 7 pages services, chacune avec son contenu spécifique, ses CTA, son schéma structuré, en une seule session ? C’est là que l’IA brille le plus. Ce qui m’aurait pris une semaine entière a été fait en quelques heures, avec un niveau de cohérence que j’aurais eu du mal à maintenir manuellement.
Ce qui a foiré
Le SEO technique qui explose en vol, trois jours après la mise en production.
Le site est en ligne, tout semble rouler. Trois jours plus tard, je lance Screaming Frog et je vérifie la Search Console. Résultat : mon maillage interne était complètement cassé et mes canoniques avaient vrillé.
Deux causes. Première : une obfuscation de liens mal orchestrée par Claude. Certains liens internes étaient masqués aux crawlers alors qu’ils n’auraient pas dû l’être. Deuxième : une règle de redirection générique dans Vercel qui renvoyait toutes les URLs vers la version « www ». Les canoniques pointaient vers des URLs différentes de celles que Google crawlait.
Le genre de problèmes qu’un audit technique pré-production aurait attrapé en cinq minutes. Sauf que je n’en ai pas fait. J’étais trop pressé de mettre en ligne. Leçon apprise : ne jamais mettre en production sans un audit SEO technique complet, même quand on a confiance dans l’IA.
L’IA écrit comme une IA (sans fine-tuning).
C’est le problème le plus chronophage. Malgré des skills de copywriting et d’humanisation de l’écriture chargés dans Claude Code, le contenu généré restait trop lisse, trop « corporate », trop prévisible. Les phrases tournaient bien, mais elles manquaient de personnalité, d’asprités, de cette imperfection qui rend un texte humain.
J’ai dû reprendre chaque page manuellement pour injecter du ton, des anecdotes, des formulations moins polies. Cette reprise a représenté presque autant de temps que la génération initiale du contenu.
Ce que j’en retiens : l’IA est excellente pour produire une structure et un premier jet. Mais la voix, le style, ce qui fait qu’un lecteur sent qu’un humain a écrit le texte — ça reste votre travail.
Ce que je ferais différemment
Avec le recul, voici les trois changements majeurs que j’apporterais à ma méthode :
- Faire un audit SEO technique avant la mise en production. Screaming Frog, vérification des canoniques, test du maillage interne, validation des redirections. Trente minutes qui m’auraient épargné trois jours de corrections.
- Rédiger le CLAUDE.md moi-même avant de commencer. Lors de ce projet, j’ai laissé Claude le rédiger en grande partie. Résultat : il manquait des conventions importantes et certaines décisions de design n’étaient pas documentées. Ce fichier est votre contrat avec l’IA — prenez le temps de l’écrire vous-même.
- Écrire soi-même en premier jet, puis demander à Claude de structurer et améliorer. Faire l’inverse (tout générer puis tout corriger) prend plus de temps et sonne moins juste. Votre premier jet, même maladroit, porte votre voix. Claude peut l’améliorer sans l’effacer.
- Ne pas sous-estimer le temps de relecture. L’IA produit vite, mais relire, corriger et vérifier chaque page prend presque autant de temps que la production elle-même. Intégrez ce temps dans votre planning dès le départ.
La suite
Le site n’est pas fini, et il me reste encore pas mal de choses à faire :
- Stratégie de contenu : un article par semaine, en commençant par des sujets à faible concurrence pour gagner en visibilité progressivement
- Maillage interne : je vais travailler en profondeur, car pour l’instant je suis resté en surface
- Résultats SEO : je documenterai les positions, le trafic et les conversions au fil du temps dans cette newsletter
- Améliorations UX : témoignages clients, infographies, nouvelles fonctionnalités interactives
Construire un site web professionnel avec l’IA, ce n’est pas « appuyer sur un bouton et attendre ». C’est un vrai travail de co-pilotage : briefer, valider, corriger, itérer. L’IA accélère considérablement le processus, mais elle ne remplace ni votre vision, ni votre exigence, ni votre connaissance de votre marché.
Si vous êtes freelance, consultant ou indépendant, et que vous hésitez à sauter le pas : faites-le. La courbe d’apprentissage existe, mais elle est beaucoup plus douce qu’on ne le croit. Ce qui compte, ce n’est pas de savoir coder : c’est de savoir décrire précisément ce que vous voulez.
Si vous souhaitez voir le résultat, c’est ici : azdinemansour.fr.