C'est la lecon ou le vibe coding prend vraiment tout son sens. Tu vas construire une page d'accueil d'aspect professionnel sans ecrire une seule ligne de code a la main. A la place, tu decris ce que tu veux en langage courant, et Claude Code le construit pour toi.
L'art du prompting
La qualite de ton prompt determine directement la qualite du resultat. Voici la progression :
Mauvais prompt :
"Fais une landing page."
Claude construira quelque chose, mais ce ne sera pas ce que tu avais en tete. Trop vague.
Bon prompt :
"Create a landing page for Waitlist Wizard with a hero section that has a headline 'Be the first to know', a subtitle explaining we're building something new, and a centered email signup form with a blue submit button. Use a clean, modern design with lots of whitespace."
Mieux — Claude connait la structure, le contenu et l'esthetique generale.
Excellent prompt :
"Create a landing page for Waitlist Wizard with a hero section that has a headline 'Be the first to know', a subtitle 'We're building something special. Join the waitlist and be among the first to get access.' Centered email signup form with a navy blue (#1e3a5f) submit button. Use the Inter font from Google Fonts. The color scheme is navy blue (#1e3a5f) and white. Fully responsive. Clean, modern SaaS design with generous whitespace."
Maintenant Claude a les couleurs, les polices, le texte et la direction du design. Le resultat sera tres proche de ce que tu veux.
Concept
Le prompting est une competence, pas un talent. Tu t'ameliores avec la pratique. La cle est la specificite : sois clair sur ce que tu veux, inclus des details visuels (couleurs, tailles, disposition), et decris l'ambiance que tu recherches.Construire la section hero
Commencons a construire. Ouvre Claude Code dans ton dossier de projet :
Essaie
Dans Claude Code, tape ce prompt :"Replace the content of app/page.tsx with a landing page for Waitlist Wizard. Create a hero section with: - A headline: 'Be the First to Know' - A subtitle: 'We're building something special. Join the waitlist and be among the first to get access when we launch.' - A centered email signup form with an input field and a navy blue submit button - Clean, modern SaaS design with generous whitespace - Use navy blue (#1e3a5f) as the primary color and white background - The page should be fully responsive"
Claude generera le code et l'ecrira dans app/page.tsx. Verifie ton navigateur sur localhost:3000 — tu devrais voir ta page d'accueil !
Ajouter d'autres sections
Une bonne landing page a plus qu'un simple hero. Ajoutons des fonctionnalites et de la preuve sociale :
Essaie
"Add a features section below the hero with 3 cards in a row. Each card should have an icon, a title, and a short description. The three features are: 1. 'Lightning Fast' — 'Get notified instantly when we launch. No spam, ever.' 2. 'Early Access' — 'Be among the first to try new features before anyone else.' 3. 'Free Forever' — 'The waitlist is free. No credit card required.' Use subtle icons and keep the design consistent with the hero."Ensuite, ajoute de la preuve sociale :
Add a simple social proof section below features. Show "Join 2,000+ people
already on the waitlist" with a row of small avatar circles (use colored
circles as placeholders). Keep it minimal and trust-building.
Et un footer :
Add a simple footer with "Built by Waitlist Wizard" on the left and links
to "Privacy Policy" and "Terms of Service" on the right. Use a subtle
border-top to separate it from the content.
Rendre le tout responsive
"Responsive" signifie que ta page est belle sur telephones, tablettes et ordinateurs de bureau. Puisque nous utilisons Tailwind CSS, Claude gere deja la plupart de ca — mais verifions et corrigeons tout ce qui ne va pas.
Essaie
Dans ton navigateur, ouvre les Outils de developpement (F12 ou Cmd+Option+I sur Mac). Clique sur l'icone de basculement d'appareil (qui ressemble a un telephone et une tablette) pour previsualiser la vue mobile. Si quelque chose ne va pas, dis a Claude : "The features cards overlap on mobile. Make them stack vertically on screens smaller than 768px."Iterer avec Claude
C'est la boucle principale du vibe coding : decrire, revoir, affiner. Essaie ces ameliorations :
- "Make the headline bigger — 48px on desktop, 32px on mobile"
- "Change the submit button color to a gradient from #1e3a5f to #2d5a8e"
- "Add a subtle gradient to the hero background — white to light blue (#f0f7ff)"
- "The spacing between sections feels too tight. Add more padding — at least 80px between each section."
A chaque fois, Claude modifie le code, et ton navigateur se rafraichit instantanement. Cet aller-retour est rapide, amusant et etonnamment productif.
Astuce pro
Si Claude fait un changement qui ne te plait pas, dis-lui simplement : "Undo that last change" ou "Go back to how it was before." Tu peux aussi utiliser Git :git checkout -- app/page.tsx pour restaurer le fichier a son dernier etat commite.
Checkpoint Git
Ta landing page a fiere allure. C'est le moment de sauvegarder :
git add .
git commit -m "landing page complete with hero, features, social proof, and footer"
Note honnete
Tu viens de construire une landing page d'aspect professionnel sans ecrire de code a la main. Mais voici ce qui compte : tu comprends ce qui a ete construit. Tu sais qu'il y a une section hero, une section fonctionnalites, un footer. Tu connais les choix de couleurs et de disposition. Cette comprehension est ce qui separe le vibe coding du copier-coller aveugle. Tu diriges la construction — l'IA l'execute.Point cle
Tu viens de construire une landing page professionnelle en ayant une conversation avec l'IA. La competence n'est pas de taper du code — c'est de decrire ce que tu veux clairement et d'iterer sur le resultat. C'est ca le vibe coding.