Habilidad de Agente HTML PPT Guizang

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 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

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:

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:

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:

Crea una baraja de estilo suizo a partir de este artículo, alrededor de 7 diapositivas, con 2-3 visuales generados.

Otras instrucciones útiles:

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

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

Instalación

Opción 1: Instalación en una línea (recomendada)

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

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.

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:

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. El encuadre de capturas de pantalla se encuentra en 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:

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.

Convierte este documento de análisis de producto en una baraja estilo revista editorial con un ritmo narrativo fuerte.

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.

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

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í.

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
• 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