Créer un site vitrine avec l'IA : de la refonte à la mise en ligne

Tu as un vieux site WordPress qui met dix secondes à s'afficher, ou pas de site du tout ? Dans cette vidéo, je pars d'un cas réel : le site d'une entreprise de lavage auto à Perpignan, LJ-Lavage. Avec un agent IA, on fait la refonte complète : nouvelle base technique, CMS pour modifier les photos et les tarifs, pages locales pour le référencement, mentions légales, sécurité, performances, hébergement et Google Search Console.

L'idée n'est pas de laisser l'IA « faire un site ». C'est de la guider étape par étape, avec les bonnes questions et les bonnes vérifications, pour obtenir un site professionnel qu'une petite entreprise peut ensuite faire vivre seule.

Dans ce guide : donner le contexte · domaine et base technique · le CMS · les bases du SEO · légal, cookies et sécurité · performances · mise en ligne et Search Console · sortir du design générique · utiliser le skill.

Le prérequis : un agent installé, et du contexte

Pour suivre la démo, il faut un agent IA capable de travailler dans un dossier et d'exécuter des commandes : Claude Code, Codex ou équivalent. Si ce n'est pas encore le cas, commence par le tuto pour installer un agent IA sur ton PC.

Ensuite, tout se joue sur le contexte. Un agent à qui l'on dit « refais ce site » produit un site générique. Un agent qui connaît l'activité, la zone, les prix, la cible, ce qui différencie l'entreprise et ce que le client veut modifier lui-même produit un site utile. C'est pour ça que la première étape est un questionnaire, et qu'en refonte l'agent commence par inventorier l'existant : pages, textes, photos, tarifs, performances.

Point important : l'agent ne doit jamais inventer un fait. Un prix, un horaire, un numéro SIRET ou un nombre d'avis qui n'a pas été fourni doit apparaître comme un champ à compléter, pas comme une valeur plausible.

Dans la vidéo : 01:22, donner le contexte et préparer la refonte.

Nom de domaine et base technique

Le nom de domaine se choisit tôt : court, au nom de l'entreprise ou sous la forme métier et ville, et surtout au nom du client, même si c'est le prestataire qui gère la technique. En refonte, il faut aussi relever la zone DNS existante avant de toucher quoi que ce soit, sinon on risque de couper les e-mails.

Pour la base technique, je compare dans la vidéo WordPress, Astro et Next.js. Pour ce projet, le choix est Next.js : un site rendu côté serveur, très rapide, avec le contenu dans des fichiers que l'agent peut modifier sans risque, et la possibilité d'ajouter un petit espace d'administration sans base de données.

Dans la vidéo : 02:41, choisir son nom de domaine et 03:18, WordPress, Astro ou Next.js.

Prévoir un CMS pour que le client modifie son site

Un site vitrine qui ne bouge jamais perd vite de son intérêt. Pour LJ-Lavage, la gérante voulait pouvoir changer ses tarifs et publier des photos de voitures qu'elle vient de laver. On a donc ajouté un espace /admin protégé par mot de passe, pensé pour un téléphone : un onglet Réalisations, un onglet Tarifs, un bouton « Publier sur le site ».

Deux détails font la différence. Les photos sont réduites dans le navigateur avant l'envoi, puis converties en WebP côté serveur, avec suppression des données de localisation GPS. Et les données du client sont stockées à part du code : un redéploiement du site ne peut jamais écraser ce qu'elle a publié.

Dans la vidéo : 04:16, prévoir un CMS et 06:38, modifier les photos et les prix.

Première version et bases du SEO local

Pour une entreprise locale, le référencement repose sur trois choses : la fiche Google Business Profile, une page claire par prestation avec la ville, et la cohérence du nom, de l'adresse et du téléphone partout sur le web. Le site a donc été structuré autour d'une page d'accueil qui vise la requête principale (« lavage auto Perpignan »), d'une page par prestation, de quelques pages pour les communes proches, d'une FAQ et d'une page de réalisations alimentée par le CMS.

Chaque page a son titre, sa description, un seul H1, un maillage vers les pages voisines et des données structurées LocalBusiness, FAQPage et BreadcrumbList. Rien de magique, mais une base propre que Google comprend.

Dans la vidéo : 05:09, première version et bases du SEO.

Mentions légales, cookies et sécurité

Un site professionnel en France doit afficher des mentions légales complètes : éditeur, statut, SIREN, adresse, directeur de la publication, hébergeur. L'agent peut vérifier l'identité de l'entreprise dans le registre public, mais c'est au client de confirmer chaque information. La politique de confidentialité doit décrire ce que le site fait vraiment, et si l'on ajoute Google Analytics, le bandeau cookies doit respecter les règles de la CNIL : rien n'est chargé avant l'accord, et « Refuser » est aussi simple qu'« Accepter ».

Côté sécurité, dès qu'il y a une connexion à un espace admin, il faut des garde-fous : nombre de tentatives limité par minute, champ piège invisible pour les robots, vérification anti-robot, session qui expire, en-têtes HTTP de sécurité. Ce sont des choses qu'on oublie facilement et qu'un agent applique très bien quand on les lui demande explicitement.

Dans la vidéo : 07:08, mentions légales, cookies et sécurité.

Optimiser les performances

C'est souvent là que la refonte se voit le plus. Sur mobile, dans Lighthouse, l'ancien site WordPress pesait environ 10 Mo pour afficher son contenu principal en plus de 11 secondes, avec un score de performance de 70. La nouvelle version, sur l'adresse de test, pèse autour de 720 Ko, obtient entre 86 et 92 en performance et 100 en accessibilité, bonnes pratiques et SEO.

Les gains viennent surtout des images (formats modernes, bonnes dimensions), de l'absence de scripts tiers avant consentement et de deux pièges évités : une animation d'entrée qui retardait l'affichage du titre, et un bandeau cookies qui apparaissait trop tard et dégradait la mesure.

Dans la vidéo : 07:56, optimiser les performances.

Hébergement, URL de test et Search Console

Un CMS qui enregistre des photos a besoin d'un disque persistant : cela oriente le choix de l'hébergement (un petit serveur avec Docker, ou une plateforme qui propose des volumes). Le site est d'abord mis en ligne sur une adresse de test, pour que le client valide avant la bascule du vrai domaine. Dans la vidéo, c'est cette étape que je montre, pas la mise en production du site client.

Vient ensuite Google Search Console : propriété de domaine vérifiée par un enregistrement DNS, envoi du sitemap, demandes d'indexation des pages principales. Ces outils demandent la connexion au compte Google du client : l'agent peut guider et vérifier, mais c'est le propriétaire qui se connecte.

Dans la vidéo : 08:31, passer du local à l'hébergement, 09:53, configurer Google Search Console et 10:46, sitemap et demandes d'indexation.

Revoir le design et sortir du générique

Un site généré par IA se reconnaît vite : dégradés violets, cartes floutées, trois blocs identiques avec une icône, titres interchangeables. La meilleure parade, c'est de décider du design avant de coder : demander à l'agent trois ou quatre directions visuelles vraiment différentes, sous forme de maquettes avec le vrai contenu, ancrées dans quelque chose de réel (ici, les couleurs du flyer de l'entreprise), puis en choisir une.

Dans la vidéo : 11:16, revoir le design et sortir du générique.

Les limites à garder en tête

Poser de bonnes bases techniques ne garantit pas une première place sur Google. Le contenu, les avis, la fiche Google Business et l'ancienneté comptent énormément. Et une refonte demande un vrai plan de redirections : chaque ancienne adresse doit mener à la page équivalente, sinon on perd une partie de ce que l'ancien site avait gagné.

Dans la vidéo : 12:21, les limites du SEO et les redirections.

Refaire la même chose avec le skill Site vitrine

Pour que tu puisses reproduire la démarche sur ton projet, j'ai regroupé tout le déroulé dans un skill gratuit pour agent de code. Il enchaîne 10 étapes, avec des points où l'agent s'arrête pour te demander ton accord :

1. Un questionnaire sur l'activité, par petits blocs, et la vérification de l'identité légale.
2. En refonte, l'audit du site existant avec un script qui inventorie pages, titres, images et liens.
3. Trois ou quatre directions visuelles très différentes, contrôlées avec une grille anti « AI slop », avant tout développement.
4. La stratégie SEO local et l'arborescence des pages.
5. Le socle Next.js, avec ou sans CMS selon qui gérera le site.
6. La construction des pages, sans jamais inventer d'information.
7. La sécurité de l'admin et des formulaires.
8. Les mentions légales, la politique de confidentialité et le bandeau cookies.
9. Les performances et un contrôle qualité complet.
10. La mise en ligne dans le bon ordre, avec un script de contrôle final, puis la livraison au client.

Après installation, une demande comme celle-ci suffit pour démarrer :

Utilise le skill site-vitrine pour refaire le site de mon entreprise. Audite l'existant, propose-moi plusieurs directions visuelles avant de coder, et je veux pouvoir modifier moi-même mes prix et ajouter des photos de mes réalisations.

L'agent prépare tout, mais tu restes aux commandes pour ce qui t'engage : l'achat du nom de domaine, l'abonnement d'hébergement, la connexion à Google. Ne donne jamais un mot de passe ou une carte bancaire dans la conversation.

Télécharger le skill Site vitrine et voir la notice d'installation.

Tu partirais d'une page blanche ou d'un site existant ? Dis-le en commentaire sous la vidéo, ça m'aidera à préparer la suite.