Gran actualización: Mis 10 años de experiencia en diseño condensados en habilidades para PPT

Desde que publiqué como código abierto guizang-ppt-skill (github.com/op7418/guizang-ppt-skill) la última vez, a todos les encantóles encantó, y en pocas semanas superó las 6.000 estrellas en GitHub. Incluso fue mencionado e incluido en el muy popular Claude Design de código abierto.

También he visto PPTs generados por este PPT Skill en muchos lugares, tanto online como presenciales.

Después del lanzamiento, las preguntas más frecuentes que recibí en segundo plano fueron:

"¿Podemos tener más estilos?"

"¿Puedes ayudarme también con las ilustraciones?"

"¿Tengo que redibujar la portada del PPT para otras plataformas?"

Tomé notas mientras lo usaba y las guardé durante dos semanas. Esta vez, estoy cubriendo todos estos vacíos de una sola vez.

Qué se ha actualizado

Se ha añadido un estilo visual completamente nuevo, las capacidades de ilustración están conectadas directamente a Codex, y ahora se pueden hacer portadas para plataformas fuera de PPT fácilmente.

Específicamente, tres cosas:

• Se añadido el Estilo B: Internacionalismo Suizo. Sin serifa en todo, un solo color ancla de alta saturación y prioridad a la cuadrícula.
• Codex integrado con GPT-Image 2.0. Genera directamente ilustraciones que combinan con el tono, incluyendo retratos con textura cinematográfica, diagramas de flujo y capturas de trabajo y capturas de pantalla de UI embellecidas.
• Generación de portadas multi-plataforma. El mismo contenido se puede utilizar para crear portadas para Xiaohongshu, Cuentas Oficiales de WeChat, Cuentas de Video y más.

Cómo activar el nuevo estilo

Después de la instalación, dile a Claude o Codex: "Ayúdame a hacer un PPT de estilo suizo."

Si ya lo tienes instalado, también puedes decirle puedes decir a tu IA: "Ayúdame a actualizar guizang-ppt-skill."

Te preguntará a cambio: Azul Klein Internacional (IKB), Amarillo Limón, Verde Limón o Naranja Seguridad—¿cuál de los cuatro temas eliges?

• Azul Klein Internacional (IKB): Universal, lanzamientos de negocios, productos de IA; recomendación por defecto.
• Amarillo Limón: Juvenil, deportes, retail, retro Y2K.
• Verde Limón: Ecología, sostenibilidad, branding Gen Z.
• Naranja Seguridad: Advertencia, noticias, temas de alta energía.

Como antes, no se aceptan códigos hex personalizados.

Escribí específicamente esta regla en las restricciones duras de SKILL.md. Expliqué la razón en el artículo anterior, así que no la repetiré.

Los diseños más utilizados

El estilo suizo viene con 22 diseños con nombre listos para usar, que cubren portadas, capítulos, datos, comparaciones y cierres.

Aquí están los seis más reconocibles:

Portada. La mitad izquierda usa el fondo IKB con una línea de texto blanco gigante, mientras que la derecha es espacio en blanco con información meta. Casi un must para la primera página.

Declaración. Una sola frase ocupa 9.6vw; toda la página es solo eso y una pequeña línea de texto de pie. Adecuado para iniciar capítulos o lanzar argumentos centrales.

Torre KPI. Cuatro columnas de colores sólidos con alturas determinadas por los datos, seguidos de una fila de categorías. Las comparaciones numéricas longitudinales como estratificación de márgenes de beneficio, niveles de precios y embudos de conversión se entienden de un vistazo.

Diagrama en bucle. Pasos numerados distribuidos en anillos concéntricos, cerrando en un círculo. Adecuado para explicar bucles de autoaprendizaje, ciclos de automatización de Agent y volantes de retroalimentación de productos.

Comparación dual. Una línea central fina con un conjunto de texto y datos a cada lado. Úsalo para sistema antiguo vs. nueva solución, tradicional vs. IA, o Antes vs. Después.

Manifiestra de cierre. La mitad izquierda es un manifiesto IKB blanco sobre azul, y la mitad derecha tiene tres conclusiones para cerrar la pieza. Recomendado para la última página del mazo para crear un bucle de color con la portada.

Otros incluyen líneas de tiempo horizontales, confrontación de Tres Fuerzas, jerarquía de Diagrama de Sistema, soporte de argumentos Why Now, especificaciones técnicas de Tech Spec, estudios de caso de Image Hero con KPIs y más.

Cada uno corresponde a una forma de contenido típica. Cuando dices "Quiero hacer un ranking de la industria" o "Quiero hacer un benchmark de producto", la IA elegirá el más adecuado de estos 22; no necesitas recordar los nombres.

Después de elegir el tema, el resto del proceso es el mismo que la versión anterior: 6 preguntas de aclaración, luego el esquema y la tabla de ritmo, y finalmente el código después de la alineación.

Deja que GPT-Image 2.0 te ayude con las imágenes

Si lo usas en el entorno de Codex, después de que el PPT esté escrito, preguntará activamente: "¿Quieres generar algunas ilustraciones para este PPT?"

Si las necesitas, generará automáticamente el tipo de ilustración adecuado según el estilo y contenido del PPT seleccionado:

Fotos documentales humanísticas (textura cinematográfica), infografías (procesos, comparaciones, relaciones de sistema), rediseños de capturas de pantalla (rehaciendo tus imágenes originales según las proporciones del PPT), carteles de datos, diagramas de flujo y diagramas de trabajo y diagramas de relaciones de sistema.

Las imágenes generadas se adaptarán automáticamente al estilo y color temático de tu mazo actual.

Específicos:

• Para el estilo Revista Digital, las infografías siguen un tono de tinta electrónica: principalmente blanco, negro y gris, con algunos colores de acento de baja saturación, líneas finas, cuadrículas y espacio en blanco contenido.
• Para el estilo suizo, las infografías siguen un tono modernismo suizo: etiquetas cortas sin serifa con sensación Helvetica/Inter, cuadrículas de 12/16 columnas y ángulos rectos.
• Si eliges Azul IKB, las imágenes generadas usarán Azul IKB como único color ancla. Lo mismo aplica si eliges Amarillo Limón, Verde Limón o Naranja Seguridad.
• El idioma del texto sigue al mazo; los mazos en chino usan etiquetas en chino, y los mazos en inglés usan etiquetas en inglés.
• Las imágenes generadas no tienen un shell de PPT; no tendrán encabezados, pies de página, números de página, firmas ni bordes decorativos.

Este detalle asegura que no tengas que preocuparte por la consistencia visual de todo el mazo.

No te encontrarás con una desconexión donde el PPT es Azul IKB pero la ilustración es verde, y no tienes que ajustar los prompts para GPT-Image mientras escribes el PPT.

La deriva visual entre herramientas es el costo oculto con el que más he luchado al usar IA para contenido en los últimos dos años. Resolverlo en la capa del Skill significa una preocupación menos para el usuario.

Deja que te ayude a hacer portadas para plataformas

Después de que el PPT esté listo, siempre necesitas resolver tres formatos antes de publicar: el encabezado 21:9 para Cuenta Oficial de WeChat, la imagen vertical 3:4 para Xiaohongshu y la portada horizontal para Cuenta de Video.

Solo di: "Basándote en los puntos centrales de este PPT, dame una portada 3:4 para Xiaohongshu" o "Dame un encabezado 21:9 para WeChat." La IA generará imágenes según las reglas visuales del Skill (mismo color temático, misma fuente, regla de un solo foco).

También es posible. Para el mecanismo de carrusel de Xiaohongshu, puedes pedirle que "produzca 6 imágenes por lotes con un estilo unificado, tamaño de fuente consistente y diferentes diseños" de una sola vez.

WeChat es especial; el encabezado es 21:9, pero la tarjeta de compartir usa una imagen cuadrada 1:1, y las dos necesitan continuidad visual.

La forma de hacerlo es generarlas dos veces pero usando el mismo conjunto de colores y copia:

• El primer encabezado principal 21:9 tiene el título principal a la izquierda y un ancla visual a la derecha.
• La segunda imagen cuadrada 1:1 sirve como extensión visual de la tarjeta de compartir, con los elementos principales haciendo eco del encabezado.

Mis dos diseños más utilizados: fondo sólido + texto gigante + fecha en la esquina, o un diseño dividido con una imagen a la izquierda y texto a la derecha.

Algunas ideas inteligentes que vale la pena compartir

Idea 1: Usar textura cinematográfica para combatir el "toque IA"

Al escribir un artículo sobre "una persona haciendo un producto", necesitas una imagen que transmita la emoción de "trabajar solo". Antes, pasabas media hora en Unsplash o usabas una foto de archivo obvia. Ahora, solo di: "Genera una foto documental 16:10 de una persona frente a una pantalla en un estudio nocturno, luz natural, baja saturación, ligero grano de película, textura Fujifilm."

La imagen resultante tiene una calidez humana contenida y no parece de plástico. Escribí este juicio en references/image-prompts.md. La textura cinematográfica es el mayor valor de GPT-Image 2.0 para las ilustraciones de PPT; elimina la etiqueta de "generado por IA" de la imagen.

Idea 2: Rehacer capturas de pantalla con proporciones extrañas

Muchos creadores tienen capturas de pantalla originales: UIs de productos, páginas de backend, paneles de datos, todas con diferentes proporciones y espacio en blanco inconsistente. Ponerlas en un PPT arruina el flujo visual. Ahora, solo suelta la imagen original a Codex: "Rehacerla en 16:10, mantener todos los elementos de la UI, añadir algo de entorno de trabajo real, densidad media."

Regenerará una imagen que cumpla con los estándares del PPT, con toda la información clave intacta y proporciones y espacio en blanco perfectamente unificados. Esto es especialmente útil para contenido de reseñas de productos.

Idea 3: "Envolver" imágenes de IA con plantillas de PPT

Este es un uso que probé yo mismo. Si una imagen de GPT-Image 2.0 se envía sola, las herramientas de detección de IA probablemente la marcarán. Esto puede afectar los pesos de recomendación en redes sociales. Pero si pones esa imagen en una plantilla de PPT y luego tomas una captura de pantalla de todo, el resultado es completamente diferente. Esto esencialmente ensambla material generado por IA en un trabajo completo, añadiendo trazas humanas. Sigue siendo una expresión basada en los hechos de tu esquema, no ficción, solo evita ser mal identificado por los algoritmos.

Por qué se ve bien

Finalmente, hablemos de la filosofía de diseño. ¿De dónde vinieron las reglas visuales para este estilo suizo?

Le di anclajes visuales como Massimo Vignelli y Helvetica Forever—la tradición del Internacionalismo Suizo del sistema de metro de Nueva York, Unimark y Müller-Brockmann.

Si has abierto el libro Helvetica Forever o has visto el sistema de señalización de 1970 que Vignelli hizo para el metro de Nueva York, reconocerás este lenguaje. Comparando los dos estilos, la diferencia es inmediata:

En pocas palabras: El Estilo A es para contar historias; el Estilo B es para exponer hechos.

7 Disciplinas de Diseño

Las reglas visuales del estilo suizo son en realidad solo siete puntos, cada uno un estándar de la industria de la industria de hace cien años. Solo los escribí en el Skill para que la IA los ejecute.

1. Un Solo Color Ancla. Solo se permite un color de resalte en un mazo. Si es azul, es solo azul. Sin collage azul-amarillo. Esta es el alma del estilo suizo. "Menos es más" no es solo un eslogan; debe escribirse como una regla estricta en el código.

2. Contraste Extremo de Tamaño de Fuente. La proporción del título principal al cuerpo del texto es de al menos 8:1. El manifiesto gigante en la portada usa min(11.6vw, 19vh), mientras que el cuerpo es 1.1vw. La tensión visual se logra por este contraste, no por la decoración.

3. Cuanto más grande el texto, más delgado. Los títulos principales usan font-weight 200 (ExtraLight), no 700, 800 o 900. El texto grande al estilo suizo es como una escala en un plano arquitectónico; debe verse pero no ser ruidoso.

4. Ángulos Rectos y Colores Sólidos. border-radius, box-shadow y linear-gradient están todos eliminados. Todos los bloques de color son en ángulo recto, y todos los límites son líneas finas de 1px. Se ve duro, pero la "sensación de app de consumo" o "sensación de plantilla SaaS" que ves en todas partes proviene del abuso de estos tres atributos.

5. Supremacía de la Cuadrícula. Una cuadrícula de 16 columnas con un gap de 16px. Todos los elementos se alinean a la cuadrícula, usando alineación izquierda y gran espacio en blanco para una estética asimétrica. Sin centrado, sin distribución uniforme.

6. Sin Fondos WebGL. El Estilo A usa fluidos WebGL para una sensación de respiración; el estilo suizo elimina esto deliberadamente. El blanco puro es su fondo; cualquier fondo dinámico es una distracción.

Reflexiones finales

El núcleo de esta actualización responde a una pregunta: ¿cuánto dura la cadena de colaboración humano-IA en la creación de contenido?

Con el lanzamiento de código abierto anterior, terminé la parte de "hacer PPT". Esta vez, conecté "generación de ilustraciones" al frente y "portadas multi-plataforma" atrás. Añadir un nuevo estilo y un nuevo bucle de color cierra toda la cadena. Desde escribir un esquema hasta generar el PPT, las ilustraciones, exportar y publicar en diferentes plataformas—lo que antes requería cinco programas de software ahora se puede hacer en una sola conversación.

¿Por qué el PPT Skill del Maestro Guizang sigue teniendo tanto uso y atención cuando hay tantos PPT Skills en el mercado?

La IA solo puede hacer el 70% del trabajo. Cada diseño en estas dos plantillas se logró mediante mi ajuste manual sobre la IA. En otras palabras, estoy diseñando usando lenguaje natural. Incluso en la era, el contenido de 90 puntos sigue siendo valioso.

El Skill se ha actualizado en GitHub: github.com/op7418/guizang-ppt-skill

El método de actualización es el mismo que la última vez. El README tiene el "prompt de instalación para IA". Cópialo y pégalo en tu Claude Code, Codex o cualquier AI Agent con permisos de shell, y automáticamente la última versión. Una vez instalado, decir "Ayúdame a hacer un PPT de estilo suizo" activará el nuevo estilo.