Créer un site avec l'IA : du brief à la mise en ligne

Pour créer un site avec l'IA, vous décrivez le site en langage courant, vous laissez un outil d'IA produire les pages, puis vous les relisez, les corrigez et les publiez. Vous pouvez le faire dans un créateur de sites IA qui héberge le site pour vous, ou avec un agent IA comme Claude Code, qui écrit de vrais fichiers qui vous appartiennent et que vous pouvez mettre chez n'importe quel hébergeur, comme Vercel.

Trois façons de créer un site avec l'IA

Les outils diffèrent moins par l'intelligence de leur IA que par l'endroit où votre site finit par vivre. C'est ce qui décide de ce que vous payez chaque mois et de la facilité avec laquelle vous pouvez partir.

Wix peut désormais ébaucher un site à partir d'un seul prompt, et Squarespace et Framer proposent des créateurs IA similaires, mais le site reste sur leur plateforme tant que vous payez. Les créateurs d'applications dans le navigateur écrivent du vrai code et l'hébergent pour vous, en facturant en général en crédits.

Le détail des compromis se trouve dans notre comparatif Claude Code et Lovable, et les prix actuels de chaque outil dans les meilleurs outils de vibe coding.

Une façon rapide de choisir

• Choisissez un créateur de sites si vous voulez une seule facture et un éditeur par glisser-déposer, et que vous modifierez rarement le site.
• Choisissez un créateur d'applications dans le navigateur si vous voulez quelque chose qui marche dans l'heure et que payer en crédits ne vous dérange pas.
• Choisissez un agent IA si vous voulez un design sur mesure, la pleine propriété et de la place pour ajouter plus tard des pages, un blog ou de petits outils.

Quand je crée des sites pour des clients, je passe par défaut par l'agent, parce que le client repart avec des fichiers qu'il peut emporter n'importe où. La suite de ce guide suit cette voie, d'un dossier vide jusqu'à un site en ligne.

Ce qu'il vous faut avant de commencer

Étape 1 : écrire un brief d'une page

C'est le brief qui décide de l'essentiel de la qualité. L'IA est très douée pour transformer des instructions claires en pages, et très mauvaise pour deviner ce qui rend votre entreprise différente.

Remplissez ce modèle et enregistrez-le sous le nom brief.md dans un dossier de projet vide :

ENTREPRISE : [NOM], [CE QUE VOUS VENDEZ], [ZONE DESSERVIE]
PUBLIC : [QUI ACHÈTE ET CE QUI L'INQUIÈTE AVANT D'ACHETER]
ACTION PRINCIPALE : [RÉSERVER UN APPEL, DEMANDER UN DEVIS, APPELER OU ACHETER]
PAGES : Accueil, Prestations, À propos, Contact
PREUVES : [VRAIS AVIS, ANNÉES D'ACTIVITÉ, CERTIFICATIONS]
FAITS QUI DOIVENT ÊTRE EXACTS : [TÉLÉPHONE, ADRESSE, HORAIRES, PRIX]
TON : [TROIS MOTS, PAR EXEMPLE CHALEUREUX, EXPERT, SIMPLE]
STYLE VISUEL : [COULEURS DE LA MARQUE EN CODES HEX, POLICES SI VOUS EN AVEZ]
SITES QUE J'AIME : [2 OU 3 LIENS, ET CE QUI VOUS PLAÎT DANS CHACUN]
JAMAIS : inventer des avis, des chiffres ou des récompenses. Pas de clichés de banque d'images.

Étape 2 : préparer le dossier et un filet de sécurité

1. Ouvrez le projet. Dans l'application de bureau Claude, cliquez sur l'onglet Code, choisissez Local, cliquez sur Select folder et choisissez le dossier de votre projet.
2. Activez l'historique des versions. Demandez à Claude de mettre en place Git et de faire un commit après chaque version qui fonctionne. Git est un outil gratuit qui enregistre des instantanés de votre projet, pour que vous puissiez revenir à n'importe quelle version précédente.
3. Enregistrez vos règles. Demandez-lui de créer un fichier CLAUDE.md à partir du ton, du style visuel, des faits exacts et de la liste « jamais » de votre brief. Claude Code lit ce fichier au début de chaque session, et notre guide sur CLAUDE.md propose des modèles prêts à l'emploi.

Claude Code garde aussi ses propres checkpoints, sur lesquels vous pouvez revenir avec /rewind. Git est le filet de sécurité permanent, alors gardez les deux.

Étape 3 : générer la première version

Choisissez la technologie la plus simple qui convient. Pour une à cinq pages, du HTML et du CSS suffisent : pas d'étape de compilation, pas de framework à tenir à jour. Si vous prévoyez un blog avec beaucoup d'articles, demandez plutôt Next.js, et Claude Code vous dira s'il doit d'abord installer quelque chose.

Commencez en mode plan pour que Claude propose avant d'écrire. Dans l'application de bureau, choisissez Plan dans le sélecteur de mode à côté du bouton d'envoi. Dans le terminal, appuyez sur Maj+Tab jusqu'à voir le mode plan.

Lis brief.md et CLAUDE.md. Planifie un site de [NOMBRE] pages pour cette
entreprise, en HTML et CSS simples, pensé d'abord pour le mobile. Pour chaque
page, liste les sections, un titre provisoire pour chaque section et tout ce
dont tu as besoin de ma part. N'écris pas de code avant que j'aie approuvé le plan.

Répondez à ses questions et approuvez le plan. Passez ensuite en mode Manual pour approuver chaque modification, ou Accept edits pour relire après coup, afin qu'il puisse construire.

Pour voir le résultat, ouvrez le panneau Browser avec Cmd+Maj+B sur Mac ou Ctrl+Maj+B sur Windows, et demandez à Claude d'y ouvrir index.html.

Étape 4 : l'affiner section par section

C'est là que le site devient le vôtre. Des messages courts et précis marchent bien mieux que de longs pavés, et chacun est facile à annuler.

• Une modification par message. Les petits pas gardent les erreurs petites et faciles à annuler.
• Montrez, ne décrivez pas. Glissez une capture d'écran dans la zone de saisie et dites ce qu'il faut changer.
• Vérifiez souvent en largeur téléphone. Beaucoup de vos visiteurs arriveront depuis un téléphone.
• N'utilisez que du vrai contenu. Ne publiez jamais d'avis, de logos clients ou de statistiques inventés par l'IA : cela trompe les clients et peut enfreindre les règles de protection des consommateurs.
• Annulez, puis réduisez la demande. Si une modification casse quelque chose, demandez à Claude de l'annuler ou lancez /rewind, puis essayez une étape plus petite.

Étape 5 : le publier sur Vercel

Vercel est un service d'hébergement : il garde votre site en ligne et donne à chaque déploiement une adresse vercel.app gratuite, que vous pouvez partager avant même d'avoir un domaine.

Netlify et Cloudflare Pages hébergent aussi des sites statiques et ont des forfaits gratuits. Lisez les conditions de chacun sur l'usage commercial avant de vous y fier pour une entreprise.

Option A : glisser-déposer, sans terminal

1. Ouvrez Vercel Drop. Allez sur vercel.com/drop en étant connecté (fonctionnement de Vercel Drop).
2. Déposez le dossier. Faites glisser le dossier de votre projet sur la page.
3. Déployez. Choisissez votre équipe, nommez le projet et cliquez sur Deploy. Vous obtenez une URL en ligne à la fin.
4. Mettez à jour plus tard. Déposez le dossier sur le projet dans votre tableau de bord Vercel, et Vercel publie une nouvelle version de production.

Option B : laisser Claude Code le déployer

Demandez : « Déploie ce site en production sur Vercel avec la Vercel CLI et guide-moi pour la connexion. » La CLI (l'outil en ligne de commande) a besoin de Node.js, et Claude vous dira s'il manque. Voici les commandes qu'il lance. Sur Windows, ce sont les mêmes dans PowerShell :

# Installer l'outil en ligne de commande de Vercel (nécessite Node.js)
$ npm i -g vercel
# Se connecter : une fenêtre de navigateur s'ouvre
$ vercel login
# Créer d'abord un déploiement de prévisualisation pour vérifier
$ vercel
# Publier en production
$ vercel deploy --prod
$ 

Quand vous modifiez souvent le site, connectez plutôt le projet à un dépôt GitHub. Vercel déploie alors automatiquement chaque push, avec des prévisualisations pour les branches secondaires et la production pour votre branche principale.

Étape 6 : connecter votre domaine

1. Ajoutez le domaine. Dans votre projet Vercel, ouvrez Settings > Domains et cliquez sur Add Domain.
2. Acceptez la version www. Si vous ajoutez example.com, Vercel propose d'ajouter aussi www.example.com et recommande www comme adresse principale.
3. Ajoutez les enregistrements DNS que Vercel affiche, chez votre registraire (l'entreprise auprès de qui vous avez acheté le domaine).
4. Attendez la coche de validation. Les changements DNS peuvent mettre un moment à se propager, et le certificat HTTPS (le cadenas) est configuré pour vous.

Étape 7 : les bases du SEO pour que Google vous trouve

Le SEO (référencement naturel) consiste à rendre les pages faciles à comprendre pour les moteurs de recherche, et dignes d'être montrées. Le guide de démarrage SEO de Google est court et lisible, et voici les parties qui comptent le plus pour un petit site.

Deux choses que vous pouvez ignorer : Google dit ne pas utiliser la balise meta keywords, et la longueur seule n'aide pas une page à se classer.

Fais une passe SEO sur tout le site :
1. Écris un titre unique (moins de 60 caractères) et une meta description
   (moins de 155 caractères) pour chaque page, avec le nom de l'entreprise et la zone.
2. Ajoute un texte alternatif descriptif à chaque image utile.
3. Crée sitemap.xml et robots.txt pour https://www.[VOTRE DOMAINE].fr
4. Ajoute du JSON-LD LocalBusiness en utilisant uniquement les faits de brief.md.
   Si une valeur manque, demande-moi au lieu de l'inventer.
5. Liste ce que tu n'as pas pu faire, et pourquoi.

Signaler à Google que le site existe

1. Ajoutez une propriété. Dans Google Search Console, ajoutez une propriété de type Domaine. Google la valide avec un enregistrement DNS chez votre registraire, et elle couvre à la fois les versions avec et sans www.
2. Envoyez le sitemap. Dans le rapport Sitemaps, saisissez l'URL de votre sitemap.
3. Demandez l'indexation. Inspectez l'URL de votre page d'accueil et cliquez sur Demander une indexation.

Google traite un sitemap comme une indication, et demander l'indexation ne garantit pas qu'une page soit indexée. Cela prend souvent environ un jour, et parfois une à deux semaines.

Peut-on créer une application avec l'IA de la même façon ?

Oui, pour des applications simples. Un outil de réservation, un calculateur de devis ou un petit espace client suivent les mêmes étapes, mais le risque change dès qu'il y a des comptes utilisateurs, des paiements ou des données clients stockées.

Utilisez des services reconnus pour les connexions et les paiements plutôt que du code sur mesure, séparez les données de test des données réelles, et faites relire l'application par un développeur avant le lancement. Lisez le vibe coding, une mauvaise idée ? pour les vrais risques et une checklist de sécurité.

Que faire ensuite

Écrivez votre brief ce soir avec le modèle ci-dessus, même si vous ne construisez que ce week-end, car c'est l'étape qui décide le plus de la qualité. Construisez ensuite seulement la page d'accueil, publiez-la avec Vercel Drop sur une adresse vercel.app gratuite, et regardez-la sur votre téléphone avant d'ajouter d'autres pages.

Si vous préférez commencer par une seule landing page, suivez comment créer un site en vibe coding, prompt après prompt. La formation vibe coding Builders va plus loin sur la planification, la psychologie client et la configuration SEO qui font d'un site une source de demandes.