Créer son site avec l'IA

Comment créer son site avec l'IA et Claude Code ?

Pour créer son site avec l'IA et Claude Code sans savoir coder, on lui donne une méthode plutôt qu'un simple prompt : un brief clair sur l'offre et la cible, la structure de la page, une charte graphique, puis une construction étape par étape, vérifiée sur ordinateur et sur mobile, jusqu'à la mise en ligne.

La méthode qu'on va vous proposer ne se lit pas : c'est un skill, un fichier que vous donnez à Claude, qui vous guide pas à pas.

Notre méthode pour créer un site avec l'IA en trois étapes

1. Étape 1 : Le skill importé dans Claude Code.

   Le fichier reçu s'importe tel quel, sans le décompresser, sur claude.ai ou dans l'app Claude.

   Il suffit d'aller dans Personnaliser > Compétences, puis + > Créer une compétence > Télécharger une compétence.

2. Étape 2 : Une phrase pour démarrer.

   « Utilise le skill creer-son-site-avec-claude : je veux créer un site pour mon activité B2B. »

   Claude va ensuite vous guider sur les différentes étapes.

3. Étape 3 : Claude prend la main, vous validez

   Il pose ses questions, construit étape par étape et vous montre la page sur ordinateur et sur mobile.

   Il ne passe jamais à l'étape suivante sans votre validation.

   Il note chaque décision dans un journal, pour aller de plus en plus vite, jusqu'à pouvoir produire une nouvelle page parfaite à partir d'un seul prompt.

Ce qu'il est utile d'avoir sous la main pour créer votre site

• Un document expliquant votre activité.
• Un site d'inspiration que vous aimez et un que vous détestez, même hors de votre secteur.
• Votre logo, et un compte Refero Design : Claude y cherche des références pour vous.

Les quatre piliers d'un site B2B qui convertit

1. Pilier 1 : La structure d'un site B2B qui convertit

   Huit blocs tirés d'exemples réels, du hero à la FAQ, avec ce qu'on ajoute (ou retire) et pourquoi.

2. Pilier 2 : Claude creuse votre activité avant de commencer à construire

   Six questions sur votre offre, votre cible et vos preuves, posées avant d'écrire la moindre ligne : sans elles, l'IA comble les trous en inventant et crée de l'AI slop. Ce qui manque est marqué « à confirmer », puis retiré si personne ne le confirme.

3. Pilier 3 : L'outil qui change tout, même quand vous n'avez jamais créé un site

   Pas besoin d'empiler les outils : Claude Code et ce skill suffisent. Refero aide à trouver des références, le reste est optionnel, et certains skills sont à éviter.

4. Pilier 4 : Créer son Design System pour créer des pages à l'infini

   À mesure de votre progression, Claude va créer votre fichier de Design System pour reproduire votre univers et votre branding à partir d'un seul prompt. Vous travaillez une fois, puis vous pouvez le réutiliser à l'infini.

Comment éviter l'AI slop ?

Qu'est-ce que l'AI slop ? Ce sont les signes qui trahissent un site fait par l'IA. La méthode interdit ces quinze signes à Claude, même quand on les lui demande sans y penser.

Dans le design

• Le dégradé indigo vers violet.
• Les typographies par défaut, Inter ou système.
• La structure en trois colonnes pour présenter les fonctionnalités.
• Les effets à la mode posés partout : fonds flous façon verre, ombres diffuses, coins arrondis sur chaque élément.
• Les icônes génériques de bibliothèque gratuite, à la place d'un vrai visuel généré sur mesure.
• Un emoji devant chaque titre de section, en guise de décoration.
• Tout est parfaitement centré et symétrique, sans aucune variation de style.
• La sur-utilisation des banques d'images, souvent les mêmes d'un site à l'autre.

Dans le texte

• « Libérez votre potentiel », « propulsez », « révolutionnez », « transformez votre… ».
• « Solutions innovantes », « sur mesure », « clé en main », « à 360° ».
• « Dans un monde où… », « plus que jamais », « il est essentiel de ».
• Les listes de trois adjectifs : « simple, rapide, efficace ».
• Les superlatifs sans preuve : « le meilleur », « unique », « incontournable ».
• Les titres qui posent une question à laquelle personne n'a jamais pensé.
• Les tirets longs en cascade, et les phrases qui commencent par « Découvrez ».

Claude va tester votre site avec le test des 3 secondes

Avant de vous montrer votre page d'accueil (ou n'importe quelle page), Claude se pose une question : un acheteur B2B qui l'ouvre trois secondes se dit-il « fait par une IA » ? Si un seul élément de ces deux listes est visible, la réponse, inconsciente, sera sûrement « oui ». Et cet acheteur potentiel, qui compare trois prestataires, en tire une conclusion immédiate : « ils n'ont pas investi dans leur image, est-ce qu'ils investiront dans mon projet ? »

La même méthode qui a construit le site de 99% Done

J'ai construit ce site avec Claude Code, sans développeur ni agence. La méthode reprend exactement comment j'ai fait, page après page, pour que vous puissiez créer votre propre site et mettre en avant vos services B2B.

Les références. La première version combinait le style de deux sites, dont un repéré sur Refero. La version actuelle en combine trois autres. Combiner ne veut pas dire copier : c'est l'assemblage des couleurs, de la disposition et de la typographie que vous devez adapter à votre propre univers.

L'outil. Un site construit avec l'IA sur Astro, hébergé chez Hostinger. Le code m'appartient : je peux changer d'hébergeur quand je veux.

Le dispositif signature. Le trait de pinceau sous certains mots de cette page. C'est une signature visuelle que l'IA ne propose jamais d'elle-même, et qui vous démarque immédiatement.

Le journal des décisions. À chaque itération, l'IA mémorise ma décision. Le mien compte plus de deux cents décisions, et me permet maintenant de créer une page avec un seul prompt.

La page agence. Ma dernière page, celle de mon agence LinkedIn, a été construite avec la dernière version de cette méthode. Elle sert d'exemple dans le skill, racontée honnêtement, ratés compris.

Créer un site avec l'IA : les questions fréquentes

Claude Code

Qu'est-ce que Claude Code ?

C'est l'outil d'Anthropic qui permet à Claude de travailler directement dans un dossier de votre ordinateur : il lit les fichiers, écrit le code, lance les commandes et vous montre le résultat. On lui parle en français, comme à un collègue. Il fonctionne dans l'application Claude pour ordinateur, dans un terminal ou dans un éditeur de code.

Comment créer son site avec Claude Code ?

En lui donnant une méthode plutôt qu'un simple prompt. Avec ce skill, il suffit de l'importer et d'écrire une phrase : Claude Code pose ses questions sur votre offre, construit le site étape par étape, vous le montre sur ordinateur et sur mobile, et ne passe à la suite qu'avec votre validation, jusqu'à la mise en ligne.

Comment installer Claude Code ?

Depuis claude.com/claude-code, sous la forme qui vous convient : l'application Claude pour ordinateur, le terminal sur Mac ou Windows, ou une extension pour un éditeur de code comme VS Code. Il faut un abonnement Claude Pro, Max, Team ou Enterprise. L'installation prend quelques minutes, puis Claude Code s'ouvre dans le dossier du futur site.

Faut-il Claude Code pour créer un site avec Claude ?

Non, mais il change beaucoup de choses. Claude Code n'est pas gratuit : il est inclus à partir de l'abonnement Pro. Sur l'offre gratuite de claude.ai, la méthode fonctionne en page autonome : Claude produit la page en un fichier HTML, prêt à mettre en ligne. Claude Code permet le parcours complet : de l'idée à la mise en ligne.

Peut-on créer un site avec Claude Code sans savoir coder ?

Oui, la méthode est écrite pour ça. Claude explique chaque choix comme à un collègue, pas comme à un développeur : une décision, une raison, en une phrase. Votre rôle consiste à répondre à ses questions, à regarder ce qu'il vous propose et à dire ce qui va et ce qui ne va pas.

Construire et mettre en ligne

Comment mettre en ligne un site créé avec Claude Code ?

Selon le projet. Une page seule se dépose par glisser-déposer chez un hébergeur de pages statiques. Pour un site complet, Claude propose une mise en ligne automatique : le code dans un dépôt GitHub, relié à l'hébergeur, qui publie chaque modification, puis votre nom de domaine branché sur le site. Il vous guide étape par étape, sans jamais demander vos mots de passe, et vérifie l'ensemble pour vous : titres et descriptions des pages, image de partage, plan du site, page 404, vitesse sur mobile.

Comment modifier le site ensuite ?

En décrivant la modification à Claude, qui l'applique pour vous. Après votre validation, elle est en ligne deux minutes plus tard. Le site évolue ainsi à la vitesse de votre marché, pas à celle d'un prestataire.

Un site créé avec Claude Code est-il bien référencé sur Google ?

Il peut l'être, à condition de traiter le référencement comme une étape à part entière. Un site statique construit avec Claude Code est rapide, et la méthode vérifie avant la mise en ligne les titres et les descriptions de chaque page, le plan du site, les données structurées et l'affichage sur mobile.

Peut-on créer une landing page avec Claude ?

Oui, c'est même le cas prévu par défaut. Claude construit une page autonome, sans installation technique, sur la structure d'une landing page B2B : une promesse, une méthode, des preuves, un déroulé, une FAQ et une seule action. Elle peut aussi s'ajouter à un site existant, ou servir de base à un site complet.

Un site qui ne ressemble pas à de l'IA

Pourquoi les sites créés avec l'IA se ressemblent-ils tous ?

Parce que tout le monde donne le même prompt aux mêmes modèles. Un modèle ne sait pas ce qu'est un bon design : il reproduit le design moyen qu'il connaît. Le look IA n'est donc pas une limite de Claude Code, c'est le résultat d'une moyenne. Ce qui change le résultat, c'est un système : des références, un standard à atteindre, des règles.

Comment obtenir un design qui ne ressemble pas à de l'IA ?

En partant de sites réels plutôt que d'adjectifs. « Moderne », « épuré » ou « premium » ne veulent rien dire pour un modèle. Claude relève sur des sites qui existent la typographie, la palette, les espacements et le ton, puis en combine deux ou trois : une seule référence donne un clone, deux ou trois donnent un style qui vous appartient.

Pourquoi la typographie compte-t-elle autant ?

Parce que la police est le marqueur numéro un du site généré par IA, et l'angle mort de tout le monde. Une police choisie volontairement impacte beaucoup plus le rendu que n'importe quelle animation. Claude cherche parmi les polices libres de qualité, sur Fontshare ou Google Fonts, et écarte celles que tout le monde utilise par défaut.

Comment éviter des textes qui sonnent IA ?

En relisant les textes, et en les adaptant à votre manière de parler, tout simplement.

La méthode

Claude Code ou un créateur de site IA : quelle différence ?

Avec Claude Code, le code vous appartient et vous n'avez aucune limite. Aucune plateforme ne vous enferme : le site est à vous, et il s'héberge où vous voulez. Aucun modèle de mise en page n'est imposé non plus : c'est le Design System tiré de vos références qui fixe le résultat.

Pour quels projets cette méthode convient-elle ?

Pour le nouveau site vitrine de votre activité B2B, avec ou sans blog, une nouvelle page sur un site existant, ou une landing page, que vous voulez faire évoluer vous-même. Elle ne convient pas à une plateforme e-commerce complexe ou à une application complète : Claude Code sait le faire, mais ce n'est pas le sujet de cette ressource.

Qu'est-ce qu'un skill Claude ?

Ce sont des SOP, une manière de travailler pour Claude : comme un dossier d'instructions que Claude charge quand la tâche s'y prête. Celui-ci contient toute la méthode : à chaque étape, Claude ne lit que ce dont il a besoin, et le journal tenu dans votre dossier lui permet de reprendre là où vous vous êtes arrêté.

Comment recevoir la méthode ?

Par email, dès l'inscription : l'email de confirmation contient un bouton qui télécharge le skill, un fichier zip à importer dans Claude. La méthode est offerte.