Vibe coder un site : une landing page en 10 prompts

Voici comment vibe coder un site : vous décrivez la page à un outil d'IA en langage courant, vous regardez ce qu'il construit, et vous l'orientez avec de courts prompts de suivi jusqu'à ce que ce soit juste, sans écrire de code vous-même. Ce qui sépare un résultat générique d'une page qui gagne des clients, c'est l'ordre des prompts. Voici une séquence de 10 prompts pour une landing page d'entreprise sur une seule page, avec ce qu'il faut vérifier après chacun.

Si l'idée du vibe coding est nouvelle pour vous, lisez d'abord ce qu'est le vibe coding. Ce guide, c'est la séance pratique.

Ce qu'il vous faut pour ce tutoriel de vibe coding

Tout au long de ce guide, j'utilise un exemple inventé : un service de nettoyage automobile à domicile qui veut plus de réservations de la part des automobilistes du coin. Remplacez-le par votre propre activité à chaque étape.

Créez un dossier vide comme detailing-landing, 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). Les prompts sont écrits pour Claude Code mais fonctionnent dans Lovable, Bolt ou v0 avec de petits changements de formulation.

Les prompts de la landing page, dans l'ordre

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.

Une bonne interview ressemble à ceci :

À 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.

Prompt 3 : construire la première version

Validez le plan, puis passez en mode Manual ou Accept edits, 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.

À vérifier : regardez-la d'abord à la largeur d'un téléphone. Chaque manque doit être un TODO évident, jamais un texte inventé.

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 ».

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. 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 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

Publier la page

• Construite avec Claude Code : glissez le dossier sur Vercel Drop, ou demandez à Claude Code de la déployer avec la CLI Vercel (fonctionnement de Vercel Drop). Le forfait 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 (tarifs Vercel).
• Construite dans Lovable : cliquez sur Publish en haut à droite, puis à nouveau sur Publish, 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), et un domaine personnalisé demande un forfait payant, à partir de Pro à 25 $ par mois (forfaits Lovable).
• Construite dans Bolt ou v0 : les deux ont leur propre processus de publication. Bolt héberge le site lui-même, et v0 déploie sur Vercel.

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

Quand la séance déraille

Pour plus de prompts prêts à l'emploi, voyez les prompts et modèles Claude Code. Les permissions, les modes et l'annulation sont expliqués plus en détail dans comment utiliser 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 lisez le vibe coding est-il dangereux 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.