# Habilidad de Agente HTML PPT Guizang
> Genere presentaciones HTML con dos estilos visuales distintos mediante esta Habilidad de Agente PPT, completa con generación de imágenes y creación de portadas multiplataforma. Cree presentaciones profesionales y visualmente atractivas en segundos.
- Canonical: https://nanoskill.ai/es/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/es/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: es
- Source type: github
- Popularity signal: 11121
## Sources
- https://github.com/op7418/guizang-ppt-skill
## Install
```shell
npx skills add https://github.com/op7418/guizang-ppt-skill
```
## About
La Habilidad de Agente HTML PPT Guizang permite a los Agentes IA generar presentaciones HTML profesionales de un solo archivo con facilidad. Diseñada para plataformas como Claude Code y Codex, esta habilidad agiliza la creación de contenido visualmente atractivo, ofreciendo dos sistemas estéticos distintos: el estilo de Revista Electrónica centrado en la narrativa y el estilo de Internacionalismo Suizo basado en hechos. Los usuarios pueden transformar rápidamente artículos en presentaciones atractivas, producir análisis de productos detallados y generar portadas multiplataforma consistentes, todo manteniendo una alta calidad visual.
Esta habilidad se destaca al ofrecer una salida HTML ligera que es fácil de compartir y visualizar sin configuraciones complejas. Integra capacidades avanzadas como la generación de imágenes impulsada por IA a través de GPT-Image 2.0 / GPT-M 2.0 en Codex, permitiendo visuales e infografías conscientes del contexto. Además, proporciona diseños estructurados y principios de diseño estrictos, particularmente para el estilo suizo, asegurando una apariencia pulida y consistente en todo el contenido generado, desde diapositivas hasta portadas para redes sociales.
Ideal para una variedad de escenarios, desde charlas internas y lanzamientos de productos hasta comparticiones personales y presentaciones de métodos, la Habilidad de Agente HTML PPT Guizang simplifica los flujos de trabajo de creación de contenido. Permite a los usuarios convertir contenido extenso en presentaciones concisas, mejorar capturas de pantalla de productos para ajustarse a proporciones de plantilla específicas y garantizar una identidad visual cohesiva en todos los canales de comunicación. El enfoque de la habilidad en flujos de trabajo estructurados y reglas visuales predefinidas garantiza resultados de alta calidad y estéticamente agradables con un esfuerzo mínimo.
## Key features
- **Sistemas Visuales Duales**: Elige entre 'Estilo A: Revista Electrónica × Tinta electrónica' para narrativa y expresión personal, o 'Estilo B: Estilo Internacional Suizo' para hechos, análisis de productos y metodologías, asegurando que tu mensaje se transmita eficazmente.
- **Salida HTML de un Solo Archivo**: Genera presentaciones HTML ligeras y autónomas que no requieren proceso de compilación ni servidor, lo que las hace fáciles de abrir, compartir y mostrar directamente en cualquier navegador web.
- **Compatibilidad con Agentes de IA**: Diseñado para Claude Code, Codex y otros agentes de IA con acceso a shell, permitiendo generar, modificar e iterar HTML PPTs sin problemas mediante comandos en lenguaje natural.
- **Generación de Imágenes con Codex**: Integra GPT-Image 2.0 / GPT-M 2.0 dentro de Codex para generar imágenes de alta calidad conscientes del contexto, infografías y escenarios de interfaz de usuario, perfectamente escalados e insertados en tus diapositivas.
- **Generación de Portadas Multiplataforma**: Crea automáticamente portadas consistentes y visualmente unificadas para varias plataformas como Cuentas Oficiales de WeChat (21:9, 1:1), Xiaohongshu (3:4) y Cuentas de Video (16:9) basadas en el contenido central de tu presentación.
## Use cases
- **Transformar Artículos en Presentaciones**: Convierte artículos largos o documentos en presentaciones HTML PPT concisas y atractivas para discursos, charlas internas o sesiones privadas de intercambio, extrayendo las ideas centrales y estructurándolas en una narrativa convincente.
- **Crear Análisis Profesionales de Productos**: Utiliza el estructurado 'Estilo B: Estilo Internacional Suizo' para presentar análisis de productos, metodologías o lanzamientos de productos de IA con un enfoque en hechos, datos y comunicación visual clara.
- **Diseñar Contenido Multiplataforma Consistente**: Genera una identidad visual unificada en toda tu presentación, imágenes complementarias y varias portadas de redes sociales, asegurando consistencia de marca e impacto en todos tus canales de comunicación.
- **Mejorar Capturas de Pantalla para PPTs**: Rediseña y adapta capturas de pantalla de productos para que se ajusten a las plantillas de presentación, manteniendo la información clave y logrando un estilo visual consistente adecuado para presentaciones HTML PPT profesionales.
## Result preview
Vea un PPT real generado a partir de un artículo por esta Habilidad de Agente.
## Result walkthrough
### Paso 1：Instalar
Agregue la habilidad a su agente.
### Paso 2：Proporcionar Contenido
Ingrese un tema, notas o suba material existente (por ejemplo, informe, esquema, ideas).
### Paso 3：Obtenga su PPT
Revise la presentación HTML que puede usar directamente.
## Skill definition
Una habilidad de agente para Código Claude, Codex y entornos de agentes de codificación similares. Genera **barajas de deslizamiento horizontal en HTML de un solo archivo**, visuales de barajas y portadas sociales.
Incluye dos sistemas visuales:
- **Estilo A: revista editorial × tinta electrónica**. Imagina *Monóculo* con código cosido. Ideal para charlas narrativas, opiniones, salones y voz personal.
- **Estilo B: Estilo Tipográfico Internacional Suizo**. Basado en cuadrícula, un color de anclaje de alta saturación, rectángulos nítidos, líneas finas y contraste tipográfico extremo. Ideal para hechos, productos, análisis y marcos.
> Destilado por [Guizang](https://x.com/op7418) a partir de charlas presenciales como "Empresa unipersonal: organizaciones plegadas por la IA" y "Una nueva forma de trabajar". Todos los tropiezos encontrados durante esas barajas están registrados en `checklist.md`.
**Tema antiguo · Estilo A Revista editorial**
**Tema nuevo · Estilo B Suizo internacional**
## Inicio en 30 segundos
```bash
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
```
O pega esto a un agente de IA con acceso a shell:
```text
Instala guizang-ppt-skill para mí. Clona https://github.com/op7418/guizang-ppt-skill en ~/.claude/skills/guizang-ppt-skill, luego verifica que SKILL.md, assets/ y references/ existan.
```
Si ya lo tienes instalado, actualiza con:
```text
Actualiza guizang-ppt-skill para mí. Ve a ~/.claude/skills/guizang-ppt-skill, ejecuta git pull, luego dime el último commit.
```
Luego pide a tu agente:
```text
Crea una baraja de estilo suizo a partir de este artículo, alrededor de 7 diapositivas, con 2-3 visuales generados.
```
Otras instrucciones útiles:
```text
Convierte este archivo Markdown en una presentación estilo revista editorial.
Crea una portada social 21:9 a partir de la idea central de esta baraja.
Rediseña esta captura de pantalla de producto como una visual de diapositiva 16:10.
```
## Lo que obtienes
- 🖋 **Dos sistemas visuales**: narrativa editorial para Estilo A, estructura suiza factual para Estilo B
- 📐 **Navegación por deslizamiento horizontal**: flechas ← → / rueda del ratón / deslizamiento táctil / puntos inferiores / ESC para índice
- 🧩 **Estilo A 10 diseños**: portada, divisor, números grandes, imagen/texto, cuadrícula de imágenes, pipeline, comparación y más
- 🧱 **Estilo B 22 diseños bloqueados**: Portada, Declaración, Torre de KPI, Diagrama de bucle, Comparación dúo, Héroe de imagen, Manifiesto de cierre, y más
- 🎨 **Preajustes de tema seleccionados**: 5 temas de tinta electrónica para Estilo A, 4 temas de color de anclaje suizo para Estilo B
- 🖼 **Flujo de imagen Codex opcional**: genera fotos documentales, infografías, diagramas de flujo, mapas de sistema y escenas de interfaz de usuario con GPT-Image 2.0 / GPT-M 2.0, luego insértalas en proporciones seguras para la plantilla
- 📰 **Portadas sociales**: genera imágenes de portada para WeChat 21:9, tarjetas para compartir 1:1, portadas para Xiaohongshu 3:4, miniaturas de video y variantes relacionadas
- 📴 **Modo estático de bajo consumo**: presiona `B` para convertir la animación WebGL / canvas en visuales estáticos
- 📄 **Archivo HTML único** — sin compilación, sin servidor, se abre directamente en el navegador
## Encaja / No encaja
**✅ Encaja**: charlas presenciales, conferencias de la industria, salones privados, lanzamientos de productos de IA, día de demostración, presentaciones con una fuerte voz personal
**❌ No encaja**: tablas con muchos datos, barajas de formación (densidad demasiado baja), edición colaborativa multiusuario (HTML estático)
## Casos de uso comunes
| Tarea | Flujo recomendado |
|------|------------------|
| Artículo largo a baraja de charla | Extrae el argumento central, luego construye un ritmo de 6-10 diapositivas |
| Análisis de marco / producto | Usa Estilo B Suizo con diseños bloqueados y visuales de héroe 21:9 |
| Charla personal / pieza de opinión | Usa Estilo A revista editorial para un ritmo narrativo más fuerte |
| Visuales de baraja | En Codex, genera fotos, infografías, diagramas de flujo, mapas de sistema o escenas de interfaz de usuario |
| Portadas sociales | Genera portadas principales 21:9, tarjetas para compartir 1:1, portadas verticales 3:4 y miniaturas de video a partir de la misma idea |
| Normalización de capturas de pantalla | Rediseña capturas de pantalla sin procesar en proporciones seguras para la plantilla antes de insertarlas en las diapositivas |
## Por qué barajas HTML
- **Edición nativa para agentes**: HTML / CSS es texto plano, por lo que los agentes pueden leerlo, editarlo y validarlo directamente.
- **Mayor densidad visual que Markdown**: diseño preciso, posicionamiento, movimiento, interactividad y formatos de portada.
- **Entrega ligera**: un archivo HTML se puede abrir, presentar, enviar, capturar o grabar.
- **Mejores controles de calidad**: el validador suizo puede detectar desviaciones de diseño, colocación insegura de imágenes, títulos centrados en el cuerpo y trampas de texto SVG.
- **Un sistema visual para todas las salidas**: barajas, visuales generados, portadas y rediseños de capturas de pantalla pueden compartir las mismas reglas de estilo.
## Soporte de plataformas
| Plataforma | Estado | Notas |
|----------|--------|-------|
| Código Claude | Soportado | Flujo de trabajo de habilidad nativa para crear e iterar barajas HTML |
| Codex | Soportado | Bueno para generación de barajas, generación de imágenes y control de calidad visual en navegador |
| Cursor / otros agentes locales | Funciona | Requiere acceso al sistema de archivos y ejecución de shell |
| WorkBuddy | En adaptación | Se está preparando una versión lista para el mercado por separado |
| Chatbot simple | No recomendado | Sin sistema de archivos y vista previa en navegador, la generación completa de barajas es difícil de estabilizar |
## Instalación
### Opción 1: Instalación en una línea (recomendada)
```bash
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
```
### Opción 2: Pega esto a una IA
> Instala la habilidad `guizang-ppt-skill` de Código Claude para mí. Pasos:
>
> 1. Asegúrate de que `~/.claude/skills/` existe (crea si no)
> 2. Ejecuta `git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill`
> 3. Verifica: `ls ~/.claude/skills/guizang-ppt-skill/` debe mostrar `SKILL.md`, `assets/`, `references/`
> 4. Dime cuando termine. Luego, decir cosas como "hazme una baraja estilo revista" activará esta habilidad.
Pega el bloque de arriba en Código Claude / Cursor / cualquier agente de IA con acceso a shell y él se encargará de la instalación.
### Opción 3: CLI manual
```bash
git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
```
### Cómo activarlo
Una vez instalado, Código Claude detecta automáticamente la habilidad. Frases de activación:
- "Hazme una baraja estilo revista"
- "Hazme una baraja estilo suizo"
- "Genera una baraja de deslizamiento horizontal"
- "Presentación estilo revista editorial"
- "Diapositivas de tinta electrónica para mi charla"
- "Crea una portada de WeChat 21:9 a partir de este artículo"
- "Crea una tarjeta para compartir 1:1 a partir de esta baraja"
## Flujo de trabajo
La habilidad es un flujo de trabajo estructurado; el agente te guía a través de cada paso:
1. **Elige estilo** — Estilo A revista editorial, o Estilo B Suizo internacional
2. **Aclara la intención** — Lista de verificación de 7 preguntas: estilo, audiencia, duración, material de origen, imágenes/capturas de pantalla, tema, limitaciones estrictas
3. **Copia la plantilla** — Estilo A usa `assets/template.html`; Estilo B usa `assets/template-swiss.html`
4. **Rellena el contenido** — crea un plan de ritmo, luego elige y adapta los esqueletos de diseño correspondientes
5. **Generación de imágenes opcional** — en Codex, pregunta si usar imágenes de GPT-Image 2.0 / GPT-M 2.0, luego insértalas en proporciones adecuadas para la página
6. **Autocomprobación** — compara con `references/checklist.md`; los problemas P0 deben aprobarse todos; las barajas suizas también deben pasar el validador de diseño
7. **Vista previa** — abre el HTML en un navegador
8. **Itera** — usa estilos en línea para ajustar el tamaño de fuente, altura, espaciado
Especificación completa en [`SKILL.md`](./SKILL.md).
## Estilo B Suizo
El tema suizo es un sistema de diseño estricto, no solo una piel CSS.
- **22 diseños con nombre**: las diapositivas del cuerpo deben usar de `S01` a `S22`; no inventes nuevas estructuras
- **4 colores de anclaje**: Azul Klein Internacional, amarillo limón, verde limón, naranja de seguridad
- **Bloqueo de cuadrícula**: cuadrícula de 16 columnas, rectángulos nítidos, líneas finas de 1px, sin sombras, sin degradados, sin tarjetas redondeadas
- **Escalado de títulos en chino**: los titulares completamente en chino deben ser un paso más pequeños para preservar espacio para contenido e imágenes
- **Alineación inferior de imagen/texto**: los bloques de texto e imagen deben alinearse en la parte inferior en diseños de imagen izquierda/derecha, manteniéndose alejados de los controles de paginación
- **Ranuras de imagen**: las imágenes deben ubicarse en regiones `data-image-slot` definidas por la plantilla, a menudo generadas en 21:9 o 16:10
- **Validación estricta**: el validador detecta títulos de cuerpo centrados, diseños experimentales, texto SVG visible e imágenes colocadas fuera de las ranuras
Validación suiza:
```bash
node scripts/validate-swiss-deck.mjs path/to/index.html
```
## Flujo de imagen Codex
En Codex, después de que el primer borrador de la baraja esté listo, el agente puede preguntar si el usuario quiere visuales generados. Una vez confirmado, elige un tipo o estilo de imagen. Los tipos comunes incluyen:
- Fotos documentales: escenas del mundo real al estilo Fuji / Leica que añaden textura humana
- Infografías / diagramas de flujo / gráficos de comparación / mapas de sistema: para conceptos que no se pueden explicar bien con fotos
- Encuadre de capturas de pantalla / rediseños de capturas de pantalla: conserva las capturas de pantalla originales con activos de fondo incluidos y un lienzo estilo CleanShot X primero; usa la generación de escenas de interfaz de usuario solo cuando la captura de pantalla necesite reconstrucción
- Pósters de datos / gráficos: convierte números clave en activos visuales listos para insertar
- Composiciones de múltiples imágenes: útiles para ranuras ultra anchas donde tres imágenes 16:9 no relacionadas romperían la cuadrícula
Las imágenes generadas deben seguir cuatro reglas fundamentales:
- Trata la imagen como un activo incrustado, no como una diapositiva independiente: sin pie de página, parte inferior de página, título, número de página, marca de esquina, firma o borde decorativo
- Coincide con el idioma de la baraja: las barajas en chino usan etiquetas en chino dentro de las infografías, las barajas en inglés usan etiquetas en inglés
- Coincide con la proporción de la ranura antes de la generación: 21:9 para muchas ranuras de héroe suizas, 16:9 / 16:10 para visuales principales comunes, 16:10 para escenas de interfaz de usuario, alturas iguales fijas para cuadrículas de imágenes
- Cuando una captura de pantalla original debe mantenerse fiel, lee primero `references/screenshot-framing.md` y usa los fondos incluidos `assets/screenshot-backgrounds/` más escalado programático, relleno y alineación en lugar de redibujar la captura de pantalla por defecto
Las instrucciones de imagen se encuentran en [`references/image-prompts.md`](./references/image-prompts.md). El encuadre de capturas de pantalla se encuentra en [`references/screenshot-framing.md`](./references/screenshot-framing.md).
## Generación de portadas
La habilidad también puede convertir un artículo o idea de baraja en portadas de plataforma:
- **Portada principal de WeChat**: 21:9, titular primero, con un ancla visual
- **Tarjeta para compartir de WeChat**: 1:1, emparejada visualmente con la portada 21:9
- **Portada / carrusel de Xiaohongshu**: 3:4, título grande, escala tipográfica consistente en un lote
- **Miniatura de video**: 16:9, título + subtítulo + una visual focal
Se aplica la misma regla: usa unas pocas palabras clave fuertes, mantén el título como el centro visual y no llenes el lienzo con texto del cuerpo.
## Ejemplos de instrucciones
Copia cualquiera de estas instrucciones en tu agente, luego adjunta tu artículo, archivo Markdown o activos de imagen:
```text
Crea una baraja de estilo suizo de 8 diapositivas a partir de este artículo, con 3 visuales generados que coincidan con las ranuras de imagen de la plantilla.
```
```text
Convierte este documento de análisis de producto en una baraja estilo revista editorial con un ritmo narrativo fuerte.
```
```text
A partir de la idea central de esta baraja, crea dos portadas: una portada principal 21:9 y una tarjeta para compartir 1:1 visualmente emparejada.
```
```text
Rediseña estas capturas de pantalla de producto en visuales de diapositiva 16:10 consistentes. Conserva la información clave de la interfaz de usuario; no agregues títulos de diapositiva ni pies de página dentro de las imágenes.
```
## Directorio
```
guizang-ppt-skill/
├── SKILL.md ← archivo principal de habilidad: flujo de trabajo, principios, errores comunes
├── README.md ← LÉAME en chino
├── README.en.md ← este archivo
├── assets/
│ ├── template.html ← Plantilla Estilo A revista editorial
│ ├── template-swiss.html ← Plantilla Estilo B suizo
│ └── screenshot-backgrounds/ ← fondos de captura de pantalla WebP incluidos: 5 estilo-a / 4 estilo-b
├── scripts/
│ └── validate-swiss-deck.mjs ← Validador de diseño suizo
└── references/
├── components.md ← catálogo de componentes (tipo, color, cuadrícula, iconos, llamada, estadística, pipeline)
├── layouts.md ← 10 esqueletos de diseño (listos para pegar)
├── layouts-swiss.md ← 22 diseños suizos bloqueados
├── swiss-layout-lock.md ← Reglas estrictas de fidelidad y diseño suizo
├── themes.md ← 5 preajustes de tema (elige, no personalices)
├── themes-swiss.md ← 4 temas de color de anclaje suizo
├── image-prompts.md ← Tipos de imagen, proporciones e instrucciones base para GPT-Image 2.0 / GPT-M 2.0
├── screenshot-framing.md ← Semántica de encuadre de capturas de pantalla estilo CleanShot X
└── checklist.md ← lista de verificación de calidad (niveles P0 / P1 / P2 / P3)
```
## Preajustes de tema
Elige de `references/themes.md`. **No se permiten valores hexadecimales personalizados** — proteger la estética importa más que la libertad de elección.
### Temas editoriales Estilo A
| Vista previa | Tema | Colores principales y mejor para |
|---------|-------|--------------------------|
| 
| 🖋 **Tinta clásica** | `#0a0a0b` / `#f1efea`. Predeterminado general, lanzamientos comerciales, en caso de duda. |
| 
| 🌊 **Porcelana índigo** | `#0a1f3d` / `#f1f3f5`. Tecnología, investigación, IA, conferencias técnicas. |
| 
| 🌿 **Tinta bosque** | `#1a2e1f` / `#f5f1e8`. Naturaleza, sostenibilidad, cultura, no ficción. |
| 
| 🍂 **Papel kraft** | `#2a1e13` / `#eedfc7`. Nostálgico, humanista, literario, revistas independientes. |
| 
| 🌙 **Duna** | `#1f1a14` / `#f0e6d2`. Arte, diseño, creativo, moda, barajas estilo galería. |
Cambiar de tema solo requiere reemplazar las 6 variables en la parte superior del bloque `:root{}` de `template.html` — todo el resto del CSS fluye a través de `var(--...)`.
### Temas suizos Estilo B
Elige de `references/themes-swiss.md`. **Tampoco se permiten valores hexadecimales personalizados** aquí.
| Vista previa | Tema | Color de anclaje y mejor para |
|---------|-------|---------------------------|
| 
| 🔵 **Azul Klein Internacional** | `#002FA7`. Predeterminado, lanzamientos comerciales, productos de IA, marcos. |
| 
| 🟡 **Amarillo limón** | `#FFD500`. Juventud, deportes, minorista, bienes de consumo, retro Y2K. |
| 
| 🟢 **Verde limón** | `#C5E803`. Ecología, sostenibilidad, salud, marcas Generación Z. |
| 
| 🟠 **Naranja de seguridad** | `#FF6B35`. Alertas, noticias, temas industriales, deportes, temas enérgicos. |
Si el usuario pide una baraja de estilo suizo sin especificar color, el valor predeterminado es Azul Klein Internacional.
## Principios de diseño fundamentales
1. **Moderación sobre ostentación** — los fondos WebGL solo se filtran en las páginas de héroe
2. **Estructura sobre decoración** — jerarquía de información mediante tamaño tipográfico + tipo de letra + espacio en blanco de la cuadrícula, no sombras ni tarjetas flotantes
3. **Las imágenes son ciudadanas de primera clase** — alinéalas con el área de contenido del cuerpo, mantén las proporciones estables, recorta solo desde la parte inferior y preserva la parte superior y los lados
4. **Los visuales generados son activos** — conserva solo la foto / gráfico / interfaz de usuario principal; no incluyas títulos de diapositiva, pies de página o marcas de esquina dentro de la imagen
5. **El ritmo reside en las páginas de héroe** — la alternancia héroe / no héroe evita que la vista se fatigue
6. **Los efectos dinámicos deben ser opcionales** — `B` alterna el modo estático para que la animación nunca se convierta en una carga de lectura
7. **Los términos se mantienen consistentes** — Skills es Skills; sin traducciones mezcladas
8. **Los diseños suizos permanecen bloqueados** — El Estilo B debe restaurar y reutilizar el sistema de diseño original de 22 páginas en lugar de inventar páginas no relacionadas
## Referencias visuales
- Diseños de la revista [*Monóculo*](https://monocle.com)
- YC Garry Tan — "Arnés delgado, habilidades gruesas"
- Massimo Vignelli / Helvetica para siempre / Estilo Tipográfico Internacional Suizo
- Serie de barajas de charlas presenciales de Guizang
## Hoja de ruta
- Agregar más ejemplos del mundo real y demostraciones de barajas HTML que se puedan abrir
- Expandir formatos de portada para más plataformas de publicación
- Agregar más reglas de validación de diseño suizo
- Mejorar los flujos de trabajo de rediseño de capturas de pantalla y generación de infografías
- Preparar variantes específicas para el mercado como WorkBuddy
- Agregar más paquetes de temas seleccionados manteniendo los colores personalizados restringidos
## Preguntas frecuentes
**¿Se puede exportar a PPTX?**
La salida principal es HTML. Puedes presentarlo en un navegador, capturarlo o grabarlo. La conversión a PPTX se puede hacer como un flujo de trabajo separado, pero no es la ruta principal hoy.
**¿Por qué no se permiten colores personalizados?**
La habilidad está diseñada para una salida visual estable. Los colores arbitrarios a menudo rompen el sistema, por lo que las barajas deben usar preajustes seleccionados.
**¿Puedo agregar mi propio diseño?**
Sí. Los diseños de Estilo A se pueden extender en `references/layouts.md`. El Estilo B es más estricto: actualiza `template-swiss.html`, `layouts-swiss.md`, `swiss-layout-lock.md` y el validador juntos.
**¿Se requiere la generación de imágenes de Codex?**
No. Las barajas funcionan sin imágenes generadas. El flujo de imágenes solo se usa cuando necesitas fotos, infografías, escenas de interfaz de usuario o portadas.
**¿Cómo actualizo la habilidad?**
Ejecuta el comando de instalación nuevamente, o ejecuta `git pull` dentro de tu directorio local de la habilidad.
## Contribuciones
Errores, problemas de diseño, solicitudes de nuevos diseños — Issues y PRs bienvenidos. Prioriza:
- Agrega nuevas clases a `template.html` primero; no dejes que `layouts.md` haga referencia a clases no definidas
- Al cambiar `template-swiss.html`, actualiza `layouts-swiss.md` y `swiss-layout-lock.md` juntos
- Al agregar reglas suizas, actualiza `scripts/validate-swiss-deck.mjs`
- Registra los tropiezos en `checklist.md` en el nivel P0 / P1 / P2 / P3 correspondiente
- Los nuevos colores de tema van en `themes.md` con un caso de uso recomendado
## Licencia
MIT © 2026 [op7418](https://github.com/op7418)
## FAQ
### ¿Qué es la habilidad de agente Guizang HTML PPT?
La habilidad Guizang HTML PPT es una herramienta compatible con agentes de IA diseñada para generar presentaciones HTML de un solo archivo, imágenes complementarias y portadas multiplataforma. Ofrece dos estilos visuales distintos: Revista Electrónica y Estilo Internacional Suizo.
### ¿Cómo instalo la habilidad de agente Guizang HTML PPT?
Puedes instalarla ejecutando \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` en tu terminal, o pidiéndole a un agente de IA con acceso a shell que clone el repositorio en tu directorio de habilidades.
### ¿Puedo personalizar los colores de mi HTML PPT?
No, no se permiten valores HEX personalizados. La habilidad ofrece una selección de temas predefinidos tanto para el Estilo A (Revista Electrónica) como para el Estilo B (Estilo Internacional Suizo) para garantizar consistencia estética y una salida de calidad.
### ¿Cuáles son los dos estilos visuales que se ofrecen?
El Estilo A, 'Revista Electrónica × Tinta electrónica', es ideal para contar historias, opiniones y expresión personal. El Estilo B, 'Estilo Internacional Suizo', es más adecuado para presentar hechos, análisis de productos y metodologías con un diseño minimalista basado en cuadrículas.
### ¿Es posible exportar el HTML PPT a formato PPTX?
La entrega principal es HTML, que se puede mostrar directamente en un navegador, capturar o grabar. Aunque la exportación directa a PPTX no es una característica principal, puedes usar las páginas HTML como borradores visuales para la conversión si es necesario.
### ¿La habilidad admite la generación de imágenes para mi HTML PPT?
Sí, cuando se usa en un entorno Codex, la habilidad puede aprovechar GPT-Image 2.0 / GPT-M 2.0 para generar varios tipos de imágenes, infografías y escenarios de interfaz de usuario, que luego se insertan en tu presentación según las proporciones de la plantilla.