Crea diapositivas web con Frontend Slides de Claude Code

Crea Diapositivas Web Hermosas con Frontend Slides de Claude Code

Si alguna vez has tenido dificultades para producir presentaciones web limpias y animadas sin aprender las complejidades de CSS, JavaScript o empaquetadores, la habilidad Frontend Slides es un regalo divino. Diseñada como una habilidad oficial de Claude Code, permite a cualquiera crear un solo archivo HTML autocontenido que puede abrirse, compartirse o incrustarse al instante.

---

Por qué Esta Herramienta Importa

• Sin Dependencias – No npm install, sin paso de compilación, sin framework que monitorizar. Sólo una carpeta, algunos archivos Markdown y un único archivo HTML.
• Descubrimiento Visual de Estilo – En lugar de escribir el nombre de un estilo o buscar un tema, la herramienta genera vistas previas visuales que te permiten elegir la apariencia que prefieras.
• Conversión PowerPoint a Web – Las presentaciones que antes estaban encerradas en archivos PowerPoint se convierten en diapositivas responsivas y accesibles en segundos.
• Accesibilidad y Responsividad – La salida está diseñada para funcionar en escritorio, tableta y móvil, con soporte de movimiento reducido.
• Código Listo para Producción – CSS/JS en línea, marcado semántico y comentarios exhaustivos hacen que el código sea comprensible y modificable de inmediato.

---

Iniciando – Instalación

1. Clona o Descarga el repositorio:

   git clone https://github.com/zarazhangrui/frontend-slides.git
   

   o descarga el ZIP desde GitHub.

2. Instala la Habilidad – Para usuarios de Claude Code:

   mkdir -p ~/.claude/skills/frontend-slides
   cp frontend-slides/README.md ~/.claude/skills/frontend-slides/
   cp frontend-slides/SKILL.md ~/.claude/skills/frontend-slides/
   cp frontend-slides/STYLE_PRESETS.md ~/.claude/skills/frontend-slides/
   

   Si no estás usando Claude Code, simplemente copia los dos archivos (SKILL.md y STYLE_PRESETS.md) en la carpeta de tu elección.

3. Ejecuta la Habilidad – En una terminal de Claude Code escribe:

   /frontend-slides
   

   Para usuarios que no usan Claude, puedes ejecutar el script auxiliar en Python para importar un PPT y generar el resultado:

   python convert_ppt.py <file.pptx>
   

---

Usándolo: Desde la Entrada a la Presentación

1. Describe Tu Colección – Cuando invocas /frontend-slides, el bot pregunta algunas dudas rápidas sobre el contenido, tono, sensación deseada y cualquier indicio de marca.
2. Elige un Estilo – Tras proporcionar la información básica, la habilidad genera un catálogo interactivo de precios de estilo (p. ej., Neon Cyber, Paper & Ink, Brutalist). Elige el que te atraiga.
3. Generar – La habilidad compila un único index.html que contiene todas las diapositivas, navegación, animación y estilo. ¡Listo!
4. Ver – Abre el archivo en cualquier navegador; la navegación funciona con teclas de flecha, rueda del ratón o toque.

---

Conversión PowerPoint

Si posees una presentación antigua:

1. /frontend-slides
2. Escribe: "Convert my presentation.pptx to a web slideshow"
3. La herramienta extrae todo el texto, imágenes y notas del orador, luego te guía en la selección de estilo.
4. El HTML resultante conserva los activos originales y la fidelidad del diseño.

---

Explorando los Presets Integrados

Tema	Estilo	Caso de Uso Ideal
Neo‑Cibernético (Neón)	Futurista, efectos de partículas	Demostraciones tecnológicas, pitches de agencias digitales
Ejecutivo Nocturno	Corporativo, confiable	Propuestas de negocio, presentaciones corporativas
Espacio Profundo	Cinemático, inspirador	Teasers de startups, narración creativa
Terminal Verde	Estética hacker	Charlas de desarrollo, comunidades de código abierto
Papel e Tinta	Editorial, refinado	Conferencias académicas, diapositivas literarias
Suiza Moderna	Limpio, geométrico	Agencias de diseño, presentaciones concisas de datos
Pastel Suave	Amistoso, juguetón	Talleres, participación juvenil
Brutalista	Bruto, audaz	Activismo, presentaciones vanguardistas
Ola de Gradiente	Estética SaaS	Lanzamientos de productos

Siéntete libre de añadir tus temas personalizados modificando STYLE_PRESETS.md o escribiendo tu propio CSS en línea. La habilidad incluso soporta --style=custom para usuarios avanzados.

---

¿Por qué “Sin Dependencias”?

• Longevity – El único archivo HTML seguirá funcionando en cualquier navegador moderno durante años, sin importar el deprecado de frameworks.
• Seguridad – No se cargan scripts externos ni llamadas de red desde el conjunto final.
• Simplicidad – Cualquiera puede modificar el archivo directamente en un editor de texto.

---

Limitaciones y Próximos Pasos

• El sistema de vistas previas actual está limitado a imágenes estáticas. Las próximas versiones añadirán previews interactivas.
• Las animaciones se generan usando CSS integrado. Los usuarios pueden querer crear animaciones JS más complejas a mano.
• Se planea la integración con otras herramientas CLI (p. ej., Markdown a PPT).

---

¿Listo para Crear Tus Diapositivas?

Ya sea que no seas diseñador y busques un aspecto pulido, o un desarrollador que quiera agilizar su flujo de trabajo, Frontend Slides entrega resultados de nivel de producción sin la sobrecarga de una pila web. Clona el repositorio, instala la habilidad y deja que Claude Code te ayude a hablar visualmente.

# Instalación rápida
git clone https://github.com/zarazhangrui/frontend-slides.git
cp frontend-slides/SKILL.md ~/.claude/skills/frontend-slides/
cp frontend-slides/STYLE_PRESETS.md ~/.claude/skills/frontend-slides/
# Ejecutar
/frontend-slides

Abre el index.html generado y muestra a tu audiencia el futuro de la narración web basada en navegador. ¡Que tengas una excelente presentación!