Build in Public #11 : Fini le code spaghetti. Comment j'ai structuré Sam Tennis V2 avec la méthode BMAD

TL;DR :

• La data : Ma stratégie d'acquisition vidéo IA fonctionne (300 000 vues) et de nombreux téléchargements, validant l'intérêt pour un coach de tennis IA.
• Le problème : L'application V1 ne retient pas les joueurs. Trop de saisies manuelles, produit pas assez performant.
• Le mur technique : Le "Vibe Coding" (prompter au feeling dans Cursor) montre ses limites car plus le projet grossit, plus l'IA perd le contexte et hallucine.
• La solution : La méthode BMAD. Un framework open-source qui transforme l'IA d'un simple assistant en une équipe Agile complète (PM, Architecte, Dev). Résultat : un plan de refonte bien structuré, qui consomme moins de tokens et génère moins d'erreurs.

---

Il y a un mois, je vous montrais comment j'ai généré 150 000 vues organiques avec un budget de 33€ en transformant Sam (mon coach de tennis IA) en influenceur sur les réseaux (voir le chapitre précédent).

Au delà des vues, la bonne nouvelle c'est que l'application est téléchargée, des joueurs prennent l'abonnement. Pour moi, cela valide le MVP (Minimum Viable Product).

La mauvaise nouvelle, c'est que l'application n'est pas au niveau. Les joueurs la téléchargent, font un test, et s'en vont. J'ai épluché les données de PostHog (je vous ferai un article complet sur cet audit la semaine prochaine), et le verdict est sans appel : la rétention n'est pas bonne. Mon hypothèse c'est qu'il y a trop de friction dans l'application, on ne prend pas de plaisir à l'ouvrir, elle nécessite trop d'actions manuelles des utilisateurs comme le fait de rentrer chacun de ses matchs, etc.

Il fallait pivoter vers une V2 axée sur le Zéro Friction : aspiration automatique des résultats officiels, interface 100% vocale ("Zone Mixte"), et coaching proactif via des notifications.

Sauf qu'une architecture avec du streaming token-by-token (Jitter-Free), des Edge Functions Supabase en arrière-plan et du RAG asynchrone, ça ne se code pas en tapant "Fais-moi une app de tennis" dans la barre de chat de Cursor.

Le Vibe Coding brut a ses limites. Sur un gros projet, l'IA oublie votre schéma de base de données, écrase des composants fonctionnels, et produit du code "spaghetti". J'en parlais déjà dans mon article sur l'industrialisation du Vibe Coding avec le protocole MCP.

Pour passer ce cap et structurer mon développement, j'ai industrialisé mon File Engineering avec la méthode BMAD.

C'est quoi la méthode BMAD ?

BMAD (Breakthrough Method for Agile AI-Driven Development) est un framework open-source (spec-driven) qui s'intègre directement dans votre IDE (Cursor, Windsurf, Claude Code). Il modélise une équipe Agile complète sous forme d'agents IA spécialisés (PM, Architecte, Dev) via des fichiers Markdown.

Ce n'est pas un nouvel outil SaaS. Le principe est brutalement simple : au lieu d'avoir un seul chatbot omniscient qui fait tout à moitié, vous ne parlez plus "à l'IA". Vous vous adressez à un rôle précis.

Le workflow se divise en deux phases strictes :

1. Agentic Planning - Spécifications

On ne touche pas à une ligne de code tant que l'architecture n'est pas verrouillée.

• @analyst : Définit le brief et la proposition de valeur.
• @pm : Transforme le brief en un PRD.md (Product Requirements Document) avec des contraintes claires (Ex: "Le premier token LLM doit s'afficher en < 2.0s").
• @ux : Définit l'ambiance visuelle et rédige les spécifications UI/UX pour garantir un rendu premium.
• @architect : Génère l'architecture.md. C'est ici qu'on verrouille la stack (React Native 0.81, Zustand v5, Supabase).
• @po : Découpe le PRD en Epics isolés.

2. Context-Engineered Development - Code

Une fois les fondations posées, on passe à l'usine.

• @sm (Scrum Master) : Transforme un Epic en User Stories ultra-détaillées.
• @dev : Implémente le code. Il ne reçoit pas tout le projet en contexte, mais uniquement la story en cours et le fichier d'architecture. Zéro hallucination.
• @qa : Valide la conformité entre le code et le PRD.

L'application sur Sam Tennis V2 : Les preuves factuelles

Concrètement, j'ai installé le framework dans mon projet et j'ai fait tourner la "roue" BMAD. Voici les outputs réels qui ont orchestré la bascule de la V1 vers la V2.

1. L'Agent Data Analyst & Brainstorming

Je lui ai donné accès à ma base de données via le MCP Supabase. Son constat a été violent mais factuel : "0 debrief enregistré, 3 adversaires saisis manuellement pour 57 joueurs." Le diagnostic : la saisie manuelle est morte. L'agent a ensuite animé une session de brainstorming en utilisant les méthodes "What If" et "SCAMPER". Il en est ressorti 13 concepts majeurs, dont "L'Aspiration Magique Ten'Up" et "L'Interview Zone Mixte" pour atteindre le Zéro Friction.

2. L'Agent Product Manager (@pm)

Il a pris ces concepts et a rédigé un PRD (Product Requirements Document) clinique. Il n'a pas juste fait une liste au père Noël, il a défini 15 Exigences Fonctionnelles (FR) et surtout 9 Exigences Non-Fonctionnelles (NFR) critiques. Par exemple, le NFR2 imposait : "Le premier token LLM doit s'afficher à l'écran en < 2.0 secondes après la complétion de l'envoi audio." ou encore le NFR5 pour imposer le "Jitter-free Streaming".

3. L'Agent UX Designer (@ux)

Il a pris le relais pour définir l'ambiance et les règles visuelles de l'application. Son objectif : sortir du "look Vibe Coding" classique (trop de couleurs différentes, des émojis partout). Il a rédigé le fichier ux-design-specification-Sam.md en imposant une charte graphique stricte, un "Premium Moat" (interface haut de gamme) et le respect des espacements pour justifier l'abonnement payant.

4. L'Agent Architecte (@architect)

Construisant sur une base existante (Brownfield), l'architecte a pondu un document (architecture.md) fixant des règles non-négociables pour le futur agent développeur :

• Performance (Jitter-Free) : Utilisation obligatoire de Zustand v5 pour gérer le streaming de texte (SSE) sans déclencher de re-renders complets de l'interface React Native (60fps constant).
• Backend Asynchrone : Les appels au LLM et la vectorisation RAG doivent être déportés dans des Edge Functions Deno via Supabase, pour ne jamais ralentir le client mobile.
• Design System : Utilisation de NativeWind v4.2 pour un contrôle granulaire de l'interface (le "Premium Moat").

5. Le Party Mode : Le débat d'experts

C'est l'un des points forts de la méthode BMAD. Avant de valider tout ça, j'ai lancé le Party Mode. Au lieu d'avoir un seul agent qui décide seul, la méthode fait débattre le PM, l'Architecte et le Dev entre eux sur un sujet donné. Ils ont confronté leurs visions sur le streaming de texte et la gestion d'état, ce qui a permis de prendre les bonnes décisions architecturales en amont. Les agents s'auto-corrigent et consolident le plan.

6. L'Agent Scrum Master (@sm)

Il a découpé le PRD en 6 Epics et 25+ User Stories. Tout a été tracé dans un fichier IMPLEMENTATION_LOG.md. Par exemple, l'Epic 2 était dédié au "Coach Conversationnel (Chat-First)" avec des stories ultra-précises comme la "Story 2.2 : The Hold to Talk Interview Button", décrivant les retours haptiques exacts et les ondes sonores à 60fps que l'agent développeur devait coder.

Le résultat de ce cadrage ? Je suis passé en phase d'implémentation avec l'agent @dev. En quelques sessions matinales, j'ai exécuté ces 25+ stories techniques.

L'Epic 3 (Le Moteur RAG Asynchrone) en est le meilleur exemple. L'agent a créé l'Edge Function Deno pour extraire les mémoires via Gemini, écrit la migration SQL 008_vector_memories.sql pour configurer pgvector, et sécurisé le tout avec le Row Level Security de Postgres. Du premier coup. Pourquoi ? Parce qu'il avait les spécifications et l'architecture exactes en contexte et qu'il avançait story par story, sans se disperser.

5. Le Résultat Visuel : Avant / Après la Refonte

Parler de code c'est bien, mais l'impact d'une méthode de développement structurée se voit surtout sur le produit final. Grâce au "Premium Moat" défini par l'architecte, l'Agent a pu refondre intégralement le design de l'application tout en codant les nouvelles fonctionnalités.

Voici concrètement à quoi ressemble le passage de la V1 (Vibe Coding brut) à la V2 (Méthode BMAD) :

1. L'Interface Principale (Le Chat) L'interface conversationnelle est le cœur de l'application. On est passé d'un design basique à une interface "ChatGPT-like" fluide et premium.

2. Le Profil Joueur La page profil est devenue un véritable tableau de bord personnel, mettant en valeur l'identité et le niveau du joueur.

3. Le Vestiaire (Gestion de l'équipement) Le "Zéro Friction" s'applique aussi à la gestion de l'équipement, rendue beaucoup plus intuitive.

Les Nouvelles Fonctionnalités (Nées de la méthode)

Le fait de structurer le développement m'a aussi permis d'intégrer des fonctionnalités complexes sans tout casser :

Comment se lancer avec BMAD (Tutoriel Rapide)

Si vous voulez tester BMAD dans vos projets, voici comment l'installer. C'est 100% gratuit et open-source.

Prérequis : Vous devez avoir Node.js v20+ installé sur votre machine.

Ouvrez le terminal de votre projet (dans Cursor par exemple) et tapez :

npx bmad-method install

(Si vous obtenez une version beta obsolète, forcez la dernière version avec : npx bmad-method@6.0.1 install)

Suivez simplement les instructions de l'installateur. Une fois installé, l'outil est prêt à être utilisé dans votre IDE IA (Claude Code, Cursor, etc.).

L'astuce anti-panique : Si vous ne savez pas par où commencer, tapez simplement /bmad-help dans votre chat. L'agent vous guidera sur la prochaine étape logique de votre projet (ex: "J'ai fini l'architecture, que dois-je faire maintenant ?").

Pour aller plus loin, vous pouvez consulter le dépôt GitHub officiel de BMAD ou leur documentation complète.

Conclusion : L'IA exige de la rigueur

L'IA ne remplace pas le Product Manager ou l'Architecte logiciel. Au contraire, elle exige que vous deveniez excellent dans ces rôles.

Le Vibe Coding est parfait pour prototyper une landing page le dimanche après-midi. Mais si vous voulez construire un produit robuste, monétisable, et qui ne s'effondre pas à la première mise à jour, vous devez imposer un cadre. BMAD est ce cadre.

La semaine prochaine, on ouvre le capot côté data. Je vous montrerai exactement ce que j'ai vu dans les dashboards PostHog et pourquoi j'ai décidé de tuer les formulaires manuels de mon application.

À très vite,

Guillaume 👋

---

Cet article fait partie de la série Build in Public. Tu veux suivre l'aventure Sam Tennis en direct ? Abonne-toi à la newsletter.