Magazine Web Ppt

Que fait Magazine Web Ppt ?

Ce que fait cette compétence

Génère un diaporama à défilement horizontal dans un fichier HTML unique, avec un ton visuel :

• Un style hybride entre magazine électronique et encre électronique
• Un fond WebGL fluide / contour / dispersion (visible sur les pages de héros)
• Titres serif (Noto Serif SC + Playfair Display) + corps sans-serif (Noto Sans SC + Inter) + métadonnées monospace (IBM Plex Mono)
• Icônes linéaires Lucide (pas d'émoji)
• Pagination horizontale gauche/droite (clavier ← →, molette de défilement, glissement tactile, points en bas, index ESC)
• Interpolation de thème fluide : en tournant vers une page héros, les couleurs et le shader effectuent une transition en douceur

L'esthétique de cette compétence n'est ni un « PPT corporate », ni une « UI grand public » : elle ressemble au magazine Monocle après que du code y a été cousu.

Quand l'utiliser

Scénarios adaptés :

• Conférences hors ligne / conférences internes / salons privés
• Lancements de nouveaux produits IA / demo day
• Présentations avec une forte identité personnelle
• Une version web de diapositives que vous « créez une fois, sans outil de pagination nécessaire »

Scénarios inadaptés :

• Longues séquences de données tabulaires, graphiques empilés (utilisez un PPT classique)
• Supports de formation (densité d'information trop faible)
• Édition collaborative multi-personnes (c'est du HTML statique)

Flux de travail

Étape 0 · Inférer une direction ; ne demander que si une comparaison est demandée

Inférez l'une des 5 directions magazine à partir du brief, du public, du contenu et du contexte connu. Chaque direction associe sa couleur de thème, ses mises en page recommandées, son style chrome et son nombre de diapositives. Utilisez la correspondance la plus proche et continuez sans demander.

Seulement si l'utilisateur demande explicitement à voir ou comparer les options de direction, ouvrez references/styles.md et présentez les résumés en une ligne dans un formulaire de questions direction-cards :

1. Monocle Editorial · Style magazine international ✦ par défaut
2. WIRED Tech · Données + ingénierie
3. Kinfolk Slow · Vie lente / humaniste
4. Domus Architectural · Architecture / sens de l'espace
5. Lab / Reference · Académique + manuel artisanal

Si l'utilisateur dit « Je ne sais pas, vous recommandez » ou ne donne aucune indication de direction : par défaut, choisissez Monocle Editorial sans demander, car c'est celui qui a la plus faible probabilité d'échec. Si l'utilisateur mentionne « IA / benchmark / lancement technique » : choisissez WIRED ; « lecture / privé / cercle social » : choisissez Kinfolk ; « design / architecture / portfolio » : choisissez Domus ; « recherche / académique / méthodologie » : choisissez Lab.

Après avoir choisi une direction, créez ou mettez à jour 项目记录.md (Fiche projet) dans le dossier du projet, avec la première ligne indiquant clairement la direction + la couleur du thème + le public + la durée (voir le modèle à la fin de styles.md). Ne changez pas de direction à aucun moment : changer en cours de route = tout ce qui a été fait avant est perdu.

Étape 1 · Résoudre l'intention

Si l'utilisateur a déjà fourni un plan complet et des images, vous pouvez passer directement à l'Étape 2.

Inférez la liste de contrôle ci-dessous à partir du brief, des métadonnées du projet, du contenu fourni et de la conversation. Si une réponse manquante modifierait matériellement le diaporama et qu'il n'existe pas de valeur par défaut sûre, ne demandez que les champs non résolus dans un seul formulaire de questions consolidé. Ne posez pas les questions une par une.

Liste de contrôle de clarification en 6 questions

La direction et la couleur du thème sont inférées à l'Étape 0, sauf si l'utilisateur demande explicitement à comparer les options.

#	Question	Pourquoi la poser
1	Qui est le public ? Scénario de partage ? (interne / lancement commercial / demo day / salon privé)	détermine le style de langage et la profondeur
2	Durée de la présentation ?	15 min ≈ 10 pages, 30 min ≈ 20 pages, 45 min ≈ 25-30 pages (voir la plage recommandée de chaque direction dans styles.md)
3	Y a-t-il du contenu source ? (documents / données / ancien PPT / liens d'articles)	avec du contenu, s'appuyer dessus ; sans, aider à construire
4	Y a-t-il des images ? Où sont-elles ?	voir la « Convention d'images » ci-dessous
5	Quelle couleur de thème voulez-vous ?	✓ déjà décidée par la direction à l'Étape 0
6	Y a-t-il des contraintes strictes ? (doit inclure XX données / ne doit pas montrer YY)	évite les refontes

Aide au plan (si l'utilisateur n'a pas de plan)

Utilisez le modèle d'« arc narratif » pour construire la structure, puis remplissez le contenu :

Accroche    → 1 page   : lancez un contraste / une question / un chiffre fort qui arrête les gens
Contexte    → 1-2 pages : expliquez le contexte / qui vous êtes / pourquoi ce sujet
Cœur        → 3-5 pages : le contenu central, en entrelaçant les layouts 4/5/6/9/10
Changement  → 1 page    : brisez l'attente / proposez un nouveau point de vue
À retenir   → 1-2 pages : une punchline / une question intrigante / un appel à l'action

Arc narratif + plan de nombre de pages + tableau de rythme thématique (voir layouts.md) ; alignez les trois tableaux avant de passer à l'Étape 2.

Il est préférable de sauvegarder le plan sous 项目记录.md (Fiche projet) ou 大纲-v1.md (Plan v1) pour une itération ultérieure.

Convention d'images (à dire à l'utilisateur)

Faites comprendre ces points à l'utilisateur avant de commencer :

• Emplacement du dossier : sous 项目/XXX/ppt/images/ (frère de index.html)
• Règle de nommage : {numéro de page}-{sémantique}.{ext}, p. ex. 01-cover.jpg / 03-figma.jpg / 05-dashboard.png
  • Remplissez le numéro de page avec des zéros pour un tri facile
  • Utilisez l'anglais pour la partie sémantique, court, spécifique, correspondant au contenu
• Recommandations de spécifications :
  • Chaque image ≥ 1600px de large (évite le flou sur les grands écrans)
  • JPG pour les photos/captures d'écran, PNG pour les UI transparents/graphiques
  • Gardez la taille totale sous 10 Mo (affecte la fluidité du défilement)
• Comment remplacer : la surécriture du même nom est la plus stable (pas besoin de changer le chemin dans le HTML) ; si le nom de fichier change, pensez à rechercher globalement images/anciennom et à le changer par le nouveau nom
• Que faire s'il n'y a pas d'images : alignez-vous avec l'utilisateur ; vous pouvez d'abord générer la structure avec des blocs de couleur de substitution et remplir les images plus tard, mais dites-lui que les pages mélangeant texte et image comme les layouts 4/5/10 ne peuvent pas avoir leurs visuels vérifiés sans images

Étape 2 · Copier le modèle

Copiez assets/template.html à l'emplacement cible (généralement 项目/XXX/ppt/index.html), et créez un dossier images/ comme frère, prêt à recevoir les images.

mkdir -p "项目/XXX/ppt/images"
cp "<SKILL_ROOT>/assets/template.html" "项目/XXX/ppt/index.html"

template.html est un fichier complet et exécutable : CSS, shader WebGL, JS de pagination, CDN de polices/icônes sont tous prédéfinis ; seul l'intérieur de <main id="deck"> contient 3 diapositives d'exemple (couverture, séparateur d'acte, page de remplissage vierge).

2.1 · Espaces réservés à modifier (facile à oublier)

Juste après avoir copié, modifiez les espaces réservés ci-dessous, sinon l'onglet du navigateur affichera un texte gênant comme « [à remplir] remplacez par le titre du PPT » :

Emplacement	Original	Remplacer par
<title>	[à remplir] Titre du PPT · Deck Title	le titre réel du diaporama (p. ex. Une nouvelle façon de travailler · Luke Wroblewski)

La première chose à faire chaque fois que vous avez fini de copier template.html : grep pour "[à remplir]" pour confirmer que tout est remplacé.

2.2 · Choisir la couleur du thème (5 préréglages · aucune personnalisation autorisée)

Cette compétence autorise uniquement le choix parmi 5 préréglages minutieusement réglés ; elle n'accepte pas de valeurs hexadécimales définies par l'utilisateur : une mauvaise association de couleurs rend les visuels laids instantanément, et protéger l'esthétique compte plus que d'offrir de la liberté.

#	Thème	Idéal pour
1	🖋 Encre classique	général / lancement commercial / la valeur par défaut quand vous ne savez pas quoi choisir
2	🌊 Porcelaine indigo	tech / recherche / données / keynotes techniques
3	🌿 Encre de forêt	nature / durabilité / culture / non-fiction
4	🍂 Papier kraft	nostalgique / humaniste / littéraire / magazines indépendants
5	🌙 Dune	art / design / créatif / galerie

Comment faire :

1. Recommandez-en un en fonction du thème du contenu, ou demandez simplement à l'utilisateur lequel choisir
2. Ouvrez references/themes.md et trouvez le bloc :root pour le thème correspondant
3. Remplacez en bloc les lignes marquées par le commentaire « couleur du thème » dans le bloc ouvrant :root{ de assets/template.html (la version copiée) : --ink / --ink-rgb / --paper / --paper-rgb / --paper-tint / --ink-tint
4. Tout le reste du CSS s'applique via var(--...), aucun autre changement n'est nécessaire

Règles strictes :

• Un diaporama utilise un seul thème, ne changez pas les couleurs en cours de route
• N'acceptez pas une valeur hexadécimale arbitraire de l'utilisateur : déclinez doucement et montrez les 5 préréglages pour qu'il choisisse
• Ne mélangez pas les éléments (p. ex. prendre l'encre d'Encre classique et le papier de Dune) : ça jure complètement

Étape 3 · Remplir le contenu

3.0 · Pré-vérification : les noms de classe doivent être définis dans template.html (le plus important)

C'est la source de tous les problèmes de génération. Les squelettes de layouts.md utilisent de nombreux noms de classe (h-hero / h-xl / stat-card / pipeline / grid-2-7-5, etc.) ; si <style> de assets/template.html n'a pas de définition correspondante, le navigateur revient aux styles par défaut : le grand titre passe en sans-serif, les cartes de données se compriment en tas, le pipeline se transforme en une seule ligne, les images s'empilent en bas de la page.

Avant d'écrire un code de diapositive :

1. Lisez d'abord assets/template.html (au moins jusqu'à la fin du bloc <style>)
2. Comparez avec la liste de pré-vérification de layouts.md, confirmez que chaque classe que vous allez utiliser existe dans <style>
3. Si une classe manque : ajoutez-la dans <style> de template.html, ne la réécrivez pas en ligne sur chaque diapositive
4. template.html est la source unique des noms de classe : n'inventez pas de nouveaux noms de classe ; si vous avez besoin d'une classe personnalisée, utilisez style="..." en ligne

Classes souvent oubliées (doivent être confirmées comme existantes à l'avance) : 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 / foot

3.0.5 · Planifier le rythme thématique (aussi important que la pré-vérification des classes)

Avant de choisir les layouts, vous devez d'abord lister la classe de thème pour chaque page (hero dark / hero light / light / dark) et l'écrire dans un document ou un brouillon pour l'aligner. Pour les règles détaillées, voir la section « Planification du rythme thématique » en haut de references/layouts.md.

Règles obligatoires :

• Chaque section de page doit porter l'un des éléments light / dark / hero light / hero dark ; n'écrivez pas seulement hero
• 3+ pages consécutives sur le même thème = fatigue visuelle, interdit
• 8+ pages doivent contenir ≥1 hero dark + ≥1 hero light
• L'ensemble du diaporama ne peut pas avoir seulement des pages de corps light ; il doit avoir une page de corps dark pour créer un espace de respiration
• Insérez 1 page héro (couverture/séparateur/question/grande citation) toutes les 3-4 pages

Auto-vérification après la génération : grep 'class="slide' index.html liste tous les thèmes ; confirmez manuellement que le rythme est raisonnable avant de livrer.

3.1 · Choisir un layout

N'écrivez pas les diapositives de zéro. Ouvrez references/layouts.md ; il contient 10 squelettes de layout prêts à l'emploi, chacun sous la forme d'un bloc de code <section> complet et prêt à être collé :

Layout	Utilisation
1. Couverture	page 1
2. Séparateur d'acte	ouverture de chaque acte
3. Grands nombres	présenter des données brutes
4. Image principale + texte (Citation + Image)	contraste identitaire / histoire
5. Grille d'images	comparaison multi-images / preuve par capture d'écran
6. Pipeline à deux colonnes (Pipeline)	processus de flux de travail
7. Ouverture suspendue / page de question	fermeture d'acte / conclusion
8. Page de grande citation (Big Quote)	punchline serif / à retenir
9. Comparaison côte à côte (Avant / Après)	ancien modèle vs nouveau modèle
10. Mélange image + texte (Image principale + Texte latéral)	pages d'image-texte denses en informations

Choisissez le layout correspondant, collez-le, modifiez le texte et les chemins d'image. Assurez-vous d'effectuer d'abord la pré-vérification de l'étape 3.0.

3.2 · Règles sur les proportions des images

Utilisez toujours un rapport standard, jamais le rapport étrange de l'image source (comme 2592/1798) :

Scénario	Rapport recommandé
Image principale + texte, image principale	16:10 ou 4:3 + max-height:56vh
Grille d'images (comparaison multi-images)	fixe height:26vh, pas d'aspect-ratio
Petite image à gauche + texte à droite	1:1 ou 3:2
Visuel héro plein écran	16:9 + max-height:64vh
Mélange image + texte, petit encart	3:2 ou 3:4

N'utilisez jamais align-self:end sur une image : elle glisse en bas de la cellule, masquée par la barre d'outils du navigateur. Utilisez un conteneur de grille + align-items:start (déjà prédéfini dans le modèle) pour que l'image reste en haut ; si vous voulez que la colonne de gauche reste en bas, utilisez une colonne flex + justify-content:space-between.

Les détails des composants (polices, couleurs, grilles, icônes, callout, stat-card, etc.) se trouvent dans references/components.md.

Étape 4 · Auto-vérification avec la liste de contrôle

Après la génération, ouvrez toujours references/checklist.md et vérifiez point par point. Il résume chaque piège rencontré lors des itérations réelles ; les problèmes de niveau P0 (émoji, images qui dépassent, titre qui s'enroule, division du travail typographique) doivent tous être validés.

Quelques points à surveiller particulièrement :

1. Les grands titres doivent être en serif : s'ils s'affichent en sans-serif, 99% du temps la pré-vérification de l'Étape 3.0 n'a pas été faite et la classe h-hero manque dans template.html
2. Dans les grilles d'images, utilisez uniquement height:Nvh, pas aspect-ratio (ça dépasse)
3. Les images ne doivent pas s'empiler en bas de la page : n'utilisez pas align-self:end, utilisez une grille + align-items:start (voir Étape 3.2)
4. Les images ne doivent utiliser que des rapports standard (16:10 / 4:3 / 3:2 / 1:1 / 16:9), ne copiez pas le rapport étrange de l'image source
5. Grands titres chinois ≤ 5 caractères et nowrap (évitez 1 caractère par ligne)
6. Utilisez Lucide, pas d'émoji
7. Serif pour les titres, sans-serif pour le corps, mono pour les métadonnées

Étape 5 · Aperçu local

Ouvrez simplement index.html directement dans le navigateur. Sur macOS :

open "项目/XXX/ppt/index.html"

Pas besoin de serveur local. Les images utilisent le chemin relatif images/xxx.png.

Étape 6 · Itérer

Modifiez en fonction des retours de l'utilisateur : le CSS du modèle est hautement paramétré, et 90% des ajustements consistent à modifier la valeur d'une variable -- ou à remplacer une section entière de layout.

Les itérations les plus courantes :

• Ajuster la mise en page d'une seule section (utiliser un autre layout)
• Ajuster le contraste en modifiant la classe de thème (hero light → light)
• Remplacer les images (surécriture de même nom)
• Ajuster les polices des légendes des images
• Ajuster les icônes des diagrammes de pipeline
• Ajuster la hauteur des images (modifier le paramètre de hauteur)

Il est préférable de maintenir un modèle de version en utilisant un fichier comme 项目记录.md pour suivre : direction, palettes de couleurs, mappage des images, chaque itération de layout.