N'oubliez pas d'utiliser une page web pour générer le résultat, et vous devez demander à l'utilisateur quelle langue il souhaite utiliser.

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

Contenu principal (Noyau) → Pages 3-5 : Contenu principal, intercalé avec les 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 `<main id="deck">` contient 3 diapositives d'exemple (couverture, couverture de chapitre et page vierge).

#### 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 |

|------|------|--------|

| `<title>` | `[Obligatoire] Remplacer par le titre PPT · Titre de la présentation` | Titre réel de la présentation (par exemple, `Une nouvelle façon de travailler · Luke Wroblewski`) |

#### 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 `<style>` de `assets/template.html`, le navigateur applique le style par défaut : les titres deviennent sans empattement, les fiches de données sont regroupées, les pipelines sont réduits à une seule ligne et les images sont empilées en bas de page.

**Avant d'écrire le moindre code pour vos diapositives :**

1. **Tout d'abord, lisez @template.txt ** (au moins jusqu'à la fin du bloc `<style>`).

2. **Reportez-vous à la liste de pré-vérification dans @layouts.md ** pour confirmer que chaque classe que vous souhaitez utiliser existe dans la balise `<style>`.

3. Si une classe est manquante : **ajoutez-la dans la section `<style>` du fichier @template.txt **, ne la réécrivez pas directement dans chaque diapositive.

4. **@template.txt est la seule source de noms de classes** — n’inventez pas de nouveaux noms de classes ; si vous devez les personnaliser, utilisez `style="..."` en ligne.

Classes souvent négligées (leur existence doit être confirmée au préalable) :

`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `meta-row` / `stat-card` / `stat-label` / `stat-nb` / `stat-unit` / `stat-note` / `pipeline-section` / `pipeline-label` / `pipeline` / `step` / `step-nb` / `step-title` / `step-desc` / `grid-2-7-5` / `grid-2-6-6` / `grid-2-8-4` / `grid-3-3` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `pied`

#### 3.0.5 · Planification du rythme thématique (**Tout aussi important que la pré-détection des classes**)

Avant de choisir une mise en page, vous devez d'abord définir la classe de thème pour chaque page (`hero dark` / `hero light` / `light` / `dark`) et l'aligner dans un document ou un brouillon. Consultez la section « Planification du rythme du thème » commençant par @layouts.md pour connaître les règles détaillées.

**Règles obligatoires** :

- Chaque section de page doit inclure l'un des éléments suivants : `light`, `dark`, `hero light` ou `hero dark` ; n'écrivez pas simplement `hero`.

- Plus de 3 pages consécutives sur le même sujet = fatigue visuelle, interdit.

- Les pages 8 et suivantes doivent contenir au moins un « héros sombre » et au moins un « héros lumineux ».

- Le jeu de cartes ne peut pas être entièrement composé de pages de texte « clair » ; il doit également inclure des pages de texte « foncé » pour créer des espaces de respiration.

- Insérer une page de présentation principale toutes les 3 à 4 pages (couverture/quatrième de couverture/question/citation importante)

**Auto-vérification après génération : `grep 'class="slide' index.html` liste tous les sujets ; une vérification manuelle du rythme raisonnable est requise avant la livraison.

#### 3.1 · Choisir une mise en page

**Ne créez pas vos diapositives à partir de zéro.** Ouvrez `@layouts.md` , qui contient 10 modèles de mise en page prêts à l'emploi, chacun étant un bloc de code `<section>` complet et collable :

| Mise en page | Objectif |

|---|---|

| 1. Couverture d'ouverture | Page 1 |

| 2. Couverture du chapitre | Début de chaque acte |

3. Affiches basées sur les données | Présentation de données concrètes |

| 4. Texte à gauche, image à droite (citation + image) | Contraste d'identité / Récit |

| 5. Grille d'images | Comparaison de plusieurs images / Preuve par capture d'écran |

6. Flux de travail à deux pipelines |

| 7. Fin du suspense/Page de questions | Fin des chapitres/Finale |

8. Citation marquante | Serifs/Points clés |

| 9. Comparaison parallèle (Avant / Après) | Ancien mode vs. Nouveau mode |

| 10. Combinaison d'images et de textes | Pages riches en informations combinant images et textes |

Sélectionnez la mise en page correspondante, collez-la et modifiez les chemins d'accès au texte et aux images. **Effectuez d'abord la vérification préalable 3.0.**

#### 3.2 Normes relatives au format d'image

Utilisez toujours le **rapport d'aspect standard**, n'utilisez jamais de rapports d'aspect inhabituels par rapport à l'image originale (tels que `2592/1798`) :

| Scénarios | Taux de recommandation |

|------|---------|

| Texte à gauche, image à droite (image principale) | 16:10 ou 4:3 + `max-height:56vh` |

| Grille d'images (comparaison de plusieurs images) | **Hauteur fixe : 26vh**, aucun rapport hauteur/largeur requis |

| Petite image à gauche + texte à droite | 1:1 ou 3:2 |

| Affichage principal en plein écran | 16:9 + `max-height:64vh` |

| Petites illustrations dans une mise en page mêlant texte et image | 3:2 ou 3:4 |

**N'utilisez jamais `align-self:end` sur les images : elles glisseront en bas de la cellule et seront masquées par la barre d'outils du navigateur. Utilisez un conteneur de type grille avec `align-items:start` (prédéfini dans le modèle) pour maintenir les images en haut ; pour les maintenir en bas dans la colonne de gauche, utilisez une colonne flexible avec `justify-content:space-between`.

Les détails des composants (polices, couleurs, grilles, icônes, légendes, fiches statistiques, etc.) se trouvent dans @components.md .

### Étape 4 · Auto-vérification par rapport à la liste de contrôle

Après avoir généré la checklist, ouvrez le fichier @checklist.md et vérifiez chaque élément par rapport aux instructions. Ce fichier récapitule tous les écueils rencontrés lors du processus d'itération, et tous les problèmes de niveau P0 (émojis, surcharge d'images, sauts de ligne dans les titres, division des polices) doivent être résolus.

Plusieurs points auxquels il convient de prêter une attention particulière :

1. **Les titres principaux doivent être en police serif** — S'ils sont affichés en sans-serif, il est probable à 99 % que la vérification préliminaire de l'étape 3.0 ait échoué et que la classe `h-hero` soit manquante dans template.html.

2. **Utilisez uniquement `height:Nvh` dans la grille d'images, n'utilisez pas `aspect-ratio` (cela entraînera une rupture de la grille).**

3. **Les images ne doivent pas être déplacées en bas de la page** — N’utilisez pas `align-self:end`, utilisez grid + `align-items:start` (voir l’étape 3.2)

4. **Les images doivent respecter les formats d'image standard** (16:10 / 4:3 / 3:2 / 1:1 / 16:9). Ne copiez pas d'images dont les formats d'image sont inhabituels.

5. **Les titres principaux en chinois doivent comporter ≤ 5 caractères et utiliser `nowrap` (éviter un caractère par ligne)**

6. **Utilisez Lucide, pas des émojis.**

7. **Utilisez des polices à empattements pour les titres, des polices sans empattements pour le corps du texte et une chasse fixe pour les métadonnées.**

### Étape 5 · Itération

Modifié en fonction des commentaires des utilisateurs : le CSS du modèle est désormais hautement paramétré, 90 % des ajustements étant des modifications apportées aux styles en ligne (font-size:Xvw / height:Yvh / spacing:Zvh).

## Principes fondamentaux de conception (Philosophie)

Ces principes sont le fruit de cinq essais de création de présentations PowerPoint pour une entreprise individuelle. Le non-respect de l'un d'entre eux compromet l'attrait visuel de la présentation.

1. **La retenue plutôt que la virtuosité technique** — Les arrière-plans WebGL ne sont visibles que sur les pages d'en-tête et sont presque invisibles sur les pages normales.

2. **La structure plutôt que la décoration** — Pas d'ombres, pas de cartes flottantes, pas de boîtes de remplissage ; toutes les informations sont transmises grâce à une **grande taille de police + un contraste de police + un espacement de grille**.

3. **La hiérarchie du contenu est définie par la taille et le type de police** — Police à empattements maximum = titre principal, police à empattements moyens = sous-titre, police sans empattements grande taille = titre d'introduction, police sans empattements petite taille = corps du texte, police à chasse fixe = métadonnées

4. **Les images sont prioritaires** — Ne recadrez que le bas de l'image, en veillant à ce que le haut et les côtés gauche/droite restent intacts ; fixez la grille avec `height:Nvh`, n'utilisez pas `aspect-ratio` pour l'agrandir.

5. **Rythme avec les pages vedettes** — Alterner entre les pages vedettes et les pages non vedettes aide à prévenir la fatigue oculaire.

6. **Cohérence de la terminologie** — Les compétences doivent être traduites par compétences, et non par un mélange de chinois et d'anglais.

## Références

Le style visuel de cette compétence s'inspire de :

- Partage de l'article « Entreprise à une seule personne : les organisations repliées par l'IA » (22 avril 2026, page 27)

- Mise en page du magazine *Monocle*

- Une démonstration de l'article de blog du président de YC, Garry Tan, intitulé « Habillage fin, compétences exceptionnelles »

Ils peuvent servir de points d'ancrage stylistiques.