Un consultant en stratégie m'a montré son devis d'agence la semaine dernière : 3 200 € pour un site vitrine de 5 pages, livraison en 6 semaines, hébergement compris la première année. Il a refusé. Trois jours plus tard, il avait son site en ligne, fait avec Claude, code à lui, facture totale sous les 50 €. Pas un template Wix maquillé. Du vrai Next.js déployé sur Vercel, avec son ton, son vocabulaire métier, ses photos.
Ce n'est pas une histoire d'IA magique. C'est une histoire de méthode. Si tu sais ce que tu veux dire, comment le dire, et dans quel ordre prompter, tu n'as plus besoin d'agence pour un vitrine. Cet article te donne la séquence exacte. Pour le cadre plus large, va voir le guide complet pour apprendre Claude, et pour les bases techniques de l'outil, prends 10 minutes pour configurer Claude correctement avant de démarrer.
Pourquoi un site vitrine généré par IA bat un template Wix (et une agence à 3000 €)
Mettons les trois options sur la même table. Tu veux un site qui présente ton activité, capte des leads, et soit indexable correctement.
| Critère | Template Wix/Squarespace | Agence | Claude + Next.js |
|---|---|---|---|
| Coût première année | 200 à 400 € | 2 000 à 5 000 € | moins de 50 € |
| Temps de mise en ligne | 1 à 2 semaines | 4 à 8 semaines | 3 jours |
| Sur-mesure réel | limité au thème | oui | oui |
| Propriété du code | non, enfermé | oui (souvent WordPress) | oui, code à toi |
| Évolution future | dépend de la plateforme | nouveau devis | tu reprompts Claude |
Le truc qui change l'équation, ce n'est pas que Claude écrit du code à ta place. C'est que tu finis avec un projet Next.js dans un repo Git que tu possèdes. Demain, tu veux ajouter une page tarifs, refondre le hero, brancher un formulaire HubSpot ? Tu rouvres Claude Code, tu décris, c'est fait. Pas de migration, pas de "upgrade plan", pas de dépendance à une boîte qui peut fermer demain.
La différence ne tient pas à l'outil. Elle tient à la qualité du brief que tu donnes. Un site IA fait à l'arrache, on le repère à 10 km : gradient violet sur le hero, copywriting en "libère ton potentiel", trois colonnes avec des icônes Lucide. On y revient plus bas.
Ce qu'il faut préparer avant d'ouvrir Claude (jour 0)
80% de la qualité du site se joue avant le premier prompt. Si tu ouvres Claude sans avoir clarifié ce que tu vends et à qui, tu vas obtenir un site qui ressemble à ceux des autres. Voici ce que tu rassembles avant.
- Positionnement en une phrase : "J'aide [qui] à [résultat] grâce à [méthode]". Pas de "expert passionné". Du concret.
- 3 offres avec prix : nom, livrable, durée, tarif. Même si tu vends sur devis, donne une fourchette.
- 5 preuves sociales : noms de clients (avec leur accord), chiffres mesurables, témoignages d'au moins 3 lignes. Pas de "super expérience !".
- Direction artistique : 3 sites que tu aimes (Linear, Stripe, ton concurrent direct), pourquoi tu les aimes, palette de couleurs, typo souhaitée.
- Photos : tes vraies photos, ton vrai bureau, tes vrais clients. Pas de stock Unsplash.
- Nom de domaine : acheté chez OVH ou Namecheap, environ 12 €/an.
Une fois ce matériel rassemblé, tu ouvres Claude et tu colles ce brief de cadrage :
Voici mon positionnement, mes offres, mes preuves et ma direction artistique.
Avant de générer quoi que ce soit, pose-moi 10 questions pour clarifier
les zones floues. Ne propose rien tant que tu n'as pas mes réponses.Cette inversion (Claude t'interroge avant de produire) change le résultat. Tu sors avec un brief affiné, pas avec une première version générique que tu vas devoir réécrire trois fois.
Jour 1 : générer la structure, le contenu et le design avec Claude
Tu enchaînes trois étapes, dans cet ordre. Ne saute pas. Chaque étape valide la suivante.
1. Arborescence et sections
Premier prompt : "À partir de mon brief, propose-moi l'arborescence du site (pages) et pour chaque page, la liste des sections avec leur intention. Justifie chaque choix par mon positionnement." Pour un vitrine, tu auras typiquement : home, à propos, offres, cas clients, contact. Refuse les pages "blog" ou "ressources" si tu n'as pas le contenu pour les remplir.
2. Copywriting page par page
Pour chaque page, un prompt dédié. Exemple pour le hero :
Écris le hero de ma page d'accueil. Format : titre H1 (8 mots max),
sous-titre (20 mots max), bouton CTA principal, bouton secondaire.
Contraintes :
- aucun mot creux ("révolutionnaire", "unique", "passionné")
- le titre doit nommer le problème ou le résultat, pas mon offre
- le sous-titre dit à qui et comment, en une phrase
Propose 3 variantes, je choisis.Tu fais ça pour chaque section. Tu valides, tu reprompts, tu coupes. Compte 2 à 3 heures pour avoir tout le contenu d'un vitrine de 5 pages.
3. Direction artistique
Dernier bloc du jour 1 : tu demandes à Claude une charte visuelle exécutable. Palette HEX (5 couleurs), typographie (Google Fonts ou Vercel Fonts), style des composants (radius, ombres, animations). Pour aller plus loin sur ce volet, regarde comment travailler l'identité visuelle avec Claude en évitant le rendu attendu.
Jour 2 : coder le site avec Claude Code, Next.js et shadcn/ui
Maintenant tu passes à l'exécution technique. Le stack : Next.js (framework React de Vercel), Tailwind CSS, shadcn/ui (composants accessibles), TypeScript. Pourquoi ce stack plutôt que WordPress ? Performance native, SEO propre, déploiement gratuit sur Vercel, code lisible pour toi et pour Claude.
L'outil clé du jour 2 c'est Claude Code, l'agent CLI officiel d'Anthropic, qui lit, écrit et exécute du code directement dans tes dossiers locaux. Tu lui parles en français, il modifie tes fichiers, tu valides.
Séquence type :
- Init du projet : "Crée un projet Next.js 15 avec TypeScript, Tailwind, shadcn/ui installé. Configure la palette de la charte. Crée la structure de pages selon l'arborescence définie hier."
- Composant par composant : tu demandes le hero, tu regardes le rendu local (npm run dev), tu prends un screenshot, tu colles à Claude avec "trop chargé, supprime l'icône, agrandis le H1, ajoute du whitespace". Tu itères jusqu'à ce que ça te plaise.
- Sections suivantes : offres, témoignages, FAQ, footer. Une section à la fois. Toujours screenshot + feedback.
Ce que tu délègues : le code, l'intégration des composants shadcn, la mise en page Tailwind. Ce que tu gardes : la validation visuelle, les choix esthétiques, le refus du générique. Si Claude te propose un hero avec gradient violet et trois badges "AI-Powered", tu refuses et tu reformules.
Jour 3 : SEO technique, déploiement Vercel et mise en ligne
Dernière ligne droite. Tu boucles le SEO technique, tu déploies, tu vérifies.
Pour le SEO, tu demandes à Claude de générer les metadata page par page : title (60 caractères), description (155 caractères), Open Graph image, balisage Schema.org pour ton activité (LocalBusiness ou Organization). Tu fais générer aussi sitemap.xml et robots.txt. Si tu envisages d'ajouter un blog plus tard, jette un œil au pipeline SEO avec Claude pour cadrer la suite.
Déploiement : tu pousses ton repo sur GitHub, tu connectes le projet à Vercel, tu pointes ton domaine. Déployer un site Next.js sur Vercel prend littéralement 5 minutes pour un projet de cette taille, et c'est gratuit jusqu'à 100 Go de bande passante par mois.
Checklist avant publication :
- Lighthouse mobile : score performance > 90
- Toutes les pages s'affichent correctement sur iPhone
- Formulaire de contact branché (Formspree, Resend, ou webhook)
- Mentions légales et politique de confidentialité (Claude les rédige sur la base de ton activité)
- Cookie banner si tu utilises Google Analytics ou Plausible
- Favicon, OG image, manifest
- Liens internes testés
- 404 personnalisée
- Domaine en HTTPS, redirection www → non-www
- Soumission Google Search Console
Comment éviter le rendu "site IA générique"
Les sites bâclés à l'IA ont une signature visuelle qu'on apprend vite à reconnaître. Voici les 5 signaux et leur contre-mesure.
| Signal qui trahit | Contre-mesure |
|---|---|
| Gradient violet/rose sur le hero | Imposer ta palette dès le prompt, refuser tout gradient non demandé |
| Icônes Lucide partout (3 colonnes, 3 features) | Varier les layouts : asymétrie, blocs pleine largeur, vraies photos |
| Copywriting en "unlock your potential" | Imposer ton vocabulaire métier, bannir 20 mots interdits dans le prompt |
| Sections systématiquement en 3 colonnes | Demander 1 colonne, 2 colonnes asymétriques, témoignage pleine largeur |
| Photos stock floues type "équipe en réunion" | Tes vraies photos, ou pas de photo du tout, ou illustrations sur-mesure |
Le but n'est pas d'utiliser moins d'IA. C'est de mieux la diriger. Un bon prompt visuel ressemble à : "Hero pleine largeur sans gradient, fond ivoire #F5F1EA, H1 en Söhne 56px aligné à gauche, photo carrée à droite (mon portrait), pas de badge, pas d'icône." Précis, contraignant, traçable.
Combien ça coûte vraiment et quand passer à autre chose
Budget réel pour un site vitrine sur 12 mois :
- Abonnement Claude Pro : environ 20 €/mois (utilisé pendant 1 mois pour le projet, soit 20 € si tu te désabonnes après)
- Nom de domaine : environ 12 €/an
- Vercel : 0 € (gratuit pour un vitrine)
- Resend ou Formspree pour le formulaire : 0 € au démarrage
Total réaliste : moins de 50 € la première année, contre 200 à 400 € pour un Wix ou 2 000 à 5 000 € pour une agence. Et tu peux garder l'abonnement Claude pour itérer sur le site, écrire ton blog, gérer ton marketing. Pour choisir le bon plan, regarde comment choisir entre Claude Pro, Max et Team.
Quand cette méthode 3 jours ne suffit plus :
- SaaS avec auth et base de données : tu passes sur une architecture full-stack, plus de complexité, compte 2 à 4 semaines.
- E-commerce avec catalogue produits : Shopify ou un stack dédié, pas Next.js from scratch.
- Multi-langue, multi-tenant, dashboard utilisateurs : le vitrine n'est plus le bon format.
Pour ces cas plus avancés, le guide complet pour créer un site web avec Claude détaille les arbitrages selon la complexité du projet.
Passer à la pratique
Tu peux ouvrir Claude ce soir, rassembler ton positionnement, tes offres et tes preuves, et avoir un site en ligne vendredi. Le blocage n'est pas technique, il est dans la préparation et dans la rigueur du prompting. Si tu veux apprendre la méthode complète, du brief à l'itération continue, sans tâtonner trois mois pour trouver les bons réflexes, la formation Maîtriser Claude au quotidien couvre exactement ce workflow sur 9 semaines, avec un accompagnement de cohorte et des livrables qui incluent ton propre site vitrine déployé en production.