Recortar y Editar — Cómo slides-grab Simplifica el Diseño de Presentaciones con IA
Crear presentaciones es un dolor de cabeza tradicional para la mayoría de los ingenieros. Cuando necesitas armar rápidamente un pitch, una charla para un meetup o un informe trimestral, te quedan dos opciones. La primera es luchar con editores pesados como PowerPoint o Figma. La segunda es pedirle a un LLM que genere código HTML con diapositivas.
El segundo camino parece tentador, pero rápidamente llega a un callejón sin salida con tareas rutinarias. Si necesitas cambiar la fuente en un encabezado o mover una imagen un par de píxeles a la izquierda, tienes que buscar el <div> correcto manualmente, o escribir otro prompt largo. Como respuesta, la red neuronal a menudo reescribe toda la diapositiva y rompe el diseño en bloques adyacentes.
El proyecto slides-grab ofrece una solución diferente. Es una herramienta local que combina un editor visual en el navegador, un validador de diseño y un wrapper para conectar agentes de IA.
En qué consiste el proyecto
Los autores de slides-grab partieron de un hecho simple: los modelos de lenguaje son excelentes maquetando HTML y CSS puro. El problema principal no es la generación de código, sino transmitir contexto. ¿Cómo le explicas al modelo qué elemento de la diapositiva no te gusta?
La herramienta resuelve este problema mediante la selección de áreas. Inicias un editor local, ves la diapositiva directamente en el navegador y seleccionas el bloque necesario con el ratón. El editor forma un contexto preciso para el agente de IA — por ejemplo, para Claude Code o OpenAI Codex. Escribes: "haz este bloque más oscuro y añade padding", y el agente cambia solo el fragmento HTML correspondiente.
Las ediciones menores como errores tipográficos o el tamaño del texto se pueden hacer directamente en el navegador manualmente. No necesitarás mover etiquetas en el IDE.
Cómo se organiza el trabajo con diapositivas
Todas las diapositivas se almacenan en el directorio de trabajo como archivos separados slide-01.html, slide-02.html, etc. Los archivos multimedia están cerca en la carpeta assets/. No estás atado a formatos de proveedores ni a servicios cloud cerrados. Si mañana la herramienta deja de mantenerse, seguirás teniendo código web normal.
Así es como se ve el flujo de trabajo principal con el proyecto:
- Generación de estructura y estilo. El agente crea un plan de presentación y aplica uno de los temas listos. La herramienta incluye un catálogo de 95 sistemas de diseño. Puedes seleccionar el adecuado a través del visor de galería local
slides-grab preview-styles. - Edición visual. Abres la interfaz mediante
slides-grab edit, corriges errores tipográficos manualmente, o le pides al agente que cambie un fragmento seleccionado específico. - Control de calidad. El comando
slides-grab validatelanza Chromium a través de Playwright en segundo plano. El linter verifica rutas de imágenes rotas, enlaces externos o propiedades CSS erróneas. - Exportación. El resultado puede compilarse a PDF, imágenes o una presentación de PowerPoint.
Recursos locales y manejo de medios
Normalmente, crear presentaciones encuentra un cuello de botella al buscar ilustraciones y diagramas adecuados. En slides-grab, estos escenarios se manejan directamente desde la consola.
Para la generación de imágenes, la utilidad utiliza por defecto el módulo codex-imagen. Aprovecha la autorización local de Codex CLI, por lo que ni siquiera necesitas especificar una clave API separada de OpenAI. Solo ejecuta el comando en la terminal:
slides-grab image --slides-dir decks/my-deck --prompt "Минималистичный векторный график роста метрик"
El archivo generado se guarda directamente en la carpeta assets/, y la consola devuelve una ruta relativa que es fácil insertar en HTML. Si necesitas proveedores de terceros, puedes cambiar a la API estándar de OpenAI o Google Gemini.
La situación con video y diagramas es similar:
- El comando
slides-grab fetch-videodescarga video de YouTube usandoyt-dlpy lo guarda localmente. - El comando
slides-grab tldrawconvierte diagramas del formato.tldra una imagen SVG limpia, ajustada al tamaño de la diapositiva.
Bajo el capó y matices de la exportación
La herramienta está escrita en JavaScript y se ejecuta en Node.js versión 20 y superior. El lado del servidor levanta un servidor local para el editor y se comunica con el navegador a través de Playwright.
La importación de presentaciones de otras personas está implementada de forma interesante. Si tienes un archivo PPTX corporativo listo o directrices de marca, el comando slides-grab import-template lo desglosa en colores, fuentes y cuadrículas, formando una configuración JSON. Después, el agente de IA usa estos datos como referencia para las nuevas diapositivas.
En cuanto a la exportación, la opción principal y más fiable es PDF o PNG. El comando slides-grab pdf rasteriza los fotogramas a 4K de alta resolución por defecto, preservando el diseño original píxel a píxel. Para PDFs con texto buscable, existe el indicador --mode print.
Sin embargo, debes abordar las exportaciones a PPTX y Figma con precaución. En la documentación, los desarrolladores marcan honestamente la conversión a PowerPoint como una característica experimental. Al seleccionar el motor de texto (--engine text), la herramienta intenta traducir el árbol DOM a elementos nativos de PowerPoint, pero en cuadrículas CSS complejas, el diseño puede romperse.
Cómo probarlo
Para la instalación, simplemente instala el paquete a través de npm y añade el navegador Chromium para Playwright:
npm install slides-grab
npx playwright install chromium
npx slides-grab install-skills --target all --scope user
El comando install-skills registra las habilidades de la utilidad con tus agentes locales de Claude Code o Codex. Para desarrollar tu propia presentación, no necesitas clonar el repositorio.
A quién le será útil este proyecto
slides-grab es ideal para desarrolladores, fundadores y líderes técnicos que están cansados de pasar horas alineando bloques en editores gráficos.
Las principales ventajas de la herramienta son la autonomía y el contexto preciso al trabajar con LLMs. Mantienes toda la presentación en Git como HTML legible, no dependes de plataformas SaaS de terceros, y puedes hacer ediciones fácilmente por voz o ratón.
Las desventajas son la exportación imperfecta a PPTX y la dependencia de los endpoints no públicos de Codex para la generación de imágenes integrada, que pueden cambiar con el tiempo. Sin embargo, para armar diapositivas ordenadas con exportación posterior a PDF, el proyecto parece una solución extremadamente práctica.
Proyectos relacionados