PPT de style magazine numérique @GuiCang
Générez des présentations PowerPoint (PPT) web à défilement horizontal (un seul fichier HTML) dans un style « magazine électronique » avec encre électronique, incluant des modèles tels que des arrière-plans fluides WebGL, des titres avec empattement et du texte sans empattement, des couvertures de chapitres, des bannières de données et des grilles d'images. Utilisez cet outil pour créer des PPT web destinées au partage, aux présentations ou aux événements de lancement, ou pour toute présentation de type « magazine », « présentation à défilement horizontal », « magazine éditorial » ou « présentations à encre électronique ».

Featured by
淡苍
Why we love this skill
Cette technique combine les styles des magazines numériques et de l'encre électronique pour créer des présentations PowerPoint web artistiques uniques, à défilement horizontal. Rompant avec les modèles professionnels traditionnels, elle utilise des polices élégantes, des arrière-plans fluides et des mises en page sophistiquées pour offrir une expérience visuelle haut de gamme, à l'image du magazine Monocle.
Instructions
N'oubliez pas d'utiliser une page Web pour la générer.
Générez des présentations PowerPoint (PPT) web à défilement horizontal (un seul fichier HTML) dans un style « magazine électronique » avec encre électronique, incluant des modèles tels que des arrière-plans fluides WebGL, des titres avec empattement et du texte sans empattement, des couvertures de chapitres, des bannières de données et des grilles d'images. Utilisez cet outil pour créer des PPT web destinées au partage, aux présentations ou aux événements de lancement, ou pour toute présentation de type « magazine », « présentation à défilement horizontal », « magazine éditorial » ou « présentations à encre électronique ».
# Magazine Web Ppt
## À quoi sert cette compétence ?
Générez un fichier HTML unique avec une mise en forme de diaporama horizontal. Le style visuel est :
- Un style hybride combinant magazine électronique et encre électronique
- **Fond fluide/contours/dispersion WebGL** (Voir la page d'en-tête)
- **Titres à empattement (Noto Serif SC + Playfair Display) + Texte courant sans empattement (Noto Sans SC + Inter) + Métadonnées à chasse fixe (IBM Plex Mono)**
- **Icônes linéaires Lucide** (Aucun emoji requis)
- **Tourner les pages horizontalement (gauche et droite sur le clavier, molette de défilement, balayage sur l'écran tactile, point en bas, touche ÉCHAP)**
- **Interpolation fluide du thème** : Les couleurs et les shaders effectuent une transition fluide lors de la navigation vers la page d'accueil.
L'esthétique de cette compétence n'est ni celle d'une présentation PowerPoint d'entreprise, ni celle d'une interface utilisateur Internet grand public ; c'est comme le magazine *Monocle* avec du code collé dessus.
## Quand l'utiliser
**Scénarios appropriés :**
- Séances de partage hors ligne / Conférences sectorielles / Réunions privées
- Journée de lancement/démonstration de nouveaux produits d'IA
- Un discours empreint d'un style personnel affirmé
- J'ai besoin d'une version web des diapositives qui puisse être complétée en une seule fois sans avoir à tourner les pages.
**Scénarios inappropriés :**
- Grandes sections de données tabulaires et graphiques superposés (à l'aide de présentations PowerPoint standard)
- Matériel de formation (densité d'information insuffisante)
- Nécessite une édition collaborative par plusieurs personnes (il s'agit de HTML statique)
### Étape 1 · Clarifier les exigences (**Essentiel avant de commencer**)
Si l'utilisateur a déjà fourni un plan complet et des images, vous pouvez passer à l'étape 2.
Si l'utilisateur ne fournit qu'un sujet ou une idée vague, vérifiez son adéquation avec ces six questions une par une avant de commencer. Ne rédigez pas vos diapositives au hasard : une structure erronée engendrera des coûts de révision considérables. Utilisez l'outil « Demander à l'utilisateur » pour poser vos questions.
#### 6 Questions de clarification
| # | Question | Pourquoi poser la question ? |
|---|------|-----------|
| 1 | **À qui s'adresse le contenu ? Quel est le contexte de présentation ?** (Professionnels du secteur/Lancement d'entreprise/Journée de démonstration/Réunion privée) | Détermine le style et le niveau de détail du langage |
| 2 | **Durée du partage ?** | 15 minutes ≈ 10 pages, 30 minutes ≈ 20 pages, 45 minutes ≈ 25-30 pages |
| 3 | **Avez-vous des documents originaux ?** (Documents/Données/Anciennes présentations PowerPoint/Liens vers des articles) | Si vous avez des documents, utilisez-les ; sinon, créez quelque chose d’autre à partir de ceux-ci. |
| 4 | **Y a-t-il des images ? Où doivent-elles être placées ?** | Voir « Conventions relatives aux images » ci-dessous |
| 5 | **Quelle couleur de thème souhaitez-vous ?** | Consultez @themes.md et choisissez l’un des 5 préréglages |
| 6 | **Existe-t-il des contraintes strictes ?** (Les données XX doivent être incluses / YY ne peut pas apparaître) | Pour éviter les reprises |
#### Aide à la création d'un plan (si l'utilisateur n'a pas de plan)
Utilisez le modèle « arc narratif » pour construire la structure, puis remplissez le contenu :
```
Accroche → Page 1 : Présentez un contraste/une question/des données concrètes pour inciter les gens à s’arrêter.
Mise en contexte → Pages 1-2 : Présentation / Qui vous êtes / Pourquoi vous abordez ce sujet
Corps principal (Noyau) → Pages 3 à 5 : Contenu principal, entrecoupé de mises en page 4/5/6/9/10
Changement → Page 1 : Déjouer les attentes / Présenter une nouvelle perspective
Points clés → Pages 1-2 : Citations importantes / Questions à suspense / Suggestions d’actions
```
Arc narratif + planification de la numérotation des pages + tableau du rythme thématique (voir @layouts.md ), **alignez les trois tableaux** avant de passer à l'étape 2.
Il est recommandé d'enregistrer le plan en tant qu'« enregistrement de projet » ou « plan-v1 » pour faciliter les itérations ultérieures.
#### Conventions relatives aux images (Informer les utilisateurs)
Avant de poursuivre, veuillez expliquer les points suivants à l'utilisateur :
- **Emplacement de l'image** : Sur quelle image se trouve-t-elle dans le tableau, ou quelle image a été téléchargée ?
- **Que se passe-t-il s'il n'y a pas d'images ?** : Pour s'aligner sur la mise en page de l'utilisateur, vous pouvez d'abord générer la structure à l'aide de blocs de couleur d'espace réservé et ajouter les images plus tard ; cependant, vous devez informer la mise en page 4/5/10 et les autres pages mixtes de texte et d'images que l'effet visuel ne peut pas être vérifié sans images.
### Étape 2 · Modèle de référence
@template.txt est un fichier HTML **complet et fonctionnel** : CSS, shaders WebGL, JS de pagination et CDN de polices/icônes sont tous préconfigurés ; seul `
#### 2.1 · Éléments à modifier (**Facilement oubliables**)
Immédiatement après la copie, modifiez les espaces réservés suivants ; sinon, les onglets de votre navigateur afficheront le texte étrange « [Obligatoire] Remplacer par le titre PPT » :
| Emplacement | Original | Doit être modifié en |
|------|------|--------|
| `
#### 2.2 · Sélectionner la couleur du thème (5 préréglages · Couleurs personnalisées non autorisées)
Cette fonctionnalité **permet uniquement de sélectionner parmi 5 préréglages soigneusement choisis** et n'accepte pas les valeurs hexadécimales définies par l'utilisateur ; des couleurs mal assorties rendent instantanément l'image laide ; la protection de l'esthétique est plus importante que la liberté.
| # | Thème | Convient à |
|---|------|------|
| 1 | 🖋 Encre classique | Version générale/commerciale/Par défaut en cas de doute |
| 2 | 🌊 Porcelaine Indigo | Conférence sur les technologies, la recherche, les données et les lancements technologiques |
| 3 | 🌿 Forest Ink | Nature/Développement durable/Culture/Non-fiction |
| 4 | 🍂 Papier kraft | Nostalgie/Sciences humaines/Littérature/Magazine indépendant |
| 5 | 🌙 Dunes de sable | Art/Design/Créativité/Galerie |
**fonctionner**:
1. Recommandez un ensemble de contenus en fonction du thème, ou demandez directement à l'utilisateur quel ensemble il souhaite choisir.
2. Ouvrez @themes.md et trouvez le bloc `:root` correspondant au thème.
3. **Remplacement complet** des lignes marquées « couleur du thème » dans le bloc `:root{` au début de @template.txt (`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`).
4. Tout le reste du CSS utilise `var(--...)`, ne nécessitant aucune autre modification.
**Règles strictes** :
- Utilisez un seul thème pour chaque jeu ; ne changez pas les couleurs en cours de route.
- Ne pas accepter les valeurs hexadécimales arbitraires fournies par l'utilisateur ; refuser poliment et afficher 5 options de sélection.
- Évitez de mélanger les styles (par exemple, encre pour Ink Classic, papier pour Dune) - le résultat sera totalement incohérent.
### Étape 3 · Remplissez le contenu
#### 3.0 · Vérification préalable : les noms de classes doivent être définis dans @template.txt (**Très important**)
C’est là l’origine de tous les problèmes de génération. La structure de @layouts.md utilise de nombreuses classes (`h-hero` / `h-xl` / `stat-card` / `pipeline` / `grid-2-7-5`, etc.). Si aucune définition correspondante n’est présente dans `