Les deux métiers qu'on confond
Quand quelqu'un demande à une IA « fais-moi un site », il obtient presque toujours la même chose : un fond dégradé bleu-violet, des icônes en cercle coloré, trois colonnes identiques, une typographie sans caractère. Ce n'est pas que l'IA soit mauvaise. C'est qu'on lui a demandé deux métiers différents en même temps, et qu'elle a fait les deux d'un coup, sans jamais s'arrêter pour vous montrer une proposition avant de partir dans le code :
Métier n°1
Travailler son design
Couleurs, polices, mise en page, ambiance visuelle — choisir à quoi le site ressemble. C'est le rôle de Claude Design.
Métier n°2
Travailler le contenu de sa page web
Transformer le visuel choisi en un vrai site qui fonctionne, avec du vrai contenu. C'est le rôle de Claude Code.
Un designer humain ne travaille pas comme ça. Il pose des questions sur votre marque, esquisse deux ou trois pistes, vous les montre, et code seulement une fois que vous avez choisi. C'est exactement ce que sépare la méthode de ce guide : Claude Design pour la première partie, Claude Code pour la seconde.
On ne code pas un design qu'on n'a pas encore choisi. On choisit d'abord, on code ensuite.
Concrètement, la Section 01 qui suit couvre les deux à la fois : cadrer le visuel, le voir en plusieurs versions, choisir, et obtenir le vrai site qui marche — tout, dans Claude Code, l'outil qu'on utilise déjà pour construire des sites.
Concevoir et construire, sans quitter Claude Code
Jusqu'à récemment, il fallait aller sur un site séparé (claude.ai/design) pour concevoir le visuel, puis exporter un fichier ZIP à réimporter à la main dans Claude Code. Ce n'est plus le cas. La commande /design se tape directement dans Claude Code, sur votre ordinateur — le design et le code vivent au même endroit, dans la même conversation.
On ne code pas un design qu'on n'a pas encore choisi. On choisit d'abord, on code ensuite — mais les deux se passent maintenant dans le même outil.
1 Cadrer avant de lancer /design 16 questions en 4 blocs, pour ne jamais partir d'un prompt vague La préparation
Avant de taper /design, répondre à ces questions construit une charte graphique claire. Voici à quoi ça ressemble, en situation réelle — ici sur l'exemple d'un institut d'esthétique :
Le socle complet compte 8 questions de ce genre (produit, nom de marque, ambiance, offres phares, clichés à éviter, assets existants, direction visuelle, émotion attendue). Puis viennent le logo et le système d'icônes, la densité de la mise en page et le mouvement, et enfin les contraintes de lisibilité (contraste, mobile ou ordinateur en priorité) — 8 questions de plus, détaillées dans le skill à télécharger ci-dessous.
.claude/skills/interview-charte-graphique/.
2 Ce qui se passe à l'écran Un canevas type Figma s'ouvre à droite, le chat reste à gauche Le lancement
En tapant /design dans Claude Code, une option apparaît : « Create a design canvas — a multi artboard visual design ». Une fois validée, un canevas visuel s'ouvre automatiquement sur la droite de l'écran — une grille infinie dans laquelle on peut zoomer et se déplacer — pendant que le chat classique de Claude Code reste actif à gauche.
Les différentes variantes demandées apparaissent côte à côte sous forme de planches numérotées (01, 02, 03…). Chacune a un bouton Play qui la rend interactive et testable comme un vrai site — hover, boutons, tout fonctionne déjà.
3 Choisir, décliner, retoucher Deux façons de faire évoluer une variante qui plaît L'itération
Demander une déclinaison à l'oral — dans le chat, à gauche :
Les nouvelles variantes apparaissent directement sur le canevas, comparables côte à côte avec l'originale.
Retoucher soi-même — double-cliquer sur un élément de la planche ouvre un panneau de propriétés proche de Figma ou Photoshop : texte modifiable, sélecteur de couleur, réglage du rayon des angles, redimensionnement.
Le geste à ne pas oublier
Après une retouche manuelle sur le canevas, il faut cliquer sur « Save » en haut à droite. Sans ce clic, Claude ne voit pas la modification et continue de travailler sur l'ancienne version.
4 Du canevas au vrai site, sans export Une phrase suffit — plus de ZIP, plus de manipulation de fichier Le résultat
Une fois la variante choisie (et sauvegardée si elle a été retouchée), une phrase suffit dans le chat :
J'ai modifié l'artboard 03a, c'est ce design que je veux utiliser. Héberge-le localement pour que je puisse le tester.
Claude Code analyse la planche visuelle choisie, écrit lui-même tout le code correspondant, l'intègre dans les fichiers du projet, et donne un lien localhost à ouvrir dans le navigateur — le site tourne, avec ses liens actifs et ses animations. Si le canevas est modifié à nouveau par la suite, le site local se met à jour automatiquement.
Un dernier geste avant de passer à la suite
Une fois le site en local, une seule chose reste à faire avant d'enchaîner sur les pages suivantes : demander à Claude de résumer toute cette direction visuelle dans un fichier unique.
Génère-moi le fichier design-system.md qui résume cette direction visuelle.
Ce fichier — couleurs exactes, polices, espacements, style des composants, ton de la marque — devient la référence que toutes les pages suivantes du site doivent respecter, et que des outils de vérification comme le skill Design Loop (voir plus haut dans cette section) utilisent pour juger si une nouvelle page est fidèle à la charte. Sans lui, chaque nouvelle page redémarre de zéro ; avec, chaque nouvelle page hérite automatiquement de tout ce qui a déjà été choisi ici.
Pourquoi cette méthode évite le look « générique IA »
Un design « générique IA » n'est pas un mauvais design en soi — c'est un design qui n'a répondu à aucune des questions de cadrage et qui n'a jamais été comparé à d'autres pistes avant d'être codé. Voir plusieurs variantes côte à côte, choisir, puis seulement coder change tout.
Les différents outils de design
Une fois qu'on sait cadrer et construire, reste la question du niveau visuel. Trois familles d'outils permettent d'aller au-delà d'une page correcte — à déplier dans l'ordre, ou à consulter selon le besoin :
1 Les galeries de référence Montrer une capture d'écran à Claude plutôt que de décrire un style en mots L'inspiration
Plutôt que de décrire un style en mots, on peut montrer une capture d'écran d'un site ou d'un composant qui plaît, et demander à Claude de s'en inspirer — pour le style, jamais pour copier le contenu ou le code tel quel. Quatre galeries couvrent l'essentiel :
Comment s'en servir avec Claude Code
Faire une capture d'écran de l'élément qui plaît, la glisser dans la conversation, et dire concrètement ce qu'on veut en garder : « ce dégradé de fond », « cette animation de bouton au survol », « cette façon d'espacer les cartes ». Laisser Claude reproduire l'esprit dans la charte graphique du projet — jamais dupliquer un site existant à l'identique.
Le « vol » de composants haut de gamme
Plutôt que de faire inventer un widget complexe (un carrousel animé, un bouton à effet spécial), on peut regarder ces mêmes galeries — 21st.dev, Magic UI, Mobbin — copier le code ou une simple capture d'écran du composant qui plaît, et demander à Claude Code de l'intégrer en remplaçant les exemples par le vrai contenu du site.
2 Équiper Claude Code d'outils de pro Cinq compétences pré-écrites que Claude sait utiliser sur commande Les skills
Une fois le site hébergé en local, on peut s'appuyer sur des « skills » — des compétences pré-écrites que Claude sait utiliser sur commande — pour aller au-delà du design de base. Voici les cinq qui comptent le plus pour un site web.
| Outil | Ce qu'il apporte | Créé par |
|---|---|---|
| GSAP | De vraies animations professionnelles au scroll, séquencées et fluides — la référence du secteur pour le mouvement à l'écran. | GreenSock (officiel) |
| shadcn/ui | Une bibliothèque de composants d'interface déjà prêts (boutons, formulaires, menus) au lieu de tout recoder à chaque fois. | shadcn-ui (officiel) |
| Frontend Design | Pousse Claude à faire des choix visuels délibérés plutôt que les valeurs par défaut qui trahissent un site « fait par une IA ». | Anthropic (officiel) |
| UI/UX Pro Max | Une base de données consultable de 79 styles visuels, 192 palettes de couleurs et 74 associations de polices — de quoi chercher plutôt qu'improviser. | nextlevelbuilder |
| Awesome Design Skills | 67 styles visuels prêts à appliquer (verre dépoli, brutalisme, effet argile…), chacun avec ses règles précises. | bergside |
Ce sont des liens GitHub — comment ça fonctionne
Chaque lien ci-dessus pointe vers un dépôt GitHub, l'endroit où les développeurs publient et partagent leur code gratuitement. Pas besoin de savoir coder pour s'en servir : sur la page du dépôt, on trouve un bouton « Code » qui permet de télécharger tout le contenu, ou un fichier SKILL.md à copier directement dans .claude/skills/ (voir la Section 01 pour la méthode d'installation détaillée). Une fois déposé, Claude Code lit le skill automatiquement et sait s'en servir sur demande.
3 Le skill « Design Loop » Faire juger le résultat par trois critiques IA indépendants avant de le considérer fini La vérification
Une IA a du goût, mais elle ne peut pas juger objectivement son propre travail — un peu comme demander à un chef cuisinier de noter son propre restaurant. Le skill Design Loop confie ce jugement à trois « critiques » IA indépendants qui n'ont jamais vu le code en train de se construire :
| Critique | Il vérifie |
|---|---|
| Brief Critic | Que l'objectif fonctionnel de la page est bien rempli. |
| System Critic | Que les règles de la charte graphique (design-system.md) sont respectées. |
| Craft Critic | Le rendu visuel réel sur des captures d'écran — le plus exigeant, jamais le moins cher des trois. |
Un point de vigilance sur le coût
Cette méthode d'évaluation consomme beaucoup plus de ressources qu'une génération classique, car chaque tour déclenche une génération et trois évaluations séparées. Elle a donc du sens sur une page à fort enjeu — une page d'accueil, une page de vente — jamais en systématique sur tout un site, et toujours sous surveillance.
.claude/skills/design-loop/.
Higgsfield : des sites qui bougent vraiment
Une page classique — même bien construite — reste statique. Pour certains projets, un produit à mettre en valeur, une marque qui veut marquer les esprits dès l'arrivée sur le site, on veut aller plus loin : un vrai film qui défile avec le scroll, généré par IA. C'est le rôle de Higgsfield, connecté directement à Claude.
1 Qu'est-ce que Higgsfield ? Un générateur d'images et de vidéos IA, pensé pour remplacer les visuels génériques L'outil
Higgsfield est une plateforme de génération d'images et de vidéos par IA. Son intérêt pour un site web : produire des visuels de marque uniques — un produit filmé sous un angle précis, une matière qui se transforme, un mouvement de caméra continu — plutôt que les photos d'illustration qu'on retrouve identiques sur des centaines de sites.
Une fois connecté à Claude, il exécute directement le plan de tournage défini pour le projet : logos, textures de fond, animations de scroll, boucles vidéo en arrière-plan, rotation à 360° d'un produit à partir d'une image de départ et d'une image d'arrivée.
2 Comment le connecter à Claude Trois commandes dans le terminal, un compte Higgsfield L'installation
Higgsfield se branche à Claude Code via un MCP (le même principe de connexion que celui utilisé pour piloter Claude Design, voir Section 01). Trois commandes dans le terminal suffisent :
npm i -g @higgsfield/cli
higgsfield auth login
npx skills add higgsfield-ai/skills
La deuxième commande ouvre une fenêtre de navigateur pour se connecter à un compte Higgsfield existant — aucune clé API à copier-coller à la main. Une fois ces trois étapes faites, il suffit de demander à Claude, en langage courant, de générer une image ou une vidéo pour que Higgsfield prenne le relais.
3 Ce que ça permet concrètement Trois usages qui reviennent le plus souvent Les usages
Boucle vidéo en arrière-plan
Une vidéo courte (environ 25 secondes) qui joue en boucle continue derrière le hero de la page. La première et la dernière image sont identiques, pour qu'on ne voie jamais la coupure entre deux tours de boucle.
Défilement piloté par le scroll
Une vidéo qui avance ou recule image par image selon la position du scroll du visiteur — une fleur qui éclot, une bouteille qui se remplit, des fruits qui tombent et se mélangent au fur et à mesure qu'on descend la page.
Rotation produit à 360°
À partir d'une image de départ et d'une image d'arrivée du même produit, Higgsfield génère une rotation fluide qui s'arrête précisément sur la position d'origine — utile pour un packaging, un objet, un flacon.
4 Combien ça coûte Un site complet revient autour de 10 dollars Le budget
Une image générée coûte environ 12 centimes. L'ensemble des vidéos d'un site complet — la partie la plus chère de l'opération — revient à environ 250 crédits, soit approximativement 10 dollars pour tout le site. Un budget à valider avant de lancer la génération en haute qualité, comme rappelé dans le skill à télécharger ci-dessous.
5 Des exemples réels, à visiter Quatre démonstrations Higgsfield, de vrais sites en ligne Les exemples
Higgsfield publie plusieurs démonstrations construites avec cette méthode — de vrais sites en ligne, pas des maquettes. Cliquer sur une carte pour voir le défilement réel du site, capturé en direct :
Se construit couche par couche au fil du scroll, jusqu'à être complet en bas de la section.
Des ingrédients qui flottent et se composent au fil du scroll.
« Prépare la valise » du visiteur en scènes successives.
Chaque projet se révèle progressivement au fil de la descente.
6 Le skill « site cinématique » Un fichier à télécharger et à donner à Claude — le cœur de toute cette section Le skill
Ce skill est un fichier texte qui contient, une bonne fois pour toutes, toute la méthode pour construire un site cinématique. Une fois donné à Claude, plus besoin de tout réexpliquer à chaque fois — Claude connaît déjà les règles.
Étape 1 — Télécharger le fichier
Le bouton en bas de ce dépliant télécharge un fichier nommé SKILL.md. C'est un simple fichier texte, il ne s'installe pas tout seul — l'étape suivante explique comment le donner à Claude.
Étape 2 — Le donner à Claude
Dans une conversation Claude classique
Ouvrir les Paramètres, puis Compétences personnalisées, et ajouter le fichier téléchargé. Le skill est alors disponible dans toutes les conversations suivantes.
Dans Claude Code
Créer un dossier .claude/skills/site-cinematique/ dans le projet, et y déposer le fichier téléchargé en le renommant SKILL.md. Claude Code le lit automatiquement.
Étape 3 — Ce que le skill fait concrètement
Une fois installé, ce skill sait construire un plan cinématique complet : il pose les bonnes questions (par où la caméra commence, par où elle finit), choisit entre une animation en code gratuite ou une vraie vidéo générée par IA, découpe le mouvement en scènes courtes pour que ça reste fluide, et vérifie à la fin que le résultat est bien léger pour ne pas ralentir le site.
Étape 4 — Quel prompt lui donner
Pas besoin d'un prompt compliqué. Une phrase simple suffit, qui décrit l'idée générale :
Construis-moi un site cinématique pour [nom du produit ou de la marque]. La caméra part de [point de départ] et arrive sur [point d'arrivée].
Le skill prend le relais à partir de là — il pose lui-même les questions qui manquent (durée, style, animation en code ou vidéo générée) avant de commencer à construire.
Écrire le texte pour être trouvé
Un site magnifique et vide de contenu ne sert à rien : il ne remonte pas sur Google, et aucune IA ne le cite en réponse à une question. Cette partie n'a plus rien à voir avec le visuel — c'est de l'écriture, avec une méthode précise pour que chaque page réponde à deux audiences en même temps : les moteurs de recherche classiques, et les IA génératives (ChatGPT, Perplexity, les résumés IA de Google) qui commencent à remplacer une partie des recherches.
Une page qui plaît à Google sans être citable par une IA n'est optimisée qu'à moitié.
C'est ce qu'on appelle le SEO-GEO — le référencement classique (Search Engine Optimization) couplé au référencement pour les moteurs génératifs (Generative Engine Optimization).
1 Le brief avant l'écriture Verrouiller le contenu avant de laisser le design s'exprimer La méthode
Avant d'écrire quoi que ce soit, on répond à quelques questions simples : à qui parle la page, quel est le message principal à retenir, quel est le fil rouge de l'argumentation, quel appel à l'action ferme la page. Ce cadrage évite le texte générique — celui qui pourrait appartenir à n'importe quelle entreprise du même secteur.
Le contenu, lui, reste strict une fois écrit : c'est le design qui s'adapte autour, jamais l'inverse. Pour ne pas partir d'une page blanche, on peut équiper Claude Code d'une compétence dédiée qui pose les bonnes questions dans l'ordre (à qui parle la page, quelle offre, quel ton, quels visuels déjà disponibles) et qui en ressort un brief complet — le contenu figé, le design resté ouvert pour l'étape suivante.
Prépare le brief de la page [nom de la page] pour [offre ou produit]. Cible : [à qui elle s'adresse]. Message principal à retenir : [une phrase].
Claude Code lit ce qui existe déjà sur le projet (l'offre, les preuves, le ton déjà en place sur les autres pages) avant de poser une seule question — pas la peine de tout lui redonner à chaque fois.
2 La méthode Capsule, pour être cité par les IA Une définition-réponse, placée avant même que la page commence à argumenter Le levier n°1 du GEO
Une IA générative (ChatGPT, Perplexity, les résumés IA de Google) ne lit pas une page pour l'apprécier — elle cherche une réponse qu'elle peut recopier telle quelle. La méthode Capsule consiste à lui donner cette réponse directement, sous forme d'une définition autonome de 120 à 150 caractères, placée juste sous chaque titre de section formulé en question (« Qu'est-ce que… ? », « Comment… ? », « Pourquoi… ? »). Cette phrase doit se comprendre sans aucun lien et sans avoir besoin de lire le reste de la page — un peu comme la mention « en résumé » qu'on trouve en tête d'un article, mais répétée sous chaque grande question de la page.
Exemple réel, tiré du blog Sales Experienz
Pourquoi les agents IA pour le SEO ne sont pas la solution miracle
Les agents IA pour le SEO optimisent des tâches spécifiques, mais sans stratégie, ils automatisent des inefficacités. Aligne tes actions IA avec des objectifs clairs pour maximiser les résultats.
C'est ce court paragraphe, et lui seul, qu'une IA reprend quand elle cite la page en réponse à la question d'un internaute — avant même que l'article n'entre dans le détail.
Le test de validité est simple : on lit la capsule seule, hors contexte, comme le ferait une IA qui ne connaît rien d'autre de la page. Si elle répond entièrement à la question posée par le titre, elle est valide. Sinon, on la retravaille.
3 Les données structurées (JSON-LD) Un langage invisible à l'écran, lu directement par Google et les IA La technique
En plus du texte visible, chaque page importante embarque un bloc de données structurées qui décrit son contenu dans un format que les machines comprennent directement : le type de page, les questions-réponses de la FAQ, le fil d'Ariane de navigation. Pour une page de service, on y ajoute aussi le prix, la zone géographique couverte, les avis.
Pas besoin de connaître ce format pour le demander — il suffit de décrire ce que la page contient et de nommer le résultat attendu :
Ajoute les données structurées JSON-LD sur cette page : type WebPage, plus un bloc FAQPage à partir des questions de la section FAQ, et un fil d'Ariane BreadcrumbList. Le texte des réponses doit être identique, mot pour mot, à ce qui est affiché sur la page.
Pour une page de service locale, on complète avec une phrase de plus :
Ajoute aussi un bloc LocalBusiness avec le prix, la zone géographique couverte et les avis clients existants.
Une règle stricte
Le texte des réponses dans ce bloc invisible doit être identique, mot pour mot, au texte visible affiché sur la page. Un écart entre les deux est pénalisé plutôt que toléré — le redire dans le prompt, comme ci-dessus, évite à Claude Code de reformuler.
4 La structure d'une page qui convertit L'ordre des sections qui fonctionne, du hero jusqu'au tarif Le squelette
Une page de service efficace suit à peu près toujours le même déroulé. Ce n'est pas une contrainte créative — c'est un ordre qui correspond au raisonnement naturel d'un visiteur qui découvre une offre pour la première fois :
- Le hero. Une accroche qui va droit au but, sans jargon, avec l'appel à l'action principal déjà visible.
- « Vous êtes au bon endroit ». Une section courte qui montre au visiteur qu'il a atterri sur la bonne page — il se reconnaît dans la situation décrite.
- La définition du service. Sa capsule GEO juste en dessous (voir le point 2 ci-dessus).
- Le diagnostic de la douleur. Ce qui ne va pas aujourd'hui, avec des faits concrets plutôt que des généralités.
- Le mécanisme de la solution. Comment ça marche, étape par étape.
- Une preuve chiffrée. Un résultat mesuré, pas une promesse.
- Un comparatif avant/après. La différence concrète que le service change.
- L'offre d'entrée. Ce que le visiteur peut essayer en premier, avec le moins de friction possible.
- Les questions fréquentes. Les objections les plus courantes, désamorcées une par une.
- Le tarif. Affiché clairement, jamais caché derrière un formulaire.
- L'appel à l'action final. Le même que dans le hero, répété une dernière fois.
Ce qu'on évite absolument
Aucun texte générique : « Bienvenue chez… », « Votre solution tout-en-un », « Nous vous accompagnons dans votre transformation », « Boostez votre croissance ». À la place : des chiffres, des délais, des mécanismes concrets, des bénéfices propres à un profil précis de visiteur.
Mettre le site en ligne
À ce stade, le site existe et il est bien écrit — mais il ne tourne que sur l'ordinateur qui l'a construit. Personne d'autre ne peut le voir. C'est l'étape que presque tous les tutoriels sautent, alors que c'est elle qui transforme un dossier de fichiers en adresse qu'on peut donner à un client.
Un site qui tourne en local n'existe pour personne. Tant qu'il n'a pas d'adresse publique, il n'a ni visiteur, ni référencement, ni valeur commerciale.
Trois briques suffisent, et elles se posent une seule fois : le socle technique du site (Next.js), le coffre-fort de son code (GitHub), et l'hébergeur qui le publie (Vercel).
1 Next.js — le socle sur lequel le site est construit Pourquoi ce n'est pas un détail technique, mais un choix qui décide du référencement Le socle
Next.js est le cadre de travail dans lequel Claude Code écrit le site. Une comparaison suffit à comprendre pourquoi ça compte : un site fait uniquement de code qui s'exécute dans le navigateur livre au robot de Google une page vide, qu'il doit ensuite attendre de voir se remplir. Next.js fait le travail avant l'arrivée du visiteur : la page part déjà écrite, texte compris.
Ce que ça change concrètement
Google et les IA génératives lisent le texte du premier coup, sans exécuter quoi que ce soit. Les pages s'affichent vite, y compris sur un téléphone en 4G. Et tout ce qui a été vu en Section 04 — les données structurées, les capsules, les titres — se retrouve réellement dans la page envoyée, pas ajouté après coup par un script.
Il n'y a rien à installer à la main : quand Claude Code construit le site, il pose lui-même le socle. La seule chose à savoir, c'est qu'il faut le demander explicitement — sinon rien ne garantit le choix.
Construis ce site en Next.js avec l'App Router et TypeScript, et fais en sorte que le contenu des pages soit rendu côté serveur pour le référencement.
Le piège des tutoriels
Next.js change vite, et un article vieux de six mois peut décrire une façon de faire qui n'existe plus. Avant d'appliquer un tutoriel trouvé en ligne, demander à Claude Code de le confronter à la documentation officielle de la version réellement installée — il corrige l'écart tout seul, et évite un site qui refuse de se construire.
2 GitHub — le filet de sécurité, pas un truc de développeur L'historique de tout ce qui a été fait, et la marche arrière quand une modification casse le site La sauvegarde
GitHub est souvent présenté comme une plateforme pour développeurs. Quand on ne code pas, c'est plus simple que ça : c'est l'endroit où le site est sauvegardé, avec la mémoire de chacune de ses versions. Trois raisons de ne pas s'en passer, même pour un site d'une seule page.
- Le retour arrière. Une modification casse la page d'accueil un vendredi soir ? On revient à la version de la veille en une phrase. Sans historique, il faudrait reconstruire à la main ce qui marchait.
- La sauvegarde hors de l'ordinateur. Disque dur mort, ordinateur volé, dossier effacé par erreur : le site est intact ailleurs. C'est la seule protection réelle contre la perte du travail.
- Le déclencheur du déploiement. C'est le point décisif pour la suite : une fois GitHub relié à Vercel, chaque modification envoyée met le site en ligne automatiquement. Plus rien à faire à la main.
Le vocabulaire minimum, en trois mots
Un dépôt (repository) est le dossier du projet stocké sur GitHub. Un commit est une photo du site à un instant donné, avec une phrase qui dit ce qui a changé. Pousser (push) consiste à envoyer ces photos sur GitHub. C'est tout le vocabulaire nécessaire.
En pratique, on ne tape presque jamais ces commandes soi-même : on demande, Claude Code exécute et explique ce qu'il fait.
Crée un dépôt GitHub privé pour ce projet, ajoute un fichier .gitignore adapté à Next.js pour ne jamais envoyer mes clés ni les fichiers temporaires, fais le premier commit et pousse-le.
Fais un commit de ce qu'on vient de changer avec un message clair, et pousse-le.
La règle à ne jamais enfreindre
Aucune clé d'accès, aucun mot de passe, aucun identifiant ne doit se retrouver dans le code envoyé sur GitHub. Ces valeurs vivent dans un fichier à part, exclu de l'envoi, et se redonnent séparément à l'hébergeur. Un dépôt public qui contient une clé est scanné et exploité en quelques minutes.
3 Vercel — l'hébergeur qui publie le site Relier GitHub une fois, et chaque modification part en ligne toute seule La mise en ligne
Vercel est l'entreprise qui développe Next.js — d'où le fait que les deux fonctionnent ensemble sans réglage. C'est là que le site devient une adresse que l'on peut donner : hébergement, certificat de sécurité (le cadenas du navigateur) et nom de domaine personnalisé compris. Pour un site vitrine, l'offre gratuite suffit largement à démarrer.
Le branchement, une seule fois
On crée un compte Vercel, on l'autorise à lire le dépôt GitHub créé à l'étape précédente, on sélectionne le projet. Vercel reconnaît Next.js seul, construit le site et le publie sur une première adresse en .vercel.app. Le nom de domaine définitif se branche ensuite, en quelques minutes.
Ce que ça change au quotidien
À partir de là, le geste de publication disparaît. On demande une correction à Claude Code, il modifie le site et pousse sur GitHub, et Vercel reconstruit et met en ligne dans la foulée. Entre « change ce titre » et le titre visible par tout le monde, il n'y a plus aucune manipulation.
Autre conséquence, moins visible mais précieuse : chaque version est conservée. Si la mise en ligne du matin a cassé quelque chose, on revient à la précédente en un clic, sans reconstruire quoi que ce soit.
Piloter Vercel sans quitter Claude Code
Vercel publie un MCP officiel — le même mécanisme de branchement que Higgsfield en Section 03. Une fois connecté, Claude Code voit directement l'état des mises en ligne : il peut lister les déploiements, aller lire les journaux d'une construction qui a échoué, et expliquer la panne en français plutôt que de laisser un mur d'erreurs illisible.
claude mcp add --transport http vercel https://mcp.vercel.com
Puis on tape /mcp dans Claude Code pour autoriser l'accès au compte Vercel. Ensuite, tout se demande en français :
Le dernier déploiement de [nom du projet] a échoué sur Vercel. Va lire les journaux de construction, explique-moi la cause en français simple, puis corrige le code.
Ce que ce branchement donne comme pouvoir
Autoriser ce MCP donne à l'assistant les mêmes droits que votre propre compte Vercel. Garder la validation humaine activée pour toute action qui modifie un projet, et ne connecter que le MCP officiel — l'adresse exacte est mcp.vercel.com, jamais une variante proposée par un annuaire tiers.
L'enchaînement complet, une fois en place
Claude Code modifie le site → il envoie la modification sur GitHub → Vercel la reçoit, reconstruit et publie. Le site est en ligne quelques dizaines de secondes plus tard, sans avoir touché à un tableau de bord.
Le cas WordPress : automatiser Elementor
Tout ce qui précède décrit un site construit de zéro. Beaucoup d'entreprises ont déjà un site WordPress monté avec Elementor. Bonne nouvelle : depuis septembre 2026, Claude peut travailler directement dedans.
Elementor a sorti son propre connecteur pour les IA. Claude lit, crée et modifie vos pages sans que vous ouvriez l'éditeur.
Il suffit de le brancher une fois. Ensuite, on lui parle en français, et il travaille dans vos pages.
1 Pourquoi c'est possible Elementor ouvre une porte officielle aux IA Le principe
Jusqu'ici, Claude ne voyait pas les pages Elementor : WordPress range leur contenu dans un emplacement que les connecteurs classiques ignorent. Elementor MCP règle le problème. C'est une porte d'entrée officielle, installée sur votre propre site, que Claude utilise pour lister vos pages, en créer, modifier un bloc, appliquer vos couleurs et vous envoyer un lien d'aperçu.
Votre numéro de téléphone change et il apparaît sur trente pages ? Une seule demande suffit, au lieu de deux heures de clics.
Une règle avant tout
Cette connexion permet à Claude de modifier et de publier des pages. Demandez-lui toujours de vous montrer ce qu'il va faire avant de le laisser agir.
2 La méthode simple : brancher Elementor MCP Dix minutes, une seule fois, sans exposer votre mot de passe La solution
- Créer un mot de passe d'application dans WordPress : Utilisateurs → Profil → Mots de passe d'application. Nommez-le « claude », cliquez sur Ajouter et copiez-le. WordPress ne l'affiche qu'une fois.
- Ouvrir un terminal normal, pas la fenêtre de Claude. Remplacez IDENTIFIANT et monsite.com, puis collez les lignes ci-dessous. Le terminal demande le mot de passe sans l'afficher.
- Vérifier en tapant
claude mcp list: la ligne elementor doit indiquer Connected. - Tester en demandant à Claude « liste mes pages Elementor ». Si vos brouillons apparaissent, c'est branché.
WPUSER="IDENTIFIANT"
echo "Colle ton mot de passe d'application puis Entrée :"; read -s WPPASS
AUTH=$(printf '%s:%s' "$WPUSER" "${WPPASS// /}" | base64)
claude mcp add --transport http --scope user elementor "https://monsite.com/wp-json/elementor/mcp/" --header "Authorization: Basic $AUTH"
unset WPPASS AUTH
Ne jamais coller le mot de passe dans le chat
Tout ce qu'on écrit à Claude est gardé dans l'historique. Et la suite de lettres qui suit « Basic » n'est pas chiffrée : n'importe qui retrouve le mot de passe en une seconde. En cas de fuite, cliquez sur Révoquer dans WordPress et recommencez avec un nouveau mot de passe.
3 Le design : construire les pages depuis Claude Avec l'extension Premium Addons, depuis claude.ai Le visuel
Pour faire dessiner des pages entières, l'extension gratuite Premium Addons for Elementor (version 4.11.91 ou plus) relie Claude à votre site. Claude monte la page en brouillon, avec les widgets déjà installés chez vous. Aucun mot de passe à manipuler : la connexion se valide par un clic.
- Dans WordPress : Premium Addons → MCP Config & AI Abilities, activez « Enable AI Abilities ».
- Dans la partie MCP Server, choisissez la carte OAuth, puis « Add it automatically ». Claude s'ouvre avec les réglages déjà remplis.
- Votre site affiche un écran de validation : cliquez sur Approve.
À vérifier avant
WordPress 7.0 ou plus, un site en HTTPS accessible publiquement (pas protégé par mot de passe), et votre session WordPress ouverte dans le même navigateur. Les widgets avancés demandent la version payante, Premium Addons PRO.
En résumé, si vous avez déjà un WordPress
Pas besoin de tout refaire pour profiter de l'IA. Elementor MCP pour corriger et modifier, Premium Addons pour construire de nouvelles pages. Dans les deux cas, faites travailler Claude en brouillon, et relisez avant de publier.
Aller plus loin : obtenir un site parfait
Une fois le site cadré, construit et rédigé, une dernière technique permet d'affiner le résultat en s'appuyant sur ce qui fonctionne déjà réellement — pas une intuition, de vraies données. Elle a un point commun avec tout ce qui précède dans ce guide : elle touche à la fois le design et le contenu, puisqu'un site qui marche bien réunit toujours les deux.
1 Firecrawl — s'inspirer de ce qui marche Extraire une identité visuelle, ou comparer les sites qui cartonnent à ceux qui échouent L'analyse
Une belle interface qui ne vend pas ressemble à une voiture de sport sans moteur. Firecrawl est un outil qui extrait le contenu d'un site web en nettoyant tout le code technique superflu, pour ne garder que le texte et la structure — connecté à Claude via un MCP, comme Higgsfield en Section 03. Il sert deux usages, l'un plutôt design, l'autre plutôt contenu :
Extraire l'identité visuelle d'un site de référence
Demander à Claude d'aller chercher la palette de couleurs, la typographie et la structure d'un site qui plaît, pour s'en inspirer sur le projet en cours.
Va sur [URL du site de référence] avec Firecrawl, récupère l'identité de marque, et propose une direction pour notre site sur cette base.
Comparer les sites qui marchent à ceux qui ne marchent pas
La méthode la plus poussée, et la plus proche de la logique SEO/GEO de la Section 04 : demander à Claude de trouver en ligne les sites qui ont le plus de volume et qui réussissent dans un secteur, et d'autres qui échouent, puis de dégager ce que les premiers font — dans leur structure de contenu comme dans leur design — et que les seconds ne font pas.
Trouve en ligne les sites qui ont le plus de volume et qui marchent le mieux pour [secteur + ville], et d'autres qui marchent mal. Utilise Firecrawl pour comprendre ce que les premiers ont en commun — design et structure de contenu — et que les seconds n'ont pas, puis donne-moi un plan d'agencement de page basé sur ce constat.
2 Extraire l'ADN d'un site d'exception Copier l'ergonomie d'un site mémorable, jamais son contenu ni son code L'extraction
Le principe : choisir un site à l'expérience utilisateur remarquable — même dans un secteur totalement différent du sien — analyser les principes de son ergonomie (espacements, mouvement, hiérarchie visuelle), puis demander à Claude d'appliquer cette même logique au projet en cours, sans jamais copier le contenu ni le code.
- Choisir un site étalon. Peu importe son secteur d'activité — ce qui compte est la qualité de son expérience de navigation.
- Demander l'extraction et l'application. Claude analyse la typographie, les espacements, le rythme du site étalon, en tire un plan technique, puis l'applique au projet.
Va sur [URL du site étalon], comprends sa typographie et son design, et tire-en un plan que je puisse utiliser pour construire un site sur [votre produit] qui a ce même niveau de qualité.
Ce que ça donne, en pratique
Le site final ne ressemble pas au site étalon — il en hérite seulement la « physique » : la façon dont les éléments respirent, se révèlent au scroll, se répondent entre eux. Deux sites peuvent partager cette ergonomie sans se ressembler visuellement.
Les étapes de ce guide, en un coup d'œil
Ce guide couvre plusieurs briques, chacune facultative en soi, mais qui s'additionnent pour donner un résultat qui ne ressemble pas à un site « fait par une IA ». Voici où retrouver chacune d'elles :
Cadrer le visuel et construire le site sans quitter Claude Code. Voir « Concevoir et construire »
S'appuyer sur des galeries de référence et des compétences de design dédiées. Voir « Les différents outils de design »
Générer des visuels sur mesure plutôt que des images d'archive. Voir « Higgsfield »
Écrire le texte pour être trouvé sur Google et cité par les IA. Voir « Écrire le texte pour être trouvé »
Mettre le site en ligne : Next.js, GitHub et Vercel, une fois pour toutes. Voir « Mettre le site en ligne »
Déjà un site WordPress sous Elementor ? L'automatiser au lieu de tout refaire. Voir « Le cas WordPress »
S'inspirer de ce qui marche déjà, en design comme en contenu, pour affiner le résultat. Voir « Aller plus loin »
Chaque brique est facultative pour se lancer — mais chacune rapproche du résultat qui ne ressemble pas à un site « fait par une IA ».
Tous les liens
Les outils cités dans ce guide
- Claude — l'assistant Anthropic, avec Claude Design (conception visuelle) et Claude Code (développement).
- 21st.dev — galerie de composants d'interface prêts à l'emploi, à copier dans un projet.
- Magic UI — composants animés open source pour React et Tailwind.
- Mobbin — bibliothèque de références visuelles d'applications et de sites réels.
La mise en ligne
- Next.js — le cadre technique sur lequel le site est construit, pensé pour le référencement.
- GitHub — la sauvegarde du code, son historique, et le déclencheur des mises en ligne.
- Vercel — l'hébergeur qui publie le site à chaque modification, offre gratuite pour démarrer.
- MCP Vercel — le branchement officiel qui laisse Claude Code lire les déploiements et diagnostiquer les pannes.
Les 5 compétences (skills) officielles
- GSAP — animations professionnelles au scroll (GreenSock, officiel).
- shadcn/ui — composants d'interface prêts à l'emploi (officiel).
- Frontend Design — direction artistique intentionnelle (Anthropic, officiel).
- UI/UX Pro Max — base de données de styles, palettes et polices.
- Awesome Design Skills — 67 styles visuels prêts à appliquer.
Aller plus loin
Vous préférez qu'on le mette en place ensemble ?
Tout ce qui précède est faisable seul. Si vous préférez déléguer, la SEO GEO Machine applique exactement cette méthode : le visuel choisi avant d'être codé, le contenu optimisé pour Google et les IA dès la première ligne.
Découvrir la SEO GEO Machine