Vibe coding: faites vous-même les applis dont vous avez besoin

Vous connaissez le vibe coding ? Sur LinkedIn, le terme a beaucoup « fait de son nez » comme on dit à Bruxelles, mais la réalité qui se cache derrière est toute simple : vous avez une idée d'application logicielle ? L'IA la code pour vous. Il y a quelques mois, cette technique était réservée aux spécialistes qui n'avaient pas peur de passer des heures à corriger des bugs. Aujourd'hui, avec les modèles récents et leurs grandes fenêtres de contexte, produire une petite application cohérente en HTML, CSS et JavaScript est devenu beaucoup plus accessible. Pas pour construire une usine à gaz ou gérer des données. Mais, à condition de respecter quelques précautions essentielles, on peut se fabriquer des petits outils bien pratiques.

C'est la révolution silencieuse de l'IA, celle dont on parle (un peu) moins : la possibilité de se créer sur mesure les petites applis dont on a vraiment besoin. Il y a quelques mois, si je devais taper un article, faire mes comptes ou consulter ma liste de tâches, j'ouvrais OpenOffice ou l'appli Notes de mon téléphone. Mais ça, c'était avant...

Aujourd'hui, mon traitement de texte « no distraction » gère aussi bien les balises Markdown que le format RTF : finis les allers-retours laborieux entre Kate et OpenOffice. Chaque matin, mon agenda et ma todo list sont lus par un dashboard qui m'annonce la couleur de la journée, me rappelle quoi faire en priorité, gère mes pomodoros quand j'ai besoin de me concentrer et m'offre un tas de services personnalisés que je ne trouve nulle part ailleurs. Idem pour mes comptes, mes contacts et même mon répertoire de liens utiles. Et comme tout ça tourne sur le disque dur de mon PC de bureau sans recourir au moindre service tiers, mes données sont en sécurité.

Avec son interface hyper sobre, mon traitement de texte maison peut sembler assez modeste. Mais il a toutes les fonctions dont j'ai besoin : il gère le Markdown aussi bien en plain text qu'en WYSIWYG, il importe et exporte les fichiers epub, et il a plusieurs fonctionnalités secrètes dont je parlerai un autre jour.

Ces programmes ultra personnalisés qui me rendent service tous les jours, je les ai vibe codés puis patiemment affûtés avec un prompt que vous trouverez dans ma page de ressources pour le secteur non marchand.

C'est quoi, le vibe coding ?

L'expression a été popularisée par Andrej Karpathy (encore lui !) dans un post publié sur X en 2025. Et elle a tellement circulé qu'elle a été élue mot de l'année 2025 par le Collins Dictionary.

Concrètement : vous expliquez à l'IA ce que vous voulez, elle écrit le code. Avec du HTML, du PHP et du javascript, vous n'avez plus qu'à enregistrer le résultat dans un fichier. Un double clic et PAF, votre appli s'ouvre dans votre navigateur. Ça, c'est le vibe coding pur, celui de Karpathy qui suggère de se laisser porter par l'IA. Mais je conseille d'ajouter une bonne dose de prudence, appelons ça du vibe coding cadré : Claude ou ChatGPT produit le code, mais l'intention, c'est la vôtre. Vous structurez la demande, vous limitez le périmètre, vous testez, vous corrigez, vous faites relire, vous gardez des sauvegardes à chaque étape. L'idée c'est de se faire un petit prototype utile, pas une bombe à retardement.

Les quatre règles incontournables

1. Ne mettez jamais en ligne un code que vous ne maîtrisez pas. Une appli vibe codée puis hébergée sur un site web peut exposer vos données ou ouvrir de graves failles de sécurité. Et même en local, sur votre disque dur, le risque zéro n'existe pas. Un Gemini saturé ou un ChatGPT en bout de course peut glisser dans le code une fonction eval() qui exécute du contenu dangereux, charger une bibliothèque externe en stoemelings, ou encore envoyer des données vers une adresse distante. D'où la deuxième règle :

2. Itérez systématiquement, par exemple avec le prompt ci-dessous. Faites-le plusieurs fois, même quand vous estimez le travail terminé. Dans son tweet originel, Karpathy proposait de vibe coder les « projets jetables du week-end ». On peut le faire aussi pour des outils vraiment utiles qu'on utilisera tous les jours. Mais ça demande un peu de rigueur et un soupçon de patience. Et pour chaque itération, gardez une copie de sauvegarde de la version précédente. Car une IA qui perd le fil peut aussi tout casser sans prévenir. Ça m'est arrivé avec Gemini Canvas, un jour où, fatigué, j'ai prompté à l'arrache en oubliant de sélectionner le modèle Pro : l'IA a simplifié les 2 000 lignes de code de mon projet pour les réduire à... 500 !

3. Jamais de données sensibles. On peut se bricoler des tas d'usages en toute sécurité, comme mon éditeur de texte, mon gestionnaire de liens ou mon tableau de bord personnel. Il est même possible de se coder un gestionnaire d'emplois du temps, ce Graal des coordos d'asbl 😉. Mais ne jouez pas avec le RGPD : pas de dossiers sociaux, pas de données de santé, pas d'informations sur vos bénéficiaires, pas de mots de passe, pas de fichiers RH ni de comptabilité. Bref : zéro donnée confidentielle.

4. Ne confondez pas relecture par IA et audit de sécurité. Le deuxième prompt de vérification ci-dessous ne remplace pas le regard d'un développeur compétent. Il sert à faire une passe de durcissement : repérer les dépendances cachées, les appels réseau, les usages dangereux, les erreurs de logique, les oublis d'accessibilité et les régressions évidentes. C'est OK pour un usage personnel, pas pour une application publiée en ligne ou utilisée par plusieurs personnes.

Une approche volontairement low tech

Il existe une quantité d'outils dédiés au vibe coding : Cursor, Replit Agent, Bolt.new, v0 et quelques autres. Ceux-là gèrent les versions, exécutent le code dans un bac à sable et corrigent les erreurs en temps réel. Certains sont bluffants. Mais ils s'adressent à des développeurs ou à des publics déjà familiers du développement.

Mes formations IA, elles, visent d'autres profils : des coordinateur·ices d'asbl, des chargé·es de communication, des animateur·ices en éducation permanente ou des professionnel·les du secteur social qui n'ont jamais ouvert un terminal et n'ont pas spécialement l'intention de le faire. Pour ces personnes, la promesse n'est évidemment pas de produire du code à publier sur GitHub. Elle est plus humble : fabriquer soi-même le petit outil dont on a besoin, celui que personne n'a jamais pensé à coder parce qu'il n'est utile qu'à vous.

D'où le choix d'une méthode artisanale : un prompt à coller dans le chatbot que vous utilisez déjà, un éditeur de texte gratuit, un fichier .html à double-cliquer. Pas d'environnement à configurer, pas d'abonnement supplémentaire pour faire tourner l'application.

Enfin, le principe du “sans dépendance” implique d'avoir des ambitions raisonnables. Pour une petite appli locale, la règle incluse dans mon prompt (éviter React, Tailwind, les polices Google, les CDN et les scripts tiers) est une sécurité contre le pistage et permet d'utiliser son projet même sans accès à internet. Mais lorsqu'on touche à des formats complexes, il vaut mieux utiliser des bibliothèques éprouvées plutôt que de réinventer la roue avec du code généré par IA.

Le prompt à copier-coller (et la méthode)

Le premier prompt est disponible sur cette page, avec plein d'autres ressources gratuites. Je l'ai appelé « 🧩 Créer une appli autonome » et vous le trouverez dans la rubrique des « Essentiels ».

Cette démonstration live fait toujours son petit effet dans mes formations IA : je colle le prompt dans Gemini Canvas ou Claude Opus et j'obtiens en deux minutes un bon vieux "Casse-briques" bien vintage. Ici, j'y ai passé un peu plus de temps pour soigner le design, mais le principe est le même.

Pour les débutant·es, voici la marche à suivre. Choisissez d'abord un modèle d'IA récent et puissant : Claude, Gemini ou ChatGPT dans leurs versions les plus avancées. Vous aurez besoin d'un compte payant, car la tâche consomme beaucoup de tokens. Ensuite, collez le prompt et répondez aux questions de l'IA en décrivant votre besoin. Une fois le code livré, sélectionnez-le, copiez-le et collez-le dans un éditeur de texte simple :

• Sous Windows : Notepad++ (notepad-plus-plus.org), gratuit et léger. Le Bloc-notes intégré convient aussi pour dépanner.
• Sous macOS : TextEdit (préinstallé), à condition de basculer en mode texte brut via le menu Format → Convertir au format texte. Sinon, BBEdit propose une version gratuite très complète.
• Sous Linux : Kate, Gedit ou Nano, selon votre environnement de bureau.

Enregistrez le tout sous un nom de votre choix avec l'extension .html puis double-cliquez sur le fichier pour l'ouvrir avec votre navigateur.

Mais surtout, ne vous arrêtez pas là. Les IA génératives ont une tendance redoutable à aller au plus court. Si vous ne leur tenez pas la bride, elles bâcleront votre projet. C'est là qu'intervient le second prompt, à utiliser plusieurs fois sur le code généré pour traquer les défauts, repérer les failles évidentes et améliorer l'ensemble. Le voici :

[TÂCHE]
Agir en tant que développeur web et JavaScript senior exigeant. Analyser une page web ou un programme fourni par l'utilisateur, identifier ses défauts, proposer des améliorations et réécrire le code de manière plus robuste, plus maintenable et plus sûre, en plusieurs étapes interactives.

[BUT]
Fournir une passe de durcissement technique rigoureuse. Repérer les défauts de conception, les risques évidents, les dépendances inutiles, les appels réseau non souhaités, les usages dangereux et les régressions possibles. Produire ensuite un code amélioré, robuste, sans dépendances superflues, tout en maintenant scrupuleusement les fonctionnalités d'origine.

[CONTEXTE]
L'utilisateur soumet une page web ou un script local généré avec l'aide d'une IA. Le programme doit, sauf indication contraire, fonctionner localement dans un navigateur, sans serveur distant, sans tracker, sans CDN, sans bibliothèque externe et sans dépendance inutile. Cette analyse ne constitue pas un audit de sécurité professionnel. Elle sert à améliorer un prototype local et à repérer les problèmes évidents avant usage.

[INSTRUCTIONS]
Respecter impérativement les règles d'interaction suivantes :
- S'adresser à l'utilisateur en le vouvoyant.
- Ne recourir à aucune flatterie.
- Éviter toute verbosité et tout commentaire inutile.
- Éviter les questions de relance inutiles.
- Privilégier des phrases courtes, précises et synthétiques.

Exécuter la mission en respectant scrupuleusement les trois étapes suivantes :

Étape 1 : Diagnostic technique
- Attendre que l'utilisateur fournisse la page web ou le programme.
- Scruter le code pour chercher les défauts de conception, les fragilités, les bugs probables et les points d'amélioration.
- Sauf contre-ordre de l'utilisateur, considérer que le programme doit toujours tourner sans dépendance externe : pas de React.js, pas de Tailwind, pas de polices Google, pas de CDN, pas d'analytics, pas d'appel API distant.
- Vérifier explicitement la présence éventuelle de :
  - `eval()`
  - `new Function()`
  - insertion HTML non maîtrisée via `innerHTML`
  - gestion dangereuse de fichiers
  - stockage local de données sensibles
  - appels réseau non demandés
  - dépendances externes
  - absence de sauvegarde ou d'export
  - messages d'erreur inexistants ou peu clairs
  - problèmes évidents d'accessibilité clavier
  - régressions fonctionnelles probables
- Si un potentiel problème de sécurité est détecté en cas de mise en ligne, afficher très exactement la phrase suivante : "> 🚨 ALERTE !" puis détailler le problème potentiel.
- Indiquer ensuite brièvement le diagnostic : lister les bons points, les risques et les améliorations possibles.
- Ne pas passer à l'étape 2 sans action de l'utilisateur.

Étape 2 : Validation des interventions
- Attendre que l'utilisateur indique les améliorations qu'il désire voir appliquer.
- Étudier la faisabilité de ces améliorations.
- Résumer de manière synthétique les interventions proposées.
- Signaler clairement toute intervention susceptible de modifier le comportement initial du programme.
- Solliciter l'accord de l'utilisateur. Si l'accord est donné, passer à l'étape 3.

Étape 3 : Réécriture et optimisation
- Réécrire le code pour intégrer les améliorations prévues en appliquant les standards modernes : HTML5, CSS3, JavaScript ES6+.
- Conserver rigoureusement les caractéristiques originelles du programme.
- Ne jamais réduire, simplifier ou résumer le code source. L'intervention doit toujours constituer une amélioration, jamais une simplification au détriment des fonctionnalités.
- Préserver toutes les fonctionnalités existantes, sauf accord explicite de l'utilisateur.
- Présenter le code généré dans des blocs de code séparés et bien identifiés : HTML, CSS, JS.
- Si une dépendance externe semble absolument nécessaire pour répondre à une demande, en avertir systématiquement l'utilisateur et attendre son accord avant de l'intégrer.
- Si le programme manipule des données sensibles, rappeler que la passe effectuée ne remplace pas un audit professionnel.

[NIVEAU CIBLE]
Expert technique (Développeur Senior).

[STYLE]
Clinique, direct, professionnel et structuré.

[TYPE DE RÉPONSE]
Format conversationnel séquencé (3 étapes). Réponses textuelles courtes pour l'analyse, suivies de blocs de code Markdown correctement formatés lors de la réécriture.

Soumettez ce second prompt à l'IA, puis collez votre code. Recommencez l'opération au moins deux ou trois fois : à chaque tour, elle détectera de nouvelles faiblesses et vous proposera des optimisations.

Avant d'utiliser votre appli au quotidien, faites aussi une petite vérification manuelle tout simple :

• L'appli fonctionne hors ligne.
• Elle ne charge rien depuis Internet.
• Elle ne contient pas eval(), new Function(), CDN, Google Fonts, analytics ou appel API non voulu.
• Elle reste utilisable au clavier.
• Elle affiche un message clair en cas d'erreur.
• Elle ne manipule pas de données sensibles.

Pour les applis qui manipulent vos fichiers

Si vous voulez une application locale qui gère vos fichiers ou recourt à une base de données, ça se complique un peu. Pour que votre navigateur accepte de laisser votre programme lire et écrire sur votre disque dur, vous aurez besoin d'installer un petit serveur local, par exemple Apache. Cette fois, plus de double clic sur le fichier généré, vous accéderez à votre application via http://localhost.

• Sous Windows : XAMPP ou WampServer. Vous installez, vous lancez, vous déposez vos fichiers dans le dossier htdocs (XAMPP) ou www (Wamp), et vous accédez à vos applis via http://localhost.
• Sous macOS : MAMP. Le principe est identique, le dossier d'accueil s'appelle aussi htdocs.
• Sous Linux : la commande sudo apt install apache2 (Debian, Ubuntu, Mint) suffit. Vos fichiers se déposent dans /var/www/html/. Si vous préférez une interface graphique, XAMPP existe aussi pour Linux.

Une fois Apache lancé, vous y déposez vos fichiers HTML et vous y accédez depuis votre navigateur.

Un dernier conseil de prudence : un serveur Apache, même local, reste un service réseau. Configurez-le pour qu'il n'écoute que sur l'adresse 127.0.0.1 (le fameux localhost), jamais sur 0.0.0.0. Concrètement, dans le fichier de configuration httpd.conf (XAMPP, MAMP) ou /etc/apache2/ports.conf (Linux), la ligne doit ressembler à : Listen 127.0.0.1:80. Sans cette précaution, votre appli peut devenir accessible aux autres appareils de votre réseau wifi. Et dans tous les cas, coupez Apache quand vous ne vous en servez pas.

Ne nourrissez pas le mogwai après minuit

Utilisé avec prudence, le vibe coding encadré ouvre des perspectives dingues. Mais j'insiste sur la règle absolue, celle que je martèle dans mes formations IA pour les asbl à Bruxelles et en Wallonie, car elle est aussi importante que celle qui interdit de nourrir un mogwai après minuit : ne mettez jamais en ligne un code écrit par une IA générative sans un sérieux diagnostic de sécurité. Et pour ça, rien ne vaut un œil humain compétent.