Cómo Convertir un Agente de IA en un Ingeniero de Diseño de Diapositivas con open-slide

Cada vez que necesito preparar una presentación para un meetup o reunión interna, me descubro procrastinando. Ajustar fuentes y alineación de bloques en PowerPoint y Google Slides es tedioso. Las herramientas Markdown como Marp o Slidev facilitan el diseño, pero si quieres animaciones no estándar, gráficos interactivos o un recuadro de llamada elegante, el marcado rápidamente se queda corto.

Parecería que las redes neuronales ahora escriben código React excelentemente. Pero si le pides a Claude Code o Cursor que construya una presentación desde cero, escribirán una docena de componentes desconectados, olvidarán el escalado de pantalla, se enredarán con el enrutamiento y te dejarán tratando con errores de diseño por tu cuenta.

El proyecto open-slide resuelve exactamente este problema. Es un framework de presentaciones diseñado específicamente para trabajar junto con agentes de IA.

La Idea del Proyecto

El creador de open-slide razonó de forma sencilla: las diapositivas son código visual, y los agentes modernos escriben código rápidamente sin quejarse. El único problema es el entorno de ejecución.

En lugar de inventar su propio lenguaje de marcado limitado (DSL), open-slide le proporciona al agente React estándar y maneja todo el trabajo rutinario por sí mismo. El framework bloquea el canvas en 1920 × 1080 píxeles, asegura el escalado adaptativo para cualquier monitor, configura el cambio de pantalla, hot reloading y el modo presentador.

El agente solo necesita generar componentes siguiendo reglas de marcado claras, sin distraerse con la infraestructura.

npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

Después de la inicialización, el proyecto ya contiene scripts listos para Claude Code e instrucciones del sistema que explican la estructura del canvas, tipografía y paleta al modelo.

Ciclo de Edición Incorporado a través del Inspector

Usualmente, trabajar con IA en elementos visuales se convierte en intentos interminables de explicar verbalmente: "mueve ese botón gris en la tercera diapositiva ligeramente a la izquierda del título". El modelo comete errores, edita el archivo equivocado y el diálogo se alarga.

open-slide tiene un inspector visual incorporado directamente en el servidor de desarrollo:

1. Abre las diapositivas en el navegador y haz clic en cualquier elemento.
2. En el campo que aparece, escribe un comentario: "oscurece el fondo", "reduce el tamaño del título" o "agrega relleno inferior".
3. El framework guarda estas notas directamente en el código fuente como marcadores @slide-comment.
4. Ejecuta el comando /apply-comments en la terminal con el agente.
5. El agente lee los marcadores, hace las ediciones en JSX, elimina los comentarios y recarga la página.

Este ciclo de edición ahorra muchos nervios. Tú desempeñas el rol de un director de arte dejando notas adhesivas en el diseño mientras la red neuronal repara los componentes.

Búsqueda de Logotipos y Gestión de Recursos

Si estás haciendo un pitch o una charla técnica, la mitad del tiempo se va buscando logotipos SVG de tecnologías. open-slide tiene un catálogo svgl incorporado. Solo abre el panel de recursos, escribe el nombre de la biblioteca o servicio, e inserta el icono vectorial directamente en el código de la diapositiva.

El panel de recursos también te permite importar centralmente fuentes locales, imágenes y videos para que no tengas que organizarlos manualmente en carpetas dispersas del proyecto.

Exportación y Presentación

Para presentaciones en vivo, el proyecto incluye un modo presentador completo. Una pantalla separada muestra la diapositiva actual, vista previa del siguiente paso, temporizador de la presentación y notas del orador.

Una vez que la presentación está lista, puedes compilarla en un bundle completamente estático:

• Genera un archivo HTML independiente que se abre sin servidor y puede desplegarse en Vercel, Netlify o Cloudflare Pages.
• Exporta la presentación a PDF para imprimir o enviar a los organizadores de conferencias.

Si acumulas muchas presentaciones, el administrador de presentaciones incorporado las organiza en carpetas con emojis y soporta ordenamiento a través de simple arrastrar y soltar.

Estructura del Repositorio

Internamente, open-slide es un monorepo basado en pnpm y Turborepo:

• El paquete @open-slide/core contiene el runtime central, motor de escalado del canvas, inspector de edición, plugin de Vite e interfaz CLI.
• El paquete @open-slide/cli maneja la inicialización de nuevos proyectos, ocultando las configuraciones de compilación dentro del núcleo para evitar saturar el árbol de archivos de trabajo.
• Dentro hay una demo apps/demo donde el autor prueba nuevos lanzamientos.

El stack es completamente TypeScript, con Biome rápido para linting y formateo, y el proyecto usa la licencia permisiva MIT.

Quién Encontrará Esto Útil

Si estás acostumbrado a construir presentaciones solo con el ratón en Figma o Keynote, cambiar a indicaciones de texto puede sentirse unfamiliar. Pero para desarrolladores que regularmente dan charlas y ya usan Claude Code o Cursor en su trabajo diario, open-slide podría ser una alternativa sólida a las herramientas tradicionales de diapositivas.

Obtienes acceso completo al ecosistema de React: inserta una escena interactiva de Three.js, un editor de código Monaco funcional o un gráfico de Recharts, mientras dejas que la red neuronal maneje el trabajo pesado del diseño.