So erstellen Sie eine KI-Präsentation mit Windsurf und Vibe Coding

Als Technikbegeisterte*r auf der Suche nach innovativen Tools habe ich kürzlich ein Projekt gestartet, um eine professionelle PowerPoint-Präsentation für eine sechsstündige Schulung zu FlowHunt.io KI-Workflows zu erstellen. Bemerkenswert an dieser Erfahrung war, wie ich Windsurf mit Claude 4 Sonnet als LLM nutzte, um mit der pptxgenjs-Bibliothek eine 24-Folien-Präsentation zu generieren – alles mit nur einem Prompt und einer gut strukturierten Gliederung. So lief das Ganze ab.

Das Ziel: Eine praxisnahe, visuelle Trainingspräsentation

Mein Ziel war es, eine ansprechende, interaktive Präsentation für einen sechsstündigen FlowHunt.io-Workshop zu erstellen, einer Plattform zum Aufbau von KI-Workflows. Die Präsentation sollte:

• Praxisnah und visuell sein, mit kurzen Erklärungen und anschließenden praktischen Demonstrationen
• Reale Anwendungsfälle aus den Bereichen Finanzen, HR, Compliance und Projektmanagement enthalten
• Interaktive Elemente wie Aufgaben oder Quizze alle 30 Minuten anbieten, um das Lernen zu vertiefen
• Ein strukturiertes Zwei-Sessions-Format verfolgen, das von grundlegenden Workflows bis zu fortgeschrittenen modularen Prozesskomponenten (MPCs) reicht

Um Klarheit zu gewährleisten, ließ ich zuerst von Claude 4 Sonnet eine detaillierte Gliederung für die Präsentation erstellen, die in zwei dreistündige Sessions mit konkreten Themen und Zeitangaben unterteilt war. Diese Gliederung wurde zum Fundament des Projekts und bestimmte Inhalte und Aufbau der Folien.

Das Tool: pptxgenjs und Windsurf mit Claude 4 Sonnet

Ich entschied mich für die Bibliothek pptxgenjs, da sie ein leistungsstarkes JavaScript-Tool für die programmgesteuerte Erstellung von PowerPoint-Präsentationen ist. Ihre Fähigkeit, Folien, Texte, Bilder und Formatierungen per Code zu erzeugen, machte sie ideal für die Automatisierung. Um diese Vision umzusetzen, nutzte ich Windsurf – angetrieben von Claude 4 Sonnet –, um den Code zu schreiben und die Präsentation auf Basis meiner Gliederung zu generieren.

Der Prozess begann mit der Installation der Bibliothek per Befehl:

npm install pptxgenjs

Damit wurde die Bibliothek samt Abhängigkeiten in wenigen Sekunden installiert und der Grundstein für die Präsentation gelegt.

Der Prompt: Eine Anweisung, ein umfassendes Ergebnis

Nachdem die Bibliothek installiert war, formulierte ich einen einzigen, detaillierten Prompt für Claude 4 Sonnet über Windsurf. Der Prompt enthielt:

• Den Installationsbefehl für pptxgenjs
• Die vollständige Gliederung der sechsstündigen Schulung, unterteilt in zwei Folienpakete (Session 1 und Session 2)
• Konkrete Kriterien für die Präsentation, mit Fokus auf Praxisbezug, Visualisierung und reale Anwendungsfälle
• Anweisungen, für jedes Modul Folien zu erstellen, darunter Einführungen, Live-Demos, Use Cases und eine Abschlusschallenge

Hier eine vereinfachte Version des Prompt-Aufbaus:

Installiere npm i pptxgenjs. Erstelle mit der pptxgenjs-Bibliothek eine Präsentation für ein sechsstündiges FlowHunt.io-Training zu KI-Workflows. Folge dieser Gliederung: [detaillierter Sessions-Plan]. Die Präsentation soll praxisnah, visuell, mit realen Anwendungsfällen (Finanzen, HR, Compliance) und interaktiven Aufgaben alle 30 Minuten sein. Erstelle Folien für: Begrüßung, FlowHunt-Intro, Workflow Canvas, Live-Demo, Tool-Anbindungen, Iteration, Use Cases, MPCs, Logik, APIs, Monitoring, Compliance, Deployment, Abschluss-Challenge und Q&A.

Mit diesem Prompt generierte Claude 4 Sonnet eine vollständige JavaScript-Datei (flowhunt-training.js), die mit pptxgenjs eine 24-Folien-Präsentation erstellte. Das Skript kümmerte sich um alles – von Folienlayouts bis zum konsistenten Branding in den FlowHunt-Farben.

Der Ablauf: Vom Code zur Folie

Das Ausführen des generierten Skripts war einfach. Ich startete:

node flowhunt-training.js

Das Skript lief problemlos, lediglich ein paar Warnungen zu ungültigen Farbwerten (“70AD4720 is not a valid scheme color or hex RGB! ‘000000’ used instead”) traten auf. Diese waren aber unerheblich, da die Bibliothek stattdessen Schwarz verwendete. In wenigen Augenblicken entstand so die Datei FlowHunt-AI-Workflows-Training.pptx mit 24 professionell gestalteten Folien.

Die Präsentation war ein Musterbeispiel für Automatisierung:

Session 1 (10 Folien): Behandelte FlowHunt.io-Basics, eine Live-Demo zum Bau eines Workflows, Tool-Anbindungen (CSV, Google Sheets), Iterationstipps und Use Cases für Finanzen (Budgetvalidierung) und HR (automatisierter Onboarding-Bot). Außerdem Einführung in MPCs anhand einer einfachen LEGO-Metapher.

Session 2 (8 Folien): Fokussierte auf fortgeschrittene Themen wie MPC-Erstellung, bedingte Logik, API-Integrationen (Google Search, CRM, Slack), Governance, Compliance-Bots und Deployment. Am Ende stand eine Challenge-Folie für eine Mini-Hackathon-Aufgabe.

Zusätzliche Folien: Beinhalteten Begrüßung, Agenda, Pause, Q&A und Dankeschön – für einen durchgehend professionellen Ablauf.

Die Folien wiesen einheitliches Branding, klare Titel und visuelle Elemente mit Platzhaltern für GIFs oder Videos auf. Interaktive Elemente wie Schritt-für-Schritt-Demos und Gruppen-Challenges waren nahtlos integriert.

Das Ergebnis: Eine einsatzbereite Präsentation

Das Endprodukt war eine 239KB große PowerPoint-Datei, die sich in jeder kompatiblen Software öffnen ließ. Zusätzlich generierte Claude 4 Sonnet eine README.md-Datei mit Projektdokumentation, Nutzungshinweisen und Präsentationshighlights. Das Ergebnis: eine professionelle, interaktive und visuell ansprechende Präsentation, die meinen Kriterien voll entsprach.

Fazit: Die Kraft KI-gesteuerter Entwicklung

Diese Erfahrung hat die beeindruckende Leistungsfähigkeit von KI-Tools wie Windsurf und Claude 4 Sonnet gezeigt. Mit nur einem Prompt verwandelte ich eine grobe Gliederung in eine vollständig ausgearbeitete 24-Folien-Präsentation – inklusive Formatierung, Branding und Interaktivität. Die pptxgenjs-Bibliothek erwies sich als robuste Wahl, und Claudes Fähigkeit, meine Anforderungen zu verstehen und funktionierenden Code zu generieren, war bemerkenswert.

Am meisten beeindruckte mich die Effizienz. Den Code manuell zu schreiben hätte Stunden, wenn nicht Tage gedauert – insbesondere, um über 24 Folien hinweg ein einheitliches Design zu gewährleisten. Claude erledigte das in Sekunden und erzeugte ein modular aufgebautes, leicht anpassbares Skript. Die kleinen Farbcode-Warnungen waren ein leicht zu behebender Schönheitsfehler, indem man die Hex-Werte im Skript anpasst.

Nächste Schritte

Ich bin vom Ergebnis begeistert und werde die Präsentation in meiner FlowHunt.io-Schulung einsetzen. Perspektivisch könnte ich sie noch aufwerten durch:

• Eigene Bilder oder GIFs auf den Folien (Platzhalter sind im Skript vorhanden)
• Verfeinerung des Farbschemas zur Beseitigung der Warnungen
• Ausbau der interaktiven Challenges mit detaillierteren Anweisungen

Dieses Projekt hat mich dazu inspiriert, weitere KI-basierte Automatisierungen für Content-Erstellung zu erkunden. Wer Präsentationen schnell und effizient erstellen möchte, dem empfehle ich die Kombination aus pptxgenjs und einem KI-Tool wie Claude 4 Sonnet über Windsurf – das ist wirklich ein Game Changer!