# Compétence d'agent Guizang PPT HTML
> Générez des présentations HTML avec deux styles visuels distincts grâce à cette compétence d'agent PPT, complétée par la génération d'images et la création de couvertures multi-plateformes. Créez des présentations professionnelles et visuellement attrayantes en quelques secondes.
- Canonical: https://nanoskill.ai/fr/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/fr/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: fr
- Source type: github
- Popularity signal: 11121
## Sources
- https://github.com/op7418/guizang-ppt-skill
## Install
```shell
npx skills add https://github.com/op7418/guizang-ppt-skill
```
## About
La compétence d'agent Guizang PPT HTML permet aux agents IA de générer facilement des présentations HTML professionnelles en un seul fichier. Conçue pour des plateformes comme Claude Code et Codex, cette compétence simplifie la création de contenu visuellement attrayant, en offrant deux systèmes esthétiques distincts : le style Magazine électronique axé sur la narration et le style Internationalisme suisse axé sur les faits. Les utilisateurs peuvent rapidement transformer des articles en diaporamas captivants, produire des analyses de produits détaillées et générer des couvertures multi-plateformes cohérentes, tout en maintenant une qualité visuelle élevée.
Cette compétence se distingue en produisant une sortie HTML légère, facile à partager et à visualiser sans configurations complexes. Elle intègre des capacités avancées telles que la génération d'images par IA via GPT-Image 2.0 / GPT-M 2.0 dans Codex, permettant des visuels et des infographies conscients du contexte. De plus, elle fournit des mises en page structurées et des principes de conception stricts, en particulier pour le style suisse, garantissant un aspect soigné et cohérent sur tout le contenu généré, des diapositives aux couvertures de médias sociaux.
Idéale pour une variété de scénarios, des conférences internes et des lancements de produits au partage personnel et aux présentations de méthodes, la compétence d'agent Guizang PPT HTML simplifie les flux de travail de création de contenu. Elle permet aux utilisateurs de convertir du contenu long en présentations concises, d'améliorer les captures d'écran de produits pour les adapter à des ratios de gabarit spécifiques et d'assurer une identité visuelle cohérente sur tous les canaux de communication. L'accent mis par cette compétence sur des flux de travail structurés et des règles visuelles prédéfinies garantit des résultats de haute qualité et esthétiquement agréables avec un minimum d'effort.
## Key features
- **Deux systèmes visuels**: Choisissez entre le 'Style A : Magazine Électronique × E-ink' pour la narration et l'expression personnelle, ou le 'Style B : Style Suisse International' pour les faits, l'analyse de produits et les méthodologies, afin de transmettre votre message efficacement.
- **Sortie HTML en fichier unique**: Générez des présentations HTML légères et autonomes qui ne nécessitent aucun processus de construction ni serveur, ce qui les rend faciles à ouvrir, partager et présenter directement dans n'importe quel navigateur web.
- **Compatibilité avec les agents IA**: Conçu pour Claude Code, Codex et d'autres agents IA avec accès shell, permettant une génération, une modification et une itération transparentes de présentations HTML via des commandes en langage naturel.
- **Génération d'images avec Codex**: Intégrez GPT-Image 2.0 / GPT-M 2.0 dans Codex pour générer des images, infographies et scénarios d'interface utilisateur de haute qualité et contextuellement pertinents, parfaitement dimensionnés et insérés dans vos diapositives.
- **Génération de couvertures multi-plateformes**: Créez automatiquement des couvertures cohérentes et visuellement unifiées pour diverses plateformes telles que les comptes officiels WeChat (21:9, 1:1), Xiaohongshu (3:4) et les comptes vidéo (16:9) en fonction du contenu principal de votre présentation.
## Use cases
- **Transformer des articles en présentations**: Convertissez de longs articles ou documents en présentations HTML concises et attrayantes pour des discours, des conférences internes ou des sessions de partage privées, en extrayant les idées principales et en les structurant en un récit captivant.
- **Créer des analyses de produits professionnelles**: Utilisez le 'Style B : Style Suisse International' structuré pour présenter des analyses de produits, des méthodologies ou des lancements de produits IA en mettant l'accent sur les faits, les données et une communication visuelle claire.
- **Concevoir un contenu multi-plateforme cohérent**: Générez une identité visuelle unifiée sur votre présentation, les images d'accompagnement et les diverses couvertures de réseaux sociaux, garantissant ainsi la cohérence de la marque et son impact sur tous vos canaux de communication.
- **Améliorer les captures d'écran pour les présentations**: Redessinez et adaptez les captures d'écran de produits pour les adapter aux modèles de présentation, en conservant les informations clés tout en obtenant un style visuel cohérent adapté aux présentations HTML professionnelles.
## Result preview
Découvrez un PPT réel généré à partir d'un article par cette compétence d'agent.
## Result walkthrough
### Étape 1：Installer
Ajoutez la compétence à votre agent.
### Étape 2：Fournir le contenu
Saisissez un sujet, des notes ou téléversez du matériel existant (par exemple, rapport, plan, idées).
### Étape 3：Obtenez votre PPT
Examinez la présentation HTML que vous pouvez utiliser directement.
## Skill definition
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](https://x.com/op7418) à 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
```bash
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 :
```text
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 :
```text
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 :
```text
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 :
```text
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
| Tâche | Flux recommandé |
|------|------------------|
| Article long vers présentation | Extraire l'argument principal, puis construire un rythme de 6 à 10 diapositives |
| Analyse de cadre / produit | Utilisez le Style B suisse avec des mises en page verrouillées et des visuels héroïques 21:9 |
| Conférence personnelle / texte d'opinion | Utilisez le Style A magazine éditorial pour un rythme narratif plus fort |
| Visuels de présentation | Dans Codex, générez des photos, des infographies, des diagrammes de flux, des cartes système ou des scènes d'interface utilisateur |
| Couvertures sociales | Générez des couvertures principales 21:9, des cartes de partage 1:1, des couvertures verticales 3:4 et des vignettes vidéo à partir de la même idée |
| Normalisation de captures d'écran | Redessinez les captures d'écran brutes aux ratios adaptés au modèle avant de les insérer dans les diapositives |
## 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
| Plateforme | Statut | Notes |
|----------|--------|-------|
| Claude Code | Supporté | Flux de travail natif de compétence pour créer et itérer des présentations HTML |
| Codex | Supporté | Bon pour la génération de présentations, la génération d'images et l'assurance qualité visuelle dans le navigateur |
| Cursor / autres agents locaux | Fonctionne | Nécessite un accès au système de fichiers et l'exécution de shell |
| WorkBuddy | En adaptation | Une version prête pour le marketplace est en cours de préparation séparément |
| Chatbot simple | Non recommandé | Sans système de fichiers et aperçu dans le navigateur, la génération de présentations complètes est difficile à stabiliser |
## Installation
### Option 1 : installation en une ligne (recommandée)
```bash
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
```bash
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`](./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 :
```bash
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`](./references/image-prompts.md). L'encadrement des captures d'écran se trouve dans [`references/screenshot-framing.md`](./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 :
```text
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.
```
```text
Transformez ce document d'analyse de produit en une présentation de style magazine éditorial avec un rythme narratif fort.
```
```text
À 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.
```
```text
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
| Aperçu | Thème | Couleurs principales et meilleur pour |
|---------|-------|--------------------------|
| 
| 🖋 **Ink Classic** | `#0a0a0b` / `#f1efea`. Valeur par défaut générale, lancements commerciaux, quand vous hésitez. |
| 
| 🌊 **Indigo Porcelain** | `#0a1f3d` / `#f1f3f5`. Technologie, recherche, IA, discours d'ouverture techniques. |
| 
| 🌿 **Forest Ink** | `#1a2e1f` / `#f5f1e8`. Nature, durabilité, culture, non-fiction. |
| 
| 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7`. Nostalgique, humaniste, littéraire, zines indie. |
| 
| 🌙 **Dune** | `#1f1a14` / `#f0e6d2`. Art, design, créatif, mode, présentations de type galerie. |
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.
| Aperçu | Thème | Couleur d'ancrage et meilleur pour |
|---------|-------|---------------------------|
| 
| 🔵 **Bleu Klein international** | `#002FA7`. Par défaut, lancements commerciaux, produits IA, cadres conceptuels. |
| 
| 🟡 **Jaune citron** | `#FFD500`. Jeunesse, sports, vente au détail, biens de consommation, rétro Y2K. |
| 
| 🟢 **Vert citron** | `#C5E803`. Écologie, durabilité, santé, marques Gen Z. |
| 
| 🟠 **Orange de sécurité** | `#FF6B35`. Alertes, actualités, sujets industriels, sports, thèmes énergiques. |
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*](https://monocle.com)
- 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](https://github.com/op7418)
## FAQ
### Qu'est-ce que la compétence Agent Guizang HTML PPT ?
La compétence Guizang HTML PPT est un outil compatible avec les agents IA, conçu pour générer des présentations HTML en fichier unique, des images d'accompagnement et des couvertures multi-plateformes. Il propose deux styles visuels distincts : Magazine Électronique et Style Suisse International.
### Comment installer la compétence Agent Guizang HTML PPT ?
Vous pouvez l'installer en exécutant \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` dans votre terminal, ou en demandant à un agent IA compatible shell de cloner le dépôt dans votre répertoire de compétences.
### Puis-je personnaliser les couleurs de ma présentation HTML ?
Non, les valeurs HEX personnalisées ne sont pas autorisées. La compétence propose une sélection de thèmes prédéfinis pour le Style A (Magazine Électronique) et le Style B (Style Suisse International) afin de garantir une cohérence esthétique et une sortie de qualité.
### Quels sont les deux styles visuels proposés ?
Le Style A, 'Magazine Électronique × E-ink', est idéal pour le storytelling, les opinions et l'expression personnelle. Le Style B, 'Style Suisse International', est le mieux adapté pour présenter des faits, des analyses de produits et des méthodologies avec un design minimaliste basé sur une grille.
### Est-il possible d'exporter la présentation HTML au format PPTX ?
Le livrable principal est le HTML, qui peut être présenté directement dans un navigateur, capturé en capture d'écran ou enregistré. Bien que l'exportation directe en PPTX ne soit pas une fonctionnalité principale, vous pouvez utiliser les pages HTML comme brouillons visuels pour une conversion si nécessaire.
### La compétence prend-elle en charge la génération d'images pour ma présentation HTML ?
Oui, lorsqu'elle est utilisée dans un environnement Codex, la compétence peut exploiter GPT-Image 2.0 / GPT-M 2.0 pour générer différents types d'images, d'infographies et de scénarios d'interface utilisateur, qui sont ensuite insérés dans votre présentation selon les ratios du modèle.