Vibe Coding: pourquoi il n’y a pas de flow sans formalisation

L’équipe Memoways a développé ces derniers mois plusieurs applications au travers d’outils dits de vibe coding. En quelques heures, nous avons pu “générer” des prototypes fonctionnels, des applications web utiles ou des sites web.

Plus besoin de passer par des outils no-code (oups, on creuse notre propre tombe…), plus besoin de payer des fortunes et d’attendre des mois avant d’avoir un résultat. Il “suffit” de dire en language naturel ce dont nous avons besoin, et de manière conversationnelle on construit son application, itération par itération. Sans savoir coder !

À travers les exemples illustrés dans ce billet, nous désirons partager avec vous ce que nous avons appris pour vous donner envie d’essayer cette nouvelle pratique créative et très productive qui donne littéralement des ailes aux personnes qui, comme nous, ne savent pas coder.

🎯 L’essentiel en 4 points

• Le défi : Le vibe coding livre des résultats rapides, mais l’IA sans contexte détaillé génère des solutions approximatives et génériques
• La solution : Documenter avec précision les besoins, les objectifs, les attendus, et définir ce qu’est un succès mesurable
• Suivre la hiérarchie des outils : Outils simples (Lovable/Bolt) pour prototyper rapidement, intermédiaires (Replit) pour construire professionnellement, avancés (Cursor/Claude Code) pour produire avec un contrôle total au plus proche du code.
• Conclusion clé : “Pas de vibe sans formalisation” - plus le contexte initial est précis, meilleur devient le flow de développement

Homepage Audiogami : expérimentation multi-outils pour une landing page

L’équipe Memoways travaille actuellement sur Audiogami, une plateforme voice-to-data qui transforme la parole en données structurées. Pour communiquer sur le projet et préparer la validation de marché, une landing page est indispensable.

Voici plus de détails sur ce projet:

Audiogami: transformer la voix en données structurées

L'histoire d'Audiogami commence par un constat terrain récurrent dans nos missions d'accompagnement : de nombreux dirigeants et experts excellent dans la communication orale mais peinent face aux interfaces complexes des bases de données.

memoways.com

Mais plutôt que d’utiliser l’un de nos outils no-code de création de site web, l’équipe décide de tester une approche différente: développer la même landing page simultanément sur 4 plateformes de vibe coding différentes pour comparer les résultats.

Objectif : Valider quelle plateforme de vibe coding offre le meilleur rapport qualité/effort pour une landing page professionnelle, sans vendor lock-in (pouvoir posséder le code produit).

Le résultat obtenu en moins de 10 heures:

Audiogami - Voice to Structured Data for Your Users

Free your users from tedious manual data entry. Voice input that generates structured data in their tools.

audiogami.com

Comment ça s’est passé ?

Les 4 plateformes testées en parallèle :

• Lovable
• Bolt
• Replit
• EasySite

La méthode de travail :

Création d’un wireframe, d’un cahier de charges détaillé puis des allers-retours entre Claude (l’IA d’Anthropic) et l’IA de Notion pour structurer le narratif, les messages clés, ainsi que l’architecture du contenu.

Cette phase est la plus longue: 6 heures pour avoir un PRD (Product Requirement Document - la formalisation du cahier de charges) solide. Ce document au format markdown définit précisément ce que doit accomplir la landing page, pour qui, et quels sont les critères de succès.

Le prompt initial copié dans chaque outil : une phrase simple avec le PRD attaché.

Résultat : Des versions fonctionnelles obtenues très rapidement sur les 4 plateformes. En 3 à 5 minutes, 80% du travail a été effectué, avec un résultat correct au premier regard.

Mais comme souvent, les 20% restants demandent le plus d’efforts, même si ne sont pas des efforts très compliqués: il suffit de converser avec l’outil pour petit à petit arriver au résultat voulu.

Résultats et choix

Les 4 outils ont produit des landing pages très similaires en termes de qualité. Pour un projet techniquement simple comme une landing page (essentiellement de la structuration de contenu et du design), tous les outils se valent en première approche.

Mais Replit se démarque pour la finalisation :

• Le mode agentique intégré, avec le “plan mode” pour planifier sans dépenser trop de token, et le “build mode”, pour générer le code sur des itérations qui peuvent prendre, selon la complexité, plusieurs minutes (voir dizaines de minutes)
• Plus robuste pour gérer les ajustements et itérations
• Offre davantage de contrôle pour professionnaliser le résultat

L’enseignement clé : Pour une landing page, le choix de l’outil importe moins que la qualité du contexte fourni. C’est le PRD et la structuration en amont qui déterminent le temps total passé sur le projet ainsi que la robustesse du code généré.

Voici une capture d’écran de l’interface de l’application Replit: à gauche le chat pour interagir avec l’agent, au centre le résultat (ou les autres fonctionnalités comme la synchro avec GitHub etc); à droite l’arborescence de l’application générée. La publication sur un nom de domaine custom est très simple - ensuite il faut juste cliquer sur “Republish” pour mettre à jour le site à partir de Replit.

Dilemme Plastique / Edugami : la préparation est essentielle pour une app complexe

Dilemme Plastique est un un projet d’expérimentation pédagogique sous forme conversationnelle développée en partenariat avec Bord Cadre Films. L’objectif : sensibiliser sur la pollution du plastique à travers une expérience interactive avec un avatar conversationnel.

Voici plus d’informations sur le projet:

Comment le projet Dilemme Plastique devient Edugami, un outil pédagogique

Découvrez comment l'équipe Memoways transforme dix années de documentation sur la pollution plastique en outil pédagogique interactif grâce à l'intelligence artificielle.

memoways.com

Comment ça s’est passé ?

L’équipe décide de développer un prototype avec Replit. Contrairement à la landing page Audiogami (test multi-outils) qui est simple, ici le choix est délibéré parce qu’il y a une architecture technique complexe avec l’intégration de plusieurs services additionnels:

• Speech to text via Whisper (Open AI)
• Système agentique créé dans Flowise (le flux conversationnel est géré dans Flowise)
• Mécanique d’évaluation (avec gamification) qui est gérée en interaction entre Replit et Flowise
• Intégration d’articles et de vidéos en webview

Voici le schéma de l’architecture de ce projet:

Phase 1 : Préparation (1 à 2 jours)

L’équipe investit dans la préparation en amont : élaboration d’un PRD détaillé sur base d’un schéma architecture technique, structuration des fonctionnalités principales (conversation, avatar, monde virtuel), wireframe. Génération d’un PRD très détaillé.

Phase 2 : Développement (une demi-journée)

Avec ce contexte solide, le développement est fulgurant : génération d’une application complète en moins d’une heure, améliorations en temps réel, itérations fluides grâce au contexte clair.

Phase 3: Améliorations des fonctionnalités et optimisations techniques (1 journée)

Cette phase est encore en cours, avec l’enjeu principal de réduire la latence de la conversation. C’est ici que se montre notre limite de non développeur: comment savoir où se situe précisément le problème, pour guider l’IA sur les bonne pistes…

Notre solution: faire auditer le code et le problème par diverses IA et revenir dans Replit avec un nouveau plan d’optimisation. Ce processus est encore en cours, avec l’ajout des nouveaux modèles (Gemini 3 et Opus 4.5) dans notre boucle d’optimisation.

Sur ce chemin, nous découvrons un vertige supplémentaire: comme on peut “tout” demander, il n’y a pas de contraintes à la créativité - il faut donc bien cadrer ce que l’on décide d’implémenter pour éviter de partir dans tous les sens…

Voici une capture d’écran de l’interface de cette application web:

Ce qui a fonctionné

L’investissement en préparation paie drastiquement : 1-2 jours de structuration + une demi-journée de vibe coding = prototype fonctionnel.

Sans cette préparation, le vibe coding aurait produit… quelque chose. Mais pas nécessairement une expérience pédagogique cohérente avec des objectifs d’apprentissage clairs, couplés au stack technique existant.

État actuel : Le prototype est utilisable avec quelques limitations à corriger. Mais il est suffisamment avancé pour tester les hypothèses principales du projet avec des élèves.

Replit se confirme comme l’outil intermédiaire idéal : assez simple pour être productif rapidement, assez avancé pour gérer des projets qui produisent du code solide.

Application de gestion de factures: développer son propre outil d’admin

Pourquoi cette application ?

Un gestionnaire a besoin de tracer et maîtriser les frais payés par carte de crédit. Le problème : le logiciel de comptabilité (Bexio dans notre cas) existant ne permet pas de trier automatiquement par type de dépense, catégoriser par fournisseur, ni analyser par catégorie de factures.

Objectif : Développer une application qui gère automatiquement les factures PDF pour donner une visibilité complète sur les dépenses carte de crédit.

Pourquoi Claude Code ?

Ce projet nécessite un niveau de contrôle et de précision supérieur aux outils simples, avec un développement en local sur sa propre machine. Claude Code (l’outil proposé par Anthropic) offre un environnement de développement professionnel, le contrôle total sur le code généré, la capacité à gérer des fichiers PDF en local avec extraction de données et catégorisation automatisée.

Comment ça s’est passé ?

Approche très itérative dès le début : Contrairement aux projets précédents, ici pas de longue phase de préparation. L’approche est différente - nous avons vibe codé directement avec Claude Code, de manière très itérative.

Résultat : Ça s’est très bien passé. Le développement itératif a permis d’ajuster en continu les fonctionnalités de tri, catégorisation et analyse.

Cependant, pour rendre l’application pérenne et exploitable via le web, il faudra transformer assez radicalement le code existant - en mettant Opus 4.5 ou Gemini 3 sur l’affaire, cela devrait pouvoir se faire assez rapidement.

Comme capture d’écran, je partage l’outil de travail que j’utilise pour vibe coder avec Claude Code: Conare

Les résultats et enseignements

Learning : Claude Code permet un développement professionnel avec contrôle total, mais nécessite un niveau de maîtrise technique supérieur. C’est l’outil pour produire des applications qui doivent être maintenues et évolutives.

Démonstrateurs Audiogami: prototyper pour démontrer

Dans le cadre du développement d’Audiogami, l’équipe a besoin de montrer rapidement les mécaniques d’utilisation. Pas encore avec des données réelles, pas encore avec une interactivité complète - juste démontrer le concept.

Objectif : Valider l’approche et le workflow avec des parties prenantes avant d’investir dans le développement complet.

Comment ça s’est passé ?

Deux démonstrateurs ont été développés :

• Un avec Bolt, avec une seule version en mode playback
• Un avec Lovable, avec 3 variantes également dans un mode playback plus ou moins interactif

L’approche est différente de la landing page ou du prototype Dilemme Plastique : ici, l’objectif est la rapidité pour montrer, pas la robustesse pour produire.

Après 30 minutes d’itération via Claude (Sonnet 4.5) et ChatGPT 5, un PRD a pu être exporté.

Dans Bolt et Lovable, après 5-8 minutes, le prototype était quasiment prêt à l’emploi; encore une petite heure pour soigner quelques détails et les liens étaient partageables !

Voici l’un des prototypes développé avec Bolt, en mode embed: