Tu veux un site vitrine propre pour ton activité (artisan, consultant, resto, cabinet) et tu refuses deux options : payer 2 000 € à un freelance pour un WordPress bancal, ou te taper un template Wix qui ressemble à 50 000 autres. La bonne nouvelle : avec Claude, tu peux livrer un site vitrine déployé en trois jours, sans écrire une ligne de code toi-même, pour moins de 15 € par an d'hébergement. Pas en claquant des doigts, pas en une seule prompt magique. En suivant une méthode qui sépare clairement les étapes.
Ce guide fait partie de la série apprendre Claude et détaille le workflow précis que je recommande. Pour la vue d'ensemble du pilier, va voir créer un site web avec Claude de A à Z. Ici on rentre dans le concret : jour 1, jour 2, jour 3, prompts inclus.
Pourquoi un site vitrine fait avec Claude bat un template Wix
Soyons francs : Wix, Squarespace et consorts font le job pour quelqu'un qui veut une présence web en 2 heures sans rien apprendre. Le problème démarre quand tu veux faire évoluer le site, ajouter un blog SEO sérieux, ou simplement ne pas ressembler aux 3 autres artisans de ta ville qui ont pris le même template.
Le calcul financier parle de lui-même. Wix Premium Pro, c'est environ 25 € par mois, soit 900 € sur trois ans. Un site Next.js hébergé sur Vercel (plan gratuit, largement suffisant pour un vitrine), c'est 0 € d'hébergement et un domaine chez OVH ou Gandi autour de 12 € par an. Sur trois ans, tu es à 36 €. L'écart finance deux formations ou un bon logo.
Mais le vrai argument n'est pas financier, il est stratégique. Avec Claude et Next.js, le code t'appartient. Tu peux changer d'hébergeur, ajouter un blog, brancher un formulaire sur ton CRM, migrer vers une boutique plus tard. Avec un template Wix, tu es locataire à vie.
Pour qui c'est pertinent : artisan avec 3 à 5 pages, consultant qui vend du conseil, cabinet d'avocats, resto qui veut un menu PDF et une carte, agence qui montre son portfolio. Pour qui ça ne l'est pas : e-commerce avec 500 références (prends Shopify, j'en parle dans piloter Shopify avec Claude), ou plateforme avec comptes utilisateurs (là on part sur du custom, voir MVP SaaS avec Claude).
Jour 1 : brief, contenu et arborescence
Première règle, qui va à contre-courant de l'instinct : pas de design, pas de code aujourd'hui. Si tu ouvres Figma ou Claude Code dès le matin, tu vas rédiger ton contenu pour remplir des cases visuelles au lieu de parler à tes clients.
Ouvre Claude.ai, démarre une conversation. L'objectif du jour : sortir une arborescence claire (3 ou 4 pages maximum pour un vitrine), une promesse métier formulée en une phrase, et le contenu rédigé de chaque page. Avant même la première prompt, assure-toi d'avoir bien configuré Claude pour ton activité (projet dédié, instructions système, documents de contexte).
Un vitrine standard tient en 4 pages : accueil, services (ou prestations), à propos, contact. N'ajoute pas de blog, de FAQ ou de portfolio avant d'avoir ces 4 pages impeccables.
Voici un prompt qui marche pour la page services, à adapter à ton métier :
Je suis [métier] à [ville]. Mes clients types sont [persona en une phrase].
Ma promesse : [ce que tu fais mieux ou différemment].
Rédige la page "Services" de mon site vitrine. Contraintes :
- 3 blocs de service maximum, chacun avec un titre court (3-5 mots),
une phrase de bénéfice client, et 3 points concrets de ce qui est inclus.
- Pas de superlatifs vides ("solutions innovantes", "expertise unique").
- Un visiteur doit comprendre en 20 secondes si c'est pour lui.
- Ton : professionnel mais humain, pas corporate.
- Termine chaque bloc par un CTA concret (ex : "Demander un devis",
pas "En savoir plus").Relis la sortie. Si tu lis "nous mettons un point d'honneur à" ou "notre équipe passionnée", réécris-toi même. Ces formules trahissent une IA mal cadrée ou un copywriter paresseux. Dans les deux cas, ton visiteur zappe.
Pour chaque page, demande à Claude en bonus : un title SEO (max 60 caractères), une meta description (max 155 caractères), et le H1. Note tout dans un seul document Google Docs ou Notion. C'est ce document qui alimentera Claude Code demain.
Jour 2 : design et génération du code avec Claude Code
Jour 2, on bascule technique. Deux outils : Claude Code en local (gratuit avec ton abonnement Claude Pro ou Max), et la stack Vercel + Next.js pour le déploiement.
Avant de taper quoi que ce soit, prends 20 minutes pour poser la direction visuelle. Palette (3 couleurs max : une principale, une neutre foncée, une neutre claire), typographie (une sans-serif pour les titres, une sans-serif pour le corps, pas plus), et une référence d'inspiration. Linear, Stripe, Vercel eux-mêmes ou le site de Framer sont de bonnes bases. Si tu bloques sur l'identité, passe par définir l'identité visuelle avant de coder, c'est un prérequis sous-estimé.
Lance Claude Code dans un dossier vide. Première prompt :
Crée un projet Next.js 14 avec App Router, TypeScript, Tailwind CSS
et shadcn/ui. Structure pour un site vitrine de 4 pages
(accueil, services, à propos, contact).
Polices : Inter pour le corps, Fraunces pour les H1-H2.
Palette Tailwind étendue avec primary: #1a3a5f, neutral-900: #0f172a.
Ne génère que la structure et la page d'accueil pour l'instant.
Montre-moi l'arbo avant de coder.Point crucial : ne demande jamais un site complet d'un coup. Claude Code va halluciner des composants, mélanger des conventions, et tu passeras ta soirée à démêler. Travaille page par page, puis composant par composant. Hero d'abord, puis section services, puis footer. À chaque étape, lance npm run dev, regarde le résultat dans le navigateur, et demande des ajustements précis.
Les retours qui marchent sont concrets : "augmente l'espacement vertical du hero à py-24 sur desktop et py-12 sur mobile", "le H1 est trop petit par rapport au sous-titre, inverse la hiérarchie", "les boutons CTA n'ont pas le même radius que les cards, uniformise sur rounded-lg". Les retours qui ne marchent pas : "c'est pas joli", "fais plus moderne", "inspire-toi d'Apple".
Compte 4 à 6 heures pour les 4 pages si c'est ta première fois. La deuxième fois, tu descends à 2 heures.
Jour 3 : déploiement sur Vercel et mise en ligne du domaine
Jour 3 est le plus court. L'essentiel du travail est fait. Il reste trois étapes : pousser le code sur GitHub, connecter Vercel, brancher le domaine.
GitHub : crée un repo privé, suis les instructions pour git push ton projet local. Claude Code peut t'écrire les commandes exactes si tu es perdu, dis-lui simplement "donne-moi les commandes git pour pousser ce projet sur un nouveau repo GitHub nommé mon-site".
Vercel : va sur vercel.com, connecte-toi avec ton compte GitHub, clique "Import Project", choisis ton repo. Vercel détecte Next.js tout seul, lance le build. En 90 secondes, ton site est en ligne sur une URL en .vercel.app. Si tu as détaillé la procédure dans déployer un site Vercel avec Claude, tu connais la musique.
Domaine : achète-le chez OVH, Gandi ou Namecheap (compte 10 à 15 € pour un .fr, idem pour un .com). Dans Vercel, va dans Settings → Domains, ajoute ton domaine, Vercel te donne 2 enregistrements DNS à copier chez ton registrar. Compte 15 minutes à 2 heures de propagation. Le certificat SSL est automatique, tu n'as rien à faire.
Avant de célébrer : ajoute un favicon (Claude Code sait le faire à partir d'un simple PNG), vérifie les balises Open Graph (title et image qui s'affichent quand quelqu'un partage ton URL sur LinkedIn ou WhatsApp), et teste tout sur mobile. 60 % de tes visiteurs seront sur téléphone.
Les pièges qui transforment un bon site en site moche
Voici ce que je vois le plus souvent sur les sites générés en vitesse, et comment les éviter.
Le hero avec une stock photo floue générée par IA. Ces mains à 6 doigts qui tiennent un ordinateur, ces visages lissés qui n'existent pas. Contre-mesure : pas d'image du tout plutôt qu'une image moche. Un hero texte sur fond uni avec une bonne typographie fait largement le travail. Si tu veux une vraie photo, prends-la toi-même ou va sur Unsplash.
Quatre polices différentes. Une pour les titres, une pour le corps, une pour les boutons, une pour les prix. Signe qu'on a laissé Claude Code générer sans direction. Contre-mesure : fixe 2 polices max dans ton tailwind.config.js dès le début et refuse toute dérive.
Des boutons qui changent de style selon la page. Primary bleu en page d'accueil, dégradé violet en page contact, outline gris en services. Contre-mesure : définis un composant Button unique dans shadcn/ui et utilise-le partout.
Les textes copiés tels quels de la sortie Claude. On repère immédiatement les "Dans un monde en constante évolution" et les "solutions sur-mesure adaptées à vos besoins". Contre-mesure : relis chaque bloc de texte à voix haute. Si tu ne le dirais pas à un client en face-à-face, réécris-le.
L'absence de mentions légales. Obligation légale en France, même pour un vitrine. Contre-mesure : demande à Claude un template de mentions légales adapté à ton statut (micro-entreprise, SASU, SARL), vérifie avec ton comptable, publie une page /mentions-legales.
Et après : faire vivre le site
Ton site est en ligne. Deux chemins possibles. Soit tu le laisses tel quel et tu investis ton énergie ailleurs (publicité, prospection, service client), ce qui est parfaitement légitime pour beaucoup d'activités. Soit tu veux amener du trafic organique, et là tu branches un blog SEO sur le même repo. Même Next.js, même déploiement, zéro surcoût. La méthode complète est détaillée dans brancher un pipeline de blog SEO sur le site.
Le vrai bénéfice de cette approche se révèle 18 mois plus tard. Tu veux changer la couleur primaire ? 10 minutes dans un fichier. Tu veux ajouter une page tarifs ? Une conversation avec Claude Code. Tu veux migrer vers un autre hébergeur ? Le code t'appartient, tu es libre.
La méthode décrite ici fait partie du module "Claude + Site Web" de la formation Claude Mastery, où on la pratique en direct sur un projet réel avec feedback. Si tu veux structurer tout ça avec un accompagnement, découvre comment maîtriser Claude au quotidien en 5 semaines et 5 projets concrets, dont ton site vitrine livré en production.