open-slide: construye presentaciones con componentes React

Crea diapositivas como código, revisa comentarios en el navegador y exporta el resultado desde un espacio preparado para agentes.

✓ verificado el 26 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en

Claude

ChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

Dificultad: intermedio
Proyecto: https://github.com/open-slide/open-slide (licencia MIT)
Guía completa: https://lab.wisd.ai/hub/open-slide-agent-framework

Para el agente: cómo acompañar al usuario

Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Paso 1: genera un espacio

Comprueba que Node.js cumple ≥20.19 y <21, o ≥22.12, según los metadatos de la CLI, y que tienes npm/npx y pnpm disponibles (el repo fija pnpm 10.17.0). En el generador selecciona pnpm y deja que termine de instalar las dependencias antes de iniciar desarrollo. Los comandos del README son:

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

Paso 2: crea una presentación pequeña

Usa las instrucciones de autoría incluidas y prueba una presentación de pocas páginas. Revisa un comentario con el inspector antes de encargar un conjunto grande de diapositivas.

Comprobación

Comprueba navegación, modo de exposición y una exportación del formato que necesitas. Revisa que no haya texto cortado y que los recursos estén incluidos.

Si algo falla

Si faltan instrucciones del agente, revisa las skills del espacio generado. Si la salida cambia de aspecto, inspecciona el formato exportado y sus limitaciones oficiales.

Qué es

open-slide es un framework para presentaciones escritas con React. Aporta el lienzo, la navegación y las herramientas de exposición para que un agente de programación construya el contenido como componentes.

Para qué te sirve

Cuando quieres revisar una presentación con el mismo control de cambios que el código.
Cuando necesitas comentar elementos concretos y pedir al agente que aplique esas observaciones.
Cuando buscas una salida HTML o una exportación a formatos de presentación.

Cómo funciona

Las diapositivas se renderizan sobre un lienzo fijo de 1920 por 1080. El proyecto generado incluye skills de autoría y un servidor de desarrollo. El inspector conserva comentarios asociados al código; el agente puede resolverlos después.

El repositorio distingue el entorno de ejecución principal y el generador de espacios. Para usarlo conviene crear un proyecto nuevo con la CLI, en vez de copiar la aplicación de demostración del monorepo.

Antes de empezar

Necesitas Node.js ≥20.19 y <21, o ≥22.12, con npm/npx para el generador; pnpm para el ejemplo de desarrollo. El repositorio fija pnpm 10.17.0. El agente que escribe React se configura aparte. Los recursos gráficos, fuentes y contenido de la presentación necesitan sus propios permisos de uso.

Límites y alternativas

Exportar no garantiza igualdad visual en todos los formatos. Revisa texto, cortes y elementos interactivos en la salida concreta. Para una presentación sencilla mantenida por personas sin código puede ser más adecuado un editor convencional.

Recursos

Repositorio y README - 9424 estrellas; licencia detectada por GitHub: MIT.
Licencia - Consulta sus condiciones antes de reutilizar el proyecto.