Comment créer une présentation IA avec Windsurf et Vibe Coding

En tant que passionné de technologies toujours à la recherche d’outils innovants, je me suis récemment lancé dans la création d’une présentation PowerPoint professionnelle pour une formation de 6 heures sur les workflows IA de FlowHunt.io. Ce qui a rendu cette expérience remarquable, c’est la façon dont j’ai utilisé Windsurf avec Claude 4 Sonnet comme LLM pour générer une présentation de 24 diapositives à l’aide de la bibliothèque pptxgenjs — le tout avec une seule invite et un plan bien structuré. Voici comment tout s’est déroulé.

L’objectif : une présentation de formation pratique et visuelle

Mon objectif était de concevoir une présentation attrayante et interactive pour un atelier de 6 heures sur FlowHunt.io, une plateforme de création de workflows IA. La présentation devait :

• Être pratique et visuelle, avec des explications concises suivies de démonstrations concrètes
• Inclure des cas d’usage réels couvrant la finance, les RH, la conformité et la gestion de projet
• Proposer des éléments interactifs, comme des exercices ou des quiz toutes les 30 minutes, pour renforcer l’apprentissage
• Suivre un format structuré en deux sessions, couvrant tout depuis les workflows de base jusqu’aux composants modulaires avancés (MPC)

Pour garantir la clarté, j’ai d’abord utilisé Claude 4 Sonnet pour générer un plan détaillé de la présentation, la divisant en deux sessions de 3 heures avec des sujets et horaires précis. Ce plan est devenu la base du projet, guidant le contenu et la structure des diapositives.

L’outil : pptxgenjs et Windsurf avec Claude 4 Sonnet

J’ai choisi la bibliothèque pptxgenjs car c’est un puissant outil JavaScript permettant de générer des présentations PowerPoint par programmation. Sa capacité à créer des diapositives et à ajouter du texte, des images et du formatage par code la rend idéale pour l’automatisation. Pour concrétiser cette vision, j’ai utilisé Windsurf, propulsé par Claude 4 Sonnet, afin d’écrire le code et de générer la présentation à partir de mon plan.

Le processus a commencé par l’installation de la bibliothèque avec la commande :

npm install pptxgenjs

Cela a installé la bibliothèque et ses dépendances en quelques secondes, ouvrant la voie à la création de la présentation.

L’invite : une instruction unique, un résultat complet

Une fois la bibliothèque installée, j’ai rédigé une seule invite détaillée pour Claude 4 Sonnet via Windsurf. L’invite comprenait :

• La commande d’installation de pptxgenjs
• L’intégralité du plan de la formation de 6 heures, en deux packs de diapositives (Session 1 et Session 2)
• Des critères spécifiques pour la présentation, mettant l’accent sur l’aspect pratique, les éléments visuels et des cas d’usage réels
• Des instructions pour créer des diapositives pour chaque module, incluant introductions, démonstrations en direct, cas d’usage et challenge final

Voici une version simplifiée de la structure de l’invite :

Installez npm i pptxgenjs. Créez une présentation à l’aide de la bibliothèque pptxgenjs pour une formation de 6 heures sur les workflows IA de FlowHunt.io. Suivez ce plan : [détail des sessions]. Assurez-vous que la présentation est pratique, visuelle, inclut des cas d’usage réels (finance, RH, conformité) et propose des exercices interactifs toutes les 30 minutes. Créez des diapositives pour : Accueil, Introduction FlowHunt, Workflow Canvas, Démo en direct, Connexions d’outils, Itération, Cas d’usage, MPC, Logique, APIs, Monitoring, Conformité, Déploiement, Challenge final et Q&R.

Avec cette invite, Claude 4 Sonnet a généré un fichier JavaScript complet (flowhunt-training.js) utilisant pptxgenjs pour créer une présentation de 24 diapositives. Le script gérait tout, de la mise en page des diapositives à l’intégration de l’identité graphique de FlowHunt.

Le processus : du code aux diapositives

L’exécution du script généré était simple. J’ai lancé :

node flowhunt-training.js

Le script s’est exécuté sans encombre, bien que j’aie rencontré quelques avertissements concernant des codes couleur invalides (« 70AD4720 n’est pas une couleur de palette ou un code hex valide ! ‘000000’ utilisé à la place »). Ces problèmes mineurs n’ont pas affecté le résultat, la bibliothèque utilisant le noir par défaut. En quelques instants, le script a produit un fichier nommé FlowHunt-AI-Workflows-Training.pptx avec 24 diapositives au format professionnel.

La présentation était un véritable chef-d’œuvre d’automatisation :

Session 1 (10 diapositives) : Présentation des bases de FlowHunt.io, démonstration en direct de la création d’un workflow, connexions d’outils (CSV, Google Sheets), conseils d’itération et cas d’usage pour la finance (validation de budget) et les RH (bot d’intégration automatisée). Introduction également aux MPC avec une métaphore LEGO simple.

Session 2 (8 diapositives) : Axée sur les sujets avancés comme la création de MPC, la logique conditionnelle, l’intégration d’API (Google Search, CRM, Slack), la gouvernance, les bots de conformité et le déploiement. La session se termine par un challenge final façon mini-hackathon.

Diapositives additionnelles : Accueil, agenda, pause, Q&R, remerciements, assurant une progression fluide tout au long de la présentation.

Les diapositives affichaient une identité visuelle cohérente, des titres clairs et des éléments visuels avec des espaces réservés pour GIF ou vidéos. Les aspects interactifs, comme les instructions de démo étape par étape et les challenges en groupe, étaient parfaitement intégrés.

Le résultat : une présentation prête à l’emploi

Le fichier final pesait 239 Ko et pouvait être ouvert dans n’importe quel logiciel compatible. En plus de la présentation, Claude 4 Sonnet a généré un fichier README.md documentant le projet, incluant les instructions d’utilisation et les points forts de la présentation. Le résultat : une présentation professionnelle, interactive et visuellement attrayante, répondant parfaitement à mes critères.

Retour d’expérience : la puissance du développement piloté par IA

Cette expérience a démontré la puissance remarquable d’outils IA tels que Windsurf et Claude 4 Sonnet. Avec une simple invite, j’ai transformé un plan général en une présentation complète de 24 diapositives, incluant formatage, identité visuelle et éléments interactifs. La bibliothèque pptxgenjs s’est révélée particulièrement robuste, et la capacité de Claude à comprendre mes besoins et générer un code fonctionnel était impressionnante.

Ce qui m’a le plus marqué, c’est l’efficacité. Rédiger le code à la main aurait pris des heures, voire des jours, surtout pour garantir une mise en forme homogène sur 24 diapositives. Claude a tout généré en quelques secondes, produisant un script à la fois modulaire et facile à personnaliser. Les petits avertissements sur les codes couleur étaient anecdotiques, facilement corrigeables en modifiant les valeurs hexadécimales dans le script si besoin.

Prochaines étapes

Je suis ravi du résultat et je compte utiliser cette présentation pour ma session de formation FlowHunt.io. Pour la suite, je pourrais l’améliorer en :

• Ajoutant des images ou GIF personnalisés dans les diapositives (le script prévoit des espaces réservés)
• Affinant le schéma de couleurs pour éliminer les avertissements
• Développant davantage les challenges interactifs avec des instructions plus détaillées

Ce projet m’a donné envie d’explorer encore plus l’automatisation de la création de contenu par l’IA. Si vous souhaitez créer des présentations rapidement et efficacement, je vous recommande vivement de combiner pptxgenjs avec un outil IA comme Claude 4 Sonnet via Windsurf : c’est véritablement révolutionnaire !