Cómo crear una presentación de IA con Windsurf y Vibe Coding

Como entusiasta de la tecnología en búsqueda constante de herramientas innovadoras, recientemente emprendí un proyecto para crear una presentación profesional de PowerPoint para una sesión de capacitación de 6 horas sobre flujos de trabajo de IA en FlowHunt.io. Lo que hizo notable esta experiencia fue cómo aproveché Windsurf con Claude 4 Sonnet como su LLM para generar una presentación de 24 diapositivas utilizando la biblioteca pptxgenjs, todo con un solo prompt y un esquema bien estructurado. Así fue como se dio todo.

El objetivo: una presentación de capacitación práctica y visual

Mi objetivo era crear una presentación atractiva e interactiva para un taller de 6 horas sobre FlowHunt.io, una plataforma para construir flujos de trabajo de IA. La presentación debía:

• Ser práctica y visual, con explicaciones concisas seguidas de demostraciones prácticas
• Incluir casos de uso reales que abarcaran finanzas, RRHH, cumplimiento y gestión de proyectos
• Contar con elementos interactivos como tareas o cuestionarios cada 30 minutos para reforzar el aprendizaje
• Seguir un formato estructurado de dos sesiones, cubriendo desde flujos de trabajo básicos hasta componentes de procesos modulares (MPCs) avanzados

Para asegurarme de la claridad, primero utilicé Claude 4 Sonnet para generar un esquema detallado de la presentación, dividiéndola en dos sesiones de 3 horas con temas y tiempos específicos. Este esquema se convirtió en la base del proyecto, guiando tanto el contenido como la estructura de las diapositivas.

La herramienta: pptxgenjs y Windsurf con Claude 4 Sonnet

Elegí la biblioteca pptxgenjs porque es una potente herramienta de JavaScript para generar presentaciones de PowerPoint de forma programática. Su capacidad para crear diapositivas y agregar texto, imágenes y formato mediante código la hacía ideal para la automatización. Para hacer realidad esta visión, utilicé Windsurf, potenciado por Claude 4 Sonnet, para escribir el código y generar la presentación en base a mi esquema.

El proceso comenzó instalando la biblioteca mediante el comando:

npm install pptxgenjs

Esto instaló la biblioteca y sus dependencias en segundos, preparando el escenario para la creación de la presentación.

El prompt: una sola instrucción, un resultado integral

Con la biblioteca instalada, elaboré un prompt detallado para Claude 4 Sonnet a través de Windsurf. El prompt incluía:

• El comando de instalación de pptxgenjs
• El esquema completo de la sesión de capacitación de 6 horas, dividido en dos paquetes de diapositivas (Sesión 1 y Sesión 2)
• Criterios específicos para la presentación, enfatizando el aprendizaje práctico, elementos visuales y casos de uso reales
• Instrucciones para crear diapositivas para cada módulo, incluidas introducciones, demostraciones en vivo, casos de uso y un desafío final

Aquí tienes una versión simplificada de la estructura del prompt:

Instala npm i pptxgenjs. Crea una presentación utilizando la biblioteca pptxgenjs para una capacitación de 6 horas en flujos de trabajo de IA de FlowHunt.io. Sigue este esquema: [desglose detallado de la sesión]. Asegúrate de que la presentación sea práctica, visual, incluya casos de uso reales (finanzas, RRHH, cumplimiento), y tenga tareas interactivas cada 30 minutos. Crea diapositivas para: Bienvenida, Introducción a FlowHunt, Lienzo de flujos de trabajo, Demostración en vivo, Conexiones con herramientas, Iteración, Casos de uso, MPCs, Lógica, APIs, Monitoreo, Cumplimiento, Despliegue, Desafío final y Preguntas y respuestas.

Con este prompt, Claude 4 Sonnet generó un archivo JavaScript completo (flowhunt-training.js) que utilizaba pptxgenjs para crear una presentación de 24 diapositivas. El script gestionó todo, desde los diseños de las diapositivas hasta el branding consistente con la paleta de colores de FlowHunt.

El proceso: del código a las diapositivas

Ejecutar el script generado fue sencillo. Ejecuté:

node flowhunt-training.js

El script se ejecutó sin problemas, aunque me encontré con algunas advertencias sobre códigos de color no válidos (“70AD4720 no es un color válido de esquema o hex RGB! ‘000000’ usado en su lugar”). Estos fueron problemas menores que no afectaron el resultado, ya que la biblioteca adoptó el negro por defecto. En cuestión de segundos, el script produjo un archivo llamado FlowHunt-AI-Workflows-Training.pptx con 24 diapositivas profesionalmente formateadas.

La presentación fue una obra maestra de la automatización:

Sesión 1 (10 diapositivas): Cubría lo básico de FlowHunt.io, una demostración en vivo de la construcción de un flujo de trabajo, conexiones con herramientas (CSV, Google Sheets), consejos de iteración y casos de uso para finanzas (validación de presupuestos) y RRHH (bot automatizado de incorporación). También introducía los MPCs usando una simple metáfora de LEGO.

Sesión 2 (8 diapositivas): Se centraba en temas avanzados como la creación de MPCs, lógica condicional, integraciones de API (Google Search, CRM, Slack), gobernanza, bots de cumplimiento y despliegue. Concluía con una diapositiva de desafío final para una tarea tipo mini-hackathon.

Diapositivas adicionales: Incluían bienvenida, agenda, descanso, preguntas y respuestas, y agradecimientos, asegurando un flujo pulido durante toda la presentación.

Las diapositivas presentaban branding consistente, títulos claros y elementos visuales con espacios reservados para GIFs o videos. Elementos interactivos, como instrucciones de demostración paso a paso y desafíos grupales, se integraron perfectamente.

El resultado: una presentación lista para usar

El resultado final fue un archivo de PowerPoint de 239KB listo para abrir en cualquier software compatible. Junto con la presentación, Claude 4 Sonnet generó un archivo README.md documentando el proyecto, incluyendo instrucciones de uso y puntos destacados de la presentación. El resultado fue una presentación profesional, interactiva y visualmente atractiva que se alineaba perfectamente con mis criterios.

Reflexiones: el poder del desarrollo impulsado por IA

Esta experiencia demostró el poder notable de herramientas de IA como Windsurf y Claude 4 Sonnet. Con un solo prompt, transformé un esquema de alto nivel en una presentación completamente realizada de 24 diapositivas, con formato, branding y elementos interactivos. La biblioteca pptxgenjs resultó ser una elección robusta, y la capacidad de Claude para comprender mis requisitos y generar código funcional fue impresionante.

Lo que más me sorprendió fue la eficiencia. Escribir el código manualmente habría tomado horas, si no días, especialmente para asegurar un formato consistente en 24 diapositivas. Claude lo manejó en segundos, produciendo un script modular y fácil de personalizar. Las pequeñas advertencias de color fueron un leve contratiempo, fácilmente solucionables ajustando los valores hexadecimales en el script si era necesario.

Próximos pasos

Estoy encantado con el resultado y planeo utilizar esta presentación para mi sesión de capacitación de FlowHunt.io. De cara al futuro, podría mejorarla:

• Agregando imágenes o GIFs personalizados a las diapositivas (el script incluye espacios reservados)
• Refinando la paleta de colores para eliminar advertencias
• Ampliando los desafíos interactivos con instrucciones más detalladas

Este proyecto me ha inspirado a explorar más la automatización impulsada por IA para la creación de contenido. Si buscas crear presentaciones de manera rápida y eficiente, te recomiendo combinar pptxgenjs con una herramienta de IA como Claude 4 Sonnet a través de Windsurf; ¡realmente es un cambio total de juego!