Vibe coder un site : une landing page en 10 prompts

Vibe coder un site avec Claude : ce qu'il vous faut

Tout au long de ce guide, j'utilise un exemple inventé que nous avons vraiment construit en l'écrivant : Sunrise Yoga, un petit studio qui veut plus de premières réservations de la part de personnes qui travaillent assises à un bureau. Remplacez-le par votre propre activité à chaque étape. La même séquence fonctionne pour un site portfolio ou personnel si vous remplacez la réservation par l'action unique que vous voulez.

Créez un dossier vide comme studio-site, mettez votre logo et vos photos dans un dossier images à l'intérieur, et ouvrez le dossier dans l'onglet Code (le guide de démarrage de l'application de bureau montre où tout se trouve). C'est toute la préparation nécessaire pour créer un site d'entreprise avec l'IA sans coder.

Les prompts sont écrits pour Claude Code mais fonctionnent dans Lovable, Bolt ou v0 avec de petits changements de formulation, et dans d'autres agents de code comme OpenAI Codex, Cursor ou Google Antigravity, où seuls les noms des modes changent. Pour comparer ces outils, voyez les meilleurs outils de vibe coding, ou Claude Code vs Cursor si vous hésitez entre un agent et un éditeur de code IA.

Peut-on vibe coder un site gratuitement ?

Oui, pour un brouillon. Lovable, Bolt et v0 ont tous des forfaits gratuits, mais chacun plafonne ce que vous pouvez construire par jour ou par mois, et une page sur votre propre domaine demande un forfait payant. Claude Code n'a pas d'offre gratuite : il est inclus dans Claude Pro (20 $ par mois, ou 17 $ par mois en facturation annuelle) et les forfaits supérieurs (tarifs Claude).

Les prix viennent des pages officielles de Lovable, Bolt, v0 et Vercel, vérifiées en octobre 2026.

Jusqu'où va un forfait gratuit ? La page tarifs de Lovable indique 1,70 crédit pour « Build me a landing page, use images » et des petites modifications à partir d'un demi-crédit, donc les 5 crédits quotidiens couvrent un premier jet et quelques corrections. Étalez les dix prompts sur quelques jours, ou passez au payant la semaine avant le lancement.

Les prompts de la landing page en vibe coding, dans l'ordre

Ces prompts de landing page pour Claude sont faits pour être envoyés un par un. Collez-en un, lisez la réponse, et ne passez au suivant que lorsque la vérification en dessous est validée.

Notre guide du mode plan de Claude Code détaille les options de validation et les autres modes.

Prompt 1 : lui faire mener l'interview

Je veux une landing page d'une page pour mon activité. Avant de planifier
quoi que ce soit, interviewe-moi. Pose jusqu'à 8 questions, une à la fois, sur
mes clients, mon offre, ce qui nous distingue, les objections que les gens
soulèvent, et l'action unique que je veux que les visiteurs fassent.

Nous avons lancé pour de vrai chaque prompt de ce guide, dans Claude Code, pour un studio fictif appelé Sunrise Yoga. Voici comment le prompt 1 a commencé :

À vérifier : les questions doivent porter sur vos clients, pas sur la technique. Répondez en détail, car vos réponses deviennent la matière première de chaque section.

Prompt 2 : valider la structure

À partir de mes réponses, propose la structure de la page de haut en bas.
Pour chaque section, donne son rôle, un titre provisoire et la preuve qui
y va. Un seul objectif : obtenir une réservation. Pas encore de code.

À vérifier : pour une entreprise de services, un ordre logique est un titre avec un bouton de réservation, ce que l'on obtient, les preuves, le fonctionnement, un prix de départ, une FAQ qui répond aux objections et un dernier appel à l'action. Le bouton de réservation doit apparaître plus d'une fois, et toute section qui ne sert pas l'objectif unique doit disparaître.

Dans notre essai, il a aussi regardé les photos avant de planifier, et repéré un problème qu'une personne raterait facilement :

Prompt 3 : construire la première version

Validez le plan avec Yes, manually approve edits : Claude Code passe en mode Manual, et vous validez chaque modification. Dans l'application de bureau, après validation, passez le sélecteur sur Manual ou Accept edits (les modifications de fichiers passent, les autres commandes demandent toujours), car le mode Plan ne modifie pas les fichiers.

Construis le plan validé dans index.html avec un styles.css séparé,
en pensant d'abord au mobile. Utilise les photos du dossier images. Partout
où un vrai contenu manque, écris TODO plus une courte note au lieu
d'inventer. Ouvre ensuite la page dans le panneau Browser pour que je la voie.

En mode Manual, Claude Code montre chaque fichier avant de l'écrire et attend votre réponse :

Environ trois minutes plus tard, la première version était prête. La voici à la largeur d'un téléphone, avec le bouton de réservation fixé en bas de l'écran :

La partie la plus utile était son message de fin. Au lieu d'inventer des avis, une adresse ou des horaires de cours, il a listé chaque manque à combler :

À vérifier : regardez-la d'abord à la largeur d'un téléphone. Chaque manque doit être un TODO évident, jamais un texte inventé. Dans l'onglet Code, la page s'ouvre dans le panneau Browser ; si ce n'est pas le cas, cliquez sur le chemin index.html dans le chat.

Prompt 4 : écrire les vrais textes

Réécris tous les textes pour un [TYPE DE CLIENT] pressé qui lit sur son téléphone.
Titre : ce qu'il obtient, en moins de 10 mots. Utilise mes réponses à l'interview,
pas des formules génériques. Phrases courtes. Si une affirmation a besoin d'un chiffre
ou d'un avis que je ne t'ai pas donné, garde un TODO et liste-le pour moi.

À vérifier : lisez-les à voix haute. Supprimez tout ce qu'un concurrent pourrait coller tel quel sur son propre site.

Prompt 5 : lui donner l'allure de votre marque

Applique notre marque : couleur principale [CODE HEX], couleur d'accent [CODE HEX], logo dans
images/logo.png. L'ambiance doit être [CALME ET HAUT DE GAMME, OU VIVE].
Texte grand et lisible, espacement généreux, deux polices maximum. Crée deux
versions de la section du haut dans des fichiers séparés pour que je les compare.

À vérifier : choisissez-en une et dites pourquoi. « La deuxième, parce que la photo montre la camionnette et que le bouton ressort » apprend beaucoup plus à l'IA que « la deuxième ».

Pourquoi les sites vibe codés se ressemblent-ils ?

Parce que sans consigne précise, les outils d'IA retombent sur les mises en page qu'ils ont vues le plus souvent : un titre centré sur un dégradé, une rangée de cartes à icônes et un bandeau de témoignages générique. Vos propres photos, des couleurs de marque fixes et un site de référence avec une raison concrète (« une grande photo avec le bouton par-dessus ») sont ce qui casse ce schéma. Si le brouillon ressemble encore à un modèle, envoyez ceci :

Supprime les dégradés décoratifs, les icônes génériques et les formes de remplissage.
Utilise nos vraies photos en grand, une seule couleur d'accent et plus d'espace blanc.
Dis-moi ensuite quelle section ressemble encore à un modèle, et pourquoi.

Prompt 6 : connecter les réservations et les prospects

Fais pointer chaque bouton de réservation vers ma page de réservation : [URL DE LA PAGE DE RÉSERVATION].
Ajoute le formulaire d'inscription ci-dessous, issu de mon [OUTIL D'E-MAIL OU DE FORMULAIRE], à la section
contact. Ne construis pas ton propre backend de formulaire et ne stocke aucune donnée toi-même.
[COLLEZ LE CODE D'INTÉGRATION ICI]

Prompt 7 : passe mobile et accessibilité

Vérifie la page pour les problèmes de mobile et d'accessibilité et corrige-les :
contraste du texte trop faible, zones tactiles trop petites, textes alternatifs manquants,
titres dans le désordre, champs de formulaire sans libellé, et tout ce qui ne peut pas
s'utiliser au clavier. Liste ce que tu as changé.

À vérifier : le texte courant doit atteindre un rapport de contraste d'au moins 4,5 pour 1 avec son fond, le niveau WCAG AA pour le texte normal. Vérifiez vous-même n'importe quelle paire de couleurs en collant les deux codes hexadécimaux dans le vérificateur de contraste gratuit de WebAIM :

Essayez ensuite de réserver sur votre propre téléphone avec un seul pouce.

Prompt 8 : vitesse et bases du référencement

Rends la page rapide et trouvable : redimensionne et compresse chaque image,
charge en différé les images sous le premier écran, et ajoute un titre, une meta
description, des balises Open Graph, un favicon et des données structurées
LocalBusiness. Utilise uniquement les faits que je t'ai donnés.

Le chargement différé (lazy loading) signifie que les images ne se chargent que lorsque le visiteur s'en approche en faisant défiler, et les balises Open Graph contrôlent l'aperçu de votre lien quand quelqu'un le partage dans une messagerie. La configuration complète du référencement, y compris votre propre domaine et Google Search Console, se trouve dans créer un site web avec l'IA.

Prompt 9 : lui faire relire son propre travail

Relis cette page deux fois : d'abord comme un [TYPE DE CLIENT] sceptique, puis
comme un relecteur web exigeant. Liste chaque problème : textes peu clairs, informations
manquantes, liens cassés, TODO restants, affirmations sans preuve et problèmes
de mise en page à 360px de large. Classe-les par impact. Ne corrige rien pour l'instant.

À vérifier : corrigez les premiers points un par message. Relire sous un autre angle que celui de la construction fait ressortir des problèmes que la construction a manqués.

Prompt 10 : préparer le lancement

Prépare le lancement : supprime les fichiers inutilisés, vérifie chaque lien, ajoute une courte
page de confidentialité qui explique ce que le formulaire collecte et où ça va,
et écris un README qui explique comment changer les prix, les horaires et le numéro
de téléphone. Enregistre tout dans Git avec un message clair.

L'IA peut rédiger la page de confidentialité, mais elle ne peut pas en assumer la responsabilité juridique. Faites vérifier le texte au regard des règles du pays de vos clients.

La check-list avant lancement

Comment publier un site vibe codé

Publier, c'est placer vos fichiers chez un hébergeur pour que n'importe qui puisse ouvrir la page à une adresse publique. La façon de faire dépend de l'outil avec lequel vous l'avez construite :

• Construite avec Claude Code : allez sur vercel.com/drop, glissez le dossier de votre projet sur la page, choisissez une équipe et un nom de projet, et cliquez sur Deploy (fonctionnement de Vercel Drop). Vous pouvez aussi demander à Claude Code de la déployer avec la CLI Vercel. Le forfait gratuit Hobby de Vercel est réservé à un usage personnel et non commercial, donc une landing page d'entreprise relève de Pro à 20 $ par mois et par siège développeur.
• Construite dans Lovable : cliquez sur Publish en haut à droite, à côté de Share, puis à nouveau sur Publish. Lovable lance une rapide analyse de sécurité et la page est en ligne sur une adresse lovable.app. Les modifications suivantes ne passent en ligne que lorsque vous cliquez sur Publish changes (documentation de publication Lovable).
• Construite dans Bolt ou v0 : Bolt héberge le site lui-même, avec la marque Bolt sur le forfait gratuit, et v0 déploie sur Vercel, où la même règle Hobby et Pro s'applique.

Connecter votre propre domaine est expliqué pas à pas dans le guide de création de site cité plus haut. Une fois la page en ligne, partagez le lien avec quelques personnes qui correspondent à votre client et regardez-les l'utiliser sans les aider.

Problèmes fréquents et solutions

Pour plus de prompts prêts à l'emploi, voyez les prompts et modèles Claude Code.

Que faire ensuite

Lancez les prompts 1 et 2 aujourd'hui. Ils ne demandent que l'onglet Code et votre connaissance de vos clients, et ils montrent vite si votre offre est claire.

Construisez et publiez un aperçu avant d'acheter un domaine ou de dépenser quoi que ce soit en publicité, et passez la check-list de sécurité citée plus haut avant d'ajouter des connexions ou de stocker des données clients. La formation Builders approfondit la psychologie client derrière les landing pages et la connexion de la capture de prospects et des paiements.