Comment J’ai Construit un Pitch Deck Entièrement depuis le Code

Pas de Figma. Pas de PowerPoint. Pas de Canva. Juste un terminal, Claude Code, et le codebase lui-même.

Le résultat : un pitch deck de 12 slides, déployé en live, avec des images — construit en une session.

Voir le pitch deck en live

Le Contexte

Je construis Muse Otter pour le hackathon RevenueCat Shipyard 2026. Deadline : 12 février.

J’avais 24 jours pour construire l’app. J’allais pas passer une journée sur des slides.

Le problème : j’avais besoin d’un pitch deck. La solution : mon codebase avait déjà toutes les réponses.

La Matière Première

Tout ce dont le deck avait besoin était déjà écrit — pas dans un Google Doc, mais dans mes fichiers projet :

_bmad-output/project-brief.md     ← Vision, coaches, monétisation
_bmad-output/planning-artifacts/prd.md  ← 64 user stories, 7 epics
context/project-context.md         ← Règles d'archi, patterns
lib/core/utils/theme/app_colors.dart    ← Couleurs exactes de la marque
lib/core/utils/theme/app_gradients.dart ← Palette des coaches
assets/images/logo_no_bg.webp      ← Le logo loutre

Le PRD avait la liste des features. Le brief avait le positionnement marché. L’archi avait la stack technique. Les fichiers de thème avaient les codes hex exacts.

Pourquoi ouvrir Figma quand app_colors.dart est là ?

Le Process

Étape 1 : Nourrir le Contexte

J’ai pointé Claude Code vers mes dossiers context/ et _bmad-output/ — les mêmes docs que j’ai utilisés pour construire l’app. Il a lu le brief projet, le PRD, l’architecture, et la stratégie de monétisation.

Pas de copier-coller. Pas de document de brief. Le code EST le brief.

Étape 2 : Générer un Fichier HTML Autonome

La première approche était d’utiliser un outil CLI de rendu distant. Il était down. Plan B : un seul fichier HTML avec tout en inline.

pitch-deck.html
├── 12 slides (1920×1080)
├── CSS (couleurs app, gradients coaches)
├── Navigation par flèches
├── Auto-scaling sur n'importe quel écran
└── Zéro dépendances

Un fichier. Ouvrir dans un navigateur. C’est fait.

Étape 3 : Récupérer les Vraies Couleurs

C’est la partie que j’adore. Au lieu d’approximer les couleurs, le deck tire directement du thème Flutter :

// Depuis app_colors.dart
static const darkBackground = Color(0xFF000000);
static const darkSurface = Color(0xFF1C1C1E);
static const darkSecondaryText = Color(0xFF8E8E93);

// Depuis app_gradients.dart
static const origamiPaper = Color(0xFFF5F2E8);  // ← Accent principal

Le pitch deck utilise les mêmes couleurs exactes que l’app. Fond noir, accent crème, cartes surface sombre. Quand tu vois le deck puis que tu ouvres l’app, on dirait le même produit.

Slide titre — mêmes couleurs que le dark mode de l'app

Étape 4 : Suivre le Voiceover

J’avais déjà enregistré un voiceover pour la vidéo de démo. Le narratif suivait un flow précis :

Hook — “Si t’es un créatif ou un entrepreneur…”
Problème — Les chatbots génériques n’ont pas de mémoire
Know You — Système de contexte personnel
Coaches — 6 spécialistes + constructeur custom
Voice & Handwriting — Input multi-modal
Bottom line — Bien au-delà du chat générique

Alors j’ai restructuré le deck pour matcher. Les slides suivent maintenant exactement la même histoire que la vidéo. Même ordre, même emphase, même arc narratif.

Slide problème — "Les chatbots génériques n'ont pas de mémoire"

Étape 5 : Générer les Images des Slides

Besoin d’images individuelles pour le partage. Puppeteer + Chrome headless :

// 12 slides → 12 PNGs Retina
await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });

for (let i = 0; i < totalSlides; i++) {
  await page.screenshot({ path: `slide-${i}.png` });
}

30 secondes. 12 images haute résolution. Pas de dialogue d’export.

Étape 6 : Déployer sur Firebase

Ajouté un site hosting dans firebase.json, ajouté les meta tags OG pour le partage social, et déployé :

firebase deploy --only hosting:museotter-pitch

En live sur museotter-pitch.web.app avec favicon, image Open Graph, et cartes Twitter.

Le Deck Final

12 slides, suivant le narratif du voiceover :

La Stack

Outil	Rôle
Claude Code	Lire les docs projet, générer le HTML, déployer
HTML + CSS	Présentation mono-fichier (1920x1080)
app_colors.dart	Couleurs tirées du thème Flutter
Puppeteer	Screenshots Chrome headless (Retina 2x)
Firebase Hosting	Déploiement avec tags OG
Docs projet	PRD, brief, architecture = contenu des slides

Pourquoi Ça Marche

Le flow traditionnel : écrire un brief → ouvrir Figma → designer les slides → exporter → uploader.

Mon flow : pointer l’IA vers le codebase → déployer.

Quand ta documentation projet est assez bonne pour construire, elle est assez bonne pour présenter. Le PRD qui a guidé le développement devient le pitch. Le thème qui style l’app style le deck.

Ton codebase est ta source unique de vérité. Pour tout.

Essaie