Sådan laver du AI-præsentation med Windsurf og Vibe Coding

Som teknologientusiast på evig jagt efter innovative værktøjer kastede jeg mig for nylig ud i et projekt om at skabe en professionel PowerPoint-præsentation til et 6-timers træningsforløb om FlowHunt.io AI-workflows. Det bemærkelsesværdige ved denne oplevelse var, hvordan jeg udnyttede Windsurf med Claude 4 Sonnet som LLM til at generere en præsentation med 24 slides ved hjælp af pptxgenjs-biblioteket—alt sammen med én enkelt prompt og en velstruktureret disposition. Sådan kom det hele til at hænge sammen.

Målet: En Praktisk, Visuel Træningspræsentation

Mit mål var at skabe en engagerende, interaktiv præsentation til en 6-timers workshop om FlowHunt.io, en platform til opbygning af AI-workflows. Præsentationen skulle:

• Være praktisk og visuel, med korte forklaringer efterfulgt af praktiske demonstrationer
• Indeholde virkelige brugsscenarier indenfor finans, HR, compliance og projektledelse
• Have interaktive elementer som opgaver eller quizzer hver 30. minut for at styrke læringen
• Følge et struktureret format med to sessioner, der dækker alt fra grundlæggende workflows til avancerede modulære proceskomponenter (MPCs)

For at sikre klarhed brugte jeg først Claude 4 Sonnet til at generere en detaljeret disposition for præsentationen, opdelt i to 3-timers sessioner med specifikke emner og tidsplaner. Denne disposition blev grundlaget for projektet og styrede både indhold og struktur af slides.

Værktøjet: pptxgenjs og Windsurf med Claude 4 Sonnet

Jeg valgte pptxgenjs-biblioteket, fordi det er et kraftfuldt JavaScript-værktøj til programmatisk at generere PowerPoint-præsentationer. Det kan oprette slides og tilføje tekst, billeder og formatering via kode, hvilket gjorde det ideelt til automatisering. For at realisere visionen brugte jeg Windsurf, drevet af Claude 4 Sonnet, til at skrive koden og generere præsentationen ud fra min disposition.

Processen begyndte med at installere biblioteket med kommandoen:

npm install pptxgenjs

Dette installerede biblioteket og dets afhængigheder på få sekunder og banede vejen for at skabe præsentationen.

Prompten: Én Instruks, Ét Omfattende Output

Med biblioteket installeret formulerede jeg en enkelt, detaljeret prompt til Claude 4 Sonnet via Windsurf. Prompten inkluderede:

• Installationskommandoen for pptxgenjs
• Den komplette disposition for 6-timers træningssessionen, opdelt i to slidepakker (Session 1 og Session 2)
• Specifikke kriterier for præsentationen med vægt på praktisk læring, visuelle elementer og virkelige brugsscenarier
• Instruktioner om at oprette slides for hvert modul, inklusive introduktioner, live-demoer, brugssager og en afsluttende udfordring

Her er en forenklet version af promptens struktur:

Installer npm i pptxgenjs. Opret en præsentation ved brug af pptxgenjs-biblioteket til et 6-timers FlowHunt.io AI-workflows træningsforløb. Følg denne disposition: [detaljeret session oversigt]. Sørg for, at præsentationen er praktisk, visuel, indeholder virkelige brugsscenarier (finans, HR, compliance), og har interaktive opgaver hver 30. minut. Opret slides for: Velkomst, FlowHunt Intro, Workflow Canvas, Live Demo, Værktøjsforbindelser, Iteration, Brugssager, MPCs, Logik, API’er, Overvågning, Compliance, Udrulning, Final Challenge og Q&A.

Med denne prompt genererede Claude 4 Sonnet en komplet JavaScript-fil (flowhunt-training.js), der anvendte pptxgenjs til at skabe en præsentation med 24 slides. Scriptet håndterede alt fra slide-layouts til ensartet branding med FlowHunts farveskema.

Processen: Fra Kode til Slides

At køre det genererede script var enkelt. Jeg skrev:

node flowhunt-training.js

Scriptet kørte uden problemer, selvom jeg stødte på et par advarsler om ugyldige farvekoder (“70AD4720 is not a valid scheme color or hex RGB! ‘000000’ used instead”). Det var mindre problemer, der ikke påvirkede resultatet, da biblioteket blot brugte sort som standard. I løbet af få øjeblikke producerede scriptet en fil med navnet FlowHunt-AI-Workflows-Training.pptx med 24 professionelt formaterede slides.

Præsentationen var et mesterværk i automatisering:

Session 1 (10 slides): Dækkede FlowHunt.io’s grundprincipper, en live-demo af opbygning af en workflow, værktøjsforbindelser (CSV, Google Sheets), iterationstips og brugsscenarier for finans (budgetvalidering) og HR (automatisk onboarding-bot). Den introducerede også MPCs ved hjælp af en simpel LEGO-metafor.

Session 2 (8 slides): Fokuserede på avancerede emner som MPC-oprettelse, betinget logik, API-integrationer (Google Search, CRM, Slack), governance, compliance-bots og udrulning. Afsluttede med en final challenge-slide til en mini-hackathon-lignende opgave.

Ekstra slides: Inkluderede velkomst, agenda, pause, Q&A og takke-slides, hvilket sikrede et gennemført flow gennem hele præsentationen.

Slidesene havde ensartet branding, tydelige titler og visuelle elementer med pladsholdere til GIF’er eller videoer. Interaktive elementer som trin-for-trin demo-instruktioner og gruppeudfordringer var integreret problemfrit.

Resultatet: En Brugbart Præsentation

Det endelige output var en 239KB PowerPoint-fil klar til at åbnes i enhver kompatibel software. Ud over præsentationen genererede Claude 4 Sonnet en README.md-fil, der dokumenterede projektet, herunder brugsvejledning og præsentationens højdepunkter. Resultatet var en professionel, interaktiv og visuelt tiltalende præsentation, der levede fuldt op til mine kriterier.

Refleksioner: AI-drevet Udviklings Styrke

Denne oplevelse viste den bemærkelsesværdige styrke ved AI-værktøjer som Windsurf og Claude 4 Sonnet. Med én enkelt prompt omdannede jeg en overordnet disposition til en fuldt udarbejdet præsentation med 24 slides, komplet med formatering, branding og interaktive elementer. pptxgenjs-biblioteket viste sig at være et robust valg, og Claudes evne til at forstå mine krav og generere funktionel kode var imponerende.

Det, der især stod ud, var effektiviteten. At skrive koden manuelt ville have taget timer, hvis ikke dage, især for at sikre ensartet formatering på tværs af 24 slides. Claude klarede det på få sekunder og leverede et script, der både var modulært og nemt at tilpasse. De små farvekode-advarsler var en bagatel, der let kunne rettes ved at justere hex-værdierne i scriptet.

Næste Skridt

Jeg er begejstret for resultatet og planlægger at bruge denne præsentation til mit FlowHunt.io-træningsforløb. Fremover kunne jeg forbedre den ved at:

• Tilføje egne billeder eller GIF’er til slides (scriptet indeholder pladsholdere)
• Finjustere farveskemaet for at eliminere advarsler
• Udbygge de interaktive udfordringer med mere detaljerede instruktioner

Dette projekt har inspireret mig til at udforske flere AI-drevne automatiseringer til indholdsskabelse. Hvis du ønsker at skabe præsentationer hurtigt og effektivt, kan jeg varmt anbefale at kombinere pptxgenjs med et AI-værktøj som Claude 4 Sonnet via Windsurf—det er virkelig en game-changer!