Diaporama Graphique
Générez un diaporama HTML professionnel à partir d'un brief, de notes de contenu ou d'un fichier existant. Le résultat est un fichier HTML autonome — s'ouvre dans n'importe quel navigateur, aucun outil de build requis.
Règles critiques — non négociables :
- Chaque diapositive DOIT tenir dans 100vh. Pas de défilement à l'intérieur des diapositives. Si le contenu déborde → divisez-le en deux diapositives.
- TOUTES les tailles de police et les espacements DOIVENT utiliser
clamp(). Jamais de px/rem fixes sur les éléments qui évoluent. - HTML autonome : tout le CSS/JS en ligne. Zéro dépendance externe, sauf le lien CDN de police.
- Ne jamais déverser le HTML dans le chat. Enregistrer dans un fichier, afficher uniquement le résumé.
- Pas d'esthétique générique moche d'IA — vérifiez la liste des éléments interdits dans
references/style-presets.md.
Étape 1 : Collecte du Brief
Trois éléments sont nécessaires pour commencer. Si les trois sont présents dans le message : passez à l'Étape 2.
Si l'un manque, demandez exactement :
"Pour commencer, j'ai besoin de trois choses :
- Objectif — à quoi sert ce diaporama ? (pitch investisseur / appel commercial / conférence / présentation interne / onboarding / autre)
- Audience — qui le verra ? (VCs, prospects, votre équipe, dirigeants, salle de conférence, LinkedIn)
- Sujet ou contenu — collez des notes, une URL, une brève description ou téléchargez un fichier"
Attendez les trois éléments avant de continuer.
Étape 2 : Paramétrage Complet
Posez toutes les questions en un seul message, regroupées par catégorie. L'utilisateur peut ignorer — des valeurs par défaut s'appliquent.
"Quelques questions avant de commencer :
Contenu
- Message clé — une phrase que l'audience doit retenir après la présentation
- Nombre de diapositives — Court (5-10) / Moyen (10-20) / Long (20+) ?
- Source de contenu — Contenu prêt / Notes approximatives (je structure) / Sujet seulement (je rédige) ?
- Éléments existants — Y a-t-il des images, captures d'écran ou logos à inclure ? (oui + chemins / non)
Design 5. Style — midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / "montre-moi les options" 6. Ratio d'aspect — 16:9 (1920×1080, par défaut) / 1:1 (1080×1080, LinkedIn) 7. Édition en ligne — le texte doit-il être modifiable dans le navigateur après export ? (Oui / Non)
Sortie 8. Format de sortie — HTML uniquement / HTML + PDF / HTML + PDF + déploiement vers URL 9. Nom du diaporama — slug pour le nom du fichier/dossier (par exemple "q2-pitch-investisseur") ; je déduirai si ignoré"
Valeurs par défaut si ignoré :
| Question | Défaut |
|---|---|
| Message clé | déduit de l'objectif + du sujet |
| Nombre de diapositives | 12 |
| Source de contenu | sujet seulement |
| Éléments existants | aucun |
| Style | clean-slate |
| Ratio d'aspect | 16:9 |
| Édition en ligne | Non |
| Format de sortie | HTML + PDF |
| Nom du diaporama | déduit du slug du sujet |
Si style = "montre-moi les options" :
Générez 3 aperçus HTML d'une seule diapositive (un pour chacun des 3 préréglages de style adaptés à l'objectif du diaporama). Enregistrez dans .claude-design/previews/style-a.html, style-b.html, style-c.html. Ouvrez chacun : open .claude-design/previews/style-a.html etc. Demandez à l'utilisateur de choisir avant l'Étape 3.
Étape 2.5 : Direction de Design Interne (non montrée à l'utilisateur)
À partir des réponses de l'Étape 2, déterminez avant l'Étape 3 :
Caractère visuel (déduit du style, ou inféré s'il n'est pas spécifié) :
- midnight-editorial ou magazine-red →
dark-editorial - clean-slate ou product-minimal →
light-minimal - matt-gray →
neutral-professionnel - brutalist →
bold-expressive - mint-pixel-corporate ou soft-cloud →
fresh-corporate - Style non spécifié : pitch investisseur → midnight-editorial ; commercial → clean-slate ; conférence → brutalist ou midnight-editorial ; interne → matt-gray
UNE diapositive incontournable — identifiez avant l'Étape 3 :
- Pitch investisseur → stat-highlight (diapositive traction/métriques)
- Diaporama commercial → stat-highlight (diapositive ROI/résultats)
- Conférence → quote-callout ou stat-highlight (insight clé)
- Présentation interne → closing-cta (diapositive décision/recommandation)
Biais de sélection de mise en page — notez les 2-3 mises en page les plus pertinentes pour ce type de diaporama à prioriser à l'Étape 3.
Ne demandez jamais à l'utilisateur une direction de design — déduisez-la entièrement de ses réponses.
Étape 3 : Conception de la Structure
Lisez references/layout-library.md avant de planifier.
Planifiez la séquence complète des diapositives. Attribuez un type de mise en page parmi les 13 de references/layout-library.md à chaque diapositive.
Type de diaporama → structure typique :
Pitch investisseur (12 diapositives) :
- [title-hero] Entreprise + slogan
- [section-divider] Le Problème
- [text-full] Détail du problème
- [text-left-image-right] Aperçu de la solution
- [image-full] Capture d'écran du produit
- [stat-highlight] Traction — diapositive incontournable
- [comparison-table] vs. concurrents
- [timeline] Feuille de route
- [text-full] Équipe
- [stat-highlight] Taille du marché
- [text-left-image-right] Modèle économique
- [closing-cta] La demande
Diaporama commercial (8-10 diapositives) :
- [title-hero]
- [quote-callout] Point douloureux du prospect
- [text-left-image-right] Solution
- [image-grid] Captures d'écran du produit
- [stat-highlight] ROI/résultats — incontournable
- [comparison-table] vs. alternatives
- [text-full] Mise en œuvre / prochaines étapes
- [closing-cta]
Conférence (15-20 diapositives) : title-hero → section-dividers → text-full → image-full → stat-highlight ou quote-callout (incontournable) → timeline → closing-cta
Présentation interne (8-12 diapositives) : title-hero → text-full (contexte) → stat-highlight (état actuel) → two-column-text (options) → comparison-table → text-full (recommandation) → closing-cta (la décision — incontournable)
Affichez la structure proposée sous forme de liste numérotée avec [type-mise-en-page] entre crochets. Exemple :
Structure proposée (12 diapositives, style midnight-editorial) :
1. [title-hero] DataPulse — Décisions de revenus en 5 minutes
2. [section-divider] Le Problème
...
12. [closing-cta] La demande + [email protected]
Cette structure fonctionne-t-elle, ou dois-je ajuster certaines diapositives ?
Attendez la confirmation avant l'Étape 4.
Étape 4 : Rédaction du Contenu
Rédigez le texte par diapositive dans l'ordre. Texte brut uniquement — pas encore de HTML.
Règles de rédaction par mise en page :
title-hero: titre (6 mots max) + sous-titre (1 phrase) + éventuel badgesection-divider: étiquette de section de 2-4 mots uniquementtext-full: en-tête (5 mots max) + 4-6 puces OU 2 paragraphes (jamais les deux sur la même diapositive)text-left-image-right/image-left-text-right: en-tête + 3-4 puces +[IMAGE : description]two-column-text: 2 en-têtes de colonne + max 3 puces chacunimage-full:[IMAGE : description]+ légende optionnelle (10 mots max)image-grid: jusqu'à 6[IMAGE : description]espaces réservés avec courtes légendesstat-highlight: 2-4 métriques écrites commeNOMBRE | étiquette(par exemple3× | clôture plus rapide). ZÉRO texte supplémentaire.quote-callout: citation (30 mots max) + attribution (nom, titre)comparison-table: en-têtes de colonne (3 max) + 4-6 étiquettes de ligne + contenu de cellule (1-3 mots chacun)timeline: 3-6 jalons (étiquette + date + description d'une ligne)closing-cta: titre (5 mots max) + texte d'action CTA + coordonnées (email + URL — les deux requis)
Mots interdits (dans tout le texte, sans exception) : "puissant", "transparent", "révolutionnaire", "exploiter", "innovant", "révolutionnaire", "transformer", "de pointe", "robuste", "débloquer", "évolutif" (comme adjectif de remplissage).
Philosophie de rédaction : Les fragments sont acceptables. Les nombres battent les adjectifs. Chaque mot doit gagner sa place.
Étape 5 : Génération HTML
Lisez TOUT avant de générer du HTML :
Références de cette compétence :
references/design-system.mdreferences/layout-library.mdreferences/style-presets.mdreferences/animation-guide.md
Références croisées frontend-slides (lisez ces fichiers exacts) :
/Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css— incluez l'intégralité du contenu textuellement dans le bloc<style>/Users/ksd/Desktop/Varnan_skills/frontend-slides/html-template.md— classe SlidePresentation, navigation clavier, système d'édition en ligne/Users/ksd/Desktop/Varnan_skills/frontend-slides/animation-patterns.md— animations d'entrée, effets de fond, effets interactifs
Règles de génération :
- HTML autonome unique. Tout le CSS et JS en ligne. Le lien CDN de police
<link>est la seule référence externe. - Incluez l'intégralité du contenu textuel de
viewport-base.cssdans le bloc<style>— ne paraphrasez ni ne réduisez. - Polices de Google Fonts ou Fontshare uniquement. Les choix de polices viennent du préréglage choisi dans
references/style-presets.md. - Utilisez la classe SlidePresentation de
html-template.md. Implémentez la navigation clavier complète (flèches, espace, page up/down), touch/glissement, barre de progression et points de navigation.navDotsContainer.innerHTML = ""avant de construire les points de navigation — ne sautez jamais cette étape. - Si l'édition en ligne est activée : implémentez le système d'édition en ligne complet de
html-template.mdincluantexportFile(). La fonctionexportFile()DOIT supprimercontenteditable,body.edit-activeet les classes.active/.showavant de capturerouterHTML. - Ratio d'aspect :
- 16:9 (par défaut) : les diapositives sont
width: 100vw; height: 100vh - 1:1 (LinkedIn) : ajoutez la propriété personnalisée CSS
--slide-height: min(100vh, 100vw)et utilisez-la sur.slide
- 16:9 (par défaut) : les diapositives sont
- Chaque section de diapositive DOIT utiliser
class="slide"— requis pour la détection de diapositive deexport-pdf.sh. - Ajoutez un commentaire avant chaque diapositive :
/* === SLIDE N : TYPE-MISE-EN-PAGE === */ - Appliquez la diapositive incontournable de l'Étape 2.5 avec un poids visuel maximal — typographie la plus grande, le plus d'animations, l'élément signature du préréglage de style à pleine intensité. Toutes les autres diapositives sont compositionnellement plus calmes.
- Aucune image fournie → utilisez des visuels générés par CSS (maillages de dégradés, formes géométriques, motifs de grille de
animation-patterns.md). C'est un chemin de première classe, pas un repli.
Discipline typographique :
- Les chiffres statistiques :
clamp(3.5rem, 12vw, 9rem)— une métrique qui remplit un tiers de la diapositive donne une impression d'autorité - Titre du héros :
clamp(2.5rem, 8vw, 6rem)au minimum. Ne réduisez jamais la taille par sécurité. - N'utilisez jamais de px/rem fixes sur un élément que l'utilisateur verra. Utilisez clamp pour tout.
Piège CSS de viewport-base.css : N'écrivez jamais -clamp(), -min(), -max() directement dans le CSS. Enveloppez dans calc(-1 * clamp(...)).
Étape 6 : Auto-Vérification Qualité
Vérifiez chaque élément. Corrigez chaque échec — ne sautez pas.
Affichage et rendu :
- Chaque
.slideaheight:100vh; height:100dvh; overflow:hidden - TOUTES les tailles de police et espacements utilisent
clamp()— pas de px fixe sur les éléments évolutifs - Aucune diapositive ne déborde à la résolution 1280×720 (vérifiez les limites de densité de
layout-library.md) - Les images utilisent
max-height: min(50vh, 400px) - Les points d'arrêt pour les hauteurs de fenêtre 700px, 600px, 500px sont présents (de viewport-base.css)
- La requête média
prefers-reduced-motionest présente - Pas de
-clamp(),-min(),-max()dans le CSS — enveloppé danscalc(-1 * ...)si négatif nécessaire
Structure :
- Le nombre de diapositives correspond au plan de l'Étape 3
- Chaque diapositive utilise
class="slide" - Chaque type de mise en page est correctement implémenté selon
references/layout-library.md - La classe SlidePresentation est présente avec navigation clavier, tactile, barre de progression, points de navigation
-
navDotsContainer.innerHTML = ""avant de construire les points de navigation - Si l'édition en ligne est activée :
exportFile()supprime l'état d'édition avant de capturerouterHTML
Qualité du design :
- UNE diapositive incontournable visuellement dominante — pas enterrée parmi des diapositives de poids égal
- Hiérarchie typographique claire : affichage >> en-tête >> corps (rapport de taille d'au moins 2:1 entre les niveaux)
- Les tokens du préréglage de style sont appliqués de manière cohérente (couleurs, polices de
references/style-presets.md) - Pas de motifs moches (vérifiez la liste des interdits dans
references/style-presets.md)
Contenu :
- Aucun mot interdit dans le texte des diapositives
- Le titre du héros fait 6 mots ou moins
- stat-highlight a ZÉRO texte supplémentaire en compétition avec les nombres
- closing-cta contient une action spécifique + coordonnées (pas seulement "Merci")
Si un contrôle échoue : corrigez sur place, puis relancez mentalement la liste de vérification avant de continuer.
Étape 7 : Sortie
Sauvegardez d'abord le HTML principal :
mkdir -p deck/[nom]-slides
Écrivez dans : deck/[nom]-slides/index.html
Ouvrez-le : open deck/[nom]-slides/index.html
Fichiers HTML par diapositive (toujours générés) :
Extrayez chaque <section class="slide"> du HTML principal. Pour chacun, créez un fichier autonome avec :
- Le bloc
<style>complet du HTML principal (copié textuellement) - La
<section class="slide">individuelle encapsulée dans une coque HTML minimale - Pas de JS SlidePresentation (affichage statique par diapositive, pas de navigation nécessaire)
Écrivez dans : deck/[nom]-slides/slide-001.html, slide-002.html, etc. (numérotation à 3 chiffres).
Si PDF demandé :
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
deck/[nom]-slides/index.html \
deck/[nom].pdf
Note : la première exécution installe Playwright automatiquement (~30-60 secondes). Informez l'utilisateur.
Si déploiement demandé :
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/deploy.sh \
deck/[nom]-slides/
Nettoyage : Supprimez .claude-design/previews/ si des fichiers d'aperçu de style ont été générés à l'Étape 2.
Étape 8 : Résumé (pas de HTML dans le chat)
Présentez dans le chat :
## Diaporama : [nom du diaporama]
Date : [aujourd'hui] | Style : [style] | Diapositives : [N] | Ratio : [16:9 ou 1:1]
Objectif : [objectif] | Audience : [audience]
---
### Fichiers
Principal : deck/[nom]-slides/index.html
Par diapositive : deck/[nom]-slides/slide-001.html → slide-0NN.html
PDF : deck/[nom].pdf [si généré]
URL en ligne : [url] [si déployé]
---
### Navigation
Flèches / Espace / Page Up/Down — avancer dans les diapositives
Cliquez sur les points de navigation — sauter à une diapositive
Tactile / glissement — fonctionne sur mobile
---
### Personnalisation
Éditez les variables CSS :root en haut du fichier pour changer les couleurs
Remplacez l'URL de police @import pour changer la typographie
Supprimez la classe .reveal des éléments pour désactiver les animations d'entrée
---
### Liste de vérification du diaporama
- [ ] Remplacez les espaces réservés [IMAGE : description] par des vraies images
- [ ] Vérifiez que la métrique/citation sur la diapositive [N] est exacte (la diapositive incontournable)
- [ ] Testez sur la taille d'affichage cible ([1920×1080 ou 1080×1080])
- [ ] Si présentation en direct : testez la navigation clavier en plein écran