Créateur de présentations HTML

Que fait Créateur de présentations HTML ?

Créez un diaporama HTML clair et visuellement intentionnel qui s'ouvre directement dans un navigateur. Par défaut, générez un fichier presentation.html autonome avec CSS et JavaScript en ligne, sans étape de build.

Flux de travail

1. Examinez le brief, le texte source, les données, les éléments de marque et l'emplacement de sortie demandé par l'utilisateur.
2. Déduisez des valeurs par défaut raisonnables pour les détails manquants. Ne posez une question que si le public, l'objectif, la langue, le nombre de diapositives ou la direction visuelle modifieraient matériellement le résultat et ne peuvent pas être déduits.
3. Concevez une séquence de diapositives concise. Donnez à chaque diapositive une seule tâche et un titre utile ; éliminez les répétitions avant de coder.
4. Choisissez un système visuel adapté au sujet. Définissez des propriétés personnalisées CSS pour la couleur, la typographie, l'espacement, les bords, les ombres et les mouvements, puis utilisez-les de manière cohérente.
5. Copiez le fichier assets/starter.html comme base lorsque vous partez de zéro. Remplacez toutes les diapositives exemple et les jetons de thème plutôt que de traiter le style d'exemple comme un thème obligatoire.
6. Implémentez le diaporama complet. Utilisez des éléments sémantiques <section class="slide">, une scène 16:9 fixe qui s'adapte à la fenêtre, et une navigation au clavier, au clic et tactile.
7. Lisez references/QUALITY.md avant l'assurance qualité finale. Ouvrez le diaporama dans un navigateur lorsque le contrôle du navigateur est disponible, inspectez chaque diapositive, corrigez les débordements et les défauts d'interaction, puis livrez le fichier HTML.

N'introduisez pas d'étape de planification ou ne demandez pas d'approbation chapitre par chapitre, sauf si l'utilisateur demande un flux de travail itératif.

Contrat de livraison

• Produisez presentation.html par défaut. Utilisez un dossier multi-fichiers uniquement si l'utilisateur le demande ou si le diaporama a réellement besoin d'actifs locaux réutilisables ou d'une logique applicative substantielle.
• Gardez le diaporama par défaut fonctionnant hors ligne : CSS et JavaScript en ligne ; utilisez des images et polices locales ou intégrées. Évitez les dépendances CDN sauf approbation de l'utilisateur.
• Préservez les faits fournis, les contraintes de formulation, les citations, les logos et les règles de marque. N'inventez jamais de statistiques ou de sources.
• Incluez une diapositive de titre, un corps cohérent et une diapositive de conclusion pertinente lorsque approprié ; ne les forcez pas si le format demandé dit autrement.
• Prenez en charge ArrowLeft, ArrowRight, Space, PageUp, PageDown, Home et End ; prenez en charge la navigation par clic/tap et les glissements tactiles. Utilisez F pour le plein écran.
• Affichez un compteur de diapositives ou un indicateur de progression discret. Gardez les contrôles visuellement discrets et sûrs pour la présentation.
• Ajoutez du CSS d'impression pour que chaque diapositive s'imprime sur une page en paysage et que les contrôles décoratifs soient masqués.
• Respectez prefers-reduced-motion. Utilisez les animations avec parcimonie et ne comptez jamais sur une animation pour révéler des informations essentielles.
• N'ajoutez pas de notes de l'orateur, de scripts de narration, d'audio, de lecture automatique, d'aides à l'enregistrement, de chronologies vidéo ou d'infrastructure TTS sauf demande explicite.

Règles de contenu et visuelles

• Faites une affirmation principale par diapositive. Préférez 3 à 6 éléments de support concis plutôt que des paragraphes.
• Utilisez la forme visuelle appropriée à la relation : comparaison, processus, chronologie, hiérarchie, métrique, citation, image, graphique ou diagramme.
• Préférez du contenu réel, des SVG simples, des diagrammes CSS et des graphiques significatifs plutôt que du remplissage décoratif.
• Maintenez une hiérarchie forte et un espacement généreux. Concevez pour une visualisation à distance, non pour la lecture de document.
• Gardez un thème cohérent dans tout le diaporama tout en permettant une variété de mises en page. Évitez que chaque diapositive soit la même grille de cartes arrondies.
• Évitez le style IA générique : dégradés violets gratuits, lueur excessive, panneaux de verre aléatoires, décorations emoji, faux chrome d'application et graphiques ornementaux sans données.
• Assurez le contraste du texte, des états de focus visibles, des textes alternatifs utiles et un ordre de lecture DOM cohérent.
• Si le contenu ne tient pas, raccourcissez-le ou divisez la diapositive. Ne réduisez pas la taille du texte du corps jusqu'à ce qu'il tienne techniquement.

Modification de présentations existantes

Préservez l'architecture actuelle et le langage de conception sauf si l'utilisateur demande une refonte. Effectuez le plus petit changement cohérent, puis vérifiez la navigation, la numérotation des diapositives, les débordements, la mise en page d'impression et la mise à l'échelle adaptative.

Vérification de l'achèvement

Avant de signaler comme terminé :

1. Vérifiez les messages demandés, les chiffres, les citations et l'ordre des diapositives.
2. Testez les limites première/dernière diapositive et chaque méthode de navigation.
3. Inspectez toutes les diapositives à la taille de bureau 16:9 et au moins un viewport plus petit.
4. Recherchez le texte coupé, les collisions, les caractères trop petits, les médias cassés, les erreurs console et le défilement accidentel.
5. Confirmez que le fichier s'ouvre sans étape de build et reste utilisable hors ligne sauf si des dépendances externes ont été approuvées.
6. Corrigez chaque échec avant de remettre le résultat.