Hoe maak je een AI-presentatie met Windsurf en Vibe Coding

Als tech-enthousiasteling die voortdurend op zoek is naar innovatieve tools, ben ik onlangs begonnen aan een project om een professionele PowerPoint-presentatie te maken voor een zes uur durende trainingssessie over FlowHunt.io AI-workflows. Wat deze ervaring bijzonder maakte, was hoe ik Windsurf met Claude 4 Sonnet als LLM heb ingezet om met slechts één prompt en een goed gestructureerd overzicht een presentatie van 24 dia’s te genereren via de pptxgenjs-bibliotheek. Hier lees je hoe het allemaal samenkwam.

Het Doel: Een Praktische, Visuele Trainingspresentatie

Mijn doel was een boeiende, interactieve presentatie te maken voor een zes uur durende workshop over FlowHunt.io, een platform voor het bouwen van AI-workflows. De presentatie moest:

• Praktisch en visueel zijn, met beknopte uitleg gevolgd door praktische demonstraties
• Echte use-cases bevatten uit o.a. finance, HR, compliance en projectmanagement
• Interactieve elementen bevatten, zoals opdrachten of quizzen elke 30 minuten ter versterking van het leerproces
• Een gestructureerd tweedelig format volgen, van basisworkflows tot geavanceerde modulaire procescomponenten (MPC’s)

Voor de duidelijkheid heb ik eerst met Claude 4 Sonnet een gedetailleerd overzicht voor de presentatie gegenereerd, verdeeld in twee blokken van drie uur met specifieke onderwerpen en tijdsindeling. Dit overzicht werd de basis van het project en stuurde zowel inhoud als structuur van de dia’s aan.

De Tool: pptxgenjs en Windsurf met Claude 4 Sonnet

Ik koos voor de pptxgenjs-bibliotheek omdat het een krachtige JavaScript-tool is om PowerPoint-presentaties programmatisch te genereren. De mogelijkheid om dia’s, teksten, afbeeldingen en opmaak via code toe te voegen, maakte het ideaal voor automatisering. Om deze visie tot leven te brengen, gebruikte ik Windsurf, aangestuurd door Claude 4 Sonnet, om de code te schrijven en de presentatie te genereren op basis van mijn overzicht.

Het proces begon met het installeren van de bibliotheek met het commando:

npm install pptxgenjs

Hiermee werd de bibliotheek en de benodigde afhankelijkheden binnen enkele seconden geïnstalleerd, klaar voor het maken van de presentatie.

De Prompt: Eén Instructie, Eén Omvattend Resultaat

Met de bibliotheek geïnstalleerd, stelde ik via Windsurf één gedetailleerde prompt op voor Claude 4 Sonnet. De prompt bevatte:

• Het installatiecommando voor pptxgenjs
• Het volledige overzicht van de zes uur durende training, opgesplitst in twee slide packs (Sessie 1 en Sessie 2)
• Specifieke criteria voor de presentatie, met nadruk op hands-on leren, visuele elementen en realistische use-cases
• Instructies om dia’s te maken voor elk onderdeel, inclusief introducties, live demo’s, use-cases en een eindopdracht

Hier is een vereenvoudigde versie van de promptstructuur:

Installeer npm i pptxgenjs. Maak een presentatie met de pptxgenjs-bibliotheek voor een zes uur durende FlowHunt.io AI-workflows training. Volg dit overzicht: [gedetailleerde sessie-indeling]. Zorg dat de presentatie hands-on is, visueel, echte use-cases bevat (finance, HR, compliance) en elke 30 minuten interactieve opdrachten heeft. Maak dia’s voor: Welkom, Intro FlowHunt, Workflow Canvas, Live Demo, Toolverbindingen, Iteratie, Use-cases, MPC’s, Logica, API’s, Monitoring, Compliance, Uitrol, Eindopdracht en Q&A.

Met deze prompt genereerde Claude 4 Sonnet een compleet JavaScript-bestand (flowhunt-training.js) dat pptxgenjs gebruikte om een presentatie van 24 dia’s te maken. Het script regelde alles van dia-opmaak tot consistente branding met het kleurenschema van FlowHunt.

Het Proces: Van Code naar Dia’s

Het uitvoeren van het gegenereerde script was eenvoudig. Ik voerde uit:

node flowhunt-training.js

Het script draaide soepel, al kreeg ik een paar waarschuwingen over ongeldige kleurcodes (“70AD4720 is not a valid scheme color or hex RGB! ‘000000’ used instead”). Dit waren kleine issues die geen invloed hadden op het resultaat, aangezien de bibliotheek standaard zwart gebruikte. Binnen enkele ogenblikken leverde het script een bestand op met de naam FlowHunt-AI-Workflows-Training.pptx met 24 professioneel vormgegeven dia’s.

De presentatie was een meesterwerk van automatisering:

Sessie 1 (10 dia’s): Besloeg FlowHunt.io-basisprincipes, een live demo van het bouwen van een workflow, toolverbindingen (CSV, Google Sheets), iteratietips en use-cases voor finance (budgetvalidatie) en HR (geautomatiseerde onboarding-bot). Ook werden MPC’s geïntroduceerd aan de hand van een eenvoudig LEGO-metafoor.

Sessie 2 (8 dia’s): Richtte zich op geavanceerde onderwerpen zoals het maken van MPC’s, conditionele logica, API-integraties (Google Search, CRM, Slack), governance, compliance-bots en uitrol. Afgesloten met een eindopdracht-dia voor een mini-hackathon-stijl opdracht.

Extra dia’s: Bevatten welkom, agenda, pauze, Q&A en bedank-dia’s, voor een vloeiende en professionele presentatie.

De dia’s hadden een consistente huisstijl, duidelijke titels en visuele elementen met placeholders voor GIF’s of video’s. Interactieve onderdelen zoals stapsgewijze demo-instructies en groepsopdrachten waren naadloos geïntegreerd.

Het Resultaat: Een Direct Gebruiksklare Presentatie

Het eindresultaat was een PowerPoint-bestand van 239KB, direct te openen in elke compatibele software. Naast de presentatie genereerde Claude 4 Sonnet een README.md-bestand met documentatie over het project, inclusief gebruiksinstructies en presentatietoppers. Het resultaat was een professionele, interactieve en visueel aantrekkelijke presentatie die perfect aansloot bij mijn eisen.

Reflectie: De Kracht van AI-gedreven Ontwikkeling

Deze ervaring toonde de indrukwekkende kracht van AI-tools als Windsurf en Claude 4 Sonnet. Met slechts één prompt heb ik een high-level overzicht omgezet in een volledig uitgewerkte presentatie van 24 dia’s, compleet met opmaak, branding en interactieve elementen. De pptxgenjs-bibliotheek bleek een robuuste keuze, en Claude’s vermogen om mijn wensen te begrijpen en functionele code te genereren was indrukwekkend.

Wat vooral opviel was de efficiëntie. De code handmatig schrijven zou uren, zo niet dagen hebben gekost, vooral om consistente opmaak over 24 dia’s te waarborgen. Claude deed dit in seconden, met een script dat modulair en eenvoudig aan te passen was. De kleine waarschuwingen over kleurcodes waren een detail, eenvoudig op te lossen door de hex-waarden in het script aan te passen indien gewenst.

Vervolgstappen

Ik ben erg enthousiast over het resultaat en ga deze presentatie gebruiken voor mijn FlowHunt.io-training. In de toekomst kan ik het verder verbeteren door:

• Eigen afbeeldingen of GIF’s toe te voegen aan de dia’s (het script bevat hiervoor placeholders)
• Het kleurenschema te verfijnen om waarschuwingen te voorkomen
• De interactieve opdrachten uit te breiden met meer gedetailleerde instructies

Dit project heeft mij geïnspireerd om meer AI-gedreven automatisering voor contentcreatie te verkennen. Wil je snel en efficiënt presentaties maken, dan raad ik zeker aan om pptxgenjs te combineren met een AI-tool als Claude 4 Sonnet via Windsurf—het is echt een gamechanger!