Hvordan lage AI-presentasjon med Windsurf og Vibe Coding

Som en teknologientusiast på stadig jakt etter innovative verktøy, startet jeg nylig et prosjekt for å lage en profesjonell PowerPoint-presentasjon til et 6-timers opplæringskurs om FlowHunt.io AI-workflows. Det som gjorde denne opplevelsen bemerkelsesverdig, var hvordan jeg brukte Windsurf med Claude 4 Sonnet som LLM for å generere en presentasjon med 24 lysbilder ved hjelp av pptxgenjs-biblioteket – alt med én enkelt prompt og en godt strukturert disposisjon. Her er hvordan alt kom sammen.

Målet: En Praktisk og Visuell Opplæringspresentasjon

Målet mitt var å lage en engasjerende, interaktiv presentasjon for en 6-timers workshop om FlowHunt.io, en plattform for bygging av AI-workflows. Presentasjonen måtte:

• Være praktisk og visuell, med korte forklaringer etterfulgt av praktiske demonstrasjoner
• Inkludere virkelige brukstilfeller innen finans, HR, compliance og prosjektledelse
• Ha interaktive elementer som oppgaver eller quizer hvert 30. minutt for å forsterke læringen
• Følge en strukturert todelt økt, med alt fra grunnleggende workflows til avanserte modulære proseskomponenter (MPCs)

For å sikre klarhet brukte jeg først Claude 4 Sonnet til å generere en detaljert disposisjon for presentasjonen, delt inn i to økter på tre timer hver med spesifikke temaer og tidspunkter. Denne disposisjonen ble prosjektets fundament og styrte både innhold og struktur på lysbildene.

Verktøyet: pptxgenjs og Windsurf med Claude 4 Sonnet

Jeg valgte pptxgenjs-biblioteket fordi det er et kraftig JavaScript-verktøy for å generere PowerPoint-presentasjoner programmatisk. Det kan lage lysbilder og legge til tekst, bilder og formatering via kode, noe som gjorde det ideelt for automatisering. For å virkeliggjøre denne visjonen brukte jeg Windsurf, drevet av Claude 4 Sonnet, for å skrive koden og generere presentasjonen basert på disposisjonen min.

Prosessen begynte med å installere biblioteket med kommandoen:

npm install pptxgenjs

Dette installerte biblioteket og dets avhengigheter på sekunder og la grunnlaget for å lage presentasjonen.

Prompten: Ett Oppdrag, Ett Omfattende Resultat

Med biblioteket installert lagde jeg en enkel, detaljert prompt til Claude 4 Sonnet via Windsurf. Prompten inkluderte:

• Installasjonskommandoen for pptxgenjs
• Hele disposisjonen for det 6-timers opplæringskurset, delt i to slide-pakker (Økt 1 og Økt 2)
• Spesifikke kriterier for presentasjonen, med vekt på praktisk læring, visuelle elementer og virkelige brukstilfeller
• Instruksjoner om å lage lysbilder for hver modul, inkludert introduksjoner, livedemoer, brukstilfeller og en avsluttende utfordring

Her er en forenklet versjon av promptstrukturen:

Installer npm i pptxgenjs. Lag en presentasjon med pptxgenjs-biblioteket for et 6-timers FlowHunt.io AI-workflows-kurs. Følg denne disposisjonen: [detaljert øktoversikt]. Sørg for at presentasjonen er praktisk, visuell, inkluderer virkelige brukstilfeller (finans, HR, compliance) og har interaktive oppgaver hvert 30. minutt. Lag lysbilder for: Velkommen, FlowHunt Intro, Workflow Canvas, Livedemo, Verktøytilkoblinger, Iterasjon, Brukstilfeller, MPCs, Logikk, API-er, Overvåking, Compliance, Distribusjon, Avsluttende utfordring og Q&A.

Med denne prompten genererte Claude 4 Sonnet en komplett JavaScript-fil (flowhunt-training.js) som brukte pptxgenjs til å lage en presentasjon med 24 lysbilder. Skriptet håndterte alt fra slide-layouts til konsekvent merkevarebygging med FlowHunts fargepalett.

Prosessen: Fra Kode til Lysbilder

Å kjøre det genererte skriptet var enkelt. Jeg kjørte:

node flowhunt-training.js

Skriptet kjørte uten problemer, selv om jeg fikk noen advarsler om ugyldige fargekoder (“70AD4720 er ikke en gyldig skjema-farge eller hex RGB! ‘000000’ brukt i stedet”). Dette var småting som ikke påvirket resultatet, siden biblioteket automatisk brukte svart. Etter få øyeblikk produserte skriptet en fil kalt FlowHunt-AI-Workflows-Training.pptx med 24 profesjonelt formaterte lysbilder.

Presentasjonen var et mesterverk av automatisering:

Økt 1 (10 lysbilder): Dekket FlowHunt.io-grunnleggende, livedemo av å bygge en workflow, verktøytilkoblinger (CSV, Google Sheets), iterasjonstips og brukstilfeller for finans (budsjettvalidering) og HR (automatisert onboarding-bot). Den introduserte også MPCs med en enkel LEGO-metafor.

Økt 2 (8 lysbilder): Fokus på avanserte temaer, inkludert opprettelse av MPC-er, betinget logikk, API-integrasjoner (Google Search, CRM, Slack), governance, compliance-boter og distribusjon. Den avsluttet med en utfordrings-slide for en mini-hackathon-oppgave.

Ekstra lysbilder: Inkluderte velkommen, agenda, pause, Q&A og takk-lysbildene, som sikret en polert flyt gjennom hele presentasjonen.

Lysbildene hadde konsekvent merkevarebygging, tydelige titler og visuelle elementer med plassholdere for GIF-er eller videoer. Interaktive elementer, som trinnvise demoinstruksjoner og gruppeutfordringer, var sømløst integrert.

Resultatet: En Klar til Bruk-presentasjon

Sluttresultatet var en 239KB PowerPoint-fil klar til å åpnes i alle kompatible programmer. I tillegg til presentasjonen genererte Claude 4 Sonnet en README.md-fil som dokumenterte prosjektet, inkludert brukerveiledning og høydepunkter fra presentasjonen. Resultatet var en profesjonell, interaktiv og visuelt tiltalende presentasjon som oppfylte alle mine kriterier.

Refleksjoner: Kraften i AI-drevet Utvikling

Denne opplevelsen viste den imponerende kraften i AI-verktøy som Windsurf og Claude 4 Sonnet. Med én enkelt prompt forvandlet jeg en overordnet disposisjon til en fullverdig presentasjon med 24 lysbilder, komplett med formatering, merkevarebygging og interaktive elementer. pptxgenjs-biblioteket var et robust valg, og Claudes evne til å forstå mine krav og generere fungerende kode var imponerende.

Det mest slående var effektiviteten. Å skrive koden manuelt ville tatt mange timer, om ikke dager, spesielt for å sikre konsekvent formatering på 24 lysbilder. Claude gjorde det på sekunder og leverte et skript som både var modulært og lett å tilpasse. De små fargekode-advarslene var en bagatell, enkelt løst ved å justere hex-verdiene i skriptet om nødvendig.

Neste steg

Jeg er svært fornøyd med resultatet og planlegger å bruke denne presentasjonen på mitt FlowHunt.io-kurs. Fremover kan jeg forbedre den ved å:

• Legge til egne bilder eller GIF-er i lysbildene (skriptet har plassholdere)
• Finjustere fargepaletten for å fjerne advarsler
• Utvide de interaktive oppgavene med mer detaljerte instruksjoner

Dette prosjektet har inspirert meg til å utforske mer AI-drevet automatisering for innholdsproduksjon. Hvis du ønsker å lage presentasjoner raskt og effektivt, anbefaler jeg på det sterkeste å kombinere pptxgenjs med et AI-verktøy som Claude 4 Sonnet via Windsurf – det er virkelig en game-changer!