DeckMason : Workflow de Présentation IA
Résumé : Créez des diaporamas HTML de qualité production à partir d'un sujet, d'un document ou d'un plan. Ce fichier est le point d'entrée du workflow en 6 phases. Lisez-le d'abord, puis chargez les fichiers de référence à la demande lorsque vous atteignez chaque phase. Ne chargez pas tous les fichiers de référence à la fois.
Nécessite un agent de codage IA avec accès au système de fichiers : Claude Code, Cursor, Codex CLI, Windsurf, Aider, ou tout agent capable de lire des fichiers et d'exécuter des scripts.
Standard de Qualité de Sortie
Chaque présentation doit sembler appartenir à une page marketing SaaS de premier ordre ou à un éditorial soigné. Propre, confiant, minimal, professionnel. Pas de contenu IA générique. Pas de dégradés passe-partout. Pas de texte de remplissage.
Démarrage Rapide
Pour une nouvelle présentation :
« Crée un pitch deck sur [sujet] »
« Réalise une présentation sur [sujet] pour [public] »
Avec votre propre contenu :
« Transforme ces notes en diapositives : [coller le contenu] »
« Stylise ce plan comme une présentation »
Avec une marque :
« Crée une présentation en utilisant la marque de company-deck.pptx »
« Adapte le style de https://linear.app pour ce pitch deck »
Importer un PPTX existant :
« Convertis company-deck.pptx en présentation HTML »
Cadrage Pré-Vol (avant de générer un deck)
Verrouillez la direction esthétique avant d'écrire une seule diapositive. Ne sautez une question que si l'utilisateur a déjà donné une réponse sans ambiguïté. Si vous sautez, reformulez l'hypothèse explicitement.
Étape 0 : Aperçu Visuel (chemin préféré)
Générez 3 diapositives d'aperçu rapides avec 3 thèmes différents pour que l'utilisateur puisse choisir une direction visuellement :
python3 scripts/preview_themes.py "Votre Sujet Ici"
Cela crée 3 fichiers HTML d'une seule diapositive dans previews/ :
previews/preview-1-dark.html(thème Deep Space)previews/preview-2-light.html(thème Modern SaaS)previews/preview-3-bold.html(thème Bold Signal)
Demandez à l'utilisateur d'ouvrir les 3 fichiers et de choisir une direction. La direction choisie devient la direction esthétique (étape 1), en sautant la proposition textuelle ci-dessous.
Étape 1 : Direction esthétique (alternative textuelle)
Si l'utilisateur préfère le texte, proposez 3 directions visuelles adaptées à CE sujet et public spécifiques. Pas à partir d'une liste prédéfinie. Chaque option combine un mot d'ambiance + un indice visuel concret (palette, typographie, motif) pour que l'utilisateur puisse se l'imaginer. Les trois directions doivent être significativement différentes les unes des autres, pas trois variantes de la même idée. Marquez-en une comme recommandée.
Pour chaque direction, indiquez l'harmonie des couleurs (monochrome, analogue, complémentaire, split-complémentaire, triadique, neutre+accent), la température (chaude, froide, neutre), et la distribution 60-30-10 (quelle couleur est dominante, secondaire, accent). Cela force les décisions de couleur au stade de la planification, pas après coup.
Étape 2 : Nombre de pages
Proposez des fourchettes :
- 3-5 diapositives : court / teaser
- 6-10 diapositives : standard
- 11-20 diapositives : approfondi
- Personnalisé : l'utilisateur spécifie
Étape 3 : Densité de texte par page
Un des quatre niveaux :
- Minimal : une ligne ou un grand chiffre
- Léger : titre + 2-3 puces
- Standard : titre + 4-5 puces
- Dense : contenu multi-colonnes ou de référence détaillé
Étape 4 : Animation
Statique, mouvement subtil de relecture en direct, ou ressource vidéo séparée. Choisissez statique par défaut pour les decks PDF, PPTX, Google Slides et ceux à lire à l'avance.
Pour les motifs d'animation basés sur GSAP (apparition vers le haut, dévoilement progressif, dévoilement par clip-path, zoom avant, glissement depuis la gauche/droite, flou d'entrée), voir references/animation-patterns.md. Utilisez-les lorsque l'utilisateur souhaite une relecture HTML en direct ou une lecture de type keynote.
Ne passez au plan qu'après avoir verrouillé ces éléments.
Le Workflow en 6 Phases (Aperçu)
Lisez cet aperçu pour comprendre l'ensemble du pipeline. Chargez chaque fichier de référence lorsque vous atteignez cette phase.
| Phase | Nom | Ce qui se passe | Fichier de référence |
|---|---|---|---|
| Pré-Vol | Cadrage | Aperçu visuel ou 4 questions textuelles : direction esthétique, nombre de pages, densité de texte, animation | Ce fichier (ci-dessus) |
| 0 | Brief | Enregistrer la demande, les valeurs par défaut, les hypothèses. Rédiger un brief avec public, arc narratif, demande, succès. Couvre également le workflow d'import PPT. | references/phase0-brief.md |
| 1 | Structure | Pyramid Principle, titres assertion-preuve, thèse, contrastes rythmiques, Couches de Conception Produit | references/phase1-structure.md |
| 2 | Plan | Taxonomie des Types de Pages, 10 Types de Mise en Page Éditoriale, mise à l'échelle du nombre de diapositives | references/phase2-outline.md |
| 3 | HTML | Architecture d'Échelle du Canvas, Ajustement au Viewport, Calcul du Budget Vertical, Une Idée Par Diapositive, structure HTML, motifs d'animation, règles DOM, ratios de grille | references/phase3-html.md |
| 4 | Images | 7 rôles d'image nommés, taxonomie des types d'images, Mode Diapositives d'Images, Anti-Patterns de Graphiques | references/phase4-images.md |
| 5 | Fignolage | Rythme de Page, Hiérarchie des Polices, Système de Théorie des Couleurs, Marqueurs IA, Contraintes Sectorielles, Guide Vocal, Critique d'Œil de Designer, Colonne Vertébrale Narrative | references/phase5-polish.md |
| 6 | Export | PPTX (python-pptx ou pptxgenjs), PDF, déploiement Vercel | references/phase6-export.md |
Modes spécialisés (charger à la demande)
- Mode Diapositive Cinématographique : clip film de 22 secondes avec 5 scènes pour démos de workflow
- Mode Suisse International Strict : design de grille ultra-propre inspiré de Vignelli
- Mode Deck Web Éditorial : decks keynote de style magazine
- Bibliothèque de Modèles HTML de Diapositives : 32 modèles de qualité production issus de
beautiful-html-templates - Protocole de Variation de Thème : 3 directions visuelles distinctes avant verrouillage
- Système d'École de Philosophie de Conception : 5 écoles pour briefs vagues
- Superposition de Notes de l'Orateur : basculement par touche N, mise à jour automatique par diapositive
- Workflow d'Import de Marque : extraire le thème d'un PPTX, d'une URL de site web ou d'un PDF de charte graphique
Détails complets pour tous les modes spécialisés : references/specialized-modes.md
Garde-fous qualité (charger avant livraison)
Tous les garde-fous qualité, mots bannis, règle Data Slop, règle de réduction de copie de 30 %, auto-vérification avant livraison, dépannage et exigences : references/quality-guardrails.md
Préréglages de Style
Voir STYLE_PRESETS.md pour 31 styles curated (11 originaux + 20 étendus) plus Kami Warm Editorial :
11 originaux : Modern SaaS (défaut), Neon Cyber, Midnight Executive, Deep Space, Terminal Green, Paper & Ink, Swiss Modern, Soft Pastel, Warm Editorial, Brutalist, Gradient Wave
20 étendus : Bold Signal, Electric Studio, Creative Voltage, Dark Botanical, Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial, Liquid Glass Bento, Engineering Blueprint, Watercolor Map, Golden Serif Quote, Chalkboard Lesson, Exploded Layer Stack, Hyperreal Product, Summary Infographic, Cobalt Grid, 8-Bit Orbit, Raw Grid, Broadside
Kami Warm Editorial : une spécification éditoriale complète pour des decks de qualité papier. Voir la section Kami dans STYLE_PRESETS.md.
Détails complets des CSS et polices dans STYLE_PRESETS.md.
Comment Lire Cette Compétence
- Lisez d'abord ce fichier. Il contient le Démarrage Rapide, le Cadrage Pré-Vol et l'aperçu des 6 phases.
- Chargez les fichiers de référence à la demande lorsque vous atteignez cette phase. Ne chargez pas toutes les références à la fois.
- Avant de livrer un deck, chargez
references/quality-guardrails.mdet exécutez la liste de vérification Auto-Vérification. - Pour les modes spécialisés (Cinématographique, Suisse Strict, Web Éditorial, etc.), chargez
references/specialized-modes.mduniquement lorsque l'utilisateur demande ce mode. - Pour les animations GSAP, chargez
references/animation-patterns.mdlorsque l'utilisateur souhaite du mouvement au-delà des transitions CSS standard.
Cette structure de divulgation progressive économise les tokens de contexte. Le fichier SKILL.md original d'un seul fichier faisait 1 195 lignes. Ce point d'entrée fait environ 200 lignes. Chaque fichier de référence n'est chargé qu'en cas de besoin.
Référence Rapide d'Export
# Export PPTX (Chemin A : python-pptx, basé sur les images)
python3 scripts/pptx_export.py presentation.html --output presentation.pptx
# Import PPTX (convertir un .pptx existant en JSON pour DeckMason)
python3 scripts/pptx_import.py input.pptx --output decks/input_deck.json
# Aperçu visuel (3 thèmes pour que l'utilisateur choisisse)
python3 scripts/preview_themes.py "Votre Sujet"
# Export PDF (Chrome headless)
chrome --headless --print-to-pdf=presentation.pdf --run-all-compositor-stages-before-draw --virtual-time-budget=5000 presentation.html
# Déploiement Vercel (URL en direct)
npx vercel
Exigences
- Un agent de codage IA avec accès au système de fichiers et au terminal
- Tout backend LLM capable
- Python 3 +
python-pptxpour le chemin d'export PPTX A (pip3 install python-pptx) - Node.js +
pptxgenjspour le chemin d'export PPTX B (npm install pptxgenjs) - Navigateur moderne (Chrome/Edge/Firefox/Safari)
Pas de clés API supplémentaires. Tout s'exécute localement.
Installation npm (optionnel)
# Démarrage rapide sans clonage
npx deckmason init [rép]
# Installation globale
npm install -g deckmason
deckmason init
deckmason themes
deckmason preview "Votre Sujet"
deckmason import compagnie-deck.pptx
Voir README.md pour les instructions npm complètes.