Compétence d'agent Guizang PPT HTML

Une compétence d'agent pour Claude Code, Codex et les environnements de codage similaires. Elle génère des présentations HTML à fichier unique à défilement horizontal, des visuels de présentation et des pages de couverture pour les réseaux sociaux.

Elle est livrée avec deux systèmes visuels :

• Style A : magazine éditorial × encre électronique. Imaginez Monocle avec du code cousu dedans. Idéal pour les conférences narratives, les opinions, les salons et la voix personnelle.
• Style B : style typographique international suisse. Grille prioritaire, une couleur d'ancrage très saturée, des rectangles nets, des filets fins et un contraste typographique extrême. Idéal pour les faits, les produits, les analyses et les cadres conceptuels.

Distillé par Guizang à partir de conférences hors ligne telles que « L'entreprise unipersonnelle : les organisations pliées par l'IA » et « Une nouvelle façon de travailler ». Chaque écueil rencontré lors de ces présentations est consigné dans checklist.md.

Ancien thème · Style A Magazine éditorial

Nouveau thème · Style B Suisse international

Démarrage en 30 secondes

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Ou collez ceci dans un agent IA avec accès au shell :

Installez guizang-ppt-skill pour moi. Clonez https://github.com/op7418/guizang-ppt-skill dans ~/.claude/skills/guizang-ppt-skill, puis vérifiez que SKILL.md, assets/ et references/ existent.

Si vous l'avez déjà installé, mettez à jour avec :

Mettez à jour guizang-ppt-skill pour moi. Allez dans ~/.claude/skills/guizang-ppt-skill, exécutez git pull, puis indiquez-moi le dernier commit.

Demandez ensuite à votre agent :

Créez une présentation de style suisse à partir de cet article, environ 7 diapositives, avec 2-3 visuels générés.

Autres invites utiles :

Transformez ce fichier Markdown en une présentation de style magazine éditorial.
Créez une couverture sociale 21:9 à partir de l'idée centrale de cette présentation.
Redessinez cette capture d'écran de produit en tant que visuel de diapositive 16:10.

Ce que vous obtenez

• 🖋 Deux systèmes visuels : narration éditoriale pour le Style A, structure suisse factuelle pour le Style B
• 📐 Navigation par balayage horizontal : flèches ← → / molette de la souris / balayage tactile / points en bas / ÉCHAP pour l'index
• 🧩 Style A 10 mises en page : couverture, séparateur, grands chiffres, image/texte, grille d'images, pipeline, comparaison, et plus encore
• 🧱 Style B 22 mises en page verrouillées : Couverture, Déclaration, Tour KPI, Diagramme en boucle, Comparaison en duo, Image héroïque, Manifeste de clôture, et plus encore
• 🎨 Préréglages de thèmes sélectionnés : 5 thèmes d'encre électronique pour le Style A, 4 thèmes de couleur d'ancrage suisse pour le Style B
• 🖼 Flux d'images Codex optionnel : générez des photos documentaires, des infographies, des diagrammes de flux, des cartes système et des scènes d'interface utilisateur avec GPT-Image 2.0 / GPT-M 2.0, puis insérez-les aux ratios adaptés au modèle
• 📰 Couvertures sociales : générez des images de couverture WeChat 21:9, des cartes de partage 1:1, des couvertures Xiaohongshu 3:4, des vignettes vidéo et des variantes associées
• 📴 Mode statique basse consommation : appuyez sur B pour transformer l'animation WebGL / canvas en visuels statiques
• 📄 Fichier HTML unique — pas de build, pas de serveur, ouvrez directement dans le navigateur

Ce qui convient / ne convient pas

✅ Convient : conférences hors ligne, discours d'ouverture sectoriels, salons privés, lancements de produits IA, journées de démonstration, présentations avec une forte voix personnelle

❌ Ne convient pas : tableaux riches en données, présentations de formation (densité trop faible), édition collaborative multi-utilisateurs (HTML statique)

Cas d'utilisation courants

Pourquoi des présentations HTML

• Édition native pour les agents : HTML / CSS est du texte brut, donc les agents peuvent le lire, le modifier et le valider directement.
• Densité visuelle supérieure à Markdown : mise en page précise, positionnement, mouvement, interactivité et formats de couverture.
• Livraison légère : un fichier HTML peut être ouvert, présenté, envoyé, capturé en capture d'écran ou enregistré.
• Meilleures portes de qualité : le validateur suisse peut détecter les décalages de mise en page, le placement d'image non sécurisé, les titres de corps centrés et les pièges de texte SVG.
• Un système visuel pour toutes les sorties : les présentations, les visuels générés, les couvertures et les refontes de captures d'écran peuvent partager les mêmes règles de style.

Support de plateforme

Installation

Option 1 : installation en une ligne (recommandée)

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Option 2 : collez ceci dans une IA

Installez la compétence guizang-ppt-skill de Claude Code pour moi. Étapes :

1. Assurez-vous que ~/.claude/skills/ existe (créez-le si ce n'est pas le cas)
2. Exécutez git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
3. Vérifiez : ls ~/.claude/skills/guizang-ppt-skill/ doit afficher SKILL.md, assets/, references/
4. Dites-moi quand c'est terminé. Ensuite, dire des choses comme « fais-moi une présentation de style magazine » déclenchera cette compétence.

Collez le bloc ci-dessus dans Claude Code / Cursor / tout agent IA avec accès shell et il s'occupe de l'installation.

Option 3 : CLI manuelle

git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill

Comment le déclencher

Une fois installé, Claude Code détecte automatiquement la compétence. Phrases de déclenchement :

• « Fais-moi une présentation de style magazine »
• « Fais-moi une présentation de style suisse »
• « Génère une présentation à défilement horizontal »
• « Présentation de style magazine éditorial »
• « Diapositives à l'encre électronique pour ma conférence »
• « Crée une couverture WeChat 21:9 à partir de cet article »
• « Crée une carte de partage 1:1 à partir de cette présentation »

Flux de travail

La compétence est un flux de travail structuré ; l'agent vous guide à travers chaque étape :

1. Choisissez le style — Style A magazine éditorial, ou Style B Suisse international
2. Clarifiez l'intention — liste de contrôle en 7 questions : style, public, durée, matériel source, images/captures d'écran, thème, contraintes strictes
3. Copiez le modèle — Le Style A utilise assets/template.html ; le Style B utilise assets/template-swiss.html
4. Remplissez le contenu — créez un plan rythmique, puis choisissez et adaptez les squelettes de mise en page correspondants
5. Génération d'image optionnelle — dans Codex, demandez s'il faut utiliser des images GPT-Image 2.0 / GPT-M 2.0, puis insérez-les aux ratios appropriés à la page
6. Auto-vérification — comparez avec references/checklist.md ; tous les problèmes P0 doivent être résolus ; les présentations suisses doivent également passer le validateur de mise en page
7. Aperçu — ouvrez le HTML dans un navigateur
8. Itération — utilisez les styles en ligne pour ajuster la taille de la police, la hauteur, l'espacement

Spécification complète dans SKILL.md.

Style B Suisse

Le thème suisse est un système de mise en page strict, pas seulement une peau CSS.

• 22 mises en page nommées : les diapositives de corps doivent utiliser S01 à S22 ; n'inventez pas de nouvelles structures
• 4 couleurs d'ancrage : Bleu Klein international, jaune citron, vert citron, orange de sécurité
• Verrouillage de grille : grille de 16 colonnes, rectangles nets, filets de 1px, pas d'ombres, pas de dégradés, pas de cartes arrondies
• Mise à l'échelle des titres chinois : les titres entièrement en chinois doivent être d'un cran plus petit pour préserver l'espace pour le contenu et les images
• Alignement en bas du texte et de l'image : les blocs de texte et d'image doivent s'aligner en bas dans les mises en page image gauche/droite, tout en restant à l'écart des commandes de pagination
• Emplacements d'image : les images doivent se trouver dans les régions data-image-slot définies par le modèle, souvent générées en 21:9 ou 16:10
• Validation stricte : le validateur détecte les titres de corps centrés, les mises en page expérimentales, le texte SVG visible et les images placées hors des emplacements

Validation suisse :

node scripts/validate-swiss-deck.mjs path/to/index.html

Flux d'images Codex

Dans Codex, une fois le premier brouillon de la présentation prêt, l'agent peut demander si l'utilisateur veut des visuels générés. Une fois confirmé, choisissez un type ou un style d'image. Les types courants incluent :

• Photos documentaires : scènes réelles de type Fuji / Leica qui ajoutent une texture humaine
• Infographies / diagrammes de flux / graphiques de comparaison / cartes système : pour les concepts qui ne peuvent pas être bien expliqués par des photos
• Encadrement de captures d'écran / refontes de captures d'écran : préservez les captures d'écran brutes avec des arrière-plans groupés et un canevas de style CleanShot X d'abord ; utilisez la génération de scènes d'interface utilisateur uniquement lorsque la capture d'écran doit être reconstruite
• Affiches de données / graphiques : transformez les chiffres clés en actifs visuels prêts à insérer
• Compositions multi-images : utiles pour les emplacements ultra-larges où trois images 16:9 sans rapport briseraient la grille

Les images générées doivent suivre quatre règles fondamentales :

• Traitez l'image comme un actif intégré, pas une diapositive autonome : pas de pied de page, de bas de page, de titre, de numéro de page, de marque d'angle, de signature ou de bordure décorative
• Correspondance de la langue de la présentation : les présentations en chinois utilisent des étiquettes en chinois dans les infographies, les présentations en anglais utilisent des étiquettes en anglais
• Correspondance du ratio de l'emplacement avant la génération : 21:9 pour de nombreux emplacements héroïques suisses, 16:9 / 16:10 pour les visuels principaux courants, 16:10 pour les scènes d'interface utilisateur, hauteurs égales fixes pour les grilles d'images
• Lorsqu'une capture d'écran brute doit rester fidèle, lisez d'abord references/screenshot-framing.md et utilisez les arrière-plans groupés assets/screenshot-backgrounds/ ainsi que la mise à l'échelle programmatique, le remplissage et l'alignement au lieu de redessiner la capture d'écran par défaut

Les invites d'image se trouvent dans references/image-prompts.md. L'encadrement des captures d'écran se trouve dans references/screenshot-framing.md.

Génération de couvertures

La compétence peut également transformer un article ou une idée de présentation en couvertures de plateforme :

• Couverture principale WeChat : 21:9, titre en premier, avec un ancrage visuel
• Carte de partage WeChat : 1:1, visuellement associée à la couverture 21:9
• Couverture / carrousel Xiaohongshu : 3:4, grand titre, échelle typographique cohérente sur un lot
• Vignette vidéo : 16:9, titre + sous-titre + un visuel focal

La même règle s'applique : utilisez quelques mots-clés forts, gardez le titre comme centre visuel et ne remplissez pas le canevas de texte de corps.

Exemples d'invites

Copiez l'une de ces invites dans votre agent, puis joignez votre article, fichier Markdown ou actifs d'image :

Créez une présentation de style suisse de 8 diapositives à partir de cet article, avec 3 visuels générés adaptés aux emplacements d'image du modèle.

Transformez ce document d'analyse de produit en une présentation de style magazine éditorial avec un rythme narratif fort.

À partir de l'idée centrale de cette présentation, créez deux couvertures : une couverture principale 21:9 et une carte de partage 1:1 visuellement associée.

Redessinez ces captures d'écran de produit en visuels de diapositive 16:10 cohérents. Préservez les informations clés de l'interface utilisateur ; n'ajoutez pas de titres de diapositive ou de pieds de page à l'intérieur des images.

Répertoire

guizang-ppt-skill/
├── SKILL.md              ← fichier de compétence principal : flux de travail, principes, erreurs courantes
├── README.md             ← README en chinois
├── README.en.md          ← ce fichier
├── assets/
│   ├── template.html         ← modèle Style A magazine éditorial
│   ├── template-swiss.html   ← modèle Style B suisse
│   └── screenshot-backgrounds/ ← arrière-plans de captures d'écran WebP groupés : 5 style-a / 4 style-b
├── scripts/
│   └── validate-swiss-deck.mjs ← validateur de mise en page suisse
└── references/
    ├── components.md     ← catalogue de composants (type, couleur, grille, icônes, légende, statistique, pipeline)
    ├── layouts.md        ← 10 squelettes de mise en page (prêts à coller)
    ├── layouts-swiss.md  ← 22 mises en page suisses verrouillées
    ├── swiss-layout-lock.md ← règles strictes de fidélité et de mise en page suisse
    ├── themes.md         ← 5 préréglages de thème (choisissez, ne personnalisez pas)
    ├── themes-swiss.md   ← 4 thèmes de couleur d'ancrage suisse
    ├── image-prompts.md  ← types d'image, ratios et invites de base pour GPT-Image 2.0 / GPT-M 2.0
    ├── screenshot-framing.md ← sémantique d'encadrement de captures d'écran de style CleanShot X
    └── checklist.md      ← liste de contrôle de qualité (niveaux P0 / P1 / P2 / P3)

Préréglages de thème

Choisissez dans references/themes.md. Les valeurs hexadécimales personnalisées ne sont pas autorisées — protéger l'esthétique est plus important que la liberté de choix.

Thèmes éditoriaux Style A

Changer de thème nécessite uniquement de remplacer les 6 variables en haut du bloc :root{} de template.html — tout le reste du CSS passe par var(--...).

Thèmes suisses Style B

Choisissez dans references/themes-swiss.md. Les valeurs hexadécimales personnalisées ne sont pas autorisées ici non plus.

Si l'utilisateur demande une présentation de style suisse sans spécifier la couleur, utilisez par défaut le Bleu Klein international.

Principes de conception fondamentaux

1. Retenue avant éclat — les arrière-plans WebGL ne se fondent qu'à travers les pages héroïques
2. Structure avant décoration — la hiérarchie de l'information par la taille et la police de caractères + les espaces blancs de la grille, pas par les ombres ou les cartes flottantes
3. Les images sont des citoyennes de première classe — alignez-les avec la zone de contenu du corps, gardez les ratios stables, rognez uniquement par le bas et préservez le haut et les côtés
4. Les visuels générés sont des actifs — ne gardez que la photo / le graphique / l'interface utilisateur principale ; n'affichez pas de titres de diapositive, de pieds de page ou de marques d'angle à l'intérieur de l'image
5. Le rythme vit sur les pages héroïques — l'alternance héroïque / non héroïque évite de fatiguer l'œil
6. Les effets dynamiques doivent être optionnels — B bascule le mode statique pour que l'animation ne devienne jamais un fardeau de lecture
7. Les termes restent cohérents — Compétences est Compétences ; pas de mélange de traductions
8. Les mises en page suisses restent verrouillées — le Style B doit restaurer et réutiliser le système de mise en page original de 22 pages au lieu d'inventer des pages sans rapport

Références visuelles

• Mises en page du magazine Monocle
• YC Garry Tan — « Harnais mince, compétences grasses »
• Massimo Vignelli / Helvetica Forever / Style typographique international suisse
• Série de présentations hors ligne de Guizang

Feuille de route

• Ajouter plus d'exemples réels et de démonstrations de présentations HTML ouvrables
• Étendre les formats de couverture pour plus de plateformes de publication
• Ajouter plus de règles de validation de mise en page suisse
• Améliorer les flux de travail de refonte de captures d'écran et de génération d'infographies
• Préparer des variantes spécifiques au marketplace telles que WorkBuddy
• Ajouter plus de packs de thèmes sélectionnés tout en gardant les couleurs personnalisées restreintes

FAQ

Peut-on exporter en PPTX ? La sortie principale est HTML. Vous pouvez la présenter dans un navigateur, la capturer en capture d'écran ou l'enregistrer. La conversion PPTX peut être effectuée dans un flux de travail séparé, mais ce n'est pas le chemin principal aujourd'hui.

Pourquoi les couleurs personnalisées ne sont-elles pas autorisées ? La compétence est conçue pour une sortie visuelle stable. Les couleurs arbitraires cassent souvent le système, donc les présentations doivent utiliser des préréglages sélectionnés.

Puis-je ajouter ma propre mise en page ? Oui. Les mises en page du Style A peuvent être étendues dans references/layouts.md. Le Style B est plus strict : mettez à jour template-swiss.html, layouts-swiss.md, swiss-layout-lock.md et le validateur ensemble.

La génération d'images Codex est-elle obligatoire ? Non. Les présentations fonctionnent sans images générées. Le flux d'images n'est utilisé que lorsque vous avez besoin de photos, d'infographies, de scènes d'interface utilisateur ou de couvertures.

Comment mettre à jour la compétence ? Exécutez à nouveau la commande d'installation, ou exécutez git pull dans votre répertoire de compétence local.

Contribution

Bogues, problèmes de mise en page, demandes de nouvelles mises en page — les Issues et les PR sont les bienvenues. Priorisez :

• Ajoutez d'abord de nouvelles classes à template.html ; ne laissez pas layouts.md référencer des classes indéfinies
• Lorsque vous modifiez template-swiss.html, mettez à jour layouts-swiss.md et swiss-layout-lock.md ensemble
• Lorsque vous ajoutez des règles suisses, mettez à jour scripts/validate-swiss-deck.mjs
• Consignez les écueils dans checklist.md au niveau P0 / P1 / P2 / P3 correspondant
• Les nouvelles couleurs de thème vont dans themes.md avec un cas d'utilisation recommandé

Licence

MIT © 2026 op7418