Hur man skapar AI-presentation med Windsurf och Vibe Coding

Som teknikentusiast som ständigt söker innovativa verktyg gav jag mig nyligen in i ett projekt för att skapa en professionell PowerPoint-presentation för en 6-timmars utbildning om FlowHunt.io:s AI-workflows. Det som gjorde upplevelsen anmärkningsvärd var hur jag använde Windsurf med Claude 4 Sonnet som LLM för att generera en presentation med 24 bilder med hjälp av pptxgenjs-biblioteket – allt med en enda prompt och en välstrukturerad disposition. Så här gick det till.

Målet: En praktisk, visuell utbildningspresentation

Mitt mål var att skapa en engagerande, interaktiv presentation för en 6-timmars workshop om FlowHunt.io, en plattform för att bygga AI-workflows. Presentationen behövde:

• Vara praktisk och visuell, med kortfattade förklaringar följda av praktiska demonstrationer
• Inkludera verkliga användningsfall inom ekonomi, HR, compliance och projektledning
• Ha interaktiva inslag som uppgifter eller quiz var 30:e minut för att förstärka inlärningen
• Följa ett strukturerat upplägg i två sessioner, som täcker allt från grundläggande workflows till avancerade modulära processkomponenter (MPCs)

För att säkerställa tydlighet använde jag först Claude 4 Sonnet för att skapa en detaljerad disposition för presentationen, uppdelad i två 3-timmars sessioner med specifika ämnen och tider. Denna disposition blev projektets grund, och styrde innehåll och struktur för bilderna.

Verktyget: pptxgenjs och Windsurf med Claude 4 Sonnet

Jag valde pptxgenjs-biblioteket eftersom det är ett kraftfullt JavaScript-verktyg för att programmera fram PowerPoint-presentationer. Dess förmåga att skapa bilder och lägga till text, bilder och formatering via kod gjorde det idealiskt för automatisering. För att realisera idén använde jag Windsurf, drivet av Claude 4 Sonnet, för att skriva koden och generera presentationen utifrån min disposition.

Processen började med att installera biblioteket med kommandot:

npm install pptxgenjs

Detta installerade biblioteket och dess beroenden på några sekunder och lade grunden för presentationsskapandet.

Prompten: En instruktion, ett heltäckande resultat

Med biblioteket installerat utformade jag en enda, detaljerad prompt för Claude 4 Sonnet via Windsurf. Prompten innehöll:

• Installationskommandot för pptxgenjs
• Den kompletta dispositionen för 6-timmarsutbildningen, uppdelad i två bildpaket (Session 1 och Session 2)
• Specifika krav för presentationen, med fokus på praktiskt lärande, visuella inslag och verkliga exempel
• Instruktioner om att skapa bilder för varje modul, inklusive introduktioner, live-demo, användningsfall och en avslutande utmaning

Här är en förenklad version av promptstrukturen:

Installera npm i pptxgenjs. Skapa en presentation med pptxgenjs-biblioteket för en 6-timmars FlowHunt.io AI-workflowsutbildning. Följ denna disposition: [detaljerad session]. Säkerställ att presentationen är praktisk, visuell, innehåller verkliga användningsfall (ekonomi, HR, compliance) och har interaktiva uppgifter var 30:e minut. Skapa bilder för: Välkomst, FlowHunt-intro, Workflow Canvas, Live Demo, Verktygskopplingar, Iteration, Användningsfall, MPCs, Logik, API:er, Övervakning, Compliance, Utrullning, Final Challenge och Q&A.

Med denna prompt genererade Claude 4 Sonnet en komplett JavaScript-fil (flowhunt-training.js) som använde pptxgenjs för att skapa en presentation med 24 bilder. Skriptet hanterade allt från bildlayout till enhetlig varumärkesprofil med FlowHunts färgschema.

Processen: Från kod till bilder

Att köra det genererade skriptet var enkelt. Jag körde:

node flowhunt-training.js

Skriptet kördes smidigt, även om jag stötte på några varningar om ogiltiga färgkoder (“70AD4720 är inte en giltig schemafärg eller hex RGB! ‘000000’ används istället”). Detta var småsaker som inte påverkade resultatet, då biblioteket istället använde svart. Inom några ögonblick skapade skriptet en fil med namnet FlowHunt-AI-Workflows-Training.pptx med 24 professionellt formaterade bilder.

Presentation var ett mästerverk av automatisering:

Session 1 (10 bilder): Täcker grunderna i FlowHunt.io, en live-demo av att bygga ett workflow, verktygskopplingar (CSV, Google Sheets), iterationstips och användningsfall för ekonomi (budgetvalidering) och HR (automatiserad onboarding-bot). Den introducerade även MPCs med en enkel LEGO-metafor.

Session 2 (8 bilder): Fokuserade på avancerade ämnen, inklusive skapande av MPC, villkorslogik, API-integrationer (Google Search, CRM, Slack), governance, compliance-botar och utrullning. Avslutades med en Final Challenge-bild för en mini-hackathon-liknande uppgift.

Ytterligare bilder: Innehöll välkomst-, agenda-, paus-, Q&A- och tackbilder, vilket säkerställde ett professionellt flöde genom hela presentationen.

Bilderna hade konsekvent varumärkesprofil, tydliga rubriker och visuella element med platshållare för GIF:ar eller videor. Interaktiva inslag, som steg-för-steg-demonstrationer och grupputmaningar, integrerades sömlöst.

Resultatet: En färdig presentation

Slutresultatet var en PowerPoint-fil på 239KB, redo att öppnas i vilket kompatibelt program som helst. Utöver presentationen genererade Claude 4 Sonnet även en README.md-fil som dokumenterade projektet, inklusive användarinstruktioner och höjdpunkter. Resultatet blev en professionell, interaktiv och visuellt tilltalande presentation som helt uppfyllde mina kriterier.

Reflektioner: Kraften i AI-drivet utvecklingsarbete

Den här upplevelsen visade på den imponerande kraften i AI-verktyg som Windsurf och Claude 4 Sonnet. Med en enda prompt omvandlade jag en övergripande disposition till en färdig 24-bilders presentation, komplett med formatering, varumärkning och interaktiva inslag. pptxgenjs-biblioteket visade sig vara ett robust val, och Claudes förmåga att förstå mina krav och generera fungerande kod var imponerande.

Det som utmärkte sig mest var effektiviteten. Att skriva koden manuellt hade tagit timmar, om inte dagar, särskilt för att få enhetlig formatering över 24 bilder. Claude fixade det på sekunder och skapade ett skript som var både modulärt och lätt att anpassa. De mindre varningarna om färgkoder var en bagatell, som enkelt kunde åtgärdas genom att justera hexvärdena i skriptet vid behov.

Nästa steg

Jag är mycket nöjd med resultatet och planerar att använda denna presentation för min FlowHunt.io-utbildning. Framöver skulle jag kunna förbättra den genom att:

• Lägga till egna bilder eller GIF:ar på bilderna (skriptet har platshållare)
• Förfina färgschemat för att eliminera varningar
• Utöka de interaktiva utmaningarna med mer detaljerade instruktioner

Detta projekt har inspirerat mig att utforska mer AI-drivna sätt att automatisera innehållsskapande. Om du vill skapa presentationer snabbt och effektivt rekommenderar jag verkligen att kombinera pptxgenjs med ett AI-verktyg som Claude 4 Sonnet via Windsurf – det är verkligen en game-changer!