No vuelvas a hacer un PowerPoint en tu vida. PPTs como software

Hace unos días estaba preparando una presentación para un evento y, como con todo mi flujo de trabajo ahora mismo, pensé: ¿esto se puede hacer ahora de otra manera?

Llevo años haciendo presentaciones. Como diseñador, siempre ha recaído en mí el hacer un deck de ventas, una presentación para una charla, una ppt para una propuesta a cliente. Decenas y decenas de presentaciones.

También, desde hace años, cuando alguien me dice que necesita hacer una ppt me entran los sudores fríos y vuelven los "recuerdos de Vietnam". Para un diseñador, no poder controlar bien el espaciado entre letras, el interlineado, los estilos y el píxel al milímetro es una de las peores frustraciones a las que nos podemos enfrentar.

"Ojo, Borja. Pero puedes hacerlas en Figma." A veces. Pero cuando trabajas para otras áreas de la empresa, no puedes pedirles que aprendan Figma para que entren a cambiar un precio. Así que, muchas veces, ni siquiera es una opción.

Odio hacer ppts con todas mis fuerzas. El brillo de mis ojos se apaga con cada nueva diapositiva.

Y luego está el tema de que muchas presentaciones se vuelven estancas porque acaban exportadas a PDF para poder mandarlas por mail, y actualizarlas y versionarlas se vuelve un infierno.

No hay lado bueno en una ppt. No me vais a convencer.

Así que, con todos esos años de frustración autocontenida, dije: "hasta aquí". Hay que acabar con los PowerPoint y Google Slides pochos.

Pensé: si he podido crear vídeos fantasiosos con IA, unas cuantas slides no deberían ser un problema. Vamos a intentar crear un microsite para una presentación. A ver qué tal.

Así que voy a contaros cómo cambiamos la presentación de Cristian Córdova de Keynote a HTML para Kernel Panic!

Una charla no tiene slides. Tiene momentos.

Lo primero que hay que entender es que mucha gente no sabe hacer buenas presentaciones porque no sabe estructurar su discurso. Cuando estás encima de un escenario no piensas en enseñar la slide número 22. Piensas: primero quiero que entiendan esto. Y luego esto otro. Es una secuencia. Y una buena presentación no se basa en slides, sino en momentos.

Hablas y aparece algo. Sigues hablando y entra otra pieza. Vuelves sobre una idea y el gráfico cambia. La arquitectura crece. Algo falla. Pantalla negra. Silencio.

Siguiente idea.

Esto es importante porque parte de la idea detrás del repo y la skill que os comparto nace de ahí. De esos momentos. De esos pulsos. De esos beats. Del ritmo de la presentación.

Aquí, el maestro es @oyabun. En la LechazoConf de este año vi una de las mejores y más graciosas charlas de todas a las que he asistido.

El tío lleva un pinganillo con un metrónomo en la oreja que le marca el beat. Ensaya y practica con esta idea de llevar el ritmo. Como si fuera nuestro Michael Jackson extremeño. Y el resultado es increíble. Sabe exactamente cuándo subir, cuándo bajar la intensidad, cuándo hablar y cuándo callar. Convierte la presentación en musicalidad.

Por eso, después de ver un poco cómo lo hace, he estructurado el repo y la skill en "beats". No slides.

Beats.

Un beat es algo que sucede cuando avanzas la presentación. Puede aparecer una frase. Puede entrar un gráfico. Puede dibujarse una conexión. Puede aumentar un contador. Puede arrancar un terminal.

Varios beats pueden ocurrir dentro de una misma escena.

Por ejemplo, en vez de crear cuatro diapositivas:

• Servidor

• Servidor + GPU

• Servidor + GPU + Kubernetes

• Servidor + GPU + Kubernetes + Cloudflare

puedes tener una sola escena que va construyéndose mientras explicas la arquitectura.

Click. → Aparece la GPU.

Click. → Kubernetes.

Click. → Cloudflare.

La pantalla sigue tu explicación en lugar de obligarte a adaptar la explicación a la pantalla.

Parece una diferencia pequeña. No lo es.

Los diseñadores llevamos mucho tiempo trabajando en estas microinteracciones en todas las aplicaciones que utilizáis para que sean perfectamente imperceptibles (que no te distraigan), pero que hagan la experiencia más agradable.

En las presentaciones ocurre lo mismo.

Esto siempre se pudo hacer con HTML

Llevamos muchos años pudiendo hacer presentaciones en HTML. Tenemos Reveal.js, Impress.js, Slidev y un montón de proyectos similares.

Y un navegador puede hacer prácticamente cualquier cosa que podamos imaginar:

• animaciones;

• SVG;

• Canvas;

• vídeo;

• audio;

• gráficos;

• visualizaciones de datos;

• WebGL;

• terminales;

• demos interactivas;

• interfaces completas.

El navegador probablemente sea uno de los motores gráficos más potentes y accesibles que tenemos instalados en cualquier ordenador.

El problema es que, hasta ahora, hacer una buena presentación en HTML era muchísimo trabajo. En PowerPoint te puedes tirar dos horas arrastrando cajas, pero con HTML tienes que instalar librerías, componentes, CSS, animaciones, estados, responsive, etc.

No merecía la pena dedicar ese tiempo.

Usando la IA para hacer el bien (el bien = cargarse el PowerPoint)

Hacer una ppt en HTML antes era costoso. Ahora el coste se reduce a cero.

Ahora puedo abrir Pi, Claude Code, Cursor o cualquier agente de código y escribir algo así:

Esta escena empieza con una única GPU en el centro. Luego aparecen otras tres y la primera se hace pequeña para que tengan todas el mismo tamaño.Después entra Kubernetes por encima y conecta todas las GPUs.En el siguiente paso aparece Cloudflare delante.Las conexiones deben dibujarse progresivamente.Cuando llegue al último punto, quiero que todo falle como un kernel panic y la pantalla se quede negra durante medio segundo.

Lo que antes era una especificación para alguien de frontend, ahora es un prompt.

Y, sobre todo, puedes iterar sobre él. De manera muy sencilla.

La animación entra demasiado rápido.Haz más grande la GPU central.En el segundo estado todavía no quiero enseñar Kubernetes.El gráfico de la izquierda compite demasiado con el título.Haz que la transición sea más violenta.

Ese cambio reduce muchísimo la distancia entre tener una idea visual y poder verla funcionando. Y a los que no sabemos programar nos da la vida.

No hace que diseñar una buena presentación sea automático. Tienes que tener gusto.

Pero elimina la ventaja que tenía PowerPoint: la pura comodidad.

Esta es la presentación que me compartió Cristian para el evento de Kernel Panic!

https://docs.google.com/presentation/d/1x0Wv9um-CknX8_XromK8n3_coIMtLx7ahAAavU0wfU0/edit?usp=sharing

Sin desmerecer su trabajo, es una persona que se pasa el día en una terminal y a la que el frontend y el diseño se le hacen bola, como él mismo ha dicho alguna vez.

Así que dije: ¿cómo podemos pasar esto a algo realmente chulo? A la altura de la marca que estamos creando. A la altura del evento que queremos hacer. Elevar la experiencia.

Y me puse manos a la obra. Partiendo de nuestro sistema de diseño, escribí un prompt bastante simple:

"Quiero pasar esta keynote a una presentación visual espectacular. Un pequeño microsite que permita presentar en una conferencia con un ratón, teclado o pasador de diapositivas. Trabaja muy bien las animaciones, interacciones y el ritmo de la presentación."

No era el mejor prompt del mundo, pero quería ver hasta dónde podíamos llegar. En un par de prompts había construido el motor de renderizado y tenía un sistema.

Este es el resultado final de la ppt que Cristian presentó ayer: helmcode.com/slides/kernel-panic

Obsesión por el cuidado, por el detalle, por la marca, por la impresión que dejas y por la experiencia de quien te lee/ve.

Creando un sistema: Beatdeck

El problema de hacer cosas con agentes es que, si no les das contexto, tienden a reinventar el mundo cada vez. Y cada vez lo hacen de manera diferente. He aprendido que si vas a reutilizar algo mucho, debes sistematizarlo.

Yo ya sabía más o menos cómo quería construir mis presentaciones. Quería escenas, beats, navegación con teclado. Quería poder abrir una URL concreta y llegar exactamente al mismo estado.

Quería overview. Quería animaciones. Y quería que funcionase sin Internet.

Y, sobre todo, quería que un agente pudiera entender rápidamente cómo construir una presentación dentro de ese sistema.

Así nació Beatdeck. No pretende ser un PowerPoint construido con React. Dios me libre.

La idea tiene que ver con mi manera de presentar: talks as beats, not slides.

Una presentación tiene escenas. Cada escena tiene beats.

Y cada combinación de ambos representa un estado concreto de la presentación.

• scene 1: beat 1, beat 2, beat 3

• scene 2: beat 1, beat 2

• scene 3: beat 1

Eso significa que puedo estar, por ejemplo, en:

#3.4

y ese estado siempre debe representar exactamente lo mismo.

Puedo refrescar. Puedo entrar directamente por URL. Puedo avanzar hasta allí. Puedo retroceder hasta allí y el resultado tiene que ser idéntico.

Parece una obviedad, pero no lo es cuando empiezas a trabajar con un agente no determinista que de repente te ha cambiado una slide "por la cara".

Fijar el resultado ayuda a poder hacer cambios y poder decirle:

En la 3.4 mueve el gráfico un poco hacia arriba.

Y ambos sabemos exactamente de qué frame estamos hablando, qué gráfico y que no hay que tocar nada más.

Una presentación empieza a parecerse bastante a software

Esta es seguramente mi parte favorita. Y eso que no entiendo nada de hacer software.

Una vez que la presentación es una aplicación web, desaparecen muchas de las restricciones que damos por normales. Todo se puede hacer. Eres un semidios del PowerPoint.

¿Quieres un contador animado? Lo haces.

¿Quieres simular una terminal? Lo haces.

¿Quieres dibujar una arquitectura nodo a nodo mientras explicas cómo funciona? Lo haces.

¿Quieres que una gráfica cambie con cada beat? Lo haces.

¿Quieres partículas en el fondo? Lo haces.

¿Quieres meter Three.js? También.

¿Quieres que durante 500 milisegundos toda la presentación colapse y aparezca un kernel panic? ¿Por qué no?

En la presentación de Kernel Panic! que construí con Beatdeck hay decenas de beats, arquitecturas que van creciendo durante la charla, terminales, animaciones persistentes y un crash que corta la pantalla completamente a negro.

Una ppt tiene centenares de limitaciones. Ahora, si se puede hacer en el navegador, es posible.

Pero hacer cosas bonitas con IA sigue teniendo un problema

Cuando le pides algo a un modelo sin suficiente contexto, es probable que decida también qué partes de tu documento eran importantes, cuáles podía eliminar, qué títulos podía reescribir y qué datos podía simplificar.

Esto puede ser un problema si trabajas con cifras, benchmarks, nombres, arquitectura, citas…

Por eso en Beatdeck acabé creando no solo el framework, sino también una skill para agentes.

La idea era enseñarle a cualquier LLM cómo trabajo. La skill describe ese proceso:

1- Antes de empezar a diseñar una presentación, el agente tiene que entender las fuentes.

2- Después crea un mapa del contenido.

3- Decide qué se conserva y qué se elimina. Qué puede resumirse y qué debe aparecer literalmente.

4- Después convierte ese contenido en escenas y beats.

5- Después piensa la dirección visual.

6- Después implementa.

7- Y después verifica el resultado.

Más o menos:

fuentes → content audit → beat map → dirección visual → implementación → verificación

La idea es empaquetar formas de trabajar con software. En este caso, una presentación.

No le das a un agente únicamente un repositorio y ale, p'alante. Le das tus criterios y tus restricciones. Decisiones que ya has tomado antes. Y le dices cómo quieres que se comporte.

Dale un PowerPoint viejo y pídele que lo reconstruya

Este es uno de los usos que más gracia me hace. Se lo he pasado a un par de personas y flipan.

La skill puede partir de un PPTX existente. Extrae el contenido, entiende lo que estabas intentando contar y reconstruye la presentación usando escenas y beats.

La instrucción puede ser prácticamente:

Turn talk.pptx into a Beatdeck.

No significa que pulses Enter y mágicamente tengas una keynote perfecta. Seguimos hablando de diseño. Y tú eres la persona con criterio a los mandos de la herramienta. Tienes que mirar el resultado, decidir qué cosas quitar, ajustar el ritmo, corregir… Pero el trabajo mecánico de mover cajas, copiar texto y formatos y frustrarte desaparece.

Una tontería, pero también acabé creando tests para presentaciones

Beatdeck tiene un comando de verificación:

npm run verify

Y la idea es comprobar automáticamente cosas que no quieres que te pasen en un auditorio delante de 300 personas.

Recorre la presentación hacia delante. La recorre hacia atrás. Entra directamente en distintos beats. Comprueba que esos estados sean deterministas. Busca errores de consola. Comprueba que el contenido no se salga del escenario. Busca solapamientos. Comprueba que no haya dependencias externas. Y genera una especie de contact sheet con todos los estados para poder revisar visualmente el deck entero.

Es decir: tests para una keynote.

Lo mejor de todo es que yo no tengo ni idea de construir tests para software. Pero sí que sé eliminar el riesgo y revisar antes de entregar. Así que, ¿por qué no automatizarlo?

Si estamos construyendo la presentación como software, podemos aprovechar las cosas buenas de construir software.

El presentador también necesita una interfaz

Beatdeck tiene presenter view.

Puedes ver:

• dónde estás;

• qué viene después;

• tus notas;

• el tiempo;

• la escena actual.

También hay overview para saltar rápidamente entre escenas, fullscreen y blackout.

Nada especialmente revolucionario.

Pero era importante para mí que esto fuese una herramienta para dar una charla, no simplemente una web que parece una presentación. Esto la hace usable y reutilizable.

Haz lo que te dé la gana con Beatdeck

Beatdeck es mi manera de resolver este problema. Puedes usarlo. Puedes hacer un fork.

Puedes no utilizarlo y montarte algo completamente diferente.

El repositorio está aquí: github.com/borjaperfra/beatdeck

Pero lo que me parece realmente interesante es el cambio de contexto.

Hace cinco años, decir "para la presentación del jueves voy a hacer una aplicación React con animaciones SVG y Canvas" era probablemente una mala decisión. Y muy mala si eras un tipo de marketing que difícilmente sabe centrar un div.

Hoy puede ser más rápido que pelearte con las animaciones de PowerPoint. Y estoy seguro de que dentro de un par de años nos parecerá bastante normal.

No hace falta borrar PowerPoint mañana

Obviamente, el título de este artículo tiene una parte de provocación. PowerPoint sigue siendo extremadamente útil (no para mí).

Si tienes que preparar algo en veinte minutos, probablemente úsalo.

Si ocho personas tienen que editar el mismo deck, probablemente úsalo. Aunque también puedes compartir el repo de GitHub.

Si lo que estás creando realmente es un documento que después mandarás por email, probablemente úsalo.

Tiene mucho sentido para montar la estructura de la presentación, el boceto, si necesitas hacerlo visual. Yo ahora parto de un guion que transformo en un guion técnico para slides con un LLM y luego se lo tiro a Beatdeck.

De todas formas, si estás preparando una keynote, una presentación de producto, una charla técnica, un lanzamiento, una demo, una presentación que realmente importa…

Creo que merece la pena preguntarse si una colección de rectángulos sigue siendo el mejor formato posible. xD

Porque ahora la alternativa ya no requiere a un frontend (con perdón, no quiero ofender ni molestar a nadie).

Una presentación puede ser un programa

Creo que hemos pasado uno de esos pequeños puntos de inflexión que inicialmente parecen una mejora de productividad.

Montar un buen HTML para presentar es tan fácil como darle el guion a Beatdeck y dejarlo trabajando. Antes requería mucho tiempo y foco.

La limitación técnica se ha reducido muchísimo.

AUNQUE eso no sustituye tener una buena historia, ni sustituye saber diseñar. No sustituye saber qué quieres contar.

De hecho, probablemente haga esas cosas todavía más importantes.

Yo, al menos, voy a intentar no volver a hacer un PowerPoint en mi vida.