html-first-deck

HTML-First Deck

Une approche en deux phases pour construire un deck personnalisé et superbe que l'utilisateur peut encore modifier dans PowerPoint.

Pourquoi ce flux de travail

PowerPoint est le pire endroit pour itérer sur le design visuel — lent, capricieux, difficile à garder cohérent. HTML/CSS est le meilleur endroit pour itérer : vous pouvez disposer une diapositive, la prévisualiser, et affiner l'espacement, les couleurs et la hiérarchie en secondes. Mais l'artefact final doit être un vrai .pptx modifiable pour que l'utilisateur puisse modifier le texte et la charte graphique dans son propre outil (une exportation image par diapositive leur est inutile).

Donc : concevez en HTML, livrez en PPTX natif. Vous obtenez une itération rapide ET un résultat modifiable.

Ce qui se trouve dans ce dossier :

Fichier	Ce que c'est
references/html_prototype.html	Point de départ de la phase 1 : trois diapositives, couleurs de marque en variables CSS, navigation de diaporama
scripts/pptx_helpers.py	Bibliothèque d'aide de la phase 2 : géométrie, palette, composants d'en-tête/pied/page/carte/pill/point-clé
scripts/render_diagram.py	Rendu d'un SVG dessiné par code en PNG haute résolution
scripts/render_pptx.ps1	Exporte chaque diapositive d'un .pptx en PNG pour vérification (Windows + PowerPoint)
examples/example_deck.py	Un deck de trois diapositives exécutable construit sur les helpers
examples/example_diagram.py	Un générateur de diagramme exécutable montrant toutes les techniques de la section diagrammes

Voix — écrivez les titres comme un consultant, pas comme un rédacteur publicitaire

Lisez ceci avant d'écrire un seul titre, sous-titre ou ligne de corps de texte. Obtenir la mise en page juste et les mots faux produit un deck que l'utilisateur doit réécrire, ce qui est pire que pas de deck du tout. Cela s'applique à tout ce qui va devant un client ou un collègue — decks, diaporamas HTML, tableaux de bord, rapports d'état, one-pagers.

Le registre par défaut des LLM pour les diapositives est celui d'un rédacteur publicitaire percutant. La plupart des publics professionnels ne le souhaitent pas. Sauf si l'utilisateur demande autre chose, écrivez dans le registre d'un consultant senior écrivant pour un public de cadres : simple, déclaratif, spécifique, et terminé en une seule passe.

La règle

Un titre énonce ce qu'est la diapositive. Il ne fait pas de spectacle.

Nommez le contenu. Si un lecteur qui ne parcourt que les titres ne peut pas reconstituer l'argument, les titres ont échoué. Étiqueté et numéroté bat toujours le brillant — Phase 1 : Fuite des remboursements indique au lecteur où il est ; Celle par laquelle nous commençons ne leur dit rien et les oblige à lire pour le découvrir.

Constructions à éviter

À ne pas faire	Pourquoi ça échoue	À faire
Le tableau de bord rapporte. / Il n'explique pas.	Les deux temps « mise en place puis chute ». Se lit comme un slogan, pas une conclusion.	Le tableau de bord actuel rapporte les chiffres mais ne les analyse pas
Ils ont abandonné le dernier outil à cause des tableaux de bord. / Ne leur vendez pas un autre tableau de bord.	Même structure en deux temps, et ça fait la leçon au lecteur.	Pourquoi un autre tableau de bord ne résoudra pas cela
Celle par laquelle nous commençons :	Un teaser avec deux-points qui retient la réponse pour créer du suspense.	Phase 1 : Fuite des remboursements
Et voici comment vous le réparez.	Familier, et répond à une question que personne n'a posée.	Correctif recommandé et estimation des travaux
Trois choses. Puis nous allons prouver.	Fragments saccadés pour le rythme.	Ce dont nous avons besoin de cette réunion
Ce qui atterrit sur la table.	Idiome à la place d'une description.	Ce que nous livrons
Toutes les deux semaines, une conclusion avec un chiffre.	Un slogan là où une étiquette est nécessaire.	Calendrier
Seul quelqu'un qui voit les quatre fournisseurs trouvera cela.	Accumulation rhétorique.	Pourquoi notre équipe est positionnée pour faire ce travail

Évitez aussi : les questions rhétoriques comme titres ; le drame en un mot (Le piège, La stratégie, La fermeture) comme titre principal ; les fragments de phrase utilisés pour l'effet ; les révélations avec tiret ; « Voici le truc » ; tout ce qui semble vouloir être lu à voix haute.

Concrètement

• Titres : groupes nominaux ou phrases déclaratives. Méthode d'analyse. Exigences de données et dates de livraison. Questions pour le client. Nécessaire pour exécuter la phase 1.
• Numérotez le travail. Phases, niveaux, étapes. Phase 1 à Phase 8, Niveau 1/2/3. La numérotation rend un programme lisible et donne aux gens quelque chose à quoi se référer en réunion.
• Sous-titres portent le qualificatif, pas une blague : Phase 1 · méthode, Demande de données · Niveau 1.
• Corps de texte : phrases complètes avec sujet et verbe. Dites la chose une fois, correctement, plutôt que trois fois avec une emphase croissante.
• Gardez les spécificités. Simple ne veut pas dire vague. 8,4 M$ depuis le début de l'année à un taux de remboursement de 12,5 % est parfait. Les chiffres, noms, dates et sources sont ce qui rend la chose crédible.
• Gras avec parcimonie — pour la seule phrase d'un paragraphe qui porte le poids, pas pour le rythme.
• Les citations font exception. Une citation textuelle d'un client peut rester textuelle, et une phrase unique vraiment forte peut se trouver dans une citation en exergue — mais énoncez-la comme une conclusion, pas comme un slogan.

Les pourcentages doivent porter leur base

Les pourcentages sont bons — continuez à les utiliser. Mais un pourcentage sans base ne peut pas être jugé. « Les 10 % des agents les plus performants » signifie 2 personnes s'il y a 20 agents et 100 personnes s'il y en a 1 000 ; le lecteur ne peut pas dire s'il s'agit d'un schéma ou de deux individus.

• Mettez le nombre à côté du pourcentage, chaque fois qu'il s'agit d'une part de personnes, de choses ou d'événements. Les 6 meilleurs agents (10 % sur 60) · 4 100 clients (0,5 % sur 820 000) · Le fournisseur A a reçu 12,0 M$, soit la moitié de tous les dollars de remboursement (24,0 M$).
• Quand le groupe est petit, commencez par le nombre, pas par le pourcentage. En dessous d'environ 30 éléments, le nombre est la conclusion : 6 agents ont émis 18 000 $ bat 10 % des agents ont émis 20 %.
• Deux pourcentages côte à côte ont besoin de leurs deux bases. 20 % de l'argent sur 12 % des contacts n'est utile que si le lecteur sait aussi que c'est 18 000 $ sur 90 000 $ et 3 600 sur 30 000 contacts.
• Nommez le dénominateur. Dites ce dont le pourcentage est le pourcentage : des dollars de remboursement d'août, des clients ayant réclamé au moins une fois, des agents avec 10 jours ou plus travaillés.
• Dites ce qu'un pourcentage signifie en argent ou en personnes quand vous le pouvez. « 3 % ont été payés sur un compte différent » devient 1 500 remboursements (150 K$), 3 % du total de l'année.
• Les conclusions de part de l'ensemble méritent un graphique de part de l'ensemble, comme un graphique à barres empilées à 100 %, afin que le lecteur voie la moitié sans faire de calcul.

Auto-vérification : pour chaque % sur la page, le lecteur peut-il répondre « de combien ? » sans quitter la phrase ? Sinon, ajoutez le nombre.

L'auto-vérification avant d'expédier

Lisez les titres du deck dans l'ordre, seuls. S'ils ressemblent à une table des matières, c'est correct. S'ils ressemblent à un argumentaire, réécrivez-les.

Phase 1 — Prototype en HTML

Construisez deck.html avec un div .slide par diapositive sur un canevas 16:9 (1280×720). Mettez les couleurs de la marque dans des variables CSS :root (tirez-les du modèle de l'utilisateur — voir « Marque » ci-dessous). Disposez les en-têtes, titres de section, cartes, callouts, tableaux. Itérez ici jusqu'à ce que le design soit bon — prévisualisez en l'ouvrant / en le capturant d'écran, et obtenez l'approbation de l'utilisateur sur la structure et l'apparence.

references/html_prototype.html est un point de départ prêt (couverture, une diapositive avec en-tête + trois cartes + point-clé, une diapositive avec image, pied de page) avec la palette de variables CSS. Lisez-le et adaptez-le.

Cette phase est le bac à sable du design. Ne perfectionnez pas chaque mot — clouez le système de mise en page (le chrome en-tête/pied, le style de carte, l'échelle typographique, l'utilisation des accents) car la phase 2 le reflète.

Rendre le prototype navigable comme un diaporama

Ajoutez toujours ce petit script avant </body> pour que la prévisualisation HTML avance comme PowerPoint — un clic (ou →/↓/Espace) va à la diapositive suivante, ←/↑ revient en arrière. Cela rend la revue de la phase 1 comme une présentation et est uniquement en HTML (rien à transférer en phase 2).

La sélection de texte ne doit jamais tourner la page. Les gens sélectionnent du texte sur les diapositives pour le copier. Un glissement se termine par un événement click, donc un gestionnaire de clic simple saute à la diapositive suivante en plein milieu d'une copie. Le script ci-dessous ignore le clic lorsque la souris s'est déplacée de plus de 5px entre l'appui et le relâchement, ou lorsque du texte est sélectionné. Un vrai clic avance toujours.

Un clic doit avancer depuis la diapositive qui a été cliquée, jamais depuis une supposition basée sur la position de défilement. La supposition choisit la mauvaise diapositive sur certaines tailles de fenêtre, donc un clic saute deux diapositives. Les touches (→/←) peuvent toujours utiliser la position de défilement, puisqu'il n'y a rien à cliquer.

<script>
  /* Prévisualisation comme un diaporama : clic ou →/↓/Espace = diapositive suivante, ←/↑ = précédente. La sélection de texte n'avance pas. */
  (function(){
    var slides=[].slice.call(document.querySelectorAll('.slide'));
    function next(){ var y=scrollY+10; return slides.find(function(s){return s.offsetTop>y;}) || null; }
    function prev(){ var y=scrollY-10, p=null; slides.forEach(function(s){ if(s.offsetTop<y) p=s; }); return p; }
    function to(s){ if(s) s.scrollIntoView({behavior:'smooth',block:'start'}); }
    var downX=0,downY=0;
    addEventListener('mousedown',function(e){ downX=e.clientX; downY=e.clientY; });
    addEventListener('click',function(e){
      if(e.target.closest('a,button,input,textarea,select'))return;
      /* la sélection de texte, ou le glissement de la souris, n'est pas un clic sur la diapositive */
      var sel=window.getSelection&&String(window.getSelection()); if(sel&&sel.trim())return;
      if(Math.abs(e.clientX-downX)>5||Math.abs(e.clientY-downY)>5)return;
      /* avance depuis la diapositive qui a été CLIQUÉE, pas depuis une supposition basée sur la position de défilement */
      var s=e.target.closest('.slide'); to(s ? slides[slides.indexOf(s)+1] : next());
    });
    addEventListener('keydown',function(e){
      if(['ArrowRight','ArrowDown',' ','PageDown'].indexOf(e.key)>-1){e.preventDefault();to(next());}
      else if(['ArrowLeft','ArrowUp','PageUp'].indexOf(e.key)>-1){e.preventDefault();to(prev());}
    });
  })();
</script>

Si le deck reste dans le navigateur (un diaporama HTML), arrêtez-vous ici : la phase 1 est la livraison.

Phase 2 — Générer le PPTX natif modifiable

Recréez le design approuvé avec python-pptx pour que chaque élément soit modifiable. Utilisez la bibliothèque d'aide fournie scripts/pptx_helpers.py — copiez-la dans le dossier du deck. Elle fournit la géométrie 16:9, un bloc de palette de marque, et les composants que vous réutiliserez sur chaque diapositive :

• new_prs(), blank_slide(prs), body_bg(slide)
• add_header(slide, title, meta), add_footer(slide, left, right)
• add_section_title, add_subtitle
• add_text(...) — prend en charge une chaîne, une liste de paragraphes, OU des passages de style mixte : [[("Bold bit ", {"bold": True}), ("normal bit", {"color": MUTED})]]
• add_rect, add_card (bande d'accent en haut/gauche), add_pill, bulleted, add_takeaway
• add_image(slide, path, x, y, w) — place une image à ses propres proportions
• save_deck(prs, path) — sauvegarde, et passe à un nouveau nom de fichier si le fichier est verrouillé/ouvert

Structure (voir examples/example_deck.py pour un exemple exécutable de trois diapositives) :

from pptx_helpers import *
def slide_intro(prs): ...      # une fonction constructeur par diapositive
def slide_cards(prs): ...
def main():
    prs = new_prs()
    slide_intro(prs); slide_cards(prs)
    print(save_deck(prs, DECK_DIR / "My Deck.pptx"))

Règles durement acquises (elles évitent les échecs courants)

• Ne jamais écraser un fichier que l'utilisateur a ouvert. PowerPoint verrouille le fichier ; un simple prs.save() lance alors PermissionError. save_deck() gère cela en passant à v2, v3… Conservez la copie de travail à un endroit évident et dites à l'utilisateur quel fichier est le plus récent.
• Construisez tout comme des formes/du texte, pas une image. C'est tout l'intérêt — il faut qu'ils puissent le modifier. Utilisez de vrais tableaux (slide.shapes.add_table) pour les comparaisons denses.
• Définissez les polices explicitement sur chaque exécution (python-pptx n'hérite pas d'une police de thème de manière fiable).
• Supprimez les ombres par défaut sur les formes automatiques (shape.shadow.inherit = False) et effacez leur texte par défaut — les helpers le font déjà.
• Un constructeur par diapositive + un main() qui les liste dans l'ordre. Renumérez les pieds de page là.

Boucle de prévisualisation / vérification (faites cela — n'expédiez pas sans voir)

Après chaque construction, rendez les diapositives en PNG et regardez-les réellement ; corrigez les débordements/espacements ; reconstruisez.

• Windows (PowerPoint installé) :

  powershell -NoProfile -File scripts/render_pptx.ps1 -pptx "My Deck.pptx" -outdir preview
  

  Écrit preview/s1.png, s2.png… Il ouvre le fichier en lecture seule, donc ça fonctionne même si l'utilisateur a le deck ouvert, et il laisse PowerPoint en cours d'exécution s'il était déjà en cours.
• Pas de PowerPoint — libreoffice --headless --convert-to pdf (ou en PNG) si disponible.

Puis lisez les PNG, ajustez les constructeurs, réexécutez. Itérez jusqu'à obtenir un résultat propre.

Marque (couleurs + polices)

Ne faites pas par défaut une seule palette. Tirez la marque du contexte de l'utilisateur : lisez le thème d'un modèle .pptx (ppt/theme/theme1.xml → <a:clrScheme>), le site/CSS de l'entreprise, ou demandez 2–3 couleurs. Définissez-les une fois dans les variables :root (HTML) et le bloc BRAND en haut de pptx_helpers.py (PPTX) pour que les deux phases correspondent. Définissez WORDMARK_PATH sur un logo PNG pour marquer l'en-tête, ou laissez None. Les couleurs livrées dans les deux fichiers sont un espace réservé neutre ; remplacez-les.

Diagrammes dans les diapositives — dessinez-les avec du code, ne les générez pas

Pour le visuel principal d'une diapositive (un diagramme de flux, pipeline, entonnoir, architecture ou processus), ne placez pas à la main des dizaines de formes PowerPoint et n'utilisez pas un générateur d'images IA. Les modèles d'images sont faits pour les photos et l'art. Pour les diagrammes, ils échouent : texte flou, étiquettes mal orthographiées, formes qui ne s'alignent pas, couleurs qui dérivent de la marque, et rien n'est modifiable.

À la place, écrivez un SVG (un dessin vectoriel défini dans le code : <path>, <circle>, <rect>, <text>, avec des dégradés et des filtres) et rendez-le en PNG haute résolution. Un ordinateur dessine chaque ligne selon les spécifications, donc c'est parfaitement net, exactement dans les couleurs de la marque, reproductible, et trivialement modifiable (changez un code hexadécimal ou un mot et rendez à nouveau).

Une analogie pour l'utilisateur : demander à un modèle d'image un diagramme, c'est comme demander à un artiste de dessiner à main levée un plan de mémoire. Écrire du code pour le dessiner, c'est la CAO — une règle et un compas — exact à chaque fois.

Utilisez-le pour : diagrammes de pipeline/flux/entonnoir, diagrammes d'architecture, cartographies de processus, figures conceptuelles, …