Épargne Claire
un produit pédagogique livré en solo
Un site pédagogique sur l'épargne et l'investissement, livré en solo par un PM, avec la méthodologie BMAD d'orchestration multi-agent et le vibe coding.
Voir le site en productionPersonne ne traduit l'épargne en français courant.
D'un côté, les sites de banques et assurances : commerciaux, conçus pour vendre. De l'autre, les ressources institutionnelles (AMF, Bercy) : rigoureuses mais illisibles pour quelqu'un qui n'a pas baigné dans le jargon. Au milieu, des millions de Français qui veulent comprendre PEA, assurance-vie ou Livret A sans avoir à se former en finance.
Le manque côté lecteur
« Je dois choisir entre du contenu vendeur, ou du contenu officiel incompréhensible. »
Le projet
Traduire en français courant, gratuitement, sans promotion, sans affiliation. Un produit personnel, pas un business.
Quatre piliers non négociables.
Avant la première ligne de code, ces quatre engagements ont été posés. Ils contraignent tout le reste : la rédaction, l'architecture, le modèle économique (inexistant), le ton.
Sources publiques
Tout le contenu provient de sources officielles : AMF, Service-Public, Legifrance. Aucune source commerciale, aucun rabattage.
Zéro recommandation
Aucun conseil d'investissement, aucune recommandation produit, aucune affiliation. Le contenu est purement pédagogique.
Open source
Le code est public, la méthodologie est documentée. Tout est vérifiable et reproductible.
Construit avec l'IA
Développement intégral en vibe coding et méthodologie BMAD multi-agent. Human in the loop à chaque étape clé.
Une équipe produit, simulée par des agents.
BMAD (Breakthrough Method of Agile AI-Driven Development) est une méthodologie où plusieurs agents IA jouent chacun un rôle de l'équipe produit : analyste, PM, architecte, UX, dev, QA, tech writer. Les artefacts circulent de l'un à l'autre, comme dans une vraie équipe, mais opérée en grande partie par une seule personne.
Le pattern créateur / valideur
Chaque artefact (PRD, architecture, story, code) est produit par un agent créateur, puis revu par un agent valideur au regard adversarial. Le QA cherche systématiquement les défauts du code dev. L'architecte challenge le PRD du PM. Le résultat : moins d'angles morts qu'un développement linéaire, au prix d'une boucle supplémentaire.
Créateur
Produit l'artefact
Valideur
Recherche les défauts, adversarial
Human in the loop
Arbitre, redirige, valide
Les rôles mobilisés
Analyste
Cadrage : problème, marché, persona, hypothèses
PM
PRD : objectifs, user stories, périmètre fonctionnel
Architecte
Décisions techniques : stack, structure, contrats d'API
UX Designer
Parcours utilisateur, wireframes, ergonomie
Scrum Master
Découpage en epics et stories, priorisation
Dev
Implémentation des stories, code production
QA (Quinn)
Revue adversariale, recherche systématique de défauts
Tech Writer
Documentation, archi décisions, rétrospectives
Ce que la méthode ne fait pas.
Le vibe coding et BMAD ne sont pas un raccourci magique. Pour rester crédible auprès d'une DSI ou d'un comité produit, autant nommer franchement ce qui coince.
Process long
Largement plus de discussion que de code. Chaque feature passe par cadrage, archi, story, dev, review : le workflow est plus dense que linéaire.
Coût LLM additionnel
Plusieurs agents par feature signifie plusieurs appels API. Le coût marginal est faible, mais cumulé sur un projet entier, à ne pas ignorer.
Overhead documentaire
Chaque agent produit un artefact explicite (PRD, archi, story, review). Cela apporte de la traçabilité, mais aussi de la lecture humaine supplémentaire.
Dépend de la qualité des personas
Si la définition d'agent est mal cadrée, la sortie l'est aussi. Le prompt engineering reste un savoir-faire critique.
À retenir : le PM devient orchestrateur. Le temps gagné sur l'exécution est réinvesti dans le cadrage et l'arbitrage. La méthode est cohérente avec un profil senior, elle ne remplace pas la formation d'un dev junior à son métier.
Un site en production, gratuit, vérifiable.
Du cadrage à la mise en ligne, l'ensemble du produit a été livré en solo. Aucun prestataire, aucune agence, aucune stack d'entreprise. Une méthodologie, et un PM qui orchestre.
Stack technique
- · Next.js 16 (App Router, SSG, Turbopack)
- · TypeScript en mode strict
- · Tailwind CSS v4 + design tokens custom
- · MDX pour le contenu pédagogique des produits
- · motion/react pour les transitions
Périmètre fonctionnel
- · Pages produit (livret A, PEA, assurance-vie…) en MDX
- · Comparateur de produits d'épargne
- · Simulateur fiscal interactif
- · Glossaire pédagogique, mentions légales
- · Préparation de rendez-vous conseiller
Audit du livrable.
Site statique éducatif en production : l'audit porte sur la démarche de construction et le produit livré, pas sur des composants IA runtime.
Confirmé : déjà en place
Ce qui est livré et démontrable.
Vibe coding end-to-end
Claude Code utilisé pour génération du site : composants, pages, contenu MDX, design tokens. Le PM orchestre, le LLM produit.
Méthodologie BMAD complète
Agents Analyste, PM, Architecte, UX, SM, Dev, QA, Tech Writer mobilisés selon les phases. Workflow PRD → archi → stories → dev → review.
Pattern créateur / valideur
Chaque artefact (PRD, archi, story, code) passe par un agent producteur puis par un agent valideur adversarial. Moins d'angles morts.
Human in the loop à chaque gate
Validation humaine systématique entre les phases. Le PM arbitre et peut refuser ou rediriger la sortie. L'autonomie de l'IA est encadrée par design.
Stack assumée et documentée
Next.js 16 (App Router, SSG), TypeScript strict, Tailwind v4, MDX, Turbopack. Tous les choix d'architecture sont assumés.
Open source et reproductible
Code public, méthodologie BMAD documentée. La démarche peut être inspectée et rejouée par un tiers.
Site en production indexé
Déployé sur Vercel, en ligne et accessible. Le code est versionné et le produit est utilisable par n'importe quel visiteur.
Améliorations POC
À ajouter pour gagner en crédibilité démo. ROI fort, effort raisonnable.
KPIs produit instrumentés
Plausible Analytics pour visiteurs uniques / pages par session / taux de rebond / temps moyen. Documenter sur la page : « 150 visiteurs / mois, taux rebond 32% ».
Feedback utilisateurs
Formulaire simple « ce contenu vous a-t-il été utile ? » par page produit. Collecte dans Sheets, alimente itération éditoriale.
Pages les plus visitées surfacées
Tableau de bord interne : top 5 pages produit, pages à abandonner / fusionner / approfondir. Itération produit basée sur engagement réel.
Documentation BMAD publiable
Partager les personas, les prompts d'agents, les transitions de phase. Capital méthodologique réutilisable.
A/B test sur angles éditoriaux
Tester deux versions d'introduction d'une page produit (pédagogique vs concret) et mesurer engagement.
Industrialisation
Nécessaire uniquement en production à l'échelle. À nommer mais pas à embarquer pour un POC.
RAG conversationnel sur le corpus
Transformer le site en plateforme interactive : chatbot Q&A sur les produits d'épargne, alimenté par les pages MDX. Idée d'évolution naturelle.
CI/CD et tests automatisés
Playwright sur parcours critiques (comparateur, simulateur), GitHub Actions, lighthouse en preview. Qualité du livrable assurée par la pipeline.
Observabilité production
Sentry pour les erreurs front, Vercel Analytics pour les Core Web Vitals, alerting sur dégradation.
Internationalisation
Extension EN / ES via réutilisation des structures MDX. Pertinent si audience cible internationale.