Probada en una tarea realComunidad, verificadaDocumentos y Office
Frontend Slides
Una presentación animada y diseñada a medida en un solo archivo HTML, con un estilo que eliges entre tres vistas previas reales.
Instala Frontend Slides gratis
Deja tu email y los pasos de instalación se abren aquí mismo: un prompt para pegar en tu herramienta de IA. Sirve para las 149 skills.
- Nuestra nota
- 7/10
- Funciona en
Claude, ChatGPT+7 más
Claude Code, Claude app, Codex, ChatGPT, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf y más de 60 herramientas de IA que leen skills.
- ¿Hace falta programar?
- No
- Tiempo hasta el resultado
- 30 min
- Creado por
- Zara Zhang
- Probada
- 19 oct 2026
La respuesta corta
Frontend Slides es una skill de Claude que crea presentaciones como un solo archivo HTML que corre en cualquier navegador, o convierte un PowerPoint existente en uno. En vez de pedirte que describas un estilo, te muestra tres vistas previas reales de la diapositiva de título y arma toda la presentación con la que elijas. Nuestro veredicto es 7/10: con el mismo prompt de venta Claude sin la skill hizo una presentación limpia pero genérica, mientras que la skill hizo una con un look a medida y un relato de venta más afilado, aunque tardó más y dejó un par de pequeños fallos.
Ideal para: Presentaciones de venta, charlas y talleres donde quieres diapositivas que parezcan diseñadas a medida, elegidas entre tres vistas previas, sin abrir PowerPoint.
¿Quieres este resultado en tu propio trabajo?
Regístrate gratis e instala Frontend Slides en un minuto. Un solo email abre los pasos de instalación de todas las skills del sitio.
Cuándo vale la pena usarla
Ofrece un producto a empresas
En nuestra prueba, la dueña de un taller de cerámica pidió una presentación de 8 diapositivas para dueños de cafeterías. Obtuvo una presentación con el estilo de su propio producto (arcilla moteada, colores de esmalte, un sello con logo) con el precio, el pedido mínimo y el total del primer pedido al frente.
Convierte un PowerPoint en una presentación web
Tienes un archivo .pptx viejo. Extrae el texto, las imágenes, el orden de las diapositivas y las notas del orador, te muestra lo que encontró y luego rehace la presentación con un estilo nuevo que eliges.
Presentación para leer, para clientes o equipos
La gente la va a leer por su cuenta en vez de verte presentar. Elige la densidad para lectura y las diapositivas se vuelven autosuficientes, con tablas, comparaciones y explicaciones cortas, repartidas en más diapositivas en vez de amontonadas.
Cómo conseguir un gran resultado
Pide una presentación
Instálala (pasos abajo) y luego pide una presentación con palabras simples, o apunta a Claude a un archivo .pptx para convertir. Da tus datos y fotos en el mismo mensaje.
Responde cuatro preguntas de una vez
Pregunta el propósito, la extensión, si tu contenido está listo y la densidad: guiada por quien presenta con pocas palabras por diapositiva, o para lectura con más detalle. Respóndelas en un solo mensaje.
Elige entre tres vistas previas
Claude hace tres diapositivas de título animadas: un preset seguro, al menos una plantilla audaz y un comodín que puede diseñarse solo para ti. En nuestra prueba ganó el comodín a medida, porque estaba construido a partir del propio producto.
Revisa cada diapositiva antes de presentar
La presentación va sobre un escenario fijo de 16:9 que se adapta a cualquier pantalla. Recorre cada diapositiva: en nuestra prueba aparecían dos contadores de página en cada una y uno tapaba una línea de texto, así que pídele a Claude que arregle cualquier cosa así.
Edita y luego exporta o comparte
Presiona E o pasa el mouse por la esquina superior izquierda para editar texto en el navegador, y luego Ctrl+S para guardar una copia. Pide un PDF (cada diapositiva se vuelve una imagen) o un enlace para compartir, que necesita una cuenta gratuita de Vercel.
Este es el prompt exacto con el que empezamos nuestra prueba:
Haz una presentación de 8 diapositivas que ofrezca las tazas al por mayor de Clay & Co a dueños de cafeterías locales, como un solo archivo HTML, out/deck.html, que pueda presentar desde un navegador con las flechas del teclado.Todo lo que creó
Cada pieza de abajo es un resultado real de nuestra prueba, abierto tal como lo abrirías tú.
Cómo fue la sesión
La conversación de nuestra prueba, resumida. Unos 30 minutos desde el primer prompt hasta el resultado final.
- Tú: Haz una presentación de 8 diapositivas que ofrezca las tazas al por mayor de Clay & Co a dueños de cafeterías locales, como un solo archivo HTML, out/deck.html, que pueda presentar desde un navegador con las flechas del teclado. (Se entregaron datos del taller y 8 fotos. No se permitían preguntas.)
- AI: Normalmente haría cuatro preguntas. Mis decisiones: presentación de venta, corta (8 diapositivas), todo el contenido listo, poca densidad porque la vas a presentar en vivo.
- AI: Elegí la C, Speckled Clay. El fondo moteado es la arcilla de la taza, el baño de esmalte Midnight y los azulejos de prueba muestran la elección de esmalte, y el sello redondo representa el sello con logo de +$2. Es cálido y artesanal pero sigue siendo creíble para hablar de precios.
- AI: Tu presentación está en out/deck.html, estilo Speckled Clay, 8 diapositivas. Avanza con las flechas, Espacio o Re Pág; Inicio y Fin saltan a la primera y la última diapositiva; desliza en pantallas táctiles. Presiona E para editar cualquier texto en el navegador; Cmd o Ctrl+S guarda una copia editada. Solo se usan tus datos. $456 y $504 son 24 tazas a $19 y a $21 con el sello del logo. Los datos faltantes son placeholders con borde punteado: mayorista...
Qué funcionó y dónde se quedó corta
Qué funcionó
- Un diseño hecho para este producto: la presentación de Claude sin la skill era un layout limpio pero genérico crema y serifa, mientras que el estilo a medida de la skill convirtió la arcilla moteada, el baño de esmalte y el sello del logo en el look de cada diapositiva.
- Vende con más fuerza: el precio de $19, el mínimo de 24 tazas y la elección de esmalte están en la diapositiva de título, y la diapositiva de precios pone $19 junto al precio de $34 de la tienda con un total de primer pedido de $456.
- Tres vistas previas reales de la diapositiva de título para elegir en vez de describir un estilo con palabras; las dos que no eligió quedan guardadas como archivos.
- Se ciñó a los datos, marcando los faltantes (condiciones de entrega, fotos de cada esmalte en una taza) como placeholders, y puedes presionar E para editar cualquier texto en el navegador.
Dónde se quedó corta
- Cada diapositiva muestra dos contadores de página ('3 / 8' abajo y '03 / 08' a la derecha), y en la diapositiva 5 el contador queda encima del texto del placeholder.
- Tomó unos 30 minutos contra 12 de Claude sin la skill, sobre todo en vistas previas y correcciones.
- La diapositiva 7 dedica espacio a los talleres del estudio, que es un tema secundario en una oferta mayorista, y Claude sin la skill señaló un dato por el que preguntaría una cafetería (si son aptas para lavavajillas y microondas) que la presentación de la skill omitió.
¿Quieres este resultado en tu propio trabajo?
Regístrate gratis e instala Frontend Slides en un minuto. Un solo email abre los pasos de instalación de todas las skills del sitio.
Prompts que funcionan
Cambia las partes entre corchetes por tus propios datos. No hace falta nombrar la skill: pide el trabajo y tu herramienta de IA la usa sola.
Haz una presentación de [8] diapositivas que ofrezca [mi producto] a [tipo de comprador, p. ej. dueños de cafeterías locales], como un solo archivo HTML que pueda presentar desde un navegador con las flechas del teclado. Datos: [precios, mínimos, plazos, reseñas, contacto]. Usa solo estos datos y pon un [placeholder] bien marcado donde necesites más.Hazme una presentación para una charla de [10 minutos] en [evento] sobre [tema]. Mis notas sueltas: [pega las notas]. Poca densidad, voy a estar hablando.Convierte [pitch.pptx] en una presentación web animada. Conserva todo el texto, las imágenes, el orden de las diapositivas y las notas del orador.Haz una presentación para lectura que [mi cliente / mi equipo] pueda leer sin que yo la presente: [tema, p. ej. nuestra propuesta de proyecto]. Incluye [una tabla comparativa / una línea de tiempo / precios]. Este es el contenido: [pégalo].Lo que necesitas: Las skills de la app de Claude funcionan en todos los planes de Claude, incluido Free, con la ejecución de código y la creación de archivos activadas; Claude Code necesita Pro o superior., Un navegador moderno para presentar; internet para las fuentes de Google, Opcional: para exportar a PDF, Node y Playwright (descarga un navegador); para un enlace para compartir, una cuenta gratuita de Vercel.
Cómo instalarla
Las skills siguen el estándar abierto Agent Skills, así que esta no depende de una sola empresa. Elige la herramienta de IA que usas. ¿No lo tienes claro? La primera pestaña cubre la mayoría en un solo paso.
Instala esta skill para que funcione en todos mis proyectos: ejecuta `npx skills add https://github.com/zarazhangrui/frontend-slides -g -y` en mi terminal. Si falta Node.js, dime primero cómo instalarlo. Cuando termines, confirma que la skill quedó instalada y dime cómo empezar a usarla.O hazlo tú mismo:
Un solo comando instala la skill en las herramientas de IA de tu computadora. Detecta las que tienes y te pregunta en cuáles añadirla: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode y más de 60 más.
npx skills add https://github.com/zarazhangrui/frontend-slides -gNecesitas tener Node.js instalado (gratis, en nodejs.org). La opción -g hace que la skill esté disponible en todos tus proyectos.
Bueno saber: El resultado es HTML simple, así que las presentaciones se abren en cualquier navegador y se pueden exportar a PDF.
Desbloquea los pasos de instalación
Gratis. Deja tu email una vez para abrir los pasos de instalación de las 149 skills y recibir cada mes las mejores skills nuevas.
Cómo lo verificamos
Confirmamos la skill en su fuente original el 18 de octubre de 2026: el SKILL.md está donde debe estar, los archivos se actualizaron en el último año y la licencia (MIT) permite usarla. Después, el 19 de octubre de 2026, la instalamos, la usamos en la tarea de arriba sin modificarla y anotamos lo que pasó, incluido lo que salió mal.
Preguntas frecuentes
¿Necesito programar para usar Frontend Slides?
No. Respondes algunas preguntas, eliges un estilo entre vistas previas y editas el texto directamente en el navegador. La presentación es un archivo HTML; para cambiar colores o fuentes después, solo pídeselo a Claude.
¿Qué plan y herramientas necesita Frontend Slides?
Las skills de la app de Claude funcionan en todos los planes de Claude, incluido Free, con la ejecución de código y la creación de archivos activadas; Claude Code necesita Pro o superior. Presentas en cualquier navegador moderno. La exportación a PDF usa Node y Playwright, y un enlace para compartir necesita una cuenta gratuita de Vercel.
¿Frontend Slides funciona en Claude.ai?
Sí. Puedes subirla a Claude.ai como skill en Personalizar > Skills, o usarla en Claude Code; los pasos de instalación están abajo. La exportación a PDF y los enlaces para compartir corren scripts que descargan un navegador o inician sesión en Vercel, así que encajan mejor en Claude Code en tu propia computadora.
¿Es mejor que simplemente pedírselo a Claude?
En nuestra prueba, sí en diseño, no en velocidad. Claude sin la skill hizo una presentación limpia y genérica crema y serifa en unos 12 minutos; con la skill, Claude mostró tres vistas previas de estilo y armó un look a medida a partir del propio producto (arcilla moteada, colores de esmalte, un sello con logo) con el precio en la primera diapositiva, en unos 30 minutos. Ambas se ciñeron a los datos; la presentación de la skill tenía contadores de página duplicados que limpiar.
¿Frontend Slides puede exportar a PDF o PowerPoint?
A PDF, sí: un script toma una captura de cada diapositiva a 1920 por 1080 y las une, así que las animaciones se vuelven imágenes fijas. Exportar a PowerPoint no es parte de la skill; convierte de .pptx a HTML, no al revés.
Más skills que vale la pena ver
- ProbadaProbada por el equipo de ai school: instalamos esta skill, la usamos en una tarea real y le pusimos un 8/10.PowerPoint Presentations (PPTX)Crea, edita y rediseña presentaciones de PowerPoint, con plantillas y notas del oradorNota de la prueba8/10
- ProbadaProbada por el equipo de ai school: instalamos esta skill, la usamos en una tarea real y le pusimos un 9/10.Excel Spreadsheets (XLSX)Crea y repara libros de Excel con fórmulas que funcionan, gráficos y datos limpiosNota de la prueba9/10
- ProbadaProbada por el equipo de ai school: instalamos esta skill, la usamos en una tarea real y le pusimos un 9/10.Word Documents (DOCX)Crea, edita y revisa archivos de Word con control de cambios, comentarios y formato realNota de la prueba9/10