La semaine dernière, j'ai été invité par le professeur Li Jigang à participer à un entretien privé sur l'IA et les organisations.
Après la session, la question la plus fréquente était : « Avec quoi ce PPT a-t-il été fait ? Peux-tu l'open-sourcer ? »
Je ne m'attendais pas à ce que le sous-produit devienne le produit principal.
J'ai donc décidé de l'open-sourcer, en l'appelant guizang-ppt-skill (https://github.com/op7418/guizang-ppt-skillhttps://github.com/op7418/guizang-ppt-skill)).
L'article d'aujourd'hui expliquera à quoi ressemble ce Skill et pourquoi, en tant que designer depuis dix ans, je le trouve esthétique.
À quoi ça ressemble
Quand on ouvre un PPT généré par le Skill, la première impression est souvent : ça n'a pas l'air d'avoir été fait par une IA.
Quelques caractéristiques intuitives :
- Couverture : Fond couleur encre + titre principal avec empattements, avec un léger fluide WebGL qui coule lentement en arrière-plan.
- Corps : La couleur de fond revient à un blanc papier avec du texte couleur encre imprimé par-dessus, comme un magazine imprimé ouvert.
- Changement de page : Glissement horizontal gauche-droite, compatible avec le clavier, la molette et les gestes tactiles — pas le « diapositive suivante » standard de PowerPoint.
- Métadonnées : Chaque page a un petit texte à chasse fixe dans les quatre coins, affichant des choses comme « Acte II · 15 / 25 », semblable aux numéros de page des journaux.
J'ai donné un nom à cette tonalité visuelle : « Magazine électronique × E-Ink ».
L'inspiration vient des traditions de mise en page des magazines imprimés comme Monocle, The Guardian et le NYT, superposées à l'esthétique de lecture du papier électronique Kindle, le tout lié par une syntaxe d'interaction Web contemporaine.
Ce qu'il peut faire
Le Skill propose actuellement 10 mises en page, 5 thèmes de couleurs prédéfinis et un ensemble complet d'interactions de changement de page.
10 mises en page couvrent presque tous les types de pages utilisés dans une session de partage de 15 à 30 pages :
Couverture d'ouverture, séparateurs de chapitres, affiches de données, texte à gauche-image à droite, grilles d'images, processus en pipeline, questions de suspense, grandes citations, comparaisons Avant/Après et mises en page mixtes texte-image.
Chacune est un squelette HTML qui peut être collé directement ; il suffit de changer le texte et les images pour l'utiliser.
5 thèmes correspondent à différents scénarios :
- Ink Classic — Lancements commerciaux, défaut général
- Indigo Porcelain — Technologie, recherche, conférences IA
- Forest Ink — Nature, durabilité, sciences humaines
- Kraft Paper — Nostalgie, littérature, magazines indépendants
- Dune — Art, design, créativité
Chaque thème n'est qu'un ensemble différent de valeurs pour 6 variables CSS. Changer de thème nécessite seulement de remplacer ces 6 lignes de code dans :root.
Les utilisateurs ne sont pas autorisés à personnaliser les codes hexadécimaux ; j'expliquerai pourquoi plus tard.
Les interactions de changement de page prennent en charge les flèches gauche/droite du clavier, la molette de la souris, le glissement tactile, les sauts par points en bas et la touche Échap pour ouvrir un index de vignettes.
L'objectif est de se rapprocher le plus possible de l'expérience de feuilleter un vrai magazine dans un navigateur.
Le résultat est un fichier HTML unique. Double-cliquez pour le visualiser dans un navigateur. L'envoyer à d'autres ne nécessite qu'un seul fichier, sans se soucier des polices ou des animations qui pourraient ne pas fonctionner sur l'ordinateur de quelqu'un d'autre.
Comment l'utiliser
En réalité, la vraie valeur de ce Skill ne réside pas dans le modèle lui-même, mais dans le fait qu'il définit une interface pour la collaboration Humain × IA sur les PPT.
Voici trois choses que je pense être les plus utiles à partager après avoir utilisé ce Skill moi-même pendant une semaine.
Clarifiez ces 6 points avec l'IA d'abord
Une fois le Skill installé, il suffit de dire « Aide-moi à faire un PPT style magazine », et Claude vous posera proactivement 6 questions :
- Quel est le public et le scénario ? (Interne à l'industrie / Lancement commercial / Partage privé)
- Quelle est la durée du partage ? (15 min ≈ 10 pages, 30 min ≈ 20 pages)
- Y a-t-il du matériel original ? (Documents, données, anciens PPT, liens d'articles)
- Y a-t-il des images, et où se trouvent-elles ?
- Quelle couleur de thème voulez-vous ? (Choisissez parmi 5 préréglages)
- Y a-t-il des contraintes strictes ? (Doit inclure XX données / Ne peut pas montrer YY)
Vous n'êtes pas obligé de tout dire d'un coup ; il posera les questions une par une. Après avoir répondu, il vous donnera d'abord un plan et un tableau de rythme thématique. S'aligner d'abord, puis commencer à coder — cette étape évite 80 % de mes reprises.
Le plus grand point douloureux de l'utilisation de l'IA pour les PPT auparavant était qu'elle commençait à écrire immédiatement, et on ne se rendait compte que la direction était erronée qu'à la page 10. Ce processus de clarification déplace « l'alignement » au tout début.
Comment insérer des images
Les images sont placées dans un dossier images/ au même niveau que index.html, avec des règles de nommage spécifiques :
1ppt/2├── index.html3└── images/4 ├── 01-cover.jpg5 ├── 03-figma.png6 └── 05-dashboard.png
- Numéros de page avec zéro non significatif + sémantique anglaise — 01 au lieu de 1, cover au lieu de fengmian. Cela facilite le tri et rend la référence IA claire.
- Utilisez JPG pour les photos, PNG pour les captures d'écran — Les captures d'écran contiennent du texte ; le PNG les garde nettes.
- Largeur d'image unique ≥ 1600px — Pour qu'elle ne soit pas floue lors de la projection sur grand écran.
Il suffit de dire à Claude « La page 3 est une capture d'écran de l'interface Figma », et il l'écrira automatiquement comme images/03-figma.png. Il vous suffit de déposer le fichier portant le même nom dans le dossier.
Le secret du remplacement d'image sans perte : écraser avec le même nom
C'est le plus gros piège que j'ai rencontré — vouloir changer une image après que la copie est faite, puis devoir rechercher et remplacer les chemins globalement, ce qui casse souvent le HTML.
La bonne méthode tient en une seule phrase : Écrasez l'ancienne image avec la nouvelle en utilisant le même nom, et ne changez pas un seul caractère dans le HTML.
Pourquoi c'est comme ça
Après avoir parlé de comment l'utiliser, parlons de pourquoi c'est comme ça.
Un bon design n'est pas un mystère ; c'est un ensemble de décisions décomposables. Ce que j'ai fait, c'est essentiellement déplacer le langage de mise en page accumulé par l'industrie du magazine pendant plus de cent ans dans le HTML.
Division typographique à trois niveaux
- Empattements → « Opinions ». Utilisez des empattements pour les titres principaux ; les lecteurs ressentent immédiatement que « c'est une phrase à prendre au sérieux ».
- Sans empattement → « Informations ». Haute densité pour le corps du texte, facile à lire.
- Chasse fixe → « Métadonnées ». Numéros de chapitre, dates et numéros de page dans les en-têtes et pieds de page, comme les pieds de page de magazine ou le code dans un terminal.
Les lecteurs n'ont pas à réfléchir intensément ; leurs yeux savent automatiquement si une phrase est le texte principal ou une note de bas de page.
Discipline des couleurs
Blanc papier, couleur encre, plus une couleur d'accentuation suffit.
Le blanc pur est éblouissant, et le noir pur est agressif ; l'industrie de l'imprimerie ne fait jamais ça, et Kindle non plus.
Dans les 5 thèmes du Skill, aucune couleur de fond n'est #FFFFFF, et aucune couleur de texte n'est #000000.
Chaque ensemble n'expose que 6 variables CSS, et le SKILL.md indique explicitement : Les utilisateurs ne sont pas autorisés à personnaliser les codes hexadécimaux ; ils doivent choisir l'un des cinq.
Plus les contraintes sont strictes, plus le style est stable. Protéger l'esthétique est plus important que de donner la liberté aux utilisateurs.
Grille et rythme
Des grilles fixes comme 7:5, 6:6 et 8:4 assurent l'ordre sur une seule page.
Les pages hero et les pages non-hero doivent alterner pour assurer le rythme de l'ensemble du deck.
Une page dense, une page aérée — c'est la sensation de « respiration » que l'on ressent en feuilletant un magazine.
Une règle stricte est inscrite dans le Skill : plus de trois pages consécutives avec le même thème est considéré comme une erreur P0.
Un PPT sans rythme n'est qu'une pile de diapositives regroupées en PDF.
Derniers mots
Aucune des règles ci-dessus n'a été inventée par moi.
J'ai été designer pendant dix ans, faisant de l'UI, de l'interaction et des effets IA ; ce sont en fait des évidences du secteur.
Je les ai simplement écrites une par une dans SKILL.md et checklist.md pour que l'IA puisse les exécuter pour moi.
En d'autres termes, ce Skill est un package compressé de dix ans de mon esthétique.
Avant, pour faire un PPT correct, je devais passer deux jours à ajuster manuellement les grilles, choisir les tailles de police et sélectionner les valeurs de couleur.
Maintenant, je jette simplement le matériel à l'IA, elle l'assemble selon ces règles, et je n'ai plus qu'à vérifier.
C'est pour cela que j'ose l'open-sourcer.
Les règles n'étaient pas ma propriété exclusive ; les designers de Monocle les utilisaient des décennies avant moi. Je les ai simplement copiées dans du HTML 2026.
Le Skill est déjà sur GitHub : github.com/op7418/guizang-ppt-skill
Le README contient une « invite d'installation pour l'IA ». Copiez-la et collez-la dans votre Claude Code ou un autre Agent IA, et il terminera l'installation automatiquement. Une fois installé, dites « Aide-moi à faire un PPT style magazine » pour le déclencher.
Vous pouvez également l'utiliser dans l'Agent Bloome, qui est actuellement gratuit :
https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G
Si vous trouvez ce contenu utile, n'hésitez pas à liker ou à le partager avec des amis qui en ont besoin.
Vous pouvez également partager les PPT que vous avez réalisés avec ce Skill dans les commentaires.
