La semana pasada, el profesor Li Jigang me invitó a participar en una sesión privada de entrevistas sobre IA y organizaciones.
Después de la sesión, la pregunta más recurrente fue: «¿Con qué hiciste esa presentación? ¿Puedes publicarla como código abierto?».
No esperaba que el subproducto se convirtiera en el producto principal.
Así que decidí abrirla, y la llamé guizang-ppt-skill (https://github.com/op7418/guizang-ppt-skillhttps://github.com/op7418/guizang-ppt-skill)).
El artículo de hoy hablará sobre cómo es este Skill y por qué, siendo diseñador desde hace diez años, creo que se ve bien.
Cómo se ve
Cuando abres una presentación generada con el Skill, la primera impresión suele ser: esto no parece hecho por IA.
Algunas características evidentes:
- Portada: Fondo color tinta + título principal con serifa, con un leve fluido WebGL que se mueve lentamente detrás.
- Cuerpo: El fondo vuelve a blanco papel con texto color tinta encima, como una revista impresa abierta.
- Paso de página: Deslizamiento horizontal de izquierda a derecha, compatible con teclado, rueda del mouse y gestos táctiles — no es el típico «siguiente diapositiva» de PowerPoint.
- Metadatos: Cada página tiene texto monoespaciado pequeño en las cuatro esquinas, con cosas como «Acto II · 15 / 25», similar a los números de página de los periódicos.
Le di a este tono visual un nombre: «Revista Electrónica × Tinta Electrónica».
La inspiración viene de las tradiciones de diseño editorial de revistas impresas como Monocle, The Guardian y NYT, combinadas con la estética de lectura del Kindle de tinta electrónica, todo unido con la sintaxis web contemporánea de interacción.
Qué puede hacer
El Skill actualmente ofrece 10 diseños 10 diseños de página, 5 preajustes de color y un conjunto completo de interacciones para pasar páginas.
10 diseños cubren casi todos los tipos de página que se usan en una sesión de 15 a 30 diapositivas:
Portada de apertura, separadores de capítulos, pósters de datos, texto a la izquierda e imagen a la derecha, cuadrículas de imágenes, diagramas de proceso, preguntas de suspenso, citas grandes, comparaciones Antes/Después y diseños mixtos de texto e imagen.
Cada uno es un esqueleto HTML que se puede pegar directamente; solo cambia el texto y las imágenes para usarlo.
5 Temas corresponden a diferentes escenarios:
- Ink Classic — Lanzamientos empresariales, predeterminado general
- Indigo Porcelain — Tecnología, investigación, conferencias de IA
- Forest Ink — Naturaleza, sostenibilidad, humanidades
- Kraft Paper — Nostalgia, literatura, revistas independientes
- Dune — Arte, diseño, creatividad
Cada tema es solo un conjunto diferente de valores para 6 variables CSS. Cambiar de tema solo requiere reemplazar esas 6 líneas de código en :root.
No se permite que los usuarios personalicen códigos hex; luego explicaré por qué.
Las interacciones de paso de página admiten las flechas izquierda/derecha del teclado, la rueda del mouse, el deslizamiento táctil, saltos con puntos en la parte inferior y la tecla ESC para abrir un índice de miniaturas.
El objetivo es acercarse lo más posible a la experiencia de hojear una revista real en el navegador.
El resultado es un archivo HTML único. Haz doble clic para verlo en un navegador. Enviarlo a otros es solo un archivo, así que no tienes que preocuparte por que las fuentes o animaciones se rompan en la computadora de alguien más.
Cómo usarlo
En realidad, el verdadero valor de este Skill no está en la plantilla en sí, sino en que define una interfaz para la colaboración Humano × IA en presentaciones.
Aquí hay tres cosas que creo que vale más la pena contar después de usarlo yo mismo durante una semana.
Primero aclara estas 6 cosas con la IA
Una vez instalado el Skill, solo necesitas decir «Ayúdame a hacer una presentación estilo revista» y Claude te hará 6 preguntas de forma proactiva:
- ¿Quién es la audiencia y cuál es el escenario? (Interno del sector / Lanzamiento empresarial / Sesión privada)
- ¿Cuánto dura la presentación? (15 min ≈ 10 páginas, 30 min ≈ 20 páginas)
- ¿Tienes material original? (Documentos, datos, presentaciones viejas, enlaces a artículos)
- ¿Hay imágenes? ¿Dónde están ubicadas?
- ¿Qué color de tema quieres? (Elige entre 5 preajustes)
- ¿Hay restricciones fijas? (Debe incluir tal dato / No puede mostrar tal cosa)
No tienes que decirlo todo de una vez; preguntará una por una. Después de responder, primero te dará un esquema y una tabla de ritmo de temas. Primero alinear, luego empezar a escribir código — este paso evita el 80% de mi retrabajo.
El mayor problema de usar IA para presentaciones antes era que empezaba a escribir inmediatamente, y solo te dabas cuenta de que la dirección estaba mal en la página 10. Este proceso de aclaración mueve la «alineación» al principio.
Cómo insertar imágenes
Las imágenes se colocan en una carpeta images/ al mismo nivel que index.html, con reglas de nomenclatura específicas:
1ppt/2├── index.html3└── images/4 ├── 01-cover.jpg5 ├── 03-figma.png6 └── 05-dashboard.png
- Números de página con cero a la izquierda + semántica en inglés — 01 en lugar de 1, cover en lugar de fengmian. Esto facilita la ordenación y la referencia de la IA.
- Usa JPG para fotos, PNG para capturas de pantalla — Las capturas contienen texto; PNG las mantiene nítidas.
- Ancho de imagen individual ≥ 1600px — Para que no se vea borrosa en proyecciones de pantalla grande.
Solo tienes que decirle a Claude «La página 3 es una captura de pantalla de la interfaz de Figma», y automáticamente la escribirá como images/03-figma.png. Tú solo colocas el archivo con el mismo nombre en la carpeta.
El secreto para reemplazar imágenes sin pérdida: Sobrescribe con el mismo nombre
Este es el mayor problema con el que me he topado: querer cambiar una imagen después de tener el texto listo, y luego tener que buscar y reemplazar rutas globalmente, lo que a menudo rompe el HTML.
La forma correcta es una sola frase: Sobrescribe la imagen vieja con la nueva usando el mismo nombre y no cambies ni un carácter en el HTML.
Por qué se ve así
Después de hablar de cómo usarlo, hablemos de por qué es como es.
El buen diseño no es misterio; es un conjunto de decisiones descomponibles. Lo que he hecho es básicamente mover el lenguaje de diseño acumulado por la industria editorial durante más de cien años al HTML.
División en tres niveles de la tipografía
- Serifa → «Opiniones». Usa serifas en los títulos principales; los lectores sienten de inmediato «esta es una frase que hay que tomar en serio».
- Sans-serif → «Información». Alta densidad para el cuerpo del texto, fácil de leer.
- Monoespaciado → «Metadatos». Números de capítulo, fechas y números de página en encabezados y pies, como los pies de revista o el código en una terminal.
Los lectores no tienen que pensar mucho; sus ojos saben automáticamente si una frase es el texto principal o una nota al pie.
Disciplina del color
Blanco papel, color tinta, más un color de acento es suficiente.
El blanco puro cansa, y el negro puro es agresivo; la industria gráfica nunca hace eso, y tampoco Kindle.
En los 5 temas del Skill, ninguno de los colores de fondo es #FFFFFF, y ninguno de los colores de texto es #000000.
Cada conjunto solo expone 6 variables CSS, y el SKILL.md dice explícitamente: No se permite que los usuarios personalicen códigos hex; deben elegir uno de los cinco.
Cuanto más estrictas las restricciones, más estable el estilo. Proteger la estética es más importante que dar libertad al usuario.
Cuadrícula y ritmo
Las cuadrículas fijas como 7:5, 6:6 y 8:4 garantizan el orden en una sola página.
Las páginas principales y las secundarias deben alternarse para asegurar el ritmo de toda la presentación.
Una página densa, una página espaciada: esa es la sensación de «respiración» que se tiene al hojear una revista.
Una regla estricta está escrita en el Skill: más de tres páginas consecutivas con el mismo tema se considera un error P0.
Una presentación sin ritmo es solo un montón de diapositivas apiladas como un PDF.
Palabras finales
Ninguna de las reglas anteriores fue inventada por mí.
He sido diseñador durante diez años, haciendo UI, interacción y efectos de IA; en realidad, esto son sentido común de la industria.
Simplemente las escribí una por una en SKILL.md y checklist.md para que la IA pueda ejecutarlas por mí.
En otras palabras, este Skill es un paquete comprimido de mis diez años de estética.
Antes, para hacer una presentación decente, tenía que pasar dos días ajustando manualmente cuadrículas, eligiendo tamaños de fuente y seleccionando valores de color.
Ahora, solo le tiro los materiales a la IA, ella los ensambla según estas reglas, y yo solo necesito revisarlo.
Por eso me atrevo a abrirlo como código abierto.
Las reglas no eran de mi propiedad exclusiva; los diseñadores de Monocle las usaron décadas antes que yo. Yo solo las copié al HTML de 2026.
El Skill ya está en GitHub: github.com/op7418/guizang-ppt-skill
El README contiene un «prompt de instalación para IA». Cópialo y pégalo en tu Claude Code u otro Agente de IA, y completará la instalación automáticamente. Una vez instalado, di «Ayúdame a hacer una presentación estilo revista» para activarlo.
También puedes usarlo dentro del Bloome Agent, que actualmente es gratuito:
https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G
Si este contenido te ha sido útil, por favor dale un «me gusta» o compártelo con amigos que lo necesiten.
También puedes compartir en los comentarios las presentaciones que hayas hecho con este Skill.
