Créez des diaporamas web avec Frontend Slides de Claude Code

February 20, 2026

Catégorie: Projets Open Source Pratiques

Étiquettes:

OpenSource ClaudeCode WebPresentation HTMLSlides NoDependencies

Créez des diaporamas web magnifiques avec Frontend Slides de Claude Code

Si vous avez déjà eu du mal à créer des présentations web propres et animées sans maîtriser les subtilités du CSS, du JavaScript ou des empaquetteurs, la compétence Frontend Slides est une véritable bénédiction. Conçue comme une compétence officielle Claude Code, elle permet à chacun de créer un fichier HTML autonome que vous pouvez ouvrir, partager ou intégrer directement.

Pourquoi cet outil est-il important

Aucune dépendance – Pas de npm install, pas d'étape de build, pas de framework à suivre. Juste un dossier, quelques fichiers Markdown et un seul fichier HTML.
Découverte visuelle des styles – Au lieu de taper un nom de style ou de chercher un thème, l'outil génère des aperçus visuels qui vous permettent de choisir le look qui vous plaît.
Conversion PowerPoint vers Web – Les présentations autrefois verrouillées dans des fichiers PowerPoint deviennent des diapositives réactives et accessibles en quelques secondes.
Accessibilité & réactivité – Le résultat est conçu pour fonctionner sur desktop, tablette et smartphone, avec prise en charge du mode reduced‑motion.
Code prêt à la production – CSS/JS intégré, balisage sémantique, et commentaires complets rendent le code immédiatement compréhensible et modifiable.

Commencer – Installation

Clonez ou téléchargez le dépôt :
```
git clone https://github.com/zarazhangrui/frontend-slides.git
```
ou téléchargez le ZIP depuis GitHub.

Installer la compétence – Pour les utilisateurs de Claude Code :

mkdir -p ~/.claude/skills/frontend-slides
cp frontend-slides/README.md ~/.claude/skills/frontend-slides/
cp frontend-slides/SKILL.md ~/.claude/skills/frontend-slides/
cp frontend-slides/STYLE_PRESETS.md ~/.claude/skills/frontend-slides/

Si vous n’utilisez pas Claude Code, copiez simplement les deux fichiers (SKILL.md et STYLE_PRESETS.md) dans le dossier de votre choix.

Exécuter la compétence – Dans un terminal Claude Code tapez :
```
/frontend-slides
```
Pour les utilisateurs non-Claude, vous pouvez exécuter le script auxiliaire Python pour importer un PPT et générer la sortie :
```
python convert_ppt.py <file.pptx>
```

Utiliser l'outil : de l'invite à la présentation

Décrivez votre présentation – Lorsque vous invoquez /frontend-slides, le bot pose quelques questions rapides sur le contenu, le ton, l'ambiance désirée et les éléments de marque.
Choisissez un style – Après avoir fourni les éléments de base, la compétence génère une galerie interactive de préréglages de style (p. ex. Neon Cyber, Paper & Ink, Brutalist). Choisissez celui qui vous parle.
Générer – La compétence compile un unique index.html contenant toutes les diapositives, la navigation, l’animation et le style. Vous avez terminé !
Voir – Ouvrez le fichier dans n’importe quel navigateur ; la navigation fonctionne via les touches fléchées, la molette de la souris ou le tapotement.

Conversion PowerPoint

Si vous possédez une vieille présentation : 1. /frontend-slides 2. Tapez : "Convertir ma présentation.pptx en diaporama web" 3. L'outil extrait tout le texte, les images et les notes du présentateur, puis vous guide dans la sélection du style. 4. Le HTML résultant conserve les ressources originales et la fidélité de mise en page.

Explorer les préréglages intégrés

Thème	Style	Cas d’utilisation idéal
Neo‑Cyber (Neon)	Futuriste, effets de particules	Démonstrations technologiques, présentations d'agence digitale
Midnight Executive	Corporatif, digne de confiance	Propositions d’affaires, présentations de conseil d’administration
Deep Space	Cinématographique, inspirant	Teasers de startups, narration créative
Terminal Green	Esthétique hacker	Conférences dev, communautés open‑source
Paper & Ink	Editorial, raffiné	Conférences académiques, diapositives littéraires
Swiss Modern	Nettoyé, géométrique	Agences de design, présentations de données concises
Soft Pastel	Amical, ludique	Ateliers, engagement des jeunes
Brutalist	Brutal, audacieux	Activisme, présentations avant‑garde
Gradient Wave	Esthétique SaaS	Lancements de produits

N’hésitez pas à ajouter vos propres thèmes en modifiant STYLE_PRESETS.md ou en écrivant votre propre CSS en ligne. La compétence prend même en charge --style=custom pour les utilisateurs avancés.

Pourquoi « Pas de dépendances » ?

Longévité – Le fichier HTML unique restera compatible avec tout navigateur moderne pendant des années, quel que soit le dépréciation du framework.
Sécurité – Aucun chargement de script externe ni appel réseau depuis la présentation finale.
Simplicité – Tout le monde peut modifier le fichier directement dans un éditeur de texte.

Limitations et feuille de route future

Le système d'aperçu actuel est limité aux images statiques. Les prochaines versions ajouteront des aperçus interactifs.
Les animations sont générées via CSS intégré. Les utilisateurs peuvent vouloir créer manuellement des animations JS plus complexes.
L'intégration avec d'autres outils CLI (par ex. conversion Markdown vers PPT) est prévue.

Prêt à créer vos diapositives ?

Que vous soyez un non‑designer souhaitant un look soigné ou un développeur désireux de rationaliser votre flux de travail de présentation, Frontend Slides vous offre un rendu de qualité de production sans la surcharge d’une pile web. Clonez le dépôt, installez la compétence, et laissez Claude Code vous aider à communiquer visuellement.

# Quick install
git clone https://github.com/zarazhangrui/frontend-slides.git
cp frontend-slides/SKILL.md ~/.claude/skills/frontend-slides/
cp frontend-slides/STYLE_PRESETS.md ~/.claude/skills/frontend-slides/
# Run
/foreground-slides

Ouvrez le fichier index.html généré et montrez à votre public l’avenir du storytelling web. Bonnes présentations !

Original Article: Voir l’original

Partager cet article