frontend-slides : créer des diapositives web avec un agent de code
frontend-slides est le skill PPT open source le plus étoilé pour les agents de code : il construit des présentations sous forme de pages web épurées et modernes que vous présentez directement dans le navigateur. Ce guide explique ce que c'est, comment l'installer et l'utiliser, ce qu'il fait vraiment bien (et ses limites), comment il se compare aux autres skills PPT de Claude, et là où un Agent-Native Design Workspace prend le relais quand un seul skill atteint ses limites.
Si vous voulez une présentation et que vous vivez déjà dans un terminal, frontend-slides est l'un des moyens les plus nets d'en obtenir une. C'est une skill pour agent de code : au lieu d'ouvrir une application de présentation, vous décrivez la présentation à l'agent que vous utilisez déjà, et frontend-slides transforme votre idée en diapositives construites comme des pages web — du vrai HTML et du vrai CSS que vous présentez directement depuis le navigateur.
C'est aussi l'option la plus populaire de son genre. Avec 25k étoiles GitHub et une licence MIT, frontend-slides trône en haut de l'étagère grandissante des Claude PPT skills. Ce guide couvre ce que c'est, comment l'installer et le solliciter, ce qu'il fait bien et où il s'arrête, comment il se mesure aux autres skills de ce domaine, et où un véritable espace de travail trouve sa place lorsqu'une présentation devient un chantier continu.
Ce qu'est frontend-slides
frontend-slides est une skill — un ensemble packagé d'instructions que votre agent de code (Claude Code, Codex, Cursor et d'autres) charge en cours de tâche pour bien accomplir une chose. Ici, cette chose, c'est créer une présentation. Elle s'appuie sur les compétences frontend que votre agent possède déjà et les oriente vers les diapositives : vous décrivez la présentation en langage naturel, et l'agent écrit des pages web propres et modernes, une par diapositive, que vous faites défiler dans le navigateur.
La sortie est web-native par conception. Comme chaque diapositive est du HTML et du CSS, vous avez un contrôle total — mises en page sur mesure, vraie typographie, dégradés, transitions, graphiques intégrés, tout ce que le navigateur sait rendre. Il est développé et maintenu par Zara Zhang, open source sous MIT, et comme le reste de ces skills, il fonctionne en apportez-votre-propre-clé-de-modèle : vous fournissez la clé d'API, la skill fournit le savoir-faire.
Comment ça marche
La boucle est courte et surtout conversationnelle :
- Installez la skill — clonez ou ajoutez frontend-slides au répertoire de skills de votre agent de code (le dépôt fournit les étapes d'installation). Apportez votre propre clé de modèle.
- Décrivez la présentation — donnez à l'agent le sujet, le public, le ton et un nombre approximatif de diapositives. Plus le brief est précis, meilleure est la structure qu'il construit.
- Laissez-le construire — l'agent génère les diapositives sous forme de pages web et les ouvre dans le navigateur pour la présentation.
- Itérez — demandez des changements en langage naturel (« resserre l'introduction », « transforme la diapositive 3 en comparaison à deux colonnes », « palette plus chaude ») et régénérez. Comme ce n'est que du CSS, vous pouvez aussi éditer n'importe quoi à la main directement.
- Présentez ou exportez — présentez depuis le navigateur, ou exportez en PDF pour le partage.
Ce qu'il fait bien (et ses limites, en toute honnêteté)
frontend-slides donne le meilleur de lui-même quand vous voulez des diapositives web-natives et un contrôle total de leur apparence. Si vous êtes à l'aise avec HTML et CSS, rien ne s'interpose entre vous et le design — vous pouvez ouvrir n'importe quelle diapositive et la modifier à la main, versionner toute la présentation dans git et réutiliser des composants d'une présentation à l'autre. Pour les développeurs, c'est tout l'attrait : des diapositives qui se comportent comme une base de code plutôt que comme un fichier propriétaire.
Les limites honnêtes sont le revers de cette force. La sortie est une page web, pas un .pptx — donc si votre organisation a besoin d'un PowerPoint modifiable avec des formes natives, ce n'est pas l'outil (voyez le tableau comparatif ci-dessous pour les skills qui visent cela). Il y a aussi un seuil de confort : plus vous vous éloignez de HTML et CSS, moins le « contrôle total » se vend de lui-même. Et comme toute skill unique, frontend-slides fabrique une présentation — il ne porte pas votre marque d'un projet à l'autre et ne maintient pas un design system synchronisé. C'est un outil affûté à usage unique, et il l'assume honnêtement.
frontend-slides face aux autres Claude PPT skills
frontend-slides n'est pas la seule skill de cette catégorie, et le bon choix dépend de la sortie dont vous avez besoin et de la licence avec laquelle vous pouvez composer.
| Outil | Sortie | Licence | Idéal pour |
|---|---|---|---|
| frontend-slides | Diapositives web HTML | MIT | Présentations web-natives, contrôle total du CSS |
| guizang-ppt-skill | HTML (éditorial) | AGPL-3.0 | Présentations façonnées, à l'allure conçue |
| dashiAI | Présentation modifiable | AGPL-3.0 | Sortie qu'un non-développeur peut modifier |
| Open Design | Présentations modifiables à l'image de marque + modèles | Apache-2.0 | Présentations liées à un design system, dans un espace de travail |
Si vous voulez le rendu éditorial soigné, guizang-ppt-skill est la cousine à laquelle la comparer ; si votre livrable doit rester modifiable par un non-développeur, dashiAI est conçu pour ça. frontend-slides l'emporte quand vous voulez que la présentation soit des pages web qui vous appartiennent entièrement.
Où Open Design trouve sa place
frontend-slides est une excellente skill à usage unique pour une présentation dans votre terminal. Mais une skill est un script — elle ne porte pas votre marque d'un projet à l'autre, ne maintient pas la sortie modifiable dans un véritable espace de travail, et ne coordonne pas une présentation avec le reste de votre travail de design.
Open Design est la couche située au-dessus de la skill : un Agent-Native Design Workspace open source (Apache-2.0), local-first et bring-your-own-key, qui se place en dehors de l'agent de code que vous utilisez déjà. Vous décrivez une présentation ; l'agent en génère une version modifiable en s'appuyant sur un design system, de sorte qu'elle reste à l'image de la marque au lieu de repartir d'une page blanche à chaque fois — et Open Design fournit ses propres modèles de présentation HTML dans sa bibliothèque de plugins. C'est la même idée que frontend-slides, avec un foyer : vos fichiers, votre marque, modifiables et à vous pour de bon. Si vous créez des diapositives avec un agent de code aujourd'hui, voyez comment Open Design fonctionne avec Claude Code.
Utilisez frontend-slides quand vous voulez une présentation web-native rapide depuis la ligne de commande. Tournez-vous vers un espace de travail quand la présentation doit être à l'image de la marque, modifiable et intégrée à un ensemble de travail de design plus vaste.
FAQ
frontend-slides est-il gratuit ? Oui. Il est open source sous licence MIT et gratuit à utiliser — vous fournissez votre propre clé d'API de modèle. MIT est permissive, donc elle est aussi favorable à un usage commercial.
Comment utiliser frontend-slides ? Installez la skill dans le répertoire de skills de votre agent de code, puis décrivez la présentation (sujet, public, longueur). L'agent construit les diapositives sous forme de pages web ; itérez en langage naturel et présentez depuis le navigateur.
frontend-slides exporte-t-il vers PowerPoint ? Non — il produit des diapositives web (HTML/CSS) que vous présentez dans le navigateur, et vous pouvez exporter en PDF pour le partage. Si vous avez besoin d'un .pptx modifiable avec des formes natives, tournez-vous vers une skill conçue pour cette sortie plutôt que frontend-slides.
À qui frontend-slides convient-il le mieux ? Aux développeurs qui veulent des diapositives web-natives et un contrôle total du CSS — des gens à l'aise sur la plateforme web qui préfèrent versionner une présentation dans git plutôt que d'ouvrir une application de présentation.
Skill ou espace de travail de design — lequel choisir ? Une skill comme frontend-slides est idéale pour une présentation rapide et ponctuelle. Un Agent-Native Design Workspace comme Open Design convient mieux lorsque vous avez besoin de présentations modifiables à l'image de la marque, qui vivent aux côtés du reste de votre travail de design.
En résumé
frontend-slides est la façon la plus étoilée de créer des diapositives avec un agent de code, et il le mérite : présentations web-natives, contrôle total du CSS, licence MIT, le tout piloté depuis le terminal dans lequel vous travaillez déjà. Si vous voulez une présentation rapide, pensée pour le navigateur, et que vous êtes à l'aise en HTML et CSS, installez-le et lancez vos consignes. Quand une présentation se transforme en un chantier continu, à l'image de la marque, qui doit rester modifiable et lié à un design system, c'est là qu'un Agent-Native Design Workspace prend le relais.