frontend-slides: crea diapositivas web con un agente de código
frontend-slides es el skill de PPT de código abierto con más estrellas para agentes de código: construye presentaciones como páginas web limpias y modernas que presentas directamente en el navegador. Esta guía explica qué es, cómo instalarlo y usarlo, en qué destaca de verdad (y sus límites), cómo se compara con los demás skills de PPT de Claude y dónde entra un Agent-Native Design Workspace cuando un solo skill se queda corto.
Si quieres una presentación y ya vives en una terminal, frontend-slides es una de las formas más limpias de conseguir una. Es un skill para agentes de código: en lugar de abrir una aplicación de presentaciones, le describes la presentación al agente que ya usas, y frontend-slides convierte tu idea en diapositivas construidas como páginas web — HTML y CSS de verdad que presentas directamente desde el navegador.
También es la opción más popular de su tipo. Con 25k estrellas en GitHub y una licencia MIT, frontend-slides encabeza el creciente estante de los Claude PPT skills. Esta guía cubre qué es, cómo instalarlo y darle instrucciones, en qué destaca y dónde se detiene, cómo se compara con los demás skills de este ámbito y dónde encaja un espacio de trabajo completo cuando una presentación se convierte en un trabajo continuo.
Qué es frontend-slides
frontend-slides es un skill: un conjunto empaquetado de instrucciones que tu agente de código (Claude Code, Codex, Cursor y otros) carga a mitad de una tarea para hacer bien una sola cosa. En este caso, esa cosa es crear una presentación. Se apoya en las capacidades frontend que tu agente ya tiene y las orienta hacia las diapositivas: describes la presentación en lenguaje natural y el agente escribe páginas web limpias y modernas, una por diapositiva, que vas pasando en el navegador.
La salida es web-nativa por diseño. Como cada diapositiva es HTML y CSS, tienes control total: diseños a medida, tipografía real, degradados, transiciones, gráficos incrustados, cualquier cosa que el navegador pueda renderizar. Lo desarrolla y mantiene Zara Zhang, es de código abierto bajo MIT y, como el resto de estos skills, funciona con tu propia clave de modelo: tú aportas la clave de API, el skill aporta el oficio.
Cómo funciona
El ciclo es corto y en su mayor parte conversacional:
- Instala el skill — clona o añade frontend-slides al directorio de skills de tu agente de código (el repositorio tiene los pasos de configuración). Aporta tu propia clave de modelo.
- Describe la presentación — dale al agente el tema, el público, el tono y un número aproximado de diapositivas. Cuanto más concreto sea el brief, mejor será la estructura que construya.
- Déjalo construir — el agente genera las diapositivas como páginas web y las abre en el navegador para presentar.
- Itera — pide cambios en lenguaje natural («aprieta la introducción», «convierte la diapositiva 3 en una comparación a dos columnas», «paleta más cálida») y vuelve a renderizar. Como es solo CSS, también puedes editar cualquier cosa a mano directamente.
- Presenta o exporta — presenta desde el navegador o exporta a PDF para compartir.
En qué es bueno (y sus límites honestos)
frontend-slides da lo mejor de sí cuando quieres diapositivas web-nativas y control total sobre su aspecto. Si te manejas con HTML y CSS, nada se interpone entre tú y el diseño: puedes abrir cualquier diapositiva y cambiarla a mano, versionar toda la presentación en git y reutilizar componentes entre presentaciones. Para los desarrolladores, ahí está todo el atractivo: diapositivas que se comportan como una base de código en lugar de un archivo propietario.
Los límites honestos son la otra cara de esa fortaleza. La salida es una página web, no un .pptx, así que si tu organización necesita un PowerPoint editable con formas nativas, esta no es la herramienta (mira el cuadro comparativo de abajo para los skills que apuntan a eso). También hay un umbral de comodidad: cuanto más te alejas de HTML y CSS, menos se vende por sí solo el «control total». Y como cualquier skill individual, frontend-slides hace una presentación: no lleva tu marca de un proyecto a otro ni mantiene sincronizado un design system. Es una herramienta afilada de un solo propósito, y es honesto al respecto.
frontend-slides frente a otros Claude PPT skills
frontend-slides no es el único skill de esta categoría, y la elección correcta depende de la salida que necesites y de la licencia con la que puedas convivir.
| Herramienta | Salida | Licencia | Ideal para |
|---|---|---|---|
| frontend-slides | Diapositivas web HTML | MIT | Presentaciones web-nativas, control total del CSS |
| guizang-ppt-skill | HTML (editorial) | AGPL-3.0 | Presentaciones cuidadas, con aspecto diseñado |
| dashiAI | Presentación editable | AGPL-3.0 | Salida que un no desarrollador puede editar |
| Open Design | Presentaciones editables con la marca + plantillas | Apache-2.0 | Presentaciones ligadas a un design system, dentro de un espacio de trabajo |
Si quieres el aspecto editorial pulido, guizang-ppt-skill es el hermano con el que compararlo; si tu entregable tiene que seguir siendo editable por un no desarrollador, dashiAI está hecho para eso. frontend-slides gana cuando quieres que la presentación sea páginas web que posees por completo.
Dónde encaja Open Design
frontend-slides es un gran skill de un solo propósito para una presentación en tu terminal. Pero un skill es un script: no lleva tu marca de un proyecto a otro, no mantiene la salida editable en un espacio de trabajo real ni coordina una presentación con el resto de tu trabajo de diseño.
Open Design es la capa por encima del skill: un Agent-Native Design Workspace de código abierto (Apache-2.0), local-first y con tu propia clave, que se sitúa fuera del agente de código que ya usas. Describes una presentación; el agente genera una versión editable contra un design system, de modo que se mantiene fiel a la marca en lugar de partir de una página en blanco cada vez — y Open Design incluye sus propias plantillas de presentación HTML en su biblioteca de plugins. Es la misma idea que frontend-slides, pero con un hogar: tus archivos, tu marca, editables y tuyos para conservar. Si hoy creas diapositivas con un agente de código, mira cómo Open Design funciona con Claude Code.
Usa frontend-slides cuando quieras una presentación web-nativa rápida desde la línea de comandos. Recurre a un espacio de trabajo cuando la presentación tenga que ser fiel a la marca, editable y parte de un cuerpo de trabajo de diseño mayor.
Preguntas frecuentes
¿frontend-slides es gratis? Sí. Es de código abierto bajo la licencia MIT y de uso gratuito — tú aportas tu propia clave de API del modelo. MIT es permisiva, así que también es amigable para el uso comercial.
¿Cómo uso frontend-slides? Instala el skill en el directorio de skills de tu agente de código y luego describe la presentación (tema, público, longitud). El agente construye las diapositivas como páginas web; itera en lenguaje natural y presenta desde el navegador.
¿frontend-slides exporta a PowerPoint? No — produce diapositivas web (HTML/CSS) que presentas en el navegador, y puedes exportar a PDF para compartir. Si necesitas un .pptx editable con formas nativas, busca un skill hecho para esa salida en lugar de frontend-slides.
¿Para quién es mejor frontend-slides? Para desarrolladores que quieren diapositivas web-nativas y control total del CSS — personas cómodas viviendo en la plataforma web que prefieren versionar una presentación en git antes que abrir una aplicación de presentaciones.
¿Skill o espacio de trabajo de diseño — cuál debería usar? Un skill como frontend-slides es ideal para una presentación rápida y puntual. Un Agent-Native Design Workspace como Open Design encaja mejor cuando necesitas presentaciones editables y fieles a la marca que conviven con el resto de tu trabajo de diseño.
La conclusión
frontend-slides es la forma con más estrellas de crear diapositivas con un agente de código, y se lo gana: presentaciones web-nativas, control total del CSS, con licencia MIT, todo impulsado desde la terminal en la que ya trabajas. Si quieres una presentación rápida y pensada para el navegador y te manejas con HTML y CSS, instálalo y ponte a dar instrucciones. Cuando una presentación se convierte en un trabajo continuo y fiel a la marca que necesita seguir siendo editable y estar ligado a un design system, ahí es donde un Agent-Native Design Workspace toma el relevo.