Présentation — Images de Diaporama
Cet outil crée des images au format 16:9 en utilisant des pages HTML. Chaque page mesure 1920×1080 et, après application du style choisi, est rendue par un navigateur sans tête en PNG 3840×2160. Ces images sont destinées à être insérées dans des documents de proposition, de rapport ou de projet.
CRITIQUE — Avant de créer une page, vous DEVEZ lire les spécifications suivantes avec l'outil Read :
kirklin-slides-copy.md: Règles typographiques et de rédaction applicables à tous les styles.kirklin-slides-layouts.md: Contenu et règles de mise en page pour les 27 types de pages.kirklin-slides-components.md: Structure des pages et noms de classes des composants.- Le guide du style choisi : couleurs, tailles de police et dimensions de chaque mise en page. Voir la liste des styles pour les emplacements.
- Avant de créer, rendre, vérifier, renuméroter, exporter, prévisualiser un style ou capturer un post, lisez
kirklin-slides-workflow.md. - Avant d'ajouter un nouveau style, lisez
kirklin-slides-new-style.md.
Dans ce document, <skill 目录> désigne le répertoire contenant ce fichier.
Styles
Le style détermine les couleurs, la police, la taille des caractères et les décorations. Tous les styles partagent le même ensemble de pages d'exemple, les mêmes noms de classes de composants et les mêmes règles de rédaction. Les styles actuellement disponibles sont listés ci-dessous :
| Style | Nom Anglais | Contexte d'utilisation | Guide |
|---|---|---|---|
| Lancement fond noir | launch-dark | Projets, présentations de solutions, projection | kirklin-slides-style-launch-dark.md |
Les pages d'exemple se trouvent dans assets/pages/. Les fichiers de style de chaque style sont dans assets/styles/<nom_anglais>/style.css. Exécutez node <skill 目录>/scripts/preview-style.ts <nom_anglais> 汇总图.png pour générer une vue d'ensemble de tous les exemples d'un style.
Contexte d'utilisation
- Créer des illustrations pour des documents de projet, de rapport ou de proposition.
- Modifier ou compléter des illustrations existantes.
- Réaliser des pages uniques (couverture, planning, présentation d'équipe).
- Exporter toutes les illustrations d'un document dans l'ordre et générer une vue d'ensemble.
- Capturer des publications de réseaux sociaux et les intégrer dans une illustration.
- Ajouter un nouveau style (par exemple, un style clair) à partir d'illustrations fournies par l'utilisateur.
Décisions Rapides
- Si le projet contient déjà un fichier
slides/style.css, utilisez ce style. Le commentaire en première ligne du fichier donne le nom anglais du style. Lisez le guide correspondant et placez les nouvelles pages dans le même répertoirepages/. - Si l'utilisateur spécifie un style, utilisez celui-ci.
- Si le projet n'a pas de
style.csset que l'utilisateur n'a pas spécifié de style : s'il n'y a qu'un seul style, utilisez-le directement. S'il y a plusieurs styles, recommandez-en un en fonction du contenu et du contexte, puis laissez l'utilisateur confirmer après avoir vu la vue d'ensemble. - Si l'utilisateur fournit un jeu d'illustrations et demande de les utiliser comme nouveau style, suivez
kirklin-slides-new-style.md. Les styles existants restent inchangés. - Déterminez d'abord le titre de chaque page, puis choisissez la mise en page en fonction du contenu principal. Le tableau ci-dessous donne les correspondances courantes. La description complète se trouve dans
kirklin-slides-layouts.md.
| Contenu | Mise en page |
|---|---|
| Un chiffre clé | Grand Chiffre |
| Plusieurs chiffres | Blocs de Chiffres |
| Plusieurs conclusions parallèles | Points Clés |
| Plusieurs caractéristiques ou capacités | Liste à Icônes |
| Comparaison de deux approches | Comparaison |
| Éléments regroupés selon deux axes | Quadrants |
| Comparaison de plusieurs éléments sous plusieurs aspects | Tableau |
| Comparaison de grandeurs | Barres Horizontales |
| Valeurs statistiques par période | Histogramme |
| Évolution d'un indicateur dans le temps | Courbe |
| Composition d'un total | Anneau |
| Phases de réduction progressive | Entonnoir |
| Jalons | Chronologie |
| Planification par phases | Feuille de Route |
| Tâches planifiées par semaine | Diagramme de Gantt |
| Deux tâches simultanées | Double Piste |
| Étapes séquentielles | Organigramme |
| Une citation | Citation |
| Une image avec description | Image-Texte |
| Publication externe | Capture d'écran |
| Membres et répartition des tâches | Équipe |
| Partenaires | Mur de Logos |
| Un extrait de code | Code |
Limites Fondamentales
- Tous les styles ont une zone de dessin de 1920×1080 ; le rendu final est de 3840×2160.
- Le texte doit se trouver à l'intérieur de la zone définie par les marges dans
style.css(quatre variables). - Les pages ne contiennent que la structure, le contenu et les pourcentages calculés à partir des données. La couleur, la taille de police et autres aspects stylistiques sont déterminés par le style. La signification des couleurs est définie dans le guide du style.
- Chaque page exprime un seul sujet. Si le contenu est volumineux, divisez-le en plusieurs pages.
- Les chiffres, noms de personnes et dates proviennent des matériaux fournis par l'utilisateur, ou sont calculés directement à partir de ces matériaux (totaux, dates de début/fin, maximums). Les chiffres calculés doivent être accompagnés d'une note en pied de page expliquant le calcul. Les chiffres absents des matériaux et non calculables ne doivent pas être inventés ni estimés.
- Le texte de remplacement dans les pages d'exemple doit être entièrement remplacé par le contenu de l'utilisateur. Les parties non fournies par l'utilisateur sont supprimées en bloc.
- Les graphiques comparables doivent utiliser la même échelle, et l'échelle doit être indiquée en pied de page.
- Les titres sont des phrases complètes se terminant par un point. Un espace insécable doit être inséré entre le texte chinois et les chiffres ou les lettres anglaises. Les plages de valeurs sont exprimées avec « à ».
- La numérotation des illustrations dans un document suit l'ordre d'apparition. L'insertion d'une nouvelle page entraîne une renumérotation.
- Les scripts sont écrits en TypeScript ; les scripts auxiliaires du projet le sont également.
Exemple
# MAUVAIS : titre sous forme de sujet, pas d'espace entre chiffres et caractères chinois, plage avec tilde
Présentation du processus d'approbation
Chaque module nécessite 2~3 personnes
# BON : titre sous forme de conclusion, se termine par un point
Le nouveau processus réduit l'attente à deux jours.
Chaque module nécessite de 2 à 3 personnes
# MAUVAIS : deux graphiques à barres avec des échelles différentes, utilisation d'une couleur indiquant une situation grave
# BON : les deux graphiques à barres utilisent la même échelle (indiquée en pied de page), la couleur choisie est celle qui indique une sélection dans le guide de style
Liste de Vérification
- Chaque page modifiée a été rendue à nouveau et vérifiée visuellement via l'outil Read sur le PNG.
- Le script de vérification ne signale aucun problème ; il ne reste aucun texte de remplacement issu des exemples.
- Tous les chiffres, noms de personnes et dates proviennent des matériaux de l'utilisateur ou peuvent en être calculés.
- Les légendes des illustrations dans le document correspondent aux titres ; la numérotation suit l'ordre d'apparition.
- Lorsque l'utilisateur demande un export, le script d'export s'est exécuté sans erreur et la vue d'ensemble a été vérifiée.
- Après avoir modifié les scripts du skill, les pages d'exemple ou les styles, exécutez
pnpm --dir <skill 目录> testavec succès.
Hors du Périmètre de ce Skill
- Fichiers .pptx et diaporamas en ligne
- Affiches, cartes de réseaux sociaux et designs web
- Rédaction du corps du document
Références
| Fichier | Description |
|---|---|
kirklin-slides-copy.md | Règles typographiques |
kirklin-slides-layouts.md | Catalogue des mises en page |
kirklin-slides-components.md | Structure et composants des pages |
kirklin-slides-workflow.md | Workflow de création et utilisation des scripts |
kirklin-slides-new-style.md | Ajout d'un nouveau style |
kirklin-slides-style-launch-dark.md | Style lancement fond noir |
assets/pages/ | Pages d'exemple pour les 27 mises en page |
assets/styles/ | Fichiers de style pour chaque style |
scripts/use-style.ts | Définit le style pour un projet |
scripts/add-page.ts | Copie une page d'exemple selon la mise en page |
scripts/render.ts | Effectue le rendu des pages |
scripts/check-pages.ts | Vérifie le texte et la mise en page |
scripts/export-slides.ts | Exporte toutes les illustrations et la vue d'ensemble |
scripts/preview-style.ts | Génère la vue d'ensemble des exemples d'un style |
scripts/post-shot.ts | Capture une publication de réseau social |