Ces dernières années, je passais toujours par Webflow pour avoir un site propre. Un template acheté avec quelques ajustements faisait l’affaire, mais une vraie dépendance → chaque modification passait par l’interface, chaque nouvelle section demandait de bidouiller...
L’outil est puissant mais reste technique avec des notions indispensables en frontend.
Le mois dernier, on a refait notre site web à 100% avec Claude Design et Claude Code. Site custom, CMS open source, édition en langage naturel, déployé sur Vercel en 1 clic.
Je vous partage tout le process, étape par étape, pour que vous puissiez reproduire tout ça.
Pourquoi créer son site web avec l'IA plutôt qu'avec Webflow
Webflow / Wordpress & co sont de très bons outils, mais on paie un abonnement pour un site construit sur un template, avec des limites de personnalisation et une friction à chaque édition.
Avec l’arrivée de Claude Design et la maturité de Claude Code, l’équation a changé. On peut désormais :
- créer un site 100% custom, aligné sur sa charte, sans partir d’un template
- éditer le contenu en langage naturel (”ajoute un cas client dans la section références sur la base du document en pièce jointe”)
- mettre en place des routines Claude qui publient du contenu régulièrement sur le site
Étape 1 : les maquettes du site avec Claude Design
Pour commencer, on a fait un 1er jet sur Claude Design pour générer les maquettes et itérer visuellement sur chaque section. Vous pouvez choisir l’option “prototype” et directement partager votre demande, y inclure des screenshots de sites concurrents ou d’inspiration. Je vous conseille de jeter un oeil à Dribbble pour avoir des idées.
Comme vous le voyez sur le screenshot, dans mon cas, j’avais déjà créé un design.md. Un fichier qui permet de générer des visuels en suivant ma charte graphique (police, couleur, …).
J’avais mentionné dans cette newsletter comment créer son design.md en quelques minutes. Je vous invite à y jeter un oeil.
Une fois que j’ai cette 1ère version que je peux déjà éditer sur Claude Design dans le fond et la forme, je vais pouvoir basculer sur Claude Code pour l’avoir en local sur mon ordinateur et tester toutes les sections.
Rien de plus simple, il suffit de partager le résultat à Claude Code :
Cela permet de transformer les maquettes en vrai code, gérer les modifications et aller plus loin. L’idéal est de basculer sur un IDE comme VS Code mais vous pouvez rester sur Claude Code Web.
À ce moment là, vous aurez en local sur un dossier “Site Web” tout le code généré par Claude Design. Vous aurez alors 2 options :
- Continuer avec la même logique pour les autres pages de votre site
- Rester dans Claude Code pour développer les autres pages avec la base que vous avez
De mon côté, j’ai une préférence pour repartir depuis Claude Design à minima pour faire des sections dédiées que je n’ai pas encore.
La qualité est largement meilleure sur Claude Design que sur Claude Code même en utilisant des skills (j’explique cette partie plus bas). Ici par exemple la section “approche sectorielle” que j’ai faite de manière isolée :
Conseil pour économiser vos crédits → utilisez le panneau de tweaks de Claude Design. Il génère des sliders et des palettes que vous manipulez en temps réel (couleurs, typos, espacements) sans envoyer de nouveaux prompts. Chaque aller-retour évité, c’est des tokens non utilisés ;)
Étape 2 : développer et itérer avec Claude Code
Quand vous avez basculé sur Claude Code, vous avez la main pour itérer. À partir de ce moment là, voici plusieurs étapes à suivre pour arriver à un résultat final satisfaisant.
1️⃣ Utiliser un claude.md (et le faire vivre)
Avant de générer quoi que ce soit, on a créé un fichier claude.md. C’est le document que Claude lit systématiquement avant chaque action. Pensez-y comme le brief permanent du projet.
Dedans, on a mis :
- le contexte entreprise : qui est Tandem, notre positionnement, notre audience
- l’arborescence du site : pages, sections, navigation
- les règles du projet : toujours tester en local avant de pousser sur GitHub, invoquer le skill de design avant d’écrire du code front
Ce fichier évolue en permanence. Au fil du projet, vous y ajoutez vos préférences et vos corrections récurrentes pour ne pas les répéter à chaque prompt.
Un aperçu de notre claude.md ici :
Ajoutez un fichier voice.md avec votre ton, votre style et quelques exemples de textes. J'en parlais déjà dans mon édition sur Claude Cowork, le principe est identique. Sans lui, Claude écrit un copywriting générique. Avec, les textes du site sonnent comme vous dès la première version.
2️⃣ Les skills : le garde-fou design
Le skill frontend-design, dispo directement chez Anthropic vous aide à ajouter un peu d’épaisseur à votre site. Avec, les rendus sont plus modernes et professionnels, même avec un prompt minimal.
Tous les modèles ont été entraînés sur les mêmes templates SaaS. Sans garde-fou, on retrouve les mêmes tics sur chaque projet : la police Inter partout, les dégradés violet-bleu, les cards imbriquées dans des cards. Vous les avez forcément déjà vus sur des dizaines de landing pages
Pour aller plus loin, je vous invite à creuser Impeccable que j’ai pas mal utilisé.
Les skills que je viens de partager, c’est de la connaissance design injectée dans le code. C’est ce qui fait la différence, entre un proto vibecodé et un site qu’on peut montrer à un client.
3️⃣ La boucle de captures d’écran
Plus bas, je parle du concept de “loop”. Pour permettre à Claude d’itérer, vous pouvez lui demander de prendre lui-même des captures d’écran de ce qu’il construit (via Puppeteer, il installe tout seul), de les analyser, et de corriger : padding, margin, alignements, contrastes.
Au lieu de jouer au correcteur à chaque itération, vous récupérez une version déjà propre.
⚠️ Attention avec les éléments animés. Ce n’est pas pris en compte dans le screenshot
4️⃣ S’inspirer de sections existantes
Pas besoin de tout inventer. Des sites comme 21st.dev regorgent de composants : backgrounds animés, boutons, heros, effets de scroll.
La logique est simple → vous repérez un composant qui vous plaît, vous copiez son code ou son prompt, et vous demandez à Claude de l’intégrer dans votre site en l’adaptant à votre charte. En quelques minutes, vous avez un élément dynamique qui aurait demandé des heures à un dev.
Un exemple ici pour une section de comparaison :
Le vocabulaire web à connaître : hero, CTA, padding
C’est LE point sous-estimé. Claude est puissant, mais si vous ne savez pas nommer ce que vous voulez, vous allez multiplier les allers-retours.
Un site web a un vocabulaire précis : le hero (la première section visible avec le titre principal), le CTA (le bouton d’action), le padding et la margin (les espacements),..
La différence est concrète. Dire “le CTA du hero manque de contraste, augmente le padding vertical de la section” produit un résultat en 1 itération VS “c’est pas top en haut”..
Pas besoin d’être développeur, mais quelques heures à comprendre ce champ lexical vous feront gagner des dizaines d’allers-retours.
Point important → réfléchissez à votre arborescence AVANT de générer. Quelles pages, quelles sections par page, quel parcours utilisateur. Claude exécute très bien, il ne pense pas votre site à votre place
Étape 3 : brancher un CMS headless pour le contenu
Sur un site, certaines pages sont uniques (accueil, contact) et d’autres se répètent avec le même format : les articles de blog, les cas clients. Si tout est codé “en dur”, chaque nouvel article demande de repasser par Claude Code. Pas viable au quotidien.
C’est le rôle d’un CMS : le contenu vit séparément du code. Vous créez un template une fois (la mise en page d’un article), chaque nouveau contenu vient s’y afficher automatiquement.
De notre côté, on est parti sur Sanity, un CMS headless avec un back-office visuel. L'équipe marketing crée et édite les articles sans toucher au code, comme sur Webflow, sans payer l'abonnement.
Et comme le contenu est structuré, on peut brancher Claude dessus. Deux usages concrets :
- l’édition en langage naturel : “ajoute cette référence client dans le CMS avec ce titre et ce résumé”, et c’est publié
- les routines de contenu : des tâches programmées sur Claude qui génèrent et ajoutent du contenu régulièrement sur le site (articles de veille, mises à jour de pages)
Si votre site est un simple site vitrine de 4-5 pages fixes, sans publication régulière, vous pouvez très bien vous passer d’un CMS. Inutile de complexifier
Étape 4 : mettre le site en ligne avec GitHub et Vercel
À ce stade, votre site tourne en localhost, il n’existe que sur votre machine. Si vous envoyez l’URL à quelqu’un, il ne verra rien. Pour le rendre accessible, il faut 2 briques, toutes les deux gratuites.
- GitHub, pour stocker tous vos fichiers en ligne avec l’historique complet des versions, chaque modification est tracée et réversible.
- Vercel, c’est la vitrine. Il prend le code stocké sur GitHub et le transforme en site accessible sur le web.
Voici les étapes à suivre :
- Créez un compte sur GitHub, puis demandez simplement à Claude Code : “crée un repository et pousses-y le code du site”. Il vous demandera de vous authentifier une fois, puis il gère tout. Cela permettra de synchroniser Github et vos fichiers locaux.
- Créez un compte sur Vercel en vous connectant avec votre compte GitHub (ça simplifie tout).
- Sur Vercel, créez un projet pour importer votre repo Github, puis déployer. 60 secondes plus tard, votre site est en ligne sur une URL du type monsite.vercel.app.
- Pour votre propre nom de domaine (wearetandem.ai dans notre cas), direction les settings du projet, onglet Domains. Vercel vous guide pas à pas pour la configuration.
Un aperçu de quelques pages, je vous invite à regarder le site entier ici.
Dès que c’est fait, quand vous dites à Claude Code “pousse les changements sur GitHub”, Vercel détecte la mise à jour et déploie la nouvelle version en 30 secondes. Une fois configuré, vous n’y touchez plus.
Ici, voici l’historique des push github vers Vercel :
Les 3 limites de la création de site web avec l'IA
Trois points de friction qu’on a rencontrés :
1️⃣ Les micro-modifications → l’édition conversationnelle est géniale pour créer, mais frustrante pour corriger une coquille. Changer deux mots de copywriting peut demander de prompter, attendre la boucle, vérifier, pousser. Là où un CMS classique, c’est 10 secondes. C’est exactement pour ça qu’on a mis Sanity sur la partie contenu : le structurel passe par Claude, l’éditorial passe par le back-office.
2️⃣ Les patterns répétitifs sur Claude Design. En enchaînant les générations, on retrouve des structures similaires (mêmes layouts, mêmes effets). D’où l’importance des inspirations externes type 21st.dev pour casser ces automatismes.
3️⃣ La connaissance web nécessaire. On ne le répétera jamais assez : l’outil ne remplace pas la compréhension. Arborescence, logique de sections, mots-clés SEO, hiérarchie de l’information, tout ça reste du travail.
Faut-il refaire son site web avec l'IA ? Notre bilan
En 2014, j’apprenais à coder du front : HTML, CSS, JavaScript, et je refaisais des sites intégralement avec Bootstrap. Des semaines de travail pour un résultat correct.
Douze ans plus tard, la création d’un site web avancé n’a jamais été aussi simple. En quelques jours, avec Claude + Github + Vercel, on peut avoir un résultat supérieur à la majorité des sites sur le web.
Le bilan dépend surtout de votre profil :
- Vous avez une bonne culture tech : foncez, c’est un accélérateur énorme et vous gardez le contrôle total.
- Vous partez de zéro avec des attentes standards, l’IA fait 80% du travail, le résultat sera très correct pour un site vitrine. C’est là que le potentiel est le plus fou.
- Vous êtes entre les deux, avec des exigences précises mais sans les mots pour les exprimer : il faudra être patient, ce sera du ping-pong avec l’outil.
Au début, ne soyez pas trop ambitieux et commencez par 1 landing page, pas le site complet. Posez votre claude.md, activez le skill frontend design (ou Impeccable), et prenez le réflexe de la boucle screenshot. Vous comprendrez vite le potentiel.
