Vibe coding et agents IA : créer, déployer et présenter ses projets

Objectifs pratiques

À la fin de cette leçon (20 minutes), vous saurez expliquer le vibe coding en deux phrases, citer ses forces et ses limites, et décider en moins de cinq minutes si une idée de projet s'y prête. C'est la base pour construire votre première application en ligne, puis présenter vos projets à des prospects avec des promesses honnêtes.

Pourquoi c'est utile pour votre objectif

Votre but est business : livrer des mini-projets, gagner du temps et vendre des services basés sur l'IA. Un client sérieux posera tôt la question : "Est-ce fiable ?". Si vous savez dire ce que le vibe coding fait bien (prototype rapide, outil interne simple) et ce qu'il fait mal (système critique, paiement, données sensibles sans revue), vous gagnez en crédibilité et vous évitez les promesses intenables.

Définition simple

Le vibe coding consiste à décrire en langage naturel ce que l'on veut obtenir, laisser une IA de code générer l'application, puis tester, corriger et relancer par itérations. Vous pilotez le résultat et vous n'écrivez pas chaque ligne. Vous restez responsable de ce qui est livré : l'IA propose, vous vérifiez.

Forces

• Vitesse : un prototype fonctionnel en quelques heures au lieu de quelques jours.
• Accessibilité : un profil non développeur peut produire un premier outil.
• Test d'idées : on valide un besoin avec un vrai utilisateur avant d'investir.
• Tâches répétitives : formulaires, tableaux de bord simples, pages de présentation, petits calculateurs.

Limites

• Qualité variable : le code peut marcher à l'écran et cacher des bugs.
• Sécurité : clés API exposées, absence de validation des entrées, mauvaise gestion des accès.
• Maintenance : sans structure ni versionnage, le projet devient fragile après quelques modifications.
• Spécifications floues = résultat flou : l'IA comble les trous avec ses propres hypothèses.

Méthode pas à pas : décider si le vibe coding convient

1. Écrivez l'idée en une phrase : "Un outil qui permet à [cible] de [action] pour [bénéfice chiffré]."
2. Évaluez le risque : l'outil manipule-t-il de l'argent, des données personnelles ou des décisions importantes ? Si oui, prudence et revue humaine obligatoire.
3. Évaluez la complexité : moins de 3 écrans et 1 fonction principale ? Bon candidat pour un premier projet.
4. Définissez un test de réussite observable : par exemple "saisir 5 cas et obtenir le bon résultat 5 fois".
5. Fixez une limite de temps (par exemple 3 sessions de 20 minutes) pour obtenir une première version.
6. Décidez : feu vert (prototype), orange (prototype puis revue par un développeur) ou rouge (ne pas utiliser seul).

Exemple concret

Une coiffeuse perd environ 30 minutes par jour à répondre aux mêmes demandes de rendez-vous. Idée : une page web avec formulaire de demande et message de confirmation automatique. Risque faible (pas de paiement), 2 écrans, test clair. Verdict : vert. À l'inverse, une application de paiement en ligne avec stockage de cartes bancaires est rouge : le risque de sécurité exige un prestataire spécialisé.

Erreurs à éviter

• Accepter le code sans le tester sur des cas réels et des cas limites.
• Demander "fais-moi une app complète" au lieu d'avancer par petites étapes.
• Coller des clés secrètes ou des données clients dans un prompt ou dans le code public.
• Promettre à un client un résultat sans avoir mesuré le temps gagné.
• Ne pas sauvegarder de versions : une modification peut casser ce qui marchait.

À faire maintenant

Remplissez un tableau de diagnostic pour 3 idées de projets : idée en une phrase, cible, risque (faible/moyen/élevé), nombre d'écrans, test de réussite, verdict (vert/orange/rouge). Gardez-le : il alimentera votre portfolio et vos futures offres.

Objectifs pratiques

À la fin de cette leçon, vous saurez choisir en 20 minutes le bon type d'outil (éditeur IA, plateforme d'agents ou automatisation) selon votre budget, votre besoin et votre niveau. Cette décision évite de perdre des semaines à tester dix outils. Elle vous rapproche de votre première application en ligne et de vos trois mini-projets à montrer à des prospects.

Pourquoi c'est utile pour votre objectif

Votre objectif est business : livrer vite, montrer un résultat et vendre. Un mauvais choix d'outil coûte du temps et de l'argent, et rend la démo fragile. Un bon choix vous permet de livrer un projet par semaine, de mesurer le temps gagné et de garder votre sécurité actuelle, car vous démarrez avec un budget proche de zéro.

Les trois familles d'outils

1. Éditeur IA (créer une application)

Vous décrivez l'application en langage naturel, l'IA génère le code, vous testez et corrigez. Utile pour : un site, un formulaire, un petit tableau de bord, un outil interne. Complexité : moyenne. Cherchez un éditeur qui permet de prévisualiser, de versionner (Git) et de déployer en un clic.

2. Plateforme d'agents (déléguer une tâche à une IA)

Un agent reçoit des instructions, utilise des outils (recherche, email, tableur, base de connaissances) et exécute une tâche métier répétitive, avec des garde-fous. Utile pour : trier des demandes clients, répondre aux questions fréquentes, préparer des comptes rendus. Complexité : moyenne à élevée.

3. Automatisation (relier des services)

Des scénarios du type « quand X arrive, fais Y » entre vos outils (formulaire, tableur, messagerie). Utile pour : envoyer un message, enregistrer une ligne, notifier. Complexité : faible. Souvent la solution la plus rapide et la plus fiable.

Méthode pas à pas

1. Formulez le besoin en une phrase : « Pour [client cible], je veux [résultat] en [délai/chiffre] ». Exemple : réduire de 2 h à 20 min le tri hebdomadaire des demandes.
2. Classez la tâche : produit à utiliser par des gens (éditeur IA) ; tâche qui demande du jugement et des outils (agent) ; enchaînement fixe de règles (automatisation).
3. Fixez un budget plafond : par exemple 0 à 30 € par mois pour le premier projet. Commencez par les offres gratuites.
4. Notez votre niveau : débutant = privilégiez l'interface visuelle, les modèles prêts à l'emploi et une bonne documentation.
5. Notez 3 critères éliminatoires : déploiement en ligne possible, export du code ou des données, contrôle des accès et des clés secrètes.
6. Testez 2 outils maximum pendant 20 minutes chacun sur le même mini-cas, puis comparez : temps passé, qualité du résultat, nombre d'erreurs.
7. Choisissez et figez l'outil pour 7 jours. Ne changez pas avant d'avoir livré.

Exemple concret

Une petite agence immobilière reçoit 40 demandes par semaine par formulaire. Le tri manuel prend 2 h. Option automatisation : le formulaire alimente un tableur et envoie un accusé de réception (1 h de mise en place, gratuit). Option agent : un agent classe chaque demande (achat, location, estimation) et propose une réponse, qu'un humain valide. Option éditeur IA : une page de qualification personnalisée. Choix recommandé : automatisation d'abord, puis agent en ajout, car le besoin est répétitif et le risque faible. Bénéfice chiffré à présenter : 2 h économisées par semaine, soit environ 8 h par mois.

Erreurs à éviter

• Collectionner les outils au lieu de livrer un projet.
• Choisir un agent alors qu'une simple automatisation suffit.
• Ignorer l'export des données : vous seriez bloqué chez un fournisseur.
• Mettre des clés d'API ou des données clients dans un code public.
• Pour créer des images, logos, vidéos ou voix de vos projets, utiliser Blemama Studio (blemama.com/studio) ou Deepnia (deepnia.com) plutôt que multiplier les outils.

À faire maintenant

Remplissez un tableau de décision avec une ligne par option (éditeur IA, agent, automatisation) et ces colonnes : besoin, coût mensuel, niveau de difficulté (1 à 5), délai pour une démo, risque. Terminez par une phrase : « Je choisis [outil] pour [projet] pendant 7 jours. »

Objectifs pratiques

À la fin de cette leçon, vous saurez transformer une idée floue (« une petite appli pour gérer mes devis ») en un prompt structuré en quatre blocs : contexte, objectif, contraintes, critères de réussite. C'est la compétence qui vous rapproche de votre objectif : construire une première application en ligne sans écrire tout le code, et obtenir un résultat que vous pourrez montrer à un prospect.

Pourquoi c'est utile pour votre objectif

Une IA de code ne devine pas ce que vous avez en tête. Un prompt vague produit une application générique, pleine de fonctions inutiles, qu'il faut corriger pendant des heures. Avec 20 minutes par jour, vous ne pouvez pas vous permettre ces allers-retours. Un prompt précis réduit le nombre d'itérations, rend le débogage plus simple et vous donne un projet documenté pour votre portfolio. C'est aussi la base pour vendre : si vous savez décrire clairement le problème et le résultat attendu, vous savez le présenter à un client.

Méthode pas à pas

1. Écrivez l'idée en une phrase brute. Exemple : « Je veux un outil pour suivre mes devis ». Ne cherchez pas la perfection.
2. Bloc Contexte. Qui utilise l'outil, dans quelle situation, avec quel niveau technique ? Exemple : « Je suis artisan indépendant, je fais 10 devis par semaine dans un tableur, je suis débutant en code. »
3. Bloc Objectif. Une seule action principale, formulée avec un verbe. Exemple : « Créer une page web où je saisis un devis (client, montant, date) et vois son statut. »
4. Bloc Contraintes. Technologies, périmètre, sécurité et limites. Exemple : « Une seule page, HTML/JavaScript simple, données stockées dans le navigateur, pas de connexion utilisateur, pas de clé secrète dans le code, interface en français. »
5. Bloc Critères de réussite. Des tests observables. Exemple : « Je peux ajouter un devis, le passer en « envoyé » ou « signé », filtrer par statut, et les données restent après rechargement. »
6. Demandez un plan avant le code. Ajoutez : « Avant de coder, résume ta compréhension et liste les fichiers que tu vas créer. Pose-moi jusqu'à 3 questions si quelque chose manque. »
7. Itérez par petites étapes. Faites générer la fonction 1, testez-la, puis passez à la suivante. Gardez chaque version (copie ou historique de versions).

Exemple concret

Prompt flou : « Fais-moi une appli de devis. » Résultat probable : un logiciel complexe avec comptes, paiements et base de données que vous n'avez pas demandés.

Prompt structuré : « Contexte : artisan indépendant, débutant. Objectif : page unique pour enregistrer et suivre des devis. Contraintes : HTML/CSS/JS, stockage local, aucun mot de passe, français, design sobre. Critères de réussite : ajout, changement de statut, filtre, persistance après rechargement, utilisable sur mobile. Avant de coder, reformule et pose-moi tes questions. » L'IA livre une première version ciblée, que vous testez avec 3 devis fictifs en 5 minutes.

Erreurs à éviter

• Demander toute l'application d'un coup au lieu de procéder par étapes.
• Oublier les critères de réussite : vous ne saurez pas si le résultat est bon.
• Ne pas préciser les contraintes de sécurité : interdisez les clés ou mots de passe écrits en clair dans le code.
• Accepter le code sans le tester : vérifiez chaque critère à la main.
• Écraser la version qui marchait : sauvegardez avant chaque modification.

À faire maintenant

Choisissez une tâche répétitive de votre métier (ou d'un client potentiel) et rédigez votre prompt en quatre blocs, plus la demande de plan et de questions. Testez-le dans votre éditeur IA, puis notez le résultat obtenu et ce que vous avez corrigé. Ce document sera la première pièce de votre portfolio.

Objectifs pratiques

À la fin de cette leçon de 20 minutes, vous saurez faire passer une petite application du prototype à une URL publique, sans écrire tout le code vous-même. C'est la brique centrale de votre objectif : livrer un premier projet montrable à un prospect, puis le réutiliser dans votre portfolio de trois mini-projets.

Pourquoi c'est utile pour votre objectif

Un prototype qui reste sur votre ordinateur ne se vend pas. Un lien en ligne que l'on ouvre en 10 secondes permet de faire une démonstration courte, de recueillir des retours d'utilisateurs réels et de mesurer votre progression (projets livrés, temps gagné). C'est aussi sans risque : vous pouvez avancer 20 minutes par jour en gardant votre activité actuelle.

Méthode pas à pas

1. Cadrer en une phrase. Écrivez : « Cette application aide [cible] à [tâche] en [résultat chiffré] ». Exemple : « aide un artisan à générer un devis en 2 minutes au lieu de 20 ».
2. Limiter le périmètre (MVP). Gardez 1 écran principal, 1 action, 3 fonctionnalités maximum. Notez ce que vous ne ferez PAS.
3. Demander une première version à l'IA de code. Donnez un prompt structuré : contexte, utilisateur, fonctionnalités, contraintes techniques (page web simple, sans base de données au départ), format de sortie attendu.
4. Lancer et tester en local. Faites 3 scénarios : cas normal, champ vide, valeur absurde. Notez chaque défaut.
5. Corriger par petites itérations. Un problème à la fois. Collez le message d'erreur complet, dites ce que vous attendiez et ce qui s'est passé, puis demandez une correction minimale.
6. Vérifier le code généré. Demandez à l'IA d'expliquer en 5 lignes ce que fait le code. Contrôlez qu'aucune clé secrète n'est écrite en clair, que les entrées utilisateur sont validées et que rien de sensible n'est exposé.
7. Versionner. Enregistrez une version qui marche (Git ou export) avant chaque grosse modification, pour pouvoir revenir en arrière.
8. Déployer. Utilisez une plateforme d'hébergement gratuite pour sites web (ex. Vercel, Netlify ou GitHub Pages) reliée à votre dépôt. Placez les clés dans les variables d'environnement, jamais dans le code.
9. Tester en ligne. Ouvrez l'URL sur téléphone, puis faites tester par 2 personnes réelles. Notez leurs blocages.

Exemple concret

Vous créez un « générateur de devis express » pour plombiers. Prompt : « Crée une page web en HTML/JS : formulaire (client, prestation, heures, taux horaire), calcul du total TTC à 20 %, bouton pour copier le devis. Pas de base de données. Code commenté. » La première version oublie de gérer les heures vides : vous collez l'erreur, l'IA ajoute la validation. Vous versionnez, déployez, et obtenez un lien. Votre démo de 60 secondes montre : problème (20 min par devis), solution (2 min), bénéfice chiffré (18 min gagnées par devis).

Erreurs à éviter

• Demander toute l'application en un seul prompt géant : l'IA produit du code fragile.
• Corriger sans relire : vous ne saurez pas ce qui a changé.
• Mettre une clé d'API dans le code ou dans un dépôt public.
• Ajouter des fonctionnalités avant d'avoir déployé la première version.
• Ne pas tester en ligne : un site peut marcher en local et échouer en production.

À faire maintenant

Livrable : une URL publique + une fiche de projet d'une page. Écrivez votre phrase de cadrage, la liste de 3 fonctionnalités, votre prompt, puis déployez. Dans la fiche, notez : problème, démo (3 phrases), résultat chiffré, 2 retours d'utilisateurs, et les 2 prochaines améliorations. Cette fiche devient la première page de votre portfolio.

Pourquoi cet exercice

Cet exercice t'apprend à transformer une idée floue en spécifications précises, puis à obtenir une application en ligne sans écrire tout le code toi-même. C'est la compétence centrale du vibe coding. Elle sert directement ton objectif business : un mini-projet déployé est une démonstration concrète à montrer à un prospect et la première pièce de ton portfolio de trois projets.

Durée estimée : 60 à 90 minutes, à répartir sur 3 à 4 sessions de 20 minutes.

Contexte

Tu vas créer une mini-application utile à un petit professionnel (coach, artisan, commerçant, freelance). Exemples d'idées : un calculateur de devis simple, un formulaire de prise de rendez-vous avec confirmation, un générateur de checklist client, un suivi de factures impayées. Choisis une seule tâche répétitive, avec un utilisateur cible précis. Si tu as besoin d'images ou d'un logo pour ta page, utilise Blemama Studio (blemama.com/studio).

Étapes

Étape 1 : cadrer l'idée (10 min)

Écris en 3 phrases : qui est l'utilisateur, quel problème il a, quel résultat chiffré tu vises (par exemple « passer de 15 à 3 minutes par devis »).

Étape 2 : rédiger le prompt de spécifications (20 min)

Structure ton prompt avec ces blocs : Rôle (tu es un développeur web senior), Objectif, Utilisateur cible, Fonctionnalités obligatoires (3 à 5 maximum), Hors périmètre (ce que l'app ne fait pas), Données et champs, Interface (pages, boutons, textes en français), Contraintes techniques (une seule page, sans base de données externe, sans clé secrète dans le code), Critères d'acceptation (3 tests vérifiables) et Format de réponse (code complet, puis instructions de lancement).

Étape 3 : générer et tester (20 min)

Utilise un éditeur ou une plateforme de vibe coding gratuite de ton choix. Colle ton prompt, génère, puis teste chacun de tes critères d'acceptation. Note les bugs. Corrige en reformulant précisément : copie l'erreur exacte, indique l'action faite, le résultat attendu et le résultat obtenu. Fais au moins 2 itérations.

Étape 4 : vérifier la sécurité (10 min)

Contrôle qu'aucune clé API ni mot de passe n'apparaît dans le code, que les saisies utilisateur ne sont pas affichées sans précaution et qu'aucune donnée personnelle réelle n'est utilisée pour les tests.

Étape 5 : déployer et versionner (15 min)

Mets le code dans un dépôt (GitHub, par exemple) avec un message de commit clair, puis publie via un hébergeur gratuit de sites statiques. Vérifie que l'URL publique fonctionne sur mobile.

Livrables attendus

1. Le prompt de spécifications final (texte).
2. L'URL publique de l'application.
3. Le lien du dépôt avec au moins 3 commits.
4. Une fiche de 5 lignes : problème, solution, temps gagné estimé, bugs rencontrés et corrigés, limites.

Critères de réussite

• L'application est accessible en ligne et ses 3 critères d'acceptation passent.
• Le prompt contient tous les blocs, dont le hors périmètre.
• Au moins 2 itérations de débogage documentées.
• Aucun secret exposé.
• Le bénéfice est chiffré dans la fiche.

Erreurs à éviter

• Demander « fais-moi une app de gestion » sans cible ni limites.
• Ajouter trop de fonctionnalités dès la première version.
• Accepter le code sans le tester.
• Dire « ça ne marche pas » sans l'erreur exacte.

Action immédiate

Ouvre un document et rédige dès maintenant l'étape 1 : utilisateur, problème, résultat chiffré visé. Cela prend 10 minutes.