Transformez vos Slides IA en présentations interactives approfondies : le framework à 6 structures

1【Prompt Présentation Interactive v2.1】
2Texte intégral omis pour cause de limite de longueur ; veuillez le copier-coller depuis note.
3
4## Ajout : Rendre la présentation interactive
5Utilisez ce bloc à ajouter à la fin du prompt de création de présentation ci-dessus. Collez vos données sous ce bloc (conservez intacte la ligne « Collez les données sous ceci » du prompt précédent).
6
7### Priorités
8- Le contenu (traitement des chiffres, titres, logique, modèles, normes graphiques, vérification) suit le prompt de création de présentation ci-dessus.
9- Le format de sortie donne la priorité à ce bloc : HTML interactif en fichier unique, 3 pages (4 si les données sont volumineuses), titres de 36 caractères maximum par ligne (pas de retour à la ligne). Ne générez pas de document de conception séparé ; remplacez-le par la liste des pages et le registre des chiffres (intégrez-y les éléments de conception requis du prompt précédent).
10- Ne posez des questions qu'une seule fois avant de commencer, et uniquement si l'objectif ou l'audience n'est pas clair d'après les données/contexte. Sinon, faites appel à votre jugement, notez vos hypothèses et rédigez tout d'une traite.
11
12### Modèle de page (Alignez le visuel sur l'exemple ci-dessous)
13- Pages 2-3 : Graphique principal à gauche (60 % de la largeur), panneau de preuves à droite (encadré à fond clair). Structure du panneau : Un grand chiffre (88-96px) → Ce qu'il représente (1 ligne) → Contexte (2-3 lignes) → Cible de comparaison & écart (avec formule) → « Voir le détail › »
14- Page 1 : Rangée supérieure de 3 grands chiffres, la partie inférieure montre le flux/la structure globale (ce qui se passe où). Placez des cartes renvoyant à des pages spécifiques (« p.2 › ») dans le flux.
15- Les graphiques et les chiffres remplissent le cadre. Pas de bandes vides sous le contenu.
16- Utilisez tous les chiffres fournis (graphiques, panneaux, encarts, preuves). Calculez les écarts/ratios et affichez les formules. N'inventez aucun chiffre absent des données.
17- Le sujet principal utilise la couleur primaire, les comparaisons utilisent des dégradés clairs, le reste est en gris. Un seul grand chiffre par page.
18- Rendez les éléments cliquables évidents : utilisez « › », « Cliquer pour... », des bordures au survol, un anneau de surbrillance unique à l'entrée sur la page. Les barres/points affichent une info-bulle avec « Valeur, Nom, Source » au survol.
19
20### Une interaction par page (Déduite de la structure)
21Ajoutez exactement une manipulation par page permettant au lecteur de vérifier l'affirmation du titre. Choisissez l'opération selon le type de structure du titre.
22- Pyramide (Conclusion/Preuve) → Cliquer pour creuser. Panneau de preuves à droite (avec source ; à inclure sur presque toutes les pages).
23- Classification (Segmentation) → Changer de critère (vue agrégée, métrique, année) pour réordonner toutes les barres.
24- Comparaison (Différence) → L'état précédent se transforme en état actuel, laissant l'écart/différence sous forme de ligne pointillée.
25- Causalité (Cause/Effet) → Un curseur ajuste une condition et recalcule le résultat. Afficher la formule à l'écran.
26- Résolution de problème (Écart/Solution) → Activer/désactiver les solutions pour combler/laisser des écarts.
27- Séquence (Flux/Processus/Temps) → Assemblage séquentiel, l'acteur traverse le processus, marqueur « Maintenant » sur la chronologie.
28N'ajoutez aucune animation sans lien avec le titre. Les animations quantitatives doivent être calculées à partir des valeurs.
29
30### Panneau de preuves (Glisse depuis la droite au clic)
31- Largeur 720px. Glisse depuis la droite, assombrit l'arrière-plan. Fermeture via X, Échap ou clic sur l'arrière-plan.
32- Structure de haut en bas : Contexte d'emplacement (« Statut actuel > Nom de l'élément ») → Affirmation (1-2 lignes) → Onglets (max 2, ex. Détail / Sources & Hypothèses) → Petit graphique/tableau → Source.
33- Placez ici les chiffres détaillés qui ne tiennent pas sur la page principale. À inclure sur presque toutes les pages.
34
35### Présentation globale
36- Activez la navigation par zoom depuis la vue d'ensemble de la page 1 vers des pages spécifiques. Permettez de sauter des solutions aux pages de preuves.
37- Touches : → et Espace pour suivant, ← pour précédent, Chiffres pour sauter, Échap pour fermer/retour, O pour la vue d'ensemble de toutes les pages, D pour la démo automatique (le curseur flèche suit le script, termine sur la vue d'ensemble. Taguez les éléments interactifs avec des noms data-demo).
38- Les pages s'assemblent en ~3 secondes : Titre → Graphique principal (les barres croissent depuis 0, décalées de 60ms) → Chiffres → Panneau de preuves. Utilisez les transitions/délais CSS ; si vous utilisez JS, associez requestAnimationFrame à un minuteur de 50ms.
39- Prenez en charge le paramètre d'URL #static et le réglage « Réduire les animations » pour afficher l'état final assemblé (pour les pages interactives, affichez l'état où l'affirmation du titre est visible, ex. toutes les solutions ACTIVÉES). Doit également être lisible comme une présentation statique.
40- Mettez à l'échelle le canevas 1920x1080 pour l'adapter à l'écran. Les chargements externes sont limités à Google Fonts Noto Sans JP.
41
42### Normes minimales (Uniquement si le prompt de création de présentation ci-dessus est absent)
431. Créez un registre des chiffres à partir des données (Élément, Valeur, Date, Source, Population). Marquez les chiffres manquants par « xx » avec une note. Classez les éléments sans valeur en dernier.
442. Un message par page. Les titres sont des phrases complètes combinant fait et affirmation, max 36 caractères/ligne. Évitez la structure bipartite « A. B », les décomptes « Il y a 3... » ou les fragments se terminant par un nom.
453. Rédigez d'abord tous les titres, vérifiez le flux vertical (Vue d'ensemble→Preuve→Solution) avant de créer les graphiques.
464. Choisissez le type de graphique selon l'intention structurelle du titre (voir « Une interaction » ci-dessus).
475. Titres des graphiques : « Quoi, Quand, Unité ». Aucune affirmation dans les titres. Incluez la source dans le pied de page et dans le panneau de preuves.
486. Couleurs : 1 primaire, 3 dégradés clairs, gris. Primaire par défaut #1976D2. Accent (Ambre #D97706) utilisé une seule fois dans toute la présentation. Taille de police min 18px.
497. Ne déduisez pas de causalité d'une corrélation. Étiquetez les estimations comme « Estimation » avec la formule et les hypothèses affichées à l'écran.
50
51### Sortie
52- HTML : Claude en tant qu'Artifact, ChatGPT en tant que Canvas (ou un seul bloc de code si aucun des deux n'est disponible). Rédigez tout d'une traite. Limitez les pages et regroupez les composants dans des fonctions pour raccourcir le code. Si coupé, continuez le même document lorsque l'utilisateur dit « continuer » (ne demandez pas de collage manuel).
53- La ligne 1 indique la méthode : « Contenu = Prompt Présentation / Interactivité = Bloc Interactif » ou « Bloc Interactif seul (règles simplifiées appliquées au contenu) ».
54- La liste des pages (Titre/Structure/Opération/Contenu du panneau de preuves), le Registre des chiffres et les Instructions vont EN DEHORS du HTML (dans le corps de la réponse), brièvement. Pas à l'intérieur du HTML.
55- Visez une taille HTML totale d'environ 40 Ko. Réduisez le texte si nécessaire (ne réduisez PAS les graphiques, panneaux de preuves ou opérations).
56- Terminez par 2-3 suggestions d'amélioration supplémentaires et demandez à l'utilisateur de choisir.
57
58### Vérification finale
59Avant de générer la sortie, révisez et corrigez : Chaque page possède une « opération pour vérifier le titre » et un « panneau de preuves avec source » / Aucun chiffre inventé / Pas de bandes vides, chevauchements, débordements ou texte <18px / Terminaisons des titres cohérentes d'une page à l'autre (pas toutes en « devrait... ») / Le script de démo automatique ne référence pas d'éléments inexistants.
60
61(Le code d'une page exemple suit ici. Inclure des exemples améliore considérablement la qualité. La version complète avec le code est disponible sur note.)