webiscorp/designskill-open

Frontend Slides

Créez des présentations HTML riches en animations, sans dépendances, qui s'exécutent entièrement dans le navigateur.

Principes Fondamentaux

1. Zéro Dépendance — Fichiers HTML uniques avec CSS/JS intégré. Pas de npm, pas d'outils de build.
2. Montrer, ne pas Dire — Générez des aperçus visuels, pas des choix abstraits. Les gens découvrent ce qu'ils veulent en le voyant.
3. Design Distinctif — Pas de générique "déchet IA." Chaque présentation doit être sur mesure.
4. Divulgation Progressive — Lisez d'abord les index de style légers. Pour les modèles audacieux, utilisez de petites cartes d'aperçu du style et chargez l'design.md complet uniquement après que l'utilisateur a choisi ce modèle.
5. Format 16:9 Fixe (NON-NÉGOCIABLE) — Chaque deck utilise un canevas de diapositive de 1920×1080, mis à l'échelle de manière homogène dans la zone d'affichage. Les diapositives doivent rester en 16:9 sur tous les écrans, y compris les téléphones. Ne pas réorganiser le contenu des diapositives pour l'adapter à l'appareil.

Esthétiques de Conception

Vous avez tendance à converger vers des résultats génériques et "standardisés". En conception front-end, cela crée ce que les utilisateurs appellent l'esthétique "déchet IA". Évitez cela : créez des front-end créatifs et distinctifs qui surprennent et ravissent.

Concentrez-vous sur :

• Typographie : Choisissez des polices belles, uniques et intéressantes. Évitez les polices génériques comme Arial et Inter ; optez plutôt pour des choix distinctifs qui élèvent l'esthétique du front-end.
• Couleur et Thème : Adoptez une esthétique cohérente. Utilisez des variables CSS pour la cohérence. Les couleurs dominantes avec des accents marqués surpassent les palettes timides et uniformément réparties. Inspirez-vous des thèmes IDE et des esthétiques culturelles.
• Mouvement : Utilisez des animations pour les effets et les micro-interactions. Privilégiez les solutions CSS uniquement pour le HTML. Utilisez la bibliothèque Motion pour React lorsqu'elle est disponible. Concentrez-vous sur les moments à fort impact : un chargement de page bien orchestré avec des dévoilements échelonnés (animation-delay) crée plus de plaisir que des micro-interactions dispersées.
• Arrière-plans : Créez une atmosphère et de la profondeur plutôt que de vous rabattre sur des couleurs unies. Superposez des dégradés CSS, utilisez des motifs géométriques, ou ajoutez des effets contextuels qui correspondent à l'esthétique globale.

Évitez les esthétiques génériques générées par l'IA :

• Familles de polices surutilisées (Inter, Roboto, Arial, polices système)
• Combinaisons de couleurs clichées (en particulier les dégradés violets sur fonds blancs)
• Mises en page et modèles de composants prévisibles
• Design passe-partout qui manque de caractère spécifique au contexte

Interprétez de manière créative et faites des choix inattendus qui semblent véritablement conçus pour le contexte. Variez entre thèmes clairs et sombres, polices différentes, esthétiques différentes. Vous avez toujours tendance à converger vers des choix courants (Space Grotesk, par exemple) d'une génération à l'autre. Évitez cela : il est essentiel de sortir des sentiers battus !

Règles de la Scène Fixe

Ces invariants s'appliquent à CHAQUE diapositive de CHAQUE présentation :

• Chaque deck possède un conteneur de zone d'affichage qui remplit la fenêtre du navigateur.
• Chaque diapositive est créée à l'intérieur d'une scène fixe de 1920×1080.
• La scène est mise à l'échelle de manière uniforme pour s'adapter à la zone d'affichage. Elle peut être letterbox/pillarbox ; elle ne doit pas réorganiser le contenu.
• N'utilisez pas de points d'arrêt responsives pour réorganiser le contenu des diapositives pour les téléphones.
• Utilisez des mesures internes fixes de diapositive à la taille de conception 1920×1080.
• La visibilité des diapositives doit être contrôlée par .active / .visible en utilisant visibility, opacity et pointer-events de viewport-base.css. N'utilisez pas display: none / display: block pour la commutation des diapositives ; les classes de mise en page ultérieures telles que .slide-content { display: flex; } peuvent les remplacer et rendre toutes les diapositives visibles à la fois.
• Utilisez clamp() uniquement pour l'interface utilisateur non liée aux diapositives en dehors de la scène, ou pour de petites prévisualisations de secours lorsqu'une scène complète est peu pratique.
• Incluez la prise en charge de prefers-reduced-motion
• Ne niez jamais directement les fonctions CSS (-clamp(), -min(), -max() sont ignorées silencieusement) — utilisez plutôt calc(-1 * clamp(...))

Lors de la génération, lisez viewport-base.css et incluez son contenu intégral dans chaque présentation.

Modes de Densité de Contenu

Demandez à l'utilisateur s'il s'agit principalement d'un deck de lecture ou d'un deck de présentation orale, puis concevez en fonction de cette réponse :

Mode de densité	Meilleur pour	Comportement de conception
Faible densité / axé sur l'orateur	Exposés publics, partage de type keynote, explication en direct	Une idée par diapositive, grands caractères, forte hiérarchie visuelle, généreux espaces négatifs, 1 à 3 puces maximum, plus de diapositives si nécessaire
Haute densité / lecture d'abord	Rapports, documents à distribuer, révision asynchrone, documents internes détaillés	Diapositives plus autonomes, grilles/tableaux/annotations structurés, 4 à 8 puces ou 4 à 6 cartes lisibles, espacement plus serré mais toujours intentionnel

Les limites de base s'appliquent toujours : pas de défilement, pas de débordement, pas de panneaux qui se chevauchent, et pas de texte en dessous d'une taille de lecture confortable. Si le contenu dépasse le mode de densité sélectionné, divisez-le en plusieurs diapositives plutôt que de réduire jusqu'à ce qu'il soit à l'étroit.

---

Phase 0 : Détection du Mode

Déterminez ce que l'utilisateur veut :

• Mode A : Nouvelle Présentation — Créer à partir de zéro. Passez à la Phase 1.
• Mode B : Conversion PPT — Convertir un fichier .pptx. Passez à la Phase 4.
• Mode C : Amélioration — Améliorer une présentation HTML existante. Lisez-la, comprenez-la, améliorez-la. Suivez les règles de modification du Mode C ci-dessous.

Mode C : Règles de Modification

Lors de l'amélioration de présentations existantes, l'adaptation à la scène fixe est le plus grand risque :

1. Avant d'ajouter du contenu : Comptez les éléments existants, vérifiez les limites de densité
2. Ajout d'images : Adaptez-les dans le canevas de diapositive 1920×1080. Si la diapositive a déjà un contenu maximal, divisez-la en deux diapositives
3. Ajout de texte : Maximum 4 à 6 puces par diapositive. Limites dépassées ? Divisez en diapositives de continuation
4. Après TOUTE modification, vérifiez : que la scène de la diapositive reste en 16:9, qu'aucun texte ne déborde de sa carte, qu'aucun panneau ne se chevauche, et que les captures d'écran sont correctes à 1280×720 plus une zone d'affichage de téléphone
5. Réorganisez de manière proactive : Si les modifications provoquent un débordement, divisez automatiquement le contenu et informez l'utilisateur. N'attendez pas qu'on vous le demande

Lors de l'ajout d'images à des diapositives existantes : Déplacez l'image vers une nouvelle diapositive ou réduisez d'abord le contenu existant. N'ajoutez jamais d'images sans vérifier si le contenu existant remplit déjà le canevas de la diapositive 1920×1080.

---

Phase 1 : Découverte du Contenu (Nouvelles Présentations)

Posez TOUTES les questions ensemble afin que l'utilisateur remplisse tout à la fois. Si l'environnement actuel fournit une interface native de questions structurées, utilisez-la ; sinon, demandez en un seul message concis avec des choix clairement numérotés :

Question 1 — Objectif (en-tête : "Objectif") : Quel est l'objectif de cette présentation ? Options : Pitch deck / Enseignement-Tutoriel / Conférence / Présentation interne

Question 2 — Longueur (en-tête : "Longueur") : Combien de diapositives environ ? Options : Court 5-10 / Moyen 10-20 / Long 20+

Question 3 — Contenu (en-tête : "Contenu") : Avez-vous le contenu prêt ? Options : Tout le contenu prêt / Notes approximatives / Sujet seulement

Question 4 — Densité (en-tête : "Densité") : Quelle doit être la densité du deck ? Options :

• "Faible densité / axé sur l'orateur" — Grandes idées, moins de mots, plus d'espace visuel
• "Haute densité / lecture d'abord" — Plus de détails autonomes pour une lecture asynchrone

Ne posez pas de questions sur l'édition en ligne pendant la Phase 1. Les utilisateurs ne devraient pas avoir à choisir un comportement d'édition avant de voir un brouillon. L'édition en ligne est une fonctionnalité post-brouillon : incluez-la par défaut, sauf si l'utilisateur demande explicitement un fichier verrouillé/exportation uniquement.

Souvenez-vous du choix de densité de l'utilisateur. Il affecte le nombre de diapositives, l'échelle typographique, la quantité de texte par diapositive, la densité de la mise en page, et s'il faut privilégier les diapositives de présentateur cinématographiques ou les diapositives de lecture autonomes.

Si l'utilisateur a du contenu, demandez-lui de le partager.

Étape 1.2 : Évaluation des Images (si des images sont fournies)

Si l'utilisateur a sélectionné "Aucune image" → passez à la Phase 2.

Si l'utilisateur fournit un dossier d'images :

1. Analysez — Listez tous les fichiers image (.png, .jpg, .svg, .webp, etc.)
2. Inspectez chaque image — Utilisez la capacité de compréhension d'image disponible de l'agent. Si la lecture d'image n'est pas disponible, utilisez les noms de fichiers/métadonnées et demandez à l'utilisateur de clarifier uniquement si nécessaire
3. Évaluez — Pour chaque : ce qu'elle montre, UTILISABLE ou NON UTILISABLE (avec raison), quel concept elle représente, couleurs dominantes
4. Co-concevez le plan — Les images organisées informent la structure des diapositives en même temps que le texte. Ce n'est PAS "planifier les diapositives puis ajouter des images" — concevez autour des deux dès le début (par exemple, 3 captures d'écran → 3 diapositives de fonctionnalités, 1 logo → diapositive de titre/clôture)
5. Confirmez le plan en utilisant le même mécanisme de questions structurées lorsqu'il est disponible : "Ce plan de diapositives et cette sélection d'images vous semblent-ils corrects ?" Options : Ça me semble bien / Ajuster les images / Ajuster le plan

Logo dans les aperçus : Si un logo utilisable a été identifié, intégrez-le (base64) dans chaque aperçu de style de la Phase 2 — l'utilisateur voit sa marque stylisée de trois manières différentes.

---

Phase 2 : Découverte du Style

C'est la phase "Montrer, ne pas Dire". La plupart des gens ne peuvent pas exprimer leurs préférences de conception avec des mots.

Étape 2.0 : Générer 3 Aperçus de Style Directement

En fonction de l'objectif, du public, de l'ambiance et de la densité du contenu, générez 3 aperçus HTML distincts d'une seule diapositive montrant la typographie, les couleurs, les animations et l'esthétique générale.

Ne demandez pas à l'utilisateur s'il souhaite des options ou un sélecteur de préréglages. L'expérience de découverte par défaut est toujours la comparaison visuelle.

Si l'utilisateur a déjà donné une ambiance, utilisez-la. S'il ne l'a pas fait, déduisez l'ambiance probable de l'occasion, du public, du contenu et des enjeux. Gardez les options suffisamment diverses pour que l'utilisateur puisse réagir visuellement plutôt que d'avoir à formuler son goût à l'avance.

Si l'utilisateur nomme explicitement un préréglage ou un modèle audacieux, honorez cela comme une option et générez les emplacements d'aperçu restants autour de lui.

Lisez STYLE_PRESETS.md pour les candidats de préréglages sûrs. Si bold-template-pack/selection-index.json existe, lisez également cet index compact, mais ne lisez pas encore de fichiers design.md.

Ambiance	Préréglages Suggérés
Impressionné/Confiant	Signal Audacieux, Studio Électrique, Botanique Sombre
Excité/Énergisé	Voltage Créatif, Néon Cyber, Pastel Scindé
Calme/Concentré	Onglets de Carnet, Papier & Encre, Suisse Moderne
Inspiré/Ému	Botanique Sombre, Éditorial Vintage, Géométrie Pastel

Règles de mélange des aperçus :

• Générez 3 aperçus par défaut : 1 préréglage sûr de STYLE_PRESETS.md, au moins 1 modèle audacieux de bold-template-pack/selection-index.json, et 1 joker.
• Le joker peut être soit un deuxième modèle audacieux, soit un design personnalisé auto-généré. Choisissez celui qui crée le contraste le plus fort et le plus utile pour l'occasion, le public, l'ambiance et le contenu de l'utilisateur.
• Ne forcez pas chaque option expressive à provenir de la bibliothèque de modèles. Si le brief présente une opportunité de design plus précise et spécifique que les modèles disponibles, utilisez l'emplacement joker pour concevoir librement.
• Pour les decks conservateurs ou à enjeux élevés, rendez le préréglage sûr particulièrement sobre ; choisissez un modèle audacieux calme et plus formel ; faites du joker soit un autre modèle sobre, soit un design personnalisé qui semble autoritaire plutôt que décoratif.
• Pour les decks expressifs, gardez le préréglage sûr comme un fallback lisible ; choisissez un modèle audacieux fort ; faites du joker un design aventureux, spécifique au contexte et clairement différent des deux autres aperçus.
• Si les correspondances de modèles audacieux semblent faibles, utilisez le joker comme design personnalisé ou revenez à un autre préréglage sûr plutôt que de forcer un modèle.

Règles de conception du joker personnalisé :

• Suivez la section Esthétiques de Conception ci-dessus : pas de "déchet IA" générique, pas de choix de police/couleur/mise en page par défaut, pas de cliché violet-dégradé-sur-blanc, pas d'aspect tableau de bord/carte passe-partout.
• Correspondez à l'occasion, au public, à l'ambiance/atmosphère et à la densité de contenu déclarés par l'utilisateur. Le design personnalisé doit donner l'impression d'avoir été créé pour ce deck, pas simplement d'être "élégant".
• Faites une thèse visuelle délibérée : une typographie distinctive, une palette engagée, un système de mise en page reconnaissable, et un dispositif atmosphérique ou graphique fort.
• Assurez-vous qu'il soit réalisable pour un deck complet. L'aperçu doit sous-entendre un système de conception qui peut s'étendre aux diapositives de section, de contenu, de citation, de comparaison et de clôture.
• Utilisez les règles de scène fixe 1920×1080 et réussissez les mêmes vérifications d'authenticité d'aperçu que toutes les autres options.
• Ne rendez jamais de libellés "personnalisé", "joker", "généré par IA" ou de processus de conception sur la diapositive elle-même.

Règles de sélection des modèles audacieux :

• Faites correspondre l'objectif et l'ambiance de l'utilisateur avec mood, tone, best_for, avoid_for, formality, density et scheme.
• Traitez les exemples best_for comme des signaux souples, pas des filtres sectoriels stricts.
• Assurez-vous que les trois aperçus soient véritablement différents les uns des autres.
• Après avoir choisi le(s) candidat(s) de modèle audacieux, lisez uniquement le(s) fichier(s) preview.md de ce(s) candidat(s) à partir des chemins preview_md dans l'index de sélection.
• Utilisez preview.md uniquement pour les aperçus de la diapositive de titre. Ne lisez pas les fichiers design.md complets avant que l'utilisateur ne choisisse le modèle final.
• Ne lisez ni ne copiez template.html à moins que le fichier design.md final sélectionné ne manque d'un détail d'implémentation critique.

Règles d'authenticité des aperçus (NON-NÉGOCIABLES) :

• Chaque aperçu de style doit ressembler à une véritable première diapositive du deck de l'utilisateur, pas à une carte de diagnostic.
• Ne rendez jamais de texte de flux de travail interne sur une diapositive : pas de preview, generated from, preview.md, template, preset, style option, Option A/B/C, noms de fichiers, chemins ou libellés de document source.
• Ne rendez jamais de noms de modèles ou de slugs sur la diapositive elle-même. Les noms de modèles/styles appartiennent uniquement au message destiné à l'utilisateur.
• Ne rendez jamais de notes d'exigences utilisateur en tant que contenu de diapositive, comme "incisif et provocateur", "option sûre", "option audacieuse", "pour partage interne" ou "public : ...", sauf si l'utilisateur souhaite explicitement que cette phrase exacte apparaisse dans le deck.
• Si la diapositive a besoin d'un habillage, utilisez uniquement l'habillage réel du deck : le titre du deck, le titre de la section, la date, l'auteur, l'entreprise, le numéro de page ou une phrase de contenu authentique tirée du matériel de l'utilisateur.
• Avant d'ouvrir les aperçus, inspectez le texte visible et révisez-le si des métadonnées internes apparaissent.

Enregistrez les aperçus dans .frontend-slides/slide-previews/ (style-a.html, style-b.html, style-c.html). Chaque fichier doit...

[...tronqué pour la traduction...]