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

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!