Testée sur une vraie tâcheCommunauté, vérifiéeDocuments et Office

Frontend Slides

Une présentation animée conçue sur mesure dans un seul fichier HTML, dans un style choisi parmi trois vrais aperçus.

Installez Frontend Slides gratuitement

Laissez votre email et les étapes d'installation s'ouvrent ici même : un prompt à coller dans votre outil d'IA. Valable pour les 149 skills.

Notre note: 7/10
Fonctionne dans: Claude, ChatGPT+7 autres
Claude Code, Claude app, Codex, ChatGPT, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf et plus de 60 autres outils d'IA qui lisent les skills.
Faut-il coder ?: Non
Temps jusqu'au résultat: 30 min
Créé par: Zara Zhang
Testée le: 19 oct. 2026

Avec la skill, diapositive 1 — Avec la skill : un style sur mesure avec un fond moucheté, un bord d'émail Midnight ondulé, des photos en arche et un tampon logo, avec le prix de $19 dès la première diapositive.

Avec la skill, diapositive 2 — Avec la skill : un style sur mesure avec un fond moucheté, un bord d'émail Midnight ondulé, des photos en arche et un tampon logo, avec le prix de $19 dès la première diapositive.

La réponse courte

Frontend Slides est une skill Claude qui construit des présentations sous forme d'un seul fichier HTML qui fonctionne dans n'importe quel navigateur, ou convertit un PowerPoint existant. Au lieu de vous demander de décrire un style, elle montre trois vrais aperçus de diapositive de titre et construit toute la présentation dans celui que vous choisissez. Notre verdict est de 7/10 : avec le même prompt de présentation commerciale, Claude seul a fait une présentation propre mais générique, tandis que la skill en a fait une avec un look sur mesure et un argumentaire plus percutant, même si elle a pris plus de temps et laissé quelques petits défauts.

Idéal pour : Présentations commerciales, conférences et ateliers où vous voulez une présentation qui semble conçue sur mesure, choisie parmi trois aperçus, sans ouvrir PowerPoint.

Envie de ce résultat dans votre propre travail ?

Inscrivez-vous gratuitement et installez Frontend Slides en une minute environ. Un seul email ouvre les étapes d'installation de toutes les skills du site.

Quand l'utiliser

Présenter un produit à des professionnels

Lors de notre test, une gérante d'atelier de poterie a demandé une présentation de 8 diapositives pour des gérants de cafés. Elle a obtenu une présentation au style tiré de son propre produit (argile mouchetée, couleurs d'émail, tampon logo) avec le prix, la commande minimum et le total de première commande dès le début.

Transformer un PowerPoint en présentation web

Vous avez un ancien fichier .pptx. Elle extrait le texte, les images, l'ordre des diapositives et les notes de l'orateur, vous montre ce qu'elle a trouvé, puis reconstruit la présentation dans un nouveau style de votre choix.

Présentation à lire pour clients ou équipes

Les gens la liront seuls plutôt que de vous regarder présenter. Choisissez la densité orientée lecture et les diapositives deviennent autonomes, avec tableaux, comparaisons et courtes explications, réparties sur plus de diapositives au lieu d'être entassées.

Comment obtenir un excellent résultat

Demandez une présentation
Installez-la (étapes ci-dessous), puis demandez une présentation avec des mots simples, ou indiquez à Claude un fichier .pptx à convertir. Donnez vos informations et photos dans le même message.
Répondez à quatre questions d'un coup
Elle demande l'objectif, la longueur, si votre contenu est prêt, et la densité : menée par l'orateur avec peu de mots par diapositive, ou orientée lecture avec plus de détails. Répondez-y en une seule réponse.
Choisissez parmi trois aperçus
Claude crée trois diapositives de titre animées : un préréglage sûr, au moins un modèle audacieux et un joker qui peut être conçu rien que pour vous. Lors de notre test, le joker sur mesure a gagné, car il était construit à partir du produit lui-même.
Vérifiez chaque diapositive avant de présenter
La présentation repose sur une scène fixe 16:9 qui s'adapte à tout écran. Passez chaque diapositive : lors de notre test, deux compteurs de page apparaissaient sur chaque diapositive et l'un recouvrait une ligne de texte, demandez donc à Claude de corriger ce genre de chose.
Modifiez, puis exportez ou partagez
Appuyez sur E ou survolez le coin supérieur gauche pour modifier le texte dans le navigateur, puis Ctrl+S pour enregistrer une copie. Demandez un PDF (chaque diapositive devient une image) ou un lien de partage, qui nécessite un compte Vercel gratuit.

Voici le prompt exact avec lequel nous avons commencé notre test :

Le prompt utilisé

Crée une présentation de 8 diapositives pour proposer les mugs en gros de Clay & Co aux gérants de cafés locaux, en un seul fichier HTML, out/deck.html, que je peux présenter depuis un navigateur avec les flèches du clavier.

Tout ce qu'elle a produit

Chaque élément ci-dessous est un vrai résultat de notre test, ouvert comme vous l'ouvririez.

Sans la skill, diapositive 1 — Sans la skill : une présentation propre crème et serif avec des photos en demi-page et des champs à compléter clairs, compétente mais générique, avec une diapositive d'avis presque vide et une barre d'aide sur le pied de la première diapositive.

Sans la skill, diapositive 2 — Sans la skill : une présentation propre crème et serif avec des photos en demi-page et des champs à compléter clairs, compétente mais générique, avec une diapositive d'avis presque vide et une barre d'aide sur le pied de la première diapositive.

Le déroulé de la session

La conversation de notre test, raccourcie. Environ 30 minutes entre le premier prompt et le résultat final.

Vous: Crée une présentation de 8 diapositives pour proposer les mugs en gros de Clay & Co aux gérants de cafés locaux, en un seul fichier HTML, out/deck.html, que je peux présenter depuis un navigateur avec les flèches du clavier. (Les informations sur l'atelier et 8 photos d'illustration ont été fournies. Aucune question autorisée.)
AI: Je poserais normalement quatre questions. Mes choix : présentation commerciale, courte (8 diapositives), tout le contenu prêt, faible densité car vous la présenterez en direct.
AI: J'ai choisi C, Speckled Clay. Le fond moucheté est l'argile du mug, le trempage d'émail Midnight et les carreaux tests montrent le choix d'émail, et le tampon rond représente le tampon logo à +$2. C'est chaleureux et artisanal tout en restant crédible pour parler prix.
AI: Votre présentation est dans out/deck.html, style Speckled Clay, 8 diapositives. Naviguez avec les flèches, Espace ou Page Down ; Début et Fin sautent à la première et à la dernière diapositive ; balayez sur les écrans tactiles. Appuyez sur E pour modifier n'importe quel texte dans le navigateur ; Cmd ou Ctrl+S enregistre une copie modifiée. Seules vos informations sont utilisées. $456 et $504 correspondent à 24 mugs à $19 et à $21 avec le tampon logo. Les faits manquants sont des champs en pointillés : vente en gros...

Ce qui a marché et ce qui a coincé

Ce qui a marché

Un design fait pour ce produit : la présentation de Claude seul était une mise en page propre mais générique crème et serif, tandis que le style sur mesure de la skill a fait de l'argile mouchetée, du trempage d'émail et du tampon logo l'allure de chaque diapositive.
Elle vend mieux : le prix de $19, le minimum de 24 mugs et le choix de l'émail sont sur la diapositive de titre, et la diapositive des prix place $19 à côté du prix boutique de $34 avec un total de première commande de $456.
Trois vrais aperçus de diapositive de titre parmi lesquels choisir au lieu de décrire un style avec des mots ; les deux non retenus sont gardés en fichiers.
Elle s'en est tenue aux faits, en marquant les manquants (conditions de livraison, photos de chaque émail sur un mug) en champs à compléter, et vous pouvez appuyer sur E pour modifier n'importe quel texte dans le navigateur.

Ce qui a coincé

Chaque diapositive affiche deux compteurs de page ('3 / 8' en bas et '03 / 08' à droite), et sur la diapositive 5 le compteur recouvre le texte à compléter.
Elle a pris environ 30 minutes contre 12 pour Claude seul, surtout pour les aperçus et les corrections.
La diapositive 7 consacre de la place aux ateliers de l'atelier, un sujet secondaire dans une présentation grossiste, et Claude seul a signalé une information qu'un café demanderait (compatibilité lave-vaisselle et micro-ondes) que la présentation de la skill a omise.

Envie de ce résultat dans votre propre travail ?

Inscrivez-vous gratuitement et installez Frontend Slides en une minute environ. Un seul email ouvre les étapes d'installation de toutes les skills du site.

Des prompts qui marchent

Remplacez les parties entre crochets par vos propres informations. Inutile de nommer la skill : demandez la tâche et votre outil d'IA l'utilise tout seul.

Présentation commerciale pour acheteurs professionnels

Crée une présentation de [8] diapositives pour proposer [mon produit] à [type d'acheteur, par ex. des gérants de cafés locaux], en un seul fichier HTML que je peux présenter depuis un navigateur avec les flèches du clavier. Informations : [prix, minimums, délais, avis, contact]. Utilise uniquement ces informations et mets un [placeholder] bien visible là où il en faut plus.

Présentation de conférence à partir de notes

Crée-moi une présentation pour une intervention de [10 minutes] à [événement] sur [sujet]. Mes notes brutes : [collez les notes]. Faible densité, c'est moi qui parlerai.

Convertir un PowerPoint

Convertis [pitch.pptx] en présentation web animée. Garde tout le texte, les images, l'ordre des diapositives et les notes de l'orateur.

Présentation à lire pour un client

Crée une présentation orientée lecture que [mon client / mon équipe] peut lire sans que je présente : [sujet, par ex. notre proposition de projet]. Inclus [un tableau comparatif / une chronologie / les tarifs]. Voici le contenu : [collez].

Conseils tirés de notre test

Donnez vos photos avec la demande. Lors de notre test, elle a regardé les 8, utilisé les 5 qui convenaient à une présentation de mugs, n'en a répété aucune et a construit les diapositives autour d'elles.
Décrivez l'aspect de votre produit en une ou deux lignes (couleurs, matières, textures). L'option d'aperçu sur mesure peut transformer ces détails en style de toute la présentation, c'est ce qui a fait ressortir notre présentation de test.
Dites « utilise uniquement ces informations et marque tout ce qui manque en [placeholder] ». Lors de notre test, cela a gardé chaque chiffre réel et signalé les conditions de livraison comme manquantes.
Demandez-lui de supprimer les numéros de page en double et de vérifier le bas de chaque diapositive. Ce furent les seuls défauts visibles de notre présentation de test.
Corrigez la formulation vous-même au lieu de redemander : appuyez sur E dans le navigateur, cliquez sur un texte, modifiez-le et enregistrez avec Ctrl+S.
Les polices se chargent depuis Google Fonts : présentez avec une connexion internet, sinon la présentation se rabat sur des polices de secours plus simples.

Ce qu'il vous faut : Les skills de l'application Claude fonctionnent avec toutes les offres Claude, Free comprise, avec l'exécution de code et la création de fichiers activées ; Claude Code demande Pro ou plus., Un navigateur récent pour présenter ; internet pour les polices Google, Facultatif : pour l'export PDF, Node et Playwright (il télécharge un navigateur) ; pour un lien de partage, un compte Vercel gratuit.

Comment l'installer

Les skills suivent le standard ouvert Agent Skills, celle-ci n'est donc pas liée à une seule entreprise. Choisissez l'outil d'IA que vous utilisez. Vous hésitez ? Le premier onglet couvre la plupart d'entre eux en une étape.

Le plus simple : collez ceci dans votre outil d'IA

Installe cette skill pour qu'elle fonctionne dans tous mes projets : exécute `npx skills add https://github.com/zarazhangrui/frontend-slides -g -y` dans mon terminal. S'il manque Node.js, explique-moi d'abord comment l'installer. Une fois terminé, confirme que la skill est installée et dis-moi comment commencer à l'utiliser.

Ou faites-le vous-même :

Une seule commande installe la skill dans les outils d'IA de votre ordinateur. Elle détecte ceux que vous avez et vous demande où l'ajouter : Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode et plus de 60 autres.

$npx skills add https://github.com/zarazhangrui/frontend-slides -g

Node.js doit être installé (gratuit, sur nodejs.org). L'option -g rend la skill disponible dans tous vos projets.

Bon à savoir : Le résultat est du HTML simple : les présentations s'ouvrent dans n'importe quel navigateur et s'exportent en PDF.

Débloquez les étapes d'installation

Gratuit. Laissez votre email une seule fois pour ouvrir les étapes d'installation des 149 skills, et recevez chaque mois les meilleures nouvelles skills.

Comment nous l'avons vérifié

Nous avons vérifié la skill à sa source d'origine le 18 octobre 2026 : le SKILL.md est au bon endroit, les fichiers ont été mis à jour au cours de l'année et la licence (MIT) autorise son usage. Puis, le 19 octobre 2026, nous l'avons installée, utilisée sur la tâche ci-dessus sans la modifier, et noté ce qui s'est passé, y compris ce qui n'a pas marché.

Questions fréquentes

Faut-il coder pour utiliser Frontend Slides ?

Non. Vous répondez à quelques questions, choisissez un style parmi des aperçus et modifiez le texte directement dans le navigateur. La présentation est un seul fichier HTML ; pour changer couleurs ou polices plus tard, demandez simplement à Claude.

Quelle offre et quels outils Frontend Slides demande-t-elle ?

Les skills de l'application Claude fonctionnent avec toutes les offres Claude, Free comprise, avec l'exécution de code et la création de fichiers activées ; Claude Code demande Pro ou plus. Vous présentez dans n'importe quel navigateur récent. L'export PDF utilise Node et Playwright, et un lien de partage nécessite un compte Vercel gratuit.

Frontend Slides fonctionne-t-elle dans Claude.ai ?

Oui. Vous pouvez l'importer dans Claude.ai comme skill dans Customize > Skills, ou l'utiliser dans Claude Code ; les étapes d'installation sont ci-dessous. L'export PDF et le partage par lien lancent des scripts qui téléchargent un navigateur ou se connectent à Vercel, ils conviennent donc à Claude Code sur votre propre ordinateur.

Est-elle meilleure qu'une simple demande à Claude ?

Lors de notre test, oui pour le design, pas pour la rapidité. Claude seul a fait une présentation propre et générique crème et serif en environ 12 minutes ; avec la skill, Claude a montré trois aperçus de style et construit un look sur mesure à partir du produit lui-même (argile mouchetée, couleurs d'émail, tampon logo) avec le prix sur la première diapositive, en environ 30 minutes. Les deux s'en sont tenues aux faits ; la présentation de la skill avait des compteurs de page en double à nettoyer.

Frontend Slides peut-elle exporter en PDF ou en PowerPoint ?

En PDF, oui : un script fait une capture de chaque diapositive en 1920 par 1080 et les assemble, les animations deviennent donc des images fixes. L'export PowerPoint ne fait pas partie de la skill ; elle convertit de .pptx vers HTML, pas l'inverse.