Créer un site internet avec Claude : la méthode, les prompts, et la mise en ligne

Vous voulez créer un site internet avec Claude, mais chaque tutoriel vous envoie ailleurs : le chat pour l'un, Claude Design pour l'autre, Claude Code pour un troisième. Et vous ne savez pas encore comment le site arrivera ensuite sur une vraie adresse. La réponse tient en deux temps. Claude sait écrire le site par chacun de ces trois chemins, puis le publier lui-même, grâce au connecteur Netlify ou au plugin Vercel. Ce qui reste à votre charge est court, mais c'est ce qui bloque : ouvrir les comptes, brancher le formulaire de contact, relier le domaine et corriger sans tout casser.

J'ai fondé Eqlo, qui construit lui aussi des sites à partir d'une phrase : lisez ce guide en le sachant. Eqlo a sa section, signalée, vers la fin. J'ai fait plusieurs essais de sites avec Claude et avec Claude Code, et mon avis rejoint ce qu'on lit ailleurs. Ce guide est donc une enquête plutôt qu'un récit d'essai de plus. Il part des pages officielles, puis les confronte aux témoignages d'utilisateurs et aux tests publiés, tous datés.

Chaque étape suit le même ordre : ce que dit la documentation, ce que rapportent les utilisateurs, un prompt à copier, puis ce qui coince. Les prompts sont des modèles que nous avons écrits pour ce guide à partir de ces sources. Nous ne les présentons pas comme testés, et les crochets sont à remplacer par vos informations.

Cinq choses m'ont arrêté pendant mes essais. Le quota s'est épuisé en plein travail, et le design ressemblait à celui de tous les sites faits par IA. Une correction a cassé ce qui marchait. Le formulaire de contact et la mise en ligne m'ont aussi bloqué. Vous retrouverez ces cinq points aux étapes 3, 4, 6, 7 et 8, avec les parades trouvées par d'autres.

Est-ce que Claude peut créer un site internet ?

Oui. Claude écrit les pages d'un site en HTML et en CSS, dans le chat, dans Claude Design ou, sur votre ordinateur, avec Claude Code. Il peut aussi le mettre en ligne, par le connecteur Netlify ou le plugin Vercel. Il vous reste à ouvrir les comptes, brancher le formulaire de contact, relier le domaine et relire les mentions légales.

Fin mai 2026, un utilisateur de r/ClaudeAI racontait pourtant que Claude lui avait dit ne pas pouvoir rendre un site public (fil du 27 mai 2026, en anglais). C'est vrai d'une conversation sans connecteur. Une fois Netlify relié à votre compte, Claude publie lui-même. Claude Academy, le site de formation d'Anthropic, en a fait un cas d'usage officiel : un portfolio construit dans le chat, puis mis en ligne sur Netlify par un second message.

Les trois chemins ne donnent pas le même résultat. Voici ce que chacun produit au 30 octobre 2026, d'après les pages d'Anthropic.

Créer un site avec Claude AI, autrement dit dans le chat de claude.ai, est le chemin le plus court. Les connecteurs y sont ouverts dès l'offre gratuite (tarifs de Claude). Le lien de partage d'un artefact ne remplace pas un site pour autant. La page d'aide sur le partage, mise à jour le 23 septembre 2026, indique qu'il faut un compte Claude pour ouvrir un artefact partagé. Seuls les anciens artefacts publiés font exception. Nous avons mesuré cinq de ces anciens artefacts le 18 octobre 2026. Tous renvoyaient la même page de 140 Ko intitulée « Claude Artifact », sans leur texte avant l'exécution de JavaScript, et interdite d'indexation.

Claude Design dessine des maquettes et des prototypes. Il est ouvert sur toutes les offres, gratuite comprise, selon la page de démarrage d'Anthropic. Un projet s'exporte en archive .zip ou en HTML autonome, ou s'envoie vers une liste d'outils où figurent Netlify et Vercel. La version autonome, à l'adresse claude.ai/design, ferme le 14 décembre 2026, et Claude Design continue dans Claude.

Claude Code travaille dans un dossier de votre ordinateur, depuis le terminal ou l'application de bureau. Il crée et modifie les fichiers lui-même. Sa commande /design importe un design de Claude Design dans le code du site, et l'outil demande au moins l'offre Pro.

Ce qu'il vous faut pour créer un site internet avec Claude

Prévoyez ces comptes et ces contenus avant d'ouvrir Claude. Les prix ont été relevés le 30 octobre 2026 sur les pages des éditeurs, hors taxes.

• Un compte Claude. L'offre gratuite suffit pour le chat et Claude Design. Claude Code demande Pro, à 20 $ par mois, ou 200 $ payés pour un an, soit 17 $ par mois affichés. L'offre Max part de 100 $ par mois.

• Un hébergeur. Netlify, Cloudflare Pages et Vercel ont chacun une offre gratuite, avec des limites détaillées à l'étape 8.

• Un compte GitHub, gratuit, si vous passez par Claude Code. Il garde l'historique du site et le relie à l'hébergeur.

• Un nom de domaine, acheté chez un registraire. Pour donner un ordre d'idée, Daria Viktorova dit avoir payé son .fr environ 20 € pour trois ans chez OVH. La première année était offerte, contre un engagement de trois ans (lettre du 25 août 2026).

• Vos contenus : textes, tarifs, horaires, adresse, photos, et deux ou trois sites dont vous aimez l'allure.

Pour Claude Code, la documentation de démarrage donne une commande d'installation par système, puis une commande de vérification :

# macOS, Linux ou WSL
curl -fsSL https://claude.ai/install.sh | bash

# Windows, dans PowerShell
irm https://claude.ai/install.ps1 | iex

# Vérification
claude --version

Si le terminal vous est étranger, Claude Academy propose le cours Claude Code 101 : 12 leçons et un quiz, pour une heure et demie environ, en anglais.

Créer un site internet avec Claude en 8 étapes

La méthode tient en huit étapes, dans cet ordre :

1. Rassemblez vos contenus et deux ou trois sites de référence.

2. Choisissez votre chemin et l'offre Claude qui va avec.

3. Organisez le travail pour que le quota ne vous coupe pas.

4. Donnez une direction visuelle et une liste d'interdits.

5. Faites construire une page, vérifiez-la, puis passez à la suivante.

6. Corrigez sans casser ce qui marche.

7. Branchez le formulaire de contact et les mentions légales.

8. Mettez le site en ligne et reliez votre domaine.

Étape 1 : rassemblez vos contenus et deux ou trois sites de référence

Claude comble les vides avec des phrases plausibles. Sans vos tarifs et ce qui vous distingue, il écrit un texte qui pourrait décrire n'importe quel concurrent. Le test publié par Dibakar Ghosh sur How-To Geek, le 12 octobre 2026, l'illustre bien. Le design de son portfolio, construit par Claude Code, lui a plu. Les textes lui ont semblé génériques, et la section sur sa passion pour les serveurs maison décrivait surtout son matériel (test de How-To Geek, en anglais).

Les références visuelles comptent autant. Logan Nochez est développeur front-end à l'agence Z&KO. Selon lui, une demande du genre « joli site moderne pour mon entreprise » donne un résultat moyen et uniforme (article du 29 juillet 2026). Un développeur qui travaille avec Claude depuis un an conseille de lui donner la photo d'un croquis fait sur papier (fil du 18 août 2026, en anglais).

Daria Viktorova, juriste, a consacré « une bonne demi-journée » à cette préparation, recherche de sites et direction artistique comprises (deuxième partie de son récit, le 25 août 2026). Elle a ensuite fait rédiger un cahier des charges par Claude Cowork, puis donné à Claude Code l'accès au même dossier.

Prompt 1, pour cadrer le site avant toute ligne de code

Je veux créer le site de [activité] à [ville]. Avant d'écrire du code, posez-moi les questions dont vous avez besoin, cinq au plus à la fois : pages, textes, tarifs, horaires, photos, formulaire, nom de domaine. Voici deux sites dont j'aime l'allure : [adresse 1], pour [ce que vous en gardez], et [adresse 2], pour [ce que vous en gardez]. N'inventez ni chiffre ni avis client : écrivez [À COMPLÉTER] quand une information manque.

Ce qui coince : un « [À COMPLÉTER] » oublié finit en ligne. Cherchez ces crochets dans toutes les pages avant chaque publication.

Étape 2 : choisissez votre chemin et l'offre Claude qui va avec

Le bon chemin dépend de la taille du site et de ce que vous en ferez dans six mois.

• Une page ou un portfolio : le chat suffit, avec le connecteur Netlify pour la mise en ligne. L'offre gratuite permet d'essayer.

• Quelques pages au design travaillé : Claude Design, puis l'envoi vers Netlify. Maxime Quillet l'a testé sur la maquette du site e-commerce d'une marque de pâtes artisanales (test du 19 avril 2026). Il a d'abord écrit le brief, puis les wireframes, dans le chat de Claude. Sa règle : « Claude Design seul, sans brief ni wireframe en entrée, produit quelque chose de générique ».

• Plusieurs pages ou des mises à jour régulières : Claude Code, avec un dépôt GitHub relié à l'hébergeur. Le fil r/ClaudeAI du 18 août 2026 arrive à la même conclusion dans son résumé automatique, établi après 30 commentaires. Ce résumé recommande Claude Code et l'offre Pro, car la gratuite s'épuise trop vite pour ce genre de projet.

Le chat peut aussi servir d'atelier pour un site hébergé ailleurs. Flavie Prévot, de Leboard, a refait deux pages de vente de son site avec le chat de Claude, sur l'offre Pro et sans Claude Code (épisode du 22 juin 2026). Sa méthode part d'un audit du site existant, puis d'un système de design enregistré comme compétence. Le code HTML produit est ensuite collé dans un bloc de Dorik, son créateur de sites. Elle parle d'une demi-journée de travail.

Pour le choix technique, Ascense, consultant web suisse, conseille du HTML, du CSS et un peu de JavaScript sous 20 pages (guide du 14 mai 2026). Au-delà, Ascense passe à Astro. Studeria observe de son côté que Claude Code part souvent sur Next.js (article mis à jour le 30 juillet 2026). Si votre site vitrine n'en a pas besoin, dites-le dès le premier message : l'étape 7 et la partie sur le référencement montrent ce que ce choix change.

Ce qui coince : le copier-coller depuis le chat. En juin 2025, un utilisateur de r/ClaudeAI recopiait dans son fichier index.html chaque page produite dans le chat (fil du 30 juin 2025, en anglais). La méthode a cédé quand il a voulu une feuille de style séparée et des sous-pages : Claude ne suivait plus les changements du CSS. Au-delà d'une page, passez à Claude Code, qui écrit directement dans les fichiers.

Étape 3 : organisez le travail pour que le quota ne vous coupe pas

Le quota ouvre ma liste des points de blocage : pendant mes essais, il s'est épuisé en plein travail. Sur les offres payantes, Anthropic applique deux limites, l'une par session de cinq heures, l'autre par semaine. Le chat et Claude Code puisent dans le même quota. La consommation dépend de la longueur de la conversation, du modèle, du niveau d'effort et des outils branchés (page d'aide sur les limites). Le compteur se lit dans Paramètres, puis Utilisation : une barre suit la session en cours, une autre la semaine (bonnes pratiques du 22 septembre 2026).

Les fils récents décrivent un quota qui fond vite. Le 23 octobre 2026, sur r/ClaudeCode, un abonné Pro estimait qu'une session de cinq heures lui coûtait 11 % de son quota hebdomadaire (fil du 23 octobre, en anglais). Le 25 octobre, un autre abonné Pro disait toucher sa limite de la semaine dès le deuxième jour (fil du 25 octobre, en anglais). Il lui restait alors quatre à cinq jours à attendre avant la remise à zéro. Ce sont des chiffres déclarés, que nous n'avons pas vérifiés. Dans Claude Design, Maxime Quillet a vu son quota « fondre en quelques minutes ».

Anthropic écrit que presque tous les cas de limite épuisée avant midi viennent de cinq habitudes (page sur l'utilisation de Claude Code). Pour un site, elles se traduisent ainsi :

• Une tâche par conversation. Chaque message renvoie tout l'historique. Lancez /clear entre deux tâches sans rapport : le fichier mémoire du projet reste en place.

• Le bon modèle. Opus coûte plusieurs fois plus par tour que Sonnet. Gardez-le pour planifier ou pour débloquer un problème difficile.

• Un fichier mémoire court. Le fichier CLAUDE.md, créé par /init, est relu à chaque tour, et Anthropic conseille de le garder sous 200 lignes environ.

• Des chemins de fichiers plutôt que des copier-coller, car tout ce que vous collez reste en contexte jusqu'à la fin de la session.

• Un plan avant les gros changements, détaillé à l'étape 6.

Dans le chat, la page d'aide sur les limites conseille d'ouvrir une nouvelle conversation quand l'actuelle s'allonge. Elle précise aussi que les outils et les connecteurs consomment beaucoup de jetons.

Reste le cas où la limite tombe au milieu d'une tâche. Le 7 octobre 2026, un utilisateur de r/ClaudeCode avait épuisé en deux jours le quota hebdomadaire de son offre Max 5x (fil du 7 octobre, en anglais). Les réponses lui conseillent de tenir un fichier qui résume le projet, et de demander un document de passation à 99 % du quota. Une autre invite à garder le dernier pour cent pour des tâches qui ne touchent pas au code, comme lister les bugs sans les corriger.

Prompt 2, à envoyer quand la barre de session approche de la fin

Arrêtez-vous avant la prochaine modification. Écrivez dans PASSATION.md ce qu'il faut pour reprendre dans une nouvelle session. Indiquez ce qui est fait, ce qui reste à faire dans l'ordre, les fichiers concernés, les décisions prises et les bugs connus. Ne modifiez aucun autre fichier.

Ce qui coince : le quota est commun au chat et à Claude Code. Une longue conversation dans le chat le matin réduit ce qu'il reste à Claude Code l'après-midi.

Étape 4 : donnez une direction visuelle et une liste d'interdits

Pendant mes essais, le design obtenu ressemblait à celui de tous les sites faits par IA. Anthropic décrit elle-même le phénomène. Sans consigne, écrit-elle, une page d'accueil générée prend presque toujours la police Inter et des dégradés violets sur fond blanc (article du 12 novembre 2025, en anglais). Le prompt qu'elle propose dit à Claude qu'il tend vers des résultats génériques, ce que les utilisateurs appellent l'esthétique « AI slop ».

Sa compétence frontend-design, mise à jour le 3 septembre 2026, liste les traits autour desquels se regroupent les pages générées (fichier de la compétence, en anglais) :

• un fond crème avec un titre à empattements et une touche terre cuite, proche de l'orange d'Anthropic ;

• un fond presque noir avec une seule couleur vive, vert acide ou vermillon ;

• une mise en page façon journal, à filets fins et colonnes serrées ;

• des cartes identiques aux coins arrondis, avec la même ombre grise sous chacune ;

• de petits libellés en capitales au-dessus de chaque titre, des étiquettes en police à chasse fixe, des points médians entre les éléments et une flèche ajoutée au texte des boutons.

Cette compétence s'ajoute à Claude Code avec le plugin Frontend Design d'Anthropic, qui affichait 1 134 112 installations le 30 octobre 2026 (page du plugin).

Les utilisateurs listent les mêmes défauts. Le fil le plus suivi de notre relevé, publié sur r/ClaudeAI le 28 septembre 2026, a reçu 768 votes et 164 commentaires. Son auteur trouve Claude bon pour la structure des pages. Le rendu, lui, tourne au site SaaS générique : des cartes partout, des dégradés, de grands arrondis, des icônes Lucide et des badges sans raison. Le 21 septembre, sur r/AI_India, un autre ajoute les émojis, les étiquettes à point clignotant, la police cursive et les flèches dans les boutons (fil du 21 septembre, en anglais).

Deux parades reviennent. La première est une référence précise. « Le modèle compte moins que la référence que vous lui donnez », résume un commentaire du 13 septembre 2026 (fil r/claude, traduit de l'anglais). Son auteur conseille de prendre deux vrais sites et de nommer ce que vous voulez de chacun, par exemple l'échelle des titres de l'un et la mise en page de l'autre. Ascense va chercher ses références hors du secteur : pour un client de mobilier de bureau, des sites d'hôtels italiens et d'agences immobilières espagnoles.

La seconde parade est une liste d'interdits. Le 29 septembre, un utilisateur racontait que son plus net progrès était venu d'un fichier de « défauts bannis » (fil du 29 septembre 2026, traduit de l'anglais). Il y interdit le bandeau d'accueil façon SaaS, les taches de couleur en dégradé, les cartes à tout propos et la décoration posée pour combler un vide. Sa conclusion : « Rends-le unique » n'a jamais marché, alors que la liste des 20 choses qui lui feraient détester le site marche étonnamment bien.

Dans Claude Design, la même logique passe par un système de design. Selon l'aide d'Anthropic, il capture vos couleurs, votre typographie, vos composants et vos modèles de mise en page, pour que Claude les applique à chaque nouveau design. Daria Viktorova a fixé sa direction artistique dans Claude Design après un premier essai avec Lovable. Ce site-là avait selon elle « ce style qu'on reconnaît immédiatement, celui de tous les sites générés par IA » (première partie, 18 août 2026). Notre test complet de Lovable détaille ce que cet outil génère.

Prompt 3, pour la direction visuelle

Avant de coder, proposez-moi une direction visuelle sur une page : deux polices, quatre couleurs avec leur code, l'échelle des titres et le traitement des photos. Reprenez de [site 1] [ce que vous voulez en garder], et de [site 2] [ce que vous voulez en garder]. Interdits : cartes identiques en série, dégradés décoratifs, libellés en capitales au-dessus des titres, flèches dans les boutons, émojis, polices Inter, Roboto, Arial ou polices système. Une fois la direction validée, écrivez-la avec les interdits dans CLAUDE.md, pour qu'elle s'applique à toutes les pages.

Dans le chat, placez plutôt la direction et les interdits dans les instructions d'un projet, et dans Claude Design, dans votre système de design.

Ce qui coince : une direction fixée dans une conversation s'oublie dans la suivante. Écrite dans le fichier mémoire du projet, elle est relue à chaque session (documentation sur la mémoire).

Étape 5 : faites construire une page, vérifiez-la, puis passez à la suivante

Demandez une page à la fois. Le commentaire du 13 septembre cité plus haut le dit en une phrase : « Claude sait faire un premier écran impressionnant et une deuxième page très confuse » (traduit de l'anglais). Son auteur conseille de construire une section à la fois, en largeur ordinateur et téléphone. Il compare ensuite une capture avec la référence avant d'ajouter la moindre animation.

Les tests publiés vont dans le même sens. Maxime Quillet a relevé de légères incohérences à partir de la sixième ou septième page, dans les intitulés du menu et le comportement de certains composants. Il note aussi que la version téléphone demande souvent des retouches à la main. Ascense compare Claude à un stagiaire dont il faut relire le travail, et conseille de passer au crible deux ou trois pages avant de produire les autres. Parmi ses vérifications, le contenu doit rester lisible quand JavaScript et CSS sont coupés dans le navigateur. Une seule page pèse déjà sur le quota : le portfolio de How-To Geek a demandé environ une demi-heure et 245 000 jetons, avec Sonnet 5.5 en effort xHigh.

Avant de valider une page, vérifiez quatre points :

• les textes sont les vôtres, sans chiffre ni avis inventé ;

• la page tient sur un téléphone, menu compris ;

• chaque lien et chaque bouton mène quelque part ;

• le texte reste lisible quand JavaScript est coupé dans le navigateur.

Prompt 4, pour une page à la fois

Construisez seulement la page [nom de la page], en suivant CLAUDE.md. Vérifiez-la ensuite vous-même, en largeur ordinateur puis téléphone : liens, boutons, menu et textes. Listez ce qui manque et ce que vous avez dû supposer, puis arrêtez-vous : je valide avant la page suivante.

Ce qui coince : la version téléphone. Ouvrez chaque page dans une fenêtre étroite, ou directement sur votre téléphone, avant de dire oui.

Étape 6 : corrigez sans casser ce qui marche

Pendant mes essais, il est arrivé qu'une correction casse ce qui marchait. Le scénario revient souvent sur r/ClaudeCode. Le 21 mai 2026, un utilisateur raconte avoir demandé une page de réglages. Claude l'a construite en modifiant au passage le code qui gère la connexion, et le tableau de bord ne marchait plus. Il dit avoir vécu la scène une vingtaine de fois (fil du 21 mai 2026, en anglais). La réponse la plus approuvée tient en une ligne : « Utilisez le mode plan, et lisez le plan au lieu d'appuyer sur Entrée » (traduit de l'anglais).

Le 28 janvier, un autre décrivait la même scène sur de gros projets (fil du 28 janvier 2026, en anglais). Claude casse quelque chose, manque de contexte et résume la conversation, puis présente la panne comme un problème antérieur. Il lui arrive même de marquer le test comme ignoré.

Quatre parades se complètent :

• Le mode plan. Maj+Tab (Shift+Tab) fait défiler les modes jusqu'à « plan mode on », et le préfixe /plan vaut pour un seul message. Claude lit les fichiers et rédige un plan, sans rien modifier avant votre accord (modes de permission).

• La liste des fichiers touchés. Pour tout changement qui touche plus de deux ou trois fichiers, la page d'aide d'Anthropic propose une phrase à copier telle quelle. « Avant de changer quoi que ce soit, listez les fichiers que vous allez toucher et ce que vous allez faire dans chacun ». Elle chiffre l'enjeu : un plan coûte quelques centaines de jetons, quand un mauvais changement de 400 lignes, annulé puis refait, en coûte des milliers, deux fois.

• Le retour en arrière. Claude Code enregistre l'état des fichiers avant chaque message. La commande /rewind, ou deux appuis sur Échap quand la zone de saisie est vide, restaure le code, la conversation ou les deux (points de restauration). Les 100 derniers points sont gardés, mais un fichier modifié par une commande du terminal n'est pas suivi.

• Un commit Git après chaque étape validée. La même page précise que ces points ne remplacent pas le contrôle de version. Daria Viktorova le résume dans sa FAQ : GitHub permet de « revenir à une version précédente si une modification casse quelque chose ». Dans le chat ou dans Claude Design, gardez de même une copie exportée de chaque version qui vous convient.

Prompt 5, pour une correction sans dégâts

Sur la page [nom], [ce que vous constatez]. Ne corrigez rien pour l'instant. Cherchez d'abord la cause, puis listez les fichiers que vous toucherez et ce que vous changerez dans chacun. Ne touchez à aucune autre page. Après mon accord, faites la modification, puis vérifiez que [ce qui marchait] marche toujours.

Le 20 octobre 2026, un fil au titre moqueur résumait le travers : « corrigé, et j'ai aussi remanié 14 fichiers » (traduit de l'anglais). Le commentaire le plus approuvé y conseillait de faire d'abord enquêter Claude sur le bug, avec un plan à la clé (fil du 20 octobre 2026, en anglais). La correction vient ensuite, avec un périmètre précis.

Ce qui coince : valider un plan sans le lire. Si une page que vous n'avez pas citée figure dans la liste des fichiers, refusez et précisez votre demande.

Étape 7 : branchez le formulaire de contact et les mentions légales

Le formulaire de contact fait partie des points qui m'ont arrêté. Un site statique n'a pas de partie serveur : le formulaire que Claude dessine s'affiche très bien, mais il faut un service pour recevoir les messages et vous les transmettre. La question revient chez ceux qui débutent. « Qu'est-ce qu'un backend, et en ai-je besoin pour un site vitrine avec formulaire de contact ? », demandait un débutant sur r/ai_website_builder (fil du 16 juin, traduit de l'anglais). Dans le prompt publié avec son test, Dibakar Ghosh prend les devants : faute de serveur, il demande à Claude un lien mailto et lui interdit de simuler l'envoi d'un formulaire.

Sur Netlify, le plus simple est Netlify Forms (documentation, en anglais) :

1. activez la détection des formulaires dans l'onglet Forms du projet ;

2. ajoutez à la balise du formulaire un attribut name et l'attribut data-netlify avec la valeur true, puis republiez ;

3. réglez l'envoi des messages par e-mail dans Forms, puis Submission notifications ;

4. envoyez un vrai message de test et vérifiez qu'il arrive.

Les formulaires sont gratuits et illimités sur les offres à crédits de Netlify (facturation des formulaires, en anglais). Un piège guette les sites où JavaScript affiche le formulaire. Netlify repère les formulaires en lisant le HTML au moment de la publication : il faut lui fournir une copie HTML cachée du formulaire, et Next.js a ses propres instructions. Côté spam, Netlify filtre déjà les messages et permet d'ajouter un champ piège ou un reCAPTCHA (filtres anti-spam, en anglais).

Chez Vercel ou Cloudflare, Claude écrit en général une petite fonction côté serveur, reliée à un service d'envoi d'e-mails. Daria Viktorova cite Resend et Brevo, dont les offres gratuites couvrent selon elle « largement les besoins d'un site vitrine ».

Le formulaire crée aussi des obligations. Remplir un formulaire de contact constitue un traitement de données personnelles, et le visiteur doit en être informé au moment où ses données sont collectées. Le site d'une entreprise doit également afficher des mentions légales, dont le nom, l'adresse et le téléphone de l'hébergeur. Si le site est chez Netlify ou Vercel, ce sont leurs coordonnées qu'il faut indiquer. L'absence de ces mentions est punie de 375 000 € d'amende pour une société et de 75 000 € pour une entreprise individuelle. C'est ce qu'indique Service Public Entreprendre, sur une page vérifiée le 13 octobre 2026.

Sur ce terrain, l'IA aide moins. Daria Viktorova a jugé « très léger » le texte de mentions légales et le début d'audit RGPD produits par Hypervibe, le plugin qu'elle utilisait avec Claude Code. Elle a tout repris elle-même. Selon elle, c'est la partie qui manque le plus souvent sur les sites créés en vibe coding. « Claude code sait générer une page d'accueil ou un formulaire de contact, mais il est beaucoup moins bon pour anticiper ce qu'impose le RGPD », écrit-elle.

Prompt 6, pour un formulaire qui arrive vraiment

Le site sera hébergé sur Netlify. Branchez le formulaire de la page Contact sur Netlify Forms : attribut name, attribut data-netlify, champ piège contre le spam et page de remerciement. Si le formulaire est affiché par JavaScript, ajoutez la copie HTML cachée que demande Netlify. Sous le bouton, ajoutez une phrase qui dit à quoi servent les données et renvoie vers la politique de confidentialité. Dites-moi enfin quoi régler dans Netlify pour recevoir les messages par e-mail.

Ce qui coince : la page de remerciement s'affiche parfois alors qu'aucun message n'est parti. Seul un message de test reçu dans votre boîte prouve que le formulaire marche.

Étape 8 : mettez le site en ligne et reliez votre domaine

La mise en ligne complète ma liste des points de blocage. Sur r/ClaudeAI, le 18 août 2026, un utilisateur sans aucune expérience avant février racontait gérer aujourd'hui plusieurs sites. Il classe la mise en place de l'hébergement et des statistiques parmi « les parties les plus dures, parce que Claude avait besoin que je fasse des choses » (traduit de l'anglais). Claude guide, mais c'est vous qui ouvrez les comptes et qui payez. Quatre routes mènent au site en ligne.

Depuis le chat ou Claude Design, le connecteur Netlify. Dans le chat, le guide de Netlify passe par les menus Customize puis Connectors : cherchez Netlify et connectez votre compte (guide Netlify, en anglais). Netlify conseille de laisser la lecture libre et de garder une validation pour toute action qui écrit ou supprime. Une phrase suffit ensuite, par exemple « Deploy this project to Netlify ». Dans Claude Design, Netlify se connecte une fois depuis Share, puis More formats and apps. Le bouton Send publie ensuite le projet, et Claude renvoie le lien du site (guide pour Claude Design, en anglais). Après chaque retouche, on republie de la même façon.

Depuis Claude Code, le plugin Vercel. Installez d'abord l'outil en ligne de commande de Vercel (npm install -g vercel), puis connectez votre compte (vercel login). La commande /plugin install vercel@claude-plugins-official ajoute alors /vercel-setup, qui règle l'outil et le projet, et /deploy, qui publie en production (dépôt du plugin, en anglais). Vercel propose aussi un plugin plus récent, installé par npx plugins add vercel/vercel-plugin, dont la commande /vercel-plugin:deploy prod publie en production (documentation de Vercel, en anglais). C'est le même Vercel qui édite v0, son générateur d'interfaces.

Depuis un dépôt GitHub. Claude envoie le code dans un dépôt relié à l'hébergeur, et chaque envoi republie le site. C'est le montage que conseillent le plus souvent les réponses sur l'hébergement dans les fils lus, avec Cloudflare Pages ou Netlify. En mars 2026, un utilisateur aux notions de code très basiques a publié ainsi son site, sur le conseil de Claude (fil du 8 mars 2026, en anglais). Il dit y avoir passé une soixantaine d'heures. Digitiz décrit une variante sans GitHub : une archive .zip envoyée dans le dossier public_html d'un hébergeur classique (guide de Digitiz, mis à jour le 17 mai 2026). Il faut alors refaire l'envoi à chaque mise à jour.

Dans un créateur de sites. C'est la route de Leboard, vue à l'étape 2 : Claude écrit le code d'une page, collé ensuite dans un bloc HTML d'un créateur qui héberge le site. Le 22 juin 2026, sur r/squarespace, un intégrateur disait avoir mené plus de 90 projets sous Squarespace et Wix (fil du 22 juin 2026, en anglais). Ses clients lui envoient des maquettes HTML faites avec Claude, qu'il reconstruit dans Squarespace. Il vend ce service, ce qui oriente son avis, mais la route existe.

Pour un essai sans compte, Netlify Drop accepte un dossier glissé dans le navigateur. La commande netlify deploy --allow-anonymous crée un site temporaire, supprimé s'il n'est pas réclamé dans l'heure (Netlify, en anglais). Chez Vercel, vercel deploy --temporary publie aussi sans compte.

Les offres gratuites des trois hébergeurs ont chacune leur limite. Voici le relevé du 30 octobre 2026 :

Le calcul de Netlify mérite d'être posé. L'offre Free donne 300 crédits par mois, et chaque mise en production en coûte 15. Cela fait au plus 300 ÷ 15 = 20 mises en production par mois, avant toute bande passante et toute requête (tarifs de Netlify). Une fois les crédits épuisés, tous les projets du compte sont mis en pause : les visiteurs voient « Site not available » et les formulaires ne reçoivent plus rien. Sur l'offre gratuite, il faut alors attendre le mois suivant ou changer d'offre (FAQ de facturation, en anglais). Si vous republiez après chaque retouche de Claude Design, ce plafond arrive vite.

Chez Vercel, l'offre Hobby est gratuite mais réservée à un usage personnel et non commercial. Ses règles classent comme commercial un site qui fait la publicité d'un produit ou d'un service à vendre (règles d'usage, en anglais). Le site d'un plombier ou d'un salon de coiffure relève de ce cas, et demande l'offre Pro, à 20 $ par mois (tarifs de Vercel). Gardez-le en tête si un tutoriel vous présente l'offre gratuite comme suffisante pour un site vitrine. Cloudflare Pages, souvent conseillé dans les fils lus, limite surtout le nombre de constructions (limites de Cloudflare Pages, mises à jour le 5 septembre 2026).

Pour le domaine, l'hébergeur vous donne les enregistrements DNS à créer chez votre registraire, et Claude peut vous expliquer chaque champ. Pensez enfin à l'après. « Je ne veux pas ouvrir Claude chaque fois que je veux modifier mon site », écrivait un utilisateur de r/claude (fil du 6 août 2026, traduit de l'anglais). Les réponses les plus approuvées lui conseillaient un dépôt relié à Cloudflare Pages ou à Netlify. Sans outil d'édition ajouté, un site fait avec Claude se modifie dans son code. Pour changer les textes sans y toucher, demandez à Claude un espace d'administration : Daria Viktorova s'en est fait construire un pour publier ses articles.

Prompt 7, pour la première mise en ligne

Mettez ce projet en ligne sur [Netlify ou Vercel]. Posez-moi vos questions s'il vous manque des informations. Expliquez chaque étape comme à un débutant, en gardant les termes techniques dont j'aurai besoin pour chercher de l'aide. À la fin, donnez-moi l'adresse du site, les enregistrements DNS à créer pour [mondomaine.fr] et la liste de ce que je dois faire moi-même.

Ce prompt reprend l'esprit de celui que Netlify propose dans sa documentation pour les outils d'IA.

Ce qui coince : la sécurité des comptes. Daria Viktorova protège par une double authentification tous les comptes qui contrôlent son site, de l'hébergeur au nom de domaine. Faites de même avant la première mise en ligne.

Et le référencement ?

Le référencement vient après la mise en ligne, mais quatre vérifications évitent de mauvaises surprises.

• Le texte doit arriver avec la page. Un site en HTML statique le garantit. Avec Next.js, demandez à Claude un rendu côté serveur ou un export statique. Google exécute le JavaScript, mais plus lentement, et notre guide pour vérifier qu'un site créé par IA apparaît sur Google montre ce qui peut se perdre en route.

• Chaque page a son titre et sa description. Demandez-les à Claude page par page, en lui donnant la recherche que chaque page doit viser.

• Un sitemap liste toutes les pages. Claude peut le générer, et l'hébergeur le sert avec le reste du site.

• Contrôlez ce que Google reçoit avec notre test d'indexation, puis déclarez le site et son sitemap dans Google Search Console.

Notre page sur le référencement d'un site créé par IA détaille ensuite les réglages qui comptent.

Le cas où vous voulez le site sans gérer l'hébergeur : Eqlo

C'est la section sur Eqlo annoncée au début. Eqlo prend un autre chemin : vous décrivez votre activité en une phrase, et Eqlo écrit puis héberge le site. Voici comment il traite les cinq points de blocage de ce guide :

• Le quota. Les retouches de mise en page, l'onglet Design et les corrections de texte dans l'aperçu sont gratuites et laissent le budget IA intact. Ce budget est de 3 $ par mois avec l'offre Gratuit et de 30 $ avec Plus.

• Le design. Eqlo choisit une direction parmi trois styles adaptés au métier, sur 21 au total. Il reprend aussi l'ambiance d'un site que vous lui donnez en inspiration, fond, couleurs, polices et coins compris.

• Les corrections. Vous pointez une section dans l'aperçu : Eqlo change ce bloc et laisse le reste de la page intact. Vous pouvez verrouiller jusqu'à 60 sections, et chaque modification crée une version que l'on compare ou restaure.

• Le formulaire. Les formulaires de contact ou de devis sont créés avec le site, selon le métier. Ils fonctionnent même sans JavaScript, et chaque demande arrive dans la boîte de réception de l'admin du site.

• La mise en ligne. Le bouton Publier met le site sur une adresse gratuite du type plomberie-lyon.eqlo.dev, hébergement et HTTPS compris dans toutes les offres. Avec Plus, à 19 € par mois, vous copiez deux enregistrements DNS pour votre domaine. Eqlo vérifie ensuite le branchement pendant 72 heures et installe le HTTPS seul.

Le code vous appartient sur toutes les offres : un projet Next.js complet, avec l'export vers votre dépôt GitHub. Claude reste plus libre, puisqu'il code tout ce que vous savez décrire, et son abonnement sert à bien d'autres choses qu'un site. Eqlo vise le site vitrine d'un artisan ou d'un commerce qui doit recevoir des demandes dès sa mise en ligne, comme le décrit notre page pour les artisans et indépendants. L'offre Gratuit permet de publier cinq projets sans carte bancaire (tarifs d'Eqlo).

Questions fréquentes

Comment créer un site web avec l'IA ?

Deux familles d'outils existent. Les assistants généralistes comme Claude écrivent le code, puis vous laissent l'hébergement et la mise en ligne, même si un connecteur peut publier à votre place. Les créateurs de sites à IA vont en général de la description jusqu'au site en ligne. Notre comparatif quelle IA pour créer un site web les classe selon le projet, et la page créer un site internet avec l'IA décrit le parcours dans Eqlo.

Quel prompt utiliser pour créer un site web avec Claude ?

Commencez par l'activité et les pages voulues, puis citez deux sites de référence avec ce que vous en gardez. Interdisez d'inventer chiffres et avis, et demandez des questions avant le code : c'est le prompt 1 de ce guide. Pour la suite, gardez une demande par message et une page à la fois.

Faut-il payer Claude pour créer un site ?

Pas pour commencer. L'offre gratuite donne accès au chat, aux artefacts, aux connecteurs et à Claude Design, avec moins d'usage. Claude Code demande l'offre Pro, à 20 $ HT par mois ou 200 $ pour un an, au 30 octobre 2026. Ascense conseille l'offre à 100 $ par mois le temps de construire le site, puis celle à 20 $ pour le faire vivre.

Claude Code ou Claude Design : lequel choisir ?

Les deux se complètent. Claude Design sert à chercher l'apparence et à valider une direction visuelle, et Claude Code construit le site. Selon Anthropic, un design transmis à Claude Code repart du travail existant au lieu d'une simple capture d'écran. Un commentaire du fil r/squarespace du 22 juin 2026 décrit ce montage : la charte dans Claude Design, un plan détaillé dans le chat, puis la construction dans Claude Code.

Combien de temps faut-il pour créer un site avec Claude ?

Les durées publiées sont toutes déclarées par leurs auteurs, et elles varient beaucoup. Flavie Prévot parle d'une demi-journée pour refaire deux pages de vente dans le chat. Daria Viktorova a mis une bonne demi-journée pour la préparation, puis plusieurs jours de créneaux dans Claude Code. Ascense prévient qu'il faut prévoir 15 à 30 heures au minimum pour la phase initiale. L'utilisateur de Reddit cité à l'étape 8, lui, parle d'une soixantaine d'heures.

Combien coûte un site créé avec Claude ?

Faites le calcul avec vos propres choix. Prenons un site vitrine construit en deux mois avec Claude Code : 2 × 20 $ = 40 $ HT d'abonnement Pro. L'hébergement coûte 0 $ sur Netlify Free ou Cloudflare Pages, et il faut ajouter le domaine. Daria Viktorova a payé le sien environ 20 € pour trois ans en .fr, promotion comprise. Si le site est commercial et hébergé chez Vercel, comptez 20 $ par mois de plus. Notre page sur le prix d'un site internet en 2026 compare avec une agence ou un créateur de sites.

Quel est le meilleur logiciel pour créer un site web ?

Aucun ne l'emporte dans tous les cas. Si vous voulez tout contrôler, Claude Code et un hébergeur comme Netlify vous laissent la main sur chaque réglage. Pour un site vitrine sans technique, un créateur de sites qui héberge et gère les formulaires vous épargne les étapes 7 et 8. Nos tests de Hostinger AI et de Framer AI montrent ce que font deux d'entre eux. Les comparatifs Wix ou Squarespace et des générateurs de sites par IA détaillent les autres options.

Mon avis

Mon avis rejoint celui des fils lus et des tests publiés. Claude construit vite des pages réussies quand on lui donne de la matière et des références. Claude Code supprime en plus les copier-coller qui rendaient le chat pénible au-delà d'une page. Le travail sérieux vient après le premier écran : tenir le quota, imposer une direction, corriger sans casser, brancher le formulaire, puis publier. Ce sont les cinq obstacles que j'ai rencontrés, et chacun a une parade documentée plus haut.

Si vous y allez, je prendrais ce chemin. Des références et une liste d'interdits pour l'apparence, puis Claude Code pour la construction, avec un commit après chaque page validée. Pour la mise en ligne, Netlify ou Cloudflare Pages relié à GitHub. Si votre site doit surtout recevoir des demandes de devis sans que vous gériez d'hébergeur, regardez plutôt du côté des créateurs de sites, Eqlo compris.

Sources. Documentation d'Anthropic lue le 30 octobre 2026 : tarifs, limites d'utilisation, bonnes pratiques du 22 septembre 2026, modèles et limites dans Claude Code, partage des artefacts, démarrage et système de design de Claude Design, et pour Claude Code le démarrage rapide, la mémoire, les modes de permission et les points de restauration. Anthropic encore : l'article du 12 novembre 2025 sur le design des interfaces, la compétence frontend-design et la page du plugin Frontend Design, plus le cas d'usage « Create a custom webpage » et le cours Claude Code 101 de Claude Academy. Netlify : guides pour le chat de Claude et Claude Design, déploiement depuis un outil d'IA, Netlify Forms, filtres anti-spam, facturation et tarifs. Vercel : plugins, règles d'usage et tarifs. Cloudflare Pages : limites mises à jour le 5 septembre 2026. Service Public Entreprendre : mentions obligatoires, page vérifiée le 13 octobre 2026. Témoignages : 23 fils Reddit publiés du 30 juin 2025 au 25 octobre 2026, et les tests de How-To Geek (12 octobre 2026) et de Quillet Digital (19 avril 2026). Retours en français : Ascense (14 mai 2026), Daria Viktorova (18 et 25 août 2026), Leboard (22 juin 2026), Digitiz (mis à jour le 17 mai 2026), Studeria (mis à jour le 30 juillet 2026) et Z&KO (29 juillet 2026). Mesure : cinq artefacts publics vérifiés par nos soins le 18 octobre 2026. S'y ajoutent mes essais avec Claude et Claude Code. Si vous repérez une erreur, écrivez-nous : nous la corrigerons.