Vibe coding : développer une application avec l'IA, de l'idée au déploiement

Le vibe coding est une manière de développer une application en décrivant ce que l’on veut en langage naturel, puis en laissant une intelligence artificielle écrire, modifier et corriger le code. Vous formulez le besoin, vous testez le résultat, vous demandez des ajustements : l’IA fait le reste. L’expression a été lancée début 2025 par Andrej Karpathy, cofondateur d’OpenAI, et s’est imposée en quelques mois dans le vocabulaire des développeurs comme des entrepreneurs.

Ce guide s’adresse aux créateurs de projets, indépendants, chefs de produit et développeurs qui veulent comprendre comment on construit réellement une application avec l’IA. Vous y trouverez les outils à connaître, une méthode en sept étapes de l’idée au déploiement, des prompts prêts à copier et les erreurs de sécurité qui transforment un prototype séduisant en application dangereuse.

Qu’est-ce que le vibe coding ?

Le vibe coding désigne le développement d’un logiciel piloté par des instructions en langage naturel adressées à une IA générative. La personne décrit l’objectif, juge le résultat et oriente les corrections ; le modèle produit le code, l’exécute parfois lui-même et propose des modifications. On passe du rôle de rédacteur de code à celui de chef de projet technique.

Dans sa version la plus « pure », on accepte le code sans le lire et on corrige en décrivant les bugs. Dans la pratique professionnelle, on parle plutôt de développement assisté par l’IA : l’IA écrit, mais l’humain garde la main sur l’architecture, la sécurité et la validation.

Trois évolutions techniques rendent cette approche possible :

• Des modèles capables de raisonner sur un projet entier, pas seulement de compléter une ligne.
• Des agents qui lisent les fichiers, lancent des commandes, exécutent les tests et corrigent leurs propres erreurs.
• Le protocole MCP (Model Context Protocol), un standard ouvert publié par Anthropic fin 2024, qui permet de connecter l’IA à des outils externes : base de données, dépôt GitHub, navigateur, documentation.

Pourquoi développer avec l’IA ? Usages et limites

Le vibe coding a fait tomber une barrière : il n’est plus nécessaire d’écrire du code pour obtenir une application qui fonctionne. Les usages les plus pertinents aujourd’hui :

• Prototyper une idée en quelques heures pour la montrer à des clients ou à des investisseurs.
• Créer un outil interne : un tableau de bord, un formulaire de demande, un annuaire, un suivi de stock.
• Automatiser une tâche métier avec un petit script ou une application web simple.
• Accélérer le travail d’un développeur : générer le code répétitif, écrire les tests, migrer une base de code, documenter.
• Apprendre à programmer en lisant le code produit et en demandant à l’IA de l’expliquer.

Les limites sont tout aussi réelles. Plus le projet grandit, plus l’IA risque de perdre le fil, de dupliquer du code ou de casser une fonctionnalité en en ajoutant une autre. Et un code qui fonctionne n’est pas forcément sûr. La méthode compte donc autant que l’outil.

Les outils du vibe coding : panorama et comparatif

Les outils se répartissent en deux grandes familles : les générateurs d’applications dans le navigateur, pensés pour aller vite sans rien installer, et les agents de code, qui travaillent dans votre environnement de développement.

Outil	Type	Environnement	Idéal pour
Bolt.new	Générateur d’apps full-stack	Navigateur	Prototyper et déployer vite, sans installation
Lovable	Générateur d’apps	Navigateur	Applications web avec interface soignée
Cursor	Éditeur de code avec IA intégrée	Application de bureau (dérivée de VS Code)	Projets structurés, règles de projet, contrôle fin du code
Claude Code	Agent de code d’Anthropic	Terminal, IDE, application de bureau	Tâches longues, gros contextes, MCP, workflow Git
Codex	Agent de code d’OpenAI	Terminal, extension VS Code, cloud	Délégation de tâches de code, fichiers agents.md
Google Antigravity	Environnement de développement orienté agents	Application de bureau	Orchestration d’agents, tests dans le navigateur
GitHub Copilot	Assistant et agent de code	VS Code et autres IDE, GitHub	Autocomplétion, agents et Pull Requests

Notre conseil : ne cherchez pas le « meilleur » outil dans l’absolu. Commencez par un générateur comme Bolt.new pour valider votre idée, puis passez à un éditeur comme Cursor ou à un agent comme Claude Code quand le projet mérite une base de code propre et versionnée. Si vous travaillez déjà dans l’écosystème OpenAI, notre guide sur OpenAI Codex détaille son fonctionnement.

Comment faire du vibe coding : les étapes pour créer une application

Prenons un exemple concret et réaliste : une application d’entraide entre voisins, où chacun crée un profil, publie des annonces de services et consulte celles des autres.

Étape 1 — Rédiger un mini cahier des charges

L’erreur classique consiste à ouvrir l’outil et taper « crée-moi une application d’entraide ». Le résultat sera générique. Prenez dix minutes pour écrire un document court que vous réutiliserez tout au long du projet :

Projet : application web d'entraide entre voisins.
Utilisateurs : habitants d'un quartier, non techniciens, majoritairement sur mobile.
Fonctionnalités de la version 1 :
1. Inscription et connexion par e-mail.
2. Profil : prénom, quartier, photo, compétences proposées.
3. Publication d'une annonce : titre, catégorie, description, disponibilité.
4. Liste des annonces filtrable par catégorie et par quartier.
5. Page de détail d'une annonce avec bouton de contact.
Hors périmètre de la V1 : paiement, messagerie en temps réel, notation.
Contraintes : interface en français, design sobre et lisible, responsive mobile.

Ce document fixe le périmètre. Chaque fois que l’IA s’égare, vous pourrez la ramener à ce cadre.

Étape 2 — Choisir sa stack technique

Même sans être développeur, vous devez savoir ce que l’IA va utiliser, pour pouvoir le demander explicitement et chercher de l’aide en cas de problème. Une stack très répandue en vibe coding :

• Interface : React avec TypeScript, Tailwind CSS pour le style et la bibliothèque de composants shadcn/ui pour un rendu professionnel.
• Base de données et authentification : Supabase, qui fournit une base PostgreSQL, la gestion des comptes et des règles d’accès.
• Hébergement : Vercel ou Netlify pour la mise en ligne.
• Versionnage : Git et GitHub.

Demander une stack connue a un avantage décisif : les modèles ont vu énormément de code de ce type, et vous trouverez de la documentation abondante.

Étape 3 — Générer un premier prototype

Ouvrez Bolt.new (ou Lovable) et collez un prompt qui reprend votre cahier des charges et votre stack :

Crée une application web d'entraide entre voisins en React + TypeScript,
avec Tailwind CSS et des composants shadcn/ui.
Commence uniquement par l'interface, avec des données fictives :
- une page d'accueil avec la liste des annonces et des filtres par catégorie ;
- une page de détail d'annonce ;
- un formulaire de création d'annonce.
Interface en français, design sobre (fond clair, une couleur d'accent verte),
parfaitement utilisable sur mobile.
Ne connecte pas encore de base de données.

Travailler d’abord l’interface avec des données fictives permet de valider le parcours utilisateur avant d’ajouter la complexité technique.

Étape 4 — Itérer par petites demandes

Une fois le prototype affiché, avancez par modifications courtes et ciblées : une demande, un test, une validation. Évitez les messages contenant dix changements à la fois.

Sur la page d'accueil, ajoute un champ de recherche au-dessus des filtres.
La recherche porte sur le titre et la description des annonces.
Ne modifie aucun autre composant.

La dernière phrase est importante : elle limite les effets de bord. Pensez aussi à utiliser l’historique de versions de l’outil pour revenir en arrière si une modification casse quelque chose.

Étape 5 — Connecter une base de données et sécuriser l’accès

Vient ensuite le passage aux vraies données. Avec Supabase, l’IA peut créer les tables (profils, annonces), l’authentification et les écrans correspondants. C’est l’étape où la vigilance est la plus nécessaire.

Connecte l'application à Supabase.
Crée les tables profiles et annonces avec les colonnes nécessaires.
Active la Row Level Security sur chaque table et écris les politiques suivantes :
- tout utilisateur connecté peut lire les annonces ;
- un utilisateur ne peut créer, modifier ou supprimer que ses propres annonces ;
- un utilisateur ne peut modifier que son propre profil.
Explique-moi chaque politique en une phrase avant de l'appliquer.

Demander une explication vous oblige à comprendre ce qui est mis en place, et révèle souvent une règle trop permissive.

Étape 6 — Passer dans un éditeur et versionner avec Git

Quand le projet dépasse quelques écrans, exportez le code vers GitHub et ouvrez-le dans Cursor, Claude Code, Codex ou Antigravity. Vous gagnez un historique précis, la possibilité de travailler sur des branches et un contrôle fin de chaque fichier.

Créez dès maintenant un fichier de règles que l’agent lira à chaque session : CLAUDE.md pour Claude Code, AGENTS.md pour Codex, les règles de projet dans Cursor. Exemple de contenu :

# Règles du projet
- Stack : React, TypeScript, Tailwind, shadcn/ui, Supabase.
- Toute l'interface est en français.
- Ne jamais écrire de clé secrète dans le code : utiliser les variables d'environnement.
- Toute nouvelle table Supabase doit avoir la Row Level Security activée.
- Avant une modification importante, proposer un plan et attendre validation.
- Après chaque fonctionnalité, lancer le build et corriger les erreurs.

Commitez après chaque étape validée. Si l’IA casse quelque chose, un simple retour au commit précédent règle le problème.

Étape 7 — Tester et déployer

Avant la mise en ligne, demandez un audit, puis testez vous-même comme le ferait un utilisateur malveillant : se connecter avec deux comptes, essayer de modifier l’annonce de l’autre, envoyer un formulaire vide.

Fais un audit de sécurité du projet avant mise en production.
Vérifie : clés ou secrets présents dans le code côté client,
politiques RLS de chaque table, validation des formulaires,
gestion des erreurs réseau. Présente les problèmes par ordre de gravité
avec la correction proposée, sans rien modifier pour l'instant.

Déployez ensuite sur Vercel ou via l’hébergement intégré de votre outil, en configurant les variables d’environnement dans l’interface de l’hébergeur, jamais dans le code.

Claude, MCP et agents : aller plus loin dans le développement avec l’IA

Le protocole MCP change la façon de travailler avec un agent de code. Un serveur MCP expose des outils à l’IA : lire le schéma d’une base Supabase, consulter un dépôt GitHub, piloter un navigateur pour tester l’application, interroger un modèle Power BI. Au lieu de copier-coller des informations dans la conversation, vous laissez l’agent aller les chercher.

Quelques usages concrets de Claude avec MCP dans un projet de vibe coding :

• Base de données : l’agent lit la structure réelle des tables avant d’écrire une requête, ce qui évite les colonnes inventées.
• Documentation : il consulte la documentation à jour d’une bibliothèque plutôt que de s’appuyer sur ses connaissances, parfois anciennes.
• Tests : il ouvre l’application dans un navigateur, clique, remplit les formulaires et signale ce qui ne fonctionne pas.

Les agents récents proposent aussi un mode plan : l’IA analyse la demande, liste les fichiers à modifier et les étapes, puis attend votre accord avant d’écrire le moindre code. Pour toute fonctionnalité qui touche plusieurs fichiers, c’est le réflexe à prendre. Les skills (compétences) et les hooks permettent ensuite de standardiser les tâches récurrentes, par exemple lancer automatiquement les tests après chaque modification.

Bonnes pratiques de prompt pour développer avec l’IA

La qualité du code généré dépend directement de la qualité des demandes. Les règles qui font la différence :

1. Donnez le contexte : qui sont les utilisateurs, quelle stack, quelles contraintes.
2. Une fonctionnalité par demande, testée avant de passer à la suivante.
3. Délimitez le périmètre : « ne modifie que ce composant », « ne touche pas à la base de données ».
4. Demandez un plan avant le code pour les changements importants.
5. Décrivez les bugs avec précision : ce que vous avez fait, ce que vous attendiez, ce qui s’est passé, le message d’erreur exact.
6. Faites expliquer : « explique-moi ce que fait ce fichier » est la meilleure façon d’apprendre et de repérer une incohérence.

Exemple de signalement de bug efficace :

Bug : quand je publie une annonce sans photo, la page devient blanche.
Étapes : connexion, clic sur « Publier », formulaire rempli sans image, validation.
Attendu : l'annonce est créée avec une image par défaut.
Erreur console : TypeError: Cannot read properties of null (reading 'url').
Corrige ce cas sans modifier le reste du formulaire.

Pour approfondir la rédaction de consignes efficaces, les principes décrits dans notre guide du prompt ChatGPT s’appliquent aussi aux outils de code.

Les erreurs fréquentes en vibe coding (et comment les éviter)

Erreur	Conséquence	Solution
Tout demander dans un seul prompt	Code confus, fonctionnalités à moitié faites	Découper en petites demandes testées une par une
Clé d’API secrète dans le code front	Clé visible par n’importe quel visiteur	Variables d’environnement et appels côté serveur
Tables sans règles d’accès	Données de tous les utilisateurs lisibles ou modifiables	Activer la Row Level Security et tester avec deux comptes
Pas de Git ni de points de sauvegarde	Impossible de revenir en arrière après une régression	Commit après chaque étape validée
Laisser l’IA changer de bibliothèque en cours de route	Projet incohérent, dépendances en double	Fixer la stack dans un fichier de règles
Accepter un correctif sans comprendre	Le même bug revient ailleurs	Demander la cause et l’explication avant la correction
Conversation trop longue	L’IA oublie les décisions et se contredit	Repartir d’une nouvelle session avec un résumé et le fichier de règles

En formation, le point qui surprend le plus est la sécurité : une application générée peut sembler parfaite à l’écran tout en laissant n’importe qui lire la base de données. Le test avec deux comptes différents est non négociable avant toute mise en ligne.

Comment apprendre le vibe coding et progresser ?

Le vibe coding s’apprend en construisant. Voici une progression réaliste :

1. Première semaine : un petit projet sur Bolt.new, uniquement l’interface, pour apprendre à formuler des demandes et à itérer.
2. Deuxième semaine : ajout d’une base Supabase, de l’authentification et des règles d’accès, puis déploiement.
3. Ensuite : Git et GitHub, puis passage à un éditeur (Cursor) ou à un agent (Claude Code, Codex) avec un fichier de règles.
4. Enfin : MCP, mode plan, skills et hooks pour industrialiser votre façon de travailler.

Pour être accompagné sur l’ensemble de ce parcours, la formation complète au vibe coding et au développement avec l’IA d’EspritAcadémique réunit environ dix heures et demie d’ateliers pratiques, sans prérequis en programmation. Elle aborde notamment :

• le prototypage d’applications full-stack dans le navigateur avec Bolt.new, jusqu’à la mise en production de la base de données ;
• la création d’une application complète avec Cursor, Supabase et shadcn/ui, puis son déploiement ;
• Claude Code dans VS Code, le mode plan, les permissions, les skills, les hooks et le protocole MCP ;
• les agents de code Codex et Google Antigravity, avec leurs fichiers de configuration ;
• Git, GitHub, les Pull Requests et GitHub Copilot pour travailler proprement.

En résumé

Le vibe coding permet de créer une application en décrivant ses besoins à une IA, mais il récompense la méthode plus que l’improvisation : un cahier des charges clair, une stack connue, des demandes courtes, Git à chaque étape et un contrôle systématique de la sécurité. Commencez par un générateur dans le navigateur pour valider votre idée, puis passez à un agent de code dès que le projet devient sérieux.