Comment faire du vibe coding : guide pas-à-pas pour ton premier projet

Tu ouvres Lovable pour la première fois. L’écran est vide. Le curseur clignote.

Tu tapes… quoi, exactement ?

C’est la question que 90% des guides sur le vibe coding évitent. Ils t’expliquent le concept, te montrent les outils, te promettent que tu peux créer une application sans savoir coder. Personne ne te montre quoi écrire dans cette boîte de texte le jour 1.

Ce guide te montre comment faire du vibe coding concrètement. Les prompts exacts que j’utilise avec mes clients. Un premier projet guidé de A à Z. Les erreurs de vibe coder débutant qui font perdre des heures. Le principe est simple : tu décris ce que tu veux en langage naturel, une intelligence artificielle génère le code, tu testes, tu ajustes au fil des échanges. Pas besoin de connaître JavaScript - juste d’être clair sur ce que tu veux et de choisir le bon outil pour ton profil.

Si tu veux d’abord comprendre ce qu’est le vibe coding et d’où ça vient, commence par le guide complet. Ce tutoriel part du principe que tu sais déjà ce que c’est. Tu veux apprendre le vibe coding les mains dans le cambouis. Allons-y.

Faut-il savoir coder pour faire du vibe coding ?

Non. Et c’est tout l’intérêt du truc.

Mais “pas besoin de savoir coder” ne veut pas dire “pas besoin de comprendre quoi que ce soit.” Peter Yang, qui a passé plus de 50 heures à construire des apps en développement assisté par IA, le dit clairement : “Focus on understanding how the code works instead of learning how to code.”

Tu n’as pas besoin d’écrire du JavaScript. Mais comprendre ce que l’IA fait avec, au moins à grands traits - ça oui.

Ce que tu dois comprendre selon ton profil

7 concepts à comprendre - même sans coder

Imagine que tu construis “Calma”, une app de méditation (c’est le projet qu’on va réaliser ensemble dans ce guide). Chaque concept a une traduction concrète dans ton projet :

1. Frontend / Backend - Quand l’IA génère ta landing page Calma, l’interface que tu vois c’est le frontend. La logique qui enregistre les emails des inscrits, c’est le backend. Deux mondes séparés qui communiquent entre eux.

2. API - Si Calma doit envoyer un email de confirmation, c’est une API qui fait le lien entre ton app et un service d’envoi comme SendGrid ou Resend. Tu n’as pas besoin de la coder. Mais quand l’IA te dit “j’ai connecté l’API”, tu dois savoir ce que ça veut dire.

3. Base de données - Où les emails collectés sur Calma sont stockés. Supabase est le standard en vibe coding - pense à un tableur surpuissant auquel ton app se connecte.

4. Déploiement - Comment Calma passe de “ça marche sur mon écran” à une URL que n’importe qui peut visiter. Vercel ou Netlify le font en un clic.

5. Git / GitHub - Le “Ctrl+Z” de ton projet. Quand l’IA casse ta page en modifiant le formulaire, Git te permet de revenir à la version qui marchait.

6. Terminal / Console - L’endroit où lire les messages d’erreur. Tu les copieras dans l’IA pour qu’elle les corrige - c’est le workflow de debug de base.

7. Variables d’environnement - Où stocker tes clés API sans les exposer dans le code. L’IA t’expliquera comment créer un fichier .env le moment venu.

Pas la peine de maîtriser tout ça sur le bout des doigts. L’important, c’est de savoir que ça existe. Un avis sur la formation Ambient IT (1 800€, 3 jours) l’illustre bien : “Formation pas adaptée à des personnes qui ne codent pas, qui n’ont pas les bases du code.” Le vibe coding n’élimine pas le besoin de comprendre ce qui se passe. Juste celui d’écrire le code toi-même.

Le setup de ton premier jour

Pas besoin de claquer 200€ d’abonnements pour démarrer. Tout ce qu’il te faut le jour 1, c’est gratuit.

Checklist jour 1 (gratuit) :

• Un navigateur (Chrome ou Firefox)
• Un compte sur Lovable (free tier) ou Bolt.new (free tier)
• Un compte GitHub (gratuit) - pour sauvegarder ton code
• Un compte Vercel (gratuit) - pour mettre ton app en ligne
• ChatGPT ou Claude en version gratuite - pour planifier et debugger à côté

C’est tout. Tu es prêt.

Après 1-2 semaines (si tu accroches) :

• Cursor (20$/mois) si tu veux plus de contrôle
• Supabase (free tier) pour ajouter un backend et une base de données
• Un nom de domaine (~10€/an) si tu veux une vraie URL

Le choix de l’outil dépend de ton profil. Si tu n’as jamais touché à du code, commence avec Lovable ou Bolt.new - tout se passe dans le navigateur, zéro configuration. Le comparatif complet avec arbre de décision par profil est dans le guide outils de vibe coding 2026.

Le bon prompt, le mauvais prompt (et celui qui plante tout)

Le prompting, c’est 80% du résultat en vibe coding. L’outil, le framework, le plan - tout ça compte. Mais si tes prompts sont vagues, rien ne rattrapera le tir.

Un bon prompt, c’est la différence entre une app fonctionnelle en 2 heures et une matinée perdue à debugger du code incompréhensible. Niall McNulty, développeur et formateur, a une formule que j’aime bien : “You have to talk to the AI not like a senior to a senior, but like a senior to a junior, spelling out every requirement.”

Le mauvais prompt (et pourquoi il plante) :

Fais-moi une app de gestion de tâches.

Résultat : l’IA choisit une stack au hasard, invente des features que tu n’as pas demandées, et produit 500 lignes de code générique. Tu ne sais pas ce qu’elle a fait, ni pourquoi.

Le bon prompt :

Tech : React, Tailwind. Feature : formulaire d’ajout de tâche avec titre (obligatoire), description (optionnelle), priorité (dropdown : haute/moyenne/basse). Contrainte : pas de librairie externe pour le formulaire. Validation côté client. Edge case : afficher un message d’erreur si le titre est vide.

Résultat : code ciblé, prévisible, débugable.

La différence ? Contexte technique, scope limité, contraintes explicites. L’IA arrête de deviner. Elle exécute.

Un autre piège classique :

Rends ça plus joli.

“Plus joli” n’est pas mesurable. L’IA change des choses au hasard et casse souvent le layout existant. La version précise :

Change le fond de la hero section en dégradé de bleu foncé (#1a1a2e) vers noir. Augmente la taille du titre à 3rem. Ajoute 2rem de padding vertical.

Même intention. Résultat prévisible.

Quatre niveaux de prompt engineering

J’observe une progression chez tous les fondateurs que j’accompagne :

Niveau 1 - “Le Yolo” : un prompt vague, aucun contexte. “Fais-moi une app.” Résultat aléatoire.

Niveau 2 - “Le structuré” : 3 couches (stack technique / feature précise / edge cases). Résultat prévisible. C’est le niveau que tu vises en lisant ce guide.

Niveau 3 - “Le pilote” : fichiers de règles (.cursorrules), architecture documentée, l’IA explique son plan avant de coder.

Niveau 4 - “L’ingénieur agentique” : orchestration multi-agents, spec-driven development, CI/CD intégré. Ce n’est plus du vibe coding au sens strict - c’est la frontière vers laquelle l’écosystème évolue.

Le meta-prompt qui change tout

Peter Yang, ex-PM chez Roblox, a un prompt qu’il utilise plus que tous les autres :

Explain what you’ll do first and ask for my confirmation before coding.

Simple. Radical. L’IA planifie, tu valides, elle exécute. Tu restes aux commandes.

Son autre prompt fréquent :

Give me a few options, starting with the simplest first. Don’t code.

Ça empêche l’IA de foncer tête baissée dans la solution la plus complexe - son réflexe par défaut. Dans 9 cas sur 10, elle te propose un truc trop compliqué qu’il faut ensuite lui demander de simplifier.

Ton premier projet de A à Z (tutoriel guidé)

Assez de théorie. Ton premier projet : une landing page pour Calma, cette app de méditation fictive dont tu connais déjà les exemples. Pourquoi une landing page ? C’est le “Hello World” du vibe coding - le projet que tout le monde recommande pour débuter. Simple, visible, déployable en une session.

Ouvre ton outil (Lovable, Bolt.new, ou Cursor). Suis ces 4 étapes.

Étape 1 - Demande un plan avant le code

Tu es un product designer. Je veux créer une landing page pour une app de méditation appelée “Calma”. Donne-moi la structure de la page : les sections nécessaires, la hiérarchie visuelle, et les textes principaux. Ne code pas encore. Juste le plan.

L’IA te renvoie une structure : hero section, features, témoignages, CTA, footer. Tu valides ou tu ajustes. C’est la mini-spécification que tu aurais dû écrire toi-même - sauf que là, l’IA fait le gros du travail pour toi.

Étape 2 - Génère la version 1

Stack : React + Tailwind (si tu utilises Lovable ou Bolt, ils choisissent automatiquement). Génère la landing page “Calma” en suivant le plan ci-dessus. Palette bleu foncé (#1a1a2e) + blanc. Hero section avec titre accrocheur, sous-titre, et bouton “Essayer gratuitement”. Section features avec 3 cartes icônées. Section témoignages avec 2 avis. Footer simple.

Et… ta page existe. Deux minutes, pas plus, si tu es sur Lovable ou Bolt.

Étape 3 - Itère feature par feature

Ne demande pas tout d’un coup. Une chose à la fois.

Ajoute un formulaire d’inscription par email dans la hero section. Champ email + bouton “S’inscrire”. Affiche un message de confirmation quand l’utilisateur clique.

Puis :

Le bouton est trop petit sur mobile. Augmente sa taille à 100% de la largeur sur les écrans de moins de 768px.

Chaque prompt = un changement vérifiable. Tu testes après chacun. Si quelque chose casse, tu sais exactement quel prompt a causé le problème.

Ce qui va probablement mal se passer (et c’est normal)

Entre les étapes 2 et 4, quelque chose va coincer. C’est garanti.

L’IA va générer un design qui ne ressemble pas à ce que tu avais en tête. Un bouton va disparaître après une modification. Le formulaire va s’afficher deux fois. Une employée de Stack Overflow qui a construit son app en hackathon résume la bascule : “It felt like hitting one of those ‘That was easy!’ buttons from Staples. But it was too easy, and immediately upon handing the output to someone with technical expertise, the holes began to show.”

Ne panique pas. C’est le fonctionnement normal. Compte 5 à 15 prompts pour une feature simple et fonctionnelle, 20 à 50+ pour un MVP complet. C’est un marathon de sprints, pas un miracle en un prompt.

Étape 4 - Teste, debug, déploie

Tu vois une erreur dans la console ou sur l’écran ? Copie-colle le message d’erreur exactement comme il apparaît :

J’ai cette erreur dans la console : “TypeError: Cannot read properties of undefined (reading ‘map’)”. Explique-moi ce qui ne va pas en 3 phrases, puis propose un fix.

L’IA comprend le problème et te propose un correctif. Une fois que tout fonctionne, déploie. Sur Lovable ou Bolt, c’est un clic. Sur Cursor, connecte Vercel et pousse sur GitHub.

Ta landing page est en ligne. Tu l’as construite sans écrire une ligne de code. Un dev raconte son premier essai sur TechTarget : “Roughly 30 minutes after the installation of the IDE, a project I had wanted to build 3-4 times in the last two years was complete.” Ce sentiment, tu vas le reconnaître.

Les 5 erreurs qui plantent tous les débutants

Chaque erreur porte un nom. Les reconnaître, c’est déjà les éviter à moitié.

1. Le “Yolo Prompt” - Tu envoies un seul prompt massif pour tout le projet. L’IA fait des choix à ta place, mélange les concepts, produit du code spaghetti. Règle d’or : un prompt = une feature. Toujours.

2. Le “Dory Loop” - L’IA prétend corriger un bug mais le problème persiste. Tu re-promptes. Elle “corrige” à nouveau. Le bug est toujours là. Aatir Abdul Rauf, qui a documenté ses 50+ heures de vibe coding sur Substack, décrit le phénomène : “The AI keeps claiming they’ve fixed it, but the problem persists.” La sortie : ouvre un nouveau chat, recolle le contexte du projet et l’erreur exacte. L’IA a besoin de repartir de zéro.

3. Le “Scope Spiral” - “Je vais juste ajouter une petite chose…” Tu ajoutes une feature, puis une autre, puis une autre. Sans plan, sans spécification mise à jour. À un moment, tu ne sais plus ce qui marche, ce qui est cassé, et pourquoi. Le remède : mets à jour ta mini-spéc à chaque ajout. Ce qui n’est pas dans la spéc n’existe pas.

4. Le “Trust Everything” - Tu acceptes tout le code sans vérifier. Ça marche en démo. En production, les failles remontent. Un Redditor le résume sans détour : “If you’re not actually understanding what the AI is handing you, you’re basically running your app on wishful thinking and fairy dust.” Parade : teste les chemins critiques toi-même. Inscription, paiement, données sensibles.

5. Le “Wrong Order” - Tu demandes le frontend avant d’avoir le backend. L’IA génère une belle interface qui appelle une API qui n’existe pas encore. Le bon réflexe : structure d’abord (données, logique), interface ensuite.

Le point commun de ces 5 erreurs ? L’absence de planification. Aatir l’a compris après avoir reconstruit ses projets plusieurs fois : “The tool wasn’t the problem. It was I who skipped the most critical step: planning.”

Combien de temps pour devenir autonome ?

“C’est rapide” ne veut rien dire. Alors mettons des vrais chiffres sur la table.

Aatir Abdul Rauf le dit mieux que n’importe quelle courbe de progression : “Your first project will be messy. Your third will be decent. Your fifth will surprise you with its quality.”

Progression réaliste sur 30 jours

• Jours 1-2 : landing page avec Lovable ou Bolt.new. Tu découvres le prompting.
• Jours 3-7 : tu structures tes prompts (stack, feature, edge cases). Tu rencontres ton premier bug sérieux.
• Jours 8-14 : tu déploies quelque chose. Tu comprends la différence entre “ça marche chez moi” et “ça marche pour les autres”.
• Jours 15-30 : tu construis quelque chose d’utile pour toi ou pour des early users. C’est le moment où tu décides si tu continues seul ou si tu fais appel à un professionnel.

Formations structurées

Si tu préfères quelque chose de structuré, il y a du choix :

Mon conseil : méfie-toi des formations à 1 800€ qui ciblent en réalité des devs. Pour la plupart des fondateurs non-techniques, ce guide et un premier projet concret, ça suffit largement pour démarrer.

Le niveau suivant - rules files et structure de projet

Une fois que tu maîtrises le prompting de base, deux pratiques te feront passer un cap.

Les fichiers de règles. Sur Cursor, tu peux créer un fichier .cursorrules qui cadre le comportement de l’IA sur tout ton projet. Celles de Peter Yang sont un bon point de départ :

- Explain what you'll do first and ask for my confirmation before coding.
- Do the simple thing first.
- Use modules instead of just a single file.
- Do not write duplicate code - please look for existing solutions in the codebase.

Pour aller plus loin, PatrickJS maintient une bibliothèque communautaire de règles par framework (React, TailwindCSS, Next.js) - c’est la référence la plus partagée dans l’écosystème Cursor.

Git comme filet de sécurité. “Git saves more time than any prompting technique”, écrit Aatir Abdul Rauf. Quand l’IA casse quelque chose - et ça arrivera - Git te permet de revenir en arrière en une commande. GitHub Desktop rend ça accessible sans toucher au terminal.

Ces pratiques te rapprochent du “niveau 4” évoqué plus haut - piloter des agents IA autonomes sous ta supervision plutôt que de prompter ligne par ligne. Le guide pillar sur le vibe coding détaille le workflow complet et les garde-fous pour aller en production. Et si tu veux savoir ce que le vibe coding peut réellement construire - types d’apps, limites, coûts - c’est dans le guide créer une application avec l’IA.

Foire aux questions

Faut-il savoir coder pour faire du vibe coding ?

Non. Le vibe coding permet de créer des applications en décrivant ce qu’on veut en langage naturel, sans écrire de code. Ce qui aide, c’est de comprendre quelques concepts de base : ce qu’est une API, la différence frontend/backend, le fonctionnement d’une base de données. Peter Yang le résume bien : comprends comment le code fonctionne au lieu d’apprendre à coder. En pratique, un fondateur non-technique peut obtenir un prototype fonctionnel en 1 à 2 heures avec Lovable ou Bolt.new.

Par quoi commencer en vibe coding ?

Par un outil gratuit et un projet simple. Crée un compte sur Lovable ou Bolt.new (free tier), puis construis une landing page. C’est le projet que tout le monde recommande pour débuter : visible, simple, déployable en une session. Avant d’écrire ton premier prompt, demande à l’IA de planifier la structure. Ce réflexe - planifier avant de coder - t’évitera la majorité des erreurs de débutant. La checklist complète du setup jour 1 est dans ce guide.

Quels sont les meilleurs prompts pour débuter en vibe coding ?

Trois prompts qui fonctionnent à chaque fois. Le prompt de planification : décris ton projet et demande la structure, la stack, les fonctionnalités - sans coder encore. Le prompt de feature : donne le contexte technique, la feature précise et les edge cases. Le prompt de debug : colle l’erreur exacte et demande une explication en 3 phrases puis un fix. La clé : toujours donner du contexte technique et limiter le scope à un seul changement par prompt.

Le vibe coding est-il gratuit ?

Pour débuter, oui. Lovable, Bolt.new et Cursor proposent des plans gratuits largement suffisants pour un premier projet. Supabase (backend) et Vercel (déploiement) offrent aussi des plans gratuits. En usage régulier sur un vrai projet, le coût réaliste est de 20 à 50 dollars par mois : un abonnement outil plus l’hébergement. C’est une fraction du coût d’un développeur freelance ou d’une agence.

Combien de temps pour créer une app en vibe coding ?

Ça dépend de la complexité et de ton profil. Une landing page : 1 à 2 heures, même pour un débutant complet. Une app simple avec formulaire et base de données : quelques jours. Un MVP fonctionnel avec authentification et paiement : 2 à 4 semaines de pratique régulière. Ce qui fait la différence, ce n’est pas le temps passé à coder - c’est la clarté de tes specs.

Existe-t-il des formations en vibe coding en français ?

Oui. Codecademy propose un cours gratuit en anglais bien structuré. Microsoft Learn offre un module gratuit en français. CodeFast de Marc Lou cible les indie hackers et fondateurs (environ 250-500 dollars, en anglais). En France, LvlUp.fr à Marseille (2 jours, environ 1 200 euros) et l’École Cube (en ligne) proposent des formations dédiées. Attention : la formation Ambient IT (environ 1 800 euros) cible les développeurs, pas les débutants.

Peut-on gagner de l’argent avec le vibe coding ?

Oui. Des fondateurs génèrent plusieurs millions par an avec des produits entièrement vibe-codés. Des startups du batch Y Combinator Winter 2025 ont construit 95% de leur code avec l’IA. Mais ces succès combinent toujours le vibe coding avec une distribution solide : audience, marketing, positionnement. Le vibe coding accélère la construction. Il ne remplace pas le boulot de trouver des utilisateurs. Le guide vibe coding pour startups détaille les cas réels et les conditions de succès.