Guizang PPT Skill: crea impresionantes presentaciones HTML directamente en Claude Code

¿Alguna vez has querido convertir un artículo largo, un análisis de producto o incluso un ensayo personal en una presentación de diapositivas realmente bien diseñada, sin abrir PowerPoint y peleándote con cuadros de texto? No estás solo. Ese es exactamente el problema que resuelve Guizang PPT Skill. Creada por el pensador de IA 歸藏 y perfeccionada con charlas presenciales reales, esta Skill de código abierto se ejecuta dentro de Claude Code, Codex y entornos de agentes similares para generar presentaciones HTML hermosas y de un solo archivo. Tampoco es solo un juguete: incluye dos sistemas visuales distintos, 22 diseños bloqueados, un modo presentador completo e incluso generación opcional de imágenes por IA para portadas y diagramas.

¿Por qué HTML en lugar de PPTX?

Todo el proyecto se basa en una apuesta sencilla: HTML es el formato ideal para que los agentes de IA creen diapositivas. Como HTML y CSS son texto plano, el agente puede leer, editar y validar el archivo directamente. A diferencia de las presentaciones en Markdown, HTML te da control de diseño a nivel de píxel, animaciones y diseño responsive. Y a diferencia de PPTX, el resultado final es un solo archivo que puedes abrir en cualquier navegador, presentar, capturar o enviar a un colega. Sin paso de compilación, sin servidor, sin infierno de dependencias.

Pero la mayor ventaja es el control de calidad. La Skill incluye scripts de validación que comprueban elementos como desbordamiento del diseño, alineación y si las imágenes se mantienen dentro de sus espacios esperados. Eso significa que la IA no solo adivina: está midiendo el resultado renderizado real cuando Playwright está disponible.

Dos estilos visuales para distintas historias

La Skill incluye dos sistemas de estilo. Estilo A se llama «Electronic Magazine × Electronic Ink». Imagina la revista Monocle combinada con una estética de código minimalista. Es perfecto para narrativas, opiniones, compartir experiencias personales y todo aquello donde la personalidad importa. Hay diez diseños flexibles para aperturas de capítulo, páginas de exposición de datos, cuadrículas de imágenes, pipelines y comparaciones. Puedes elegir entre cinco temas inspirados en tinta: Classic Ink, Indigo Porcelain, Forest Ink, Kraft Paper y Dune.

Estilo B va por el carril opuesto: Estilo Internacional Suizo. Todo se basa en cuadrículas estrictas, un color ancla de alta saturación, ángulos rectos, líneas finas y una escala tipográfica dramática. Este estilo está pensado para hechos, productos, análisis y metodología. Hay 22 diseños bloqueados, desde Cover y Statement hasta KPI Tower, Loop Diagram, Duo Compare y Closing Manifesto. Hay cuatro temas de color ancla disponibles: Klein Blue, Lemon Yellow, Lemon Green y Safety Orange. Si pides una presentación suiza sin especificar color, el agente recomienda Klein Blue por defecto.

Este sistema dual significa que no tienes que reinventar la rueda del diseño cada vez. Solo dices qué ambiente quieres, y la Skill aplica un sistema estético coherente, incluidas reglas estrictas como sin valores hexadecimales personalizados, porque proteger el sentido del diseño importa más que dejar que cualquiera improvise con los colores.

Primeros pasos en 30 segundos

La instalación es agradablemente sencilla. La línea de un solo comando recomendada es:

Si prefieres dejar que la IA haga todo, pega esto en Claude Code, Cursor o cualquier agente con acceso a shell:

帮我安装 guizang-ppt-skill。请把 https://github.com/op7418/guizang-ppt-skill 克隆到 ~/.claude/skills/guizang-ppt-skill,安装完成后检查 SKILL.md、assets/、references/ 是否存在。

Para la ruta manual, solo ejecuta:

Una vez instalada, la Skill se activa automáticamente cuando haces peticiones como:

Cómo es un flujo de trabajo real

La verdadera magia es que la Skill es un flujo de trabajo estructurado, no un prompt vago. Cuando pides una presentación, el agente sigue varios pasos: elegir el estilo, aclarar los requisitos mediante una lista de siete preguntas, copiar la plantilla adecuada desde assets/template.html o assets/template-swiss.html, rellenar el contenido a partir de una tabla de ritmo, generar imágenes opcionalmente, crear notas del orador, ejecutar comprobaciones de validación y previsualizar la presentación en un navegador.

Una petición típica podría ser: “帮我把这个产品分析文档做成电子杂志风 PPT，重点突出观点和叙事节奏。” El agente producirá entonces una presentación HTML de un solo archivo con la plantilla de revista, completa con transiciones de página, colores del tema, notas del orador y el runtime de presentador incorporado.

Un modo presentador que de verdad es útil

Una característica sorprendentemente profunda es el modo presentador integrado. Haz clic en P en la esquina inferior derecha y la presentación abrirá una vista de presentador dedicada, mientras una ventana limpia para el público se abre en otra pestaña. Obtienes una vista previa en vivo 16:9 de la diapositiva actual y la siguiente, notas estructuradas con propósito y puntos de conversación, temporizadores para el tiempo transcurrido y el ritmo general, y un modo de ensayo que registra el tiempo real por página localmente. También hay herramientas prácticas como puntero láser, resaltador de dibujo y pantalla negra o blanca con un clic. Si Internet se cae, nada de esto se rompe: todo es HTML local y APIs del navegador, no un servicio en la nube.

Imágenes generadas por IA y arte de portada

Dentro de Codex, la Skill puede aprovechar GPT-Image 2.0 / GPT-M 2.0 para generar fotos de estilo documental, infografías, diagramas de flujo, diagramas de sistema y maquetas de interfaz. La regla clave es que las imágenes son recursos incrustados, no carteles independientes; por lo tanto, no deben llevar sus propios pies de página, títulos ni bordes decorativos. La Skill también sabe cómo rediseñar capturas de pantalla desordenadas para convertirlas en recursos de presentación limpios mediante la biblioteca de fondos incluida, algo que salva la vida cuando necesitas imágenes coherentes sin reconstruir cada diapositiva manualmente.

Más allá de las diapositivas, el mismo sistema visual se extiende a las portadas para redes sociales. Puedes generar una imagen principal para una cuenta pública de WeChat en 21:9, una tarjeta para compartir en 1:1, una portada de Xiaohongshu en 3:4 o una portada de vídeo horizontal en 16:9, todo acorde con el color del tema y la tipografía de la presentación.

Cuándo usarla (y cuándo no)

Guizang PPT Skill brilla en charlas presenciales, presentaciones internas, lanzamientos de productos de IA, demo days y cualquier discurso con una voz personal fuerte. No es ideal para paneles densos tipo hoja de cálculo, materiales de formación o presentaciones que requieran mucha colaboración en tiempo real, porque el resultado es un archivo HTML estático por diseño.

La filosofía de diseño del proyecto es refrescante: moderación frente a ostentación, estructura frente a decoración e imágenes como ciudadanas de primera clase con relaciones de aspecto estables. Puedes pulsar B para desactivar las animaciones WebGL/canvas y entrar en un modo estático de bajo consumo si tu equipo va justo.

Qué hacer a partir de aquí

Guizang PPT Skill es un proyecto de código abierto con una hoja de ruta activa, que incluye más casos de estudio, más reglas de validación suizas y especificaciones ampliadas para portadas. Si alguna vez has deseado que tu asistente de IA pudiera simplemente hacer las diapositivas, esta es una herramienta sólida para probar hoy. Instálala con el comando npx de arriba, dale un artículo al agente y observa cómo genera una presentación HTML pulida que puedes presentar directamente desde el navegador.