How To Create AI Presentation with Windsurf and Vibe Coding

As a tech enthusiast constantly seeking innovative tools, I recently embarked on a project to create a professional PowerPoint presentation for a 6-hour training session on FlowHunt.io AI workflows. What made this experience remarkable was how I leveraged Windsurf with Claude 4 Sonnet as its LLM to generate a 24-slide presentation using the pptxgenjs library—all with a single prompt and a well-structured outline. Here’s how it all came together.

The Goal: A Hands-On, Visual Training Presentation

My objective was to create an engaging, interactive presentation for a 6-hour workshop on FlowHunt.io, a platform for building AI workflows. The presentation needed to:

• Be hands-on and visual, with concise explanations followed by practical demonstrations
• Include real-world use cases spanning finance, HR, compliance, and project management
• Feature interactive elements like tasks or quizzes every 30 minutes to reinforce learning
• Follow a structured two-session format, covering everything from basic workflows to advanced modular process components (MPCs)

To ensure clarity, I first used Claude 4 Sonnet to generate a detailed outline for the presentation, dividing it into two 3-hour sessions with specific topics and timings. This outline became the foundation of the project, guiding both slide content and structure.

The Tool: pptxgenjs and Windsurf with Claude 4 Sonnet

I chose the pptxgenjs library because it’s a powerful JavaScript tool for programmatically generating PowerPoint presentations. Its ability to create slides and add text, images, and formatting through code made it ideal for automation. To bring this vision to life, I used Windsurf, powered by Claude 4 Sonnet, to write the code and generate the presentation based on my outline.

The process began with installing the library using the command:

npm install pptxgenjs

This installed the library and its dependencies within seconds, setting the stage for presentation creation.

The Prompt: A Single Instruction, One Comprehensive Output

With the library installed, I crafted a single, detailed prompt for Claude 4 Sonnet via Windsurf. The prompt included:

• The installation command for pptxgenjs
• The complete outline of the 6-hour training session, broken into two slide packs (Session 1 and Session 2)
• Specific criteria for the presentation, emphasizing hands-on learning, visual elements, and real-world use cases
• Instructions to create slides for each module, including introductions, live demos, use cases, and a final challenge

Here’s a simplified version of the prompt structure:

Install npm i pptxgenjs. Create a presentation using the pptxgenjs library for a 6-hour FlowHunt.io AI workflows training. Follow this outline: [detailed session breakdown]. Ensure the presentation is hands-on, visual, includes real-world use cases (finance, HR, compliance), and has interactive tasks every 30 minutes. Create slides for: Welcome, FlowHunt Intro, Workflow Canvas, Live Demo, Tool Connections, Iteration, Use Cases, MPCs, Logic, APIs, Monitoring, Compliance, Deployment, Final Challenge, and Q&A.

With this prompt, Claude 4 Sonnet generated a complete JavaScript file (flowhunt-training.js) that used pptxgenjs to create a 24-slide presentation. The script handled everything from slide layouts to consistent branding with FlowHunt’s color scheme.

The Process: From Code to Slides

Running the generated script was straightforward. I executed:

node flowhunt-training.js

The script ran smoothly, though I encountered a few warnings about invalid color codes (“70AD4720 is not a valid scheme color or hex RGB! ‘000000’ used instead”). These were minor issues that didn’t affect the output, as the library defaulted to black. Within moments, the script produced a file named FlowHunt-AI-Workflows-Training.pptx with 24 professionally formatted slides.

The presentation was a masterpiece of automation:

Session 1 (10 slides): Covered FlowHunt.io basics, a live demo of building a workflow, tool connections (CSV, Google Sheets), iteration tips, and use cases for finance (budget validation) and HR (automated onboarding bot). It also introduced MPCs using a simple LEGO metaphor.

Session 2 (8 slides): Focused on advanced topics including MPC creation, conditional logic, API integrations (Google Search, CRM, Slack), governance, compliance bots, and deployment. It concluded with a final challenge slide for a mini-hackathon-style task.

Additional Slides: Included welcome, agenda, break, Q&A, and thank-you slides, ensuring a polished flow throughout the presentation.

The slides featured consistent branding, clear titles, and visual elements with placeholders for GIFs or videos. Interactive elements, such as step-by-step demo instructions and group challenges, were seamlessly integrated.

The Outcome: A Ready-to-Use Presentation

The final output was a 239KB PowerPoint file ready to open in any compatible software. Alongside the presentation, Claude 4 Sonnet generated a README.md file documenting the project, including usage instructions and presentation highlights. The result was a professional, interactive, and visually appealing presentation that perfectly aligned with my criteria.

Reflections: The Power of AI-Driven Development

This experience demonstrated the remarkable power of AI tools like Windsurf and Claude 4 Sonnet. With a single prompt, I transformed a high-level outline into a fully realized 24-slide presentation, complete with formatting, branding, and interactive elements. The pptxgenjs library proved to be a robust choice, and Claude’s ability to understand my requirements and generate functional code was impressive.

What stood out most was the efficiency. Writing the code manually would have taken hours, if not days, especially to ensure consistent formatting across 24 slides. Claude handled it in seconds, producing a script that was both modular and easy to customize. The minor color code warnings were a small hiccup, easily fixable by tweaking the hex values in the script if needed.

Next Steps

I’m thrilled with the outcome and plan to use this presentation for my FlowHunt.io training session. Moving forward, I could enhance it by:

• Adding custom images or GIFs to the slides (the script includes placeholders)
• Refining the color scheme to eliminate warnings
• Expanding the interactive challenges with more detailed instructions

This project has inspired me to explore more AI-driven automation for content creation. If you’re looking to create presentations quickly and efficiently, I highly recommend combining pptxgenjs with an AI tool like Claude 4 Sonnet via Windsurf—it’s truly a game-changer!