La semana pasada, el profesor Li Jigang me invitó a hacer una entrevista privada sobre IA y organizaciones.
Después de la sesión, descubrí que la pregunta más frecuente era: «¿Con qué hiciste esa presentación? ¿Puedes compartir el código?»
No esperaba que el subproducto se convirtiera en el producto principal.
Así que decidí abrir el código y llamarlo 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 se ve este Skill y por qué, siendo diseñador desde hace diez años, creo que tiene buen aspecto.
Cómo se ve
Cuando abres una presentación generada por el Skill, lo primero que piensas es: esto no parece hecho por IA.
Algunas características intuitivas:
- Portada: Fondo color tinta + título principal con serifa, con un fluido WebGL tenue moviéndose lentamente detrás.
- Cuerpo: El fondo cambia a blanco papel con texto color tinta encima, como una revista impresa abierta.
- Paso de página: Deslizamiento horizontal izquierda-derecha, compatible con teclado, rueda del ratón 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, mostrando cosas como «Acto II · 15 / 25», similar a los números de página de un periódico.
A esta línea visual la llamé: «Revista Electrónica × E-Ink».
La inspiración viene de las tradiciones de maquetación de revistas impresas como Monocle, The Guardian y NYT, combinadas con la estética de lectura del papel electrónico de Kindle, todo unido con la sintaxis de interacción web interactiva contemporánea.
Qué puede hacer
El Skill ofrece actualmente 10 diseños de página, 5 combinaciones de color predefinidas y un conjunto completo de interacciones para pasar página.
10 diseños cubren casi todos los tipos de página que se usan en sesiones de 15 a 30 diapositivas:
Portada de apertura, separadores de capítulos, póster de datos, texto a la izquierda e imagen a la derecha, cuadrículas de imágenes, diagramas de proceso, preguntas que generan suspense, 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 hay que cambiar el texto y las imágenes para usarlo.
5 temas corresponden a diferentes escenarios:
- Ink Classic — Lanzamientos empresariales, opción general por defecto
- 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 el :root.
Los usuarios no pueden personalizar códigos hex; luego explicaré por qué.
Las interacciones de paso de página admiten las flechas izquierda/derecha del teclado, la rueda del ratón, el deslizamiento táctil, saltos con puntos en la parte inferior y la tecla ESC para abrir un índice en miniatura.
El objetivo es acercarse lo máximo posible a la experiencia de hojear una revista real en el navegador.
El resultado es un HTML de un solo archivo. Haz doble clic para verlo en el navegador. Para enviarlo a otros solo necesitas un archivo, así no tienes que preocuparte de que las fuentes o animaciones fallen en el ordenador de otro.
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 merece la pena contar después de haberlo usado una semana.
Aclara estas 6 cosas con la IA primero
Una vez instalado el Skill, solo tienes que decir «Ayúdame a hacer una presentación estilo revista» y Claude te hará 6 preguntas de forma proactiva:
- ¿Quién es el público y cuál es el escenario? (Interno del sector / Lanzamiento empresarial / Charla privada)
- ¿Cuánto dura la presentación? (15 min ≈ 10 páginas, 30 min ≈ 20 páginas)
- ¿Hay material original? (Documentos, datos, presentaciones antiguas, enlaces a artículos)
- ¿Hay imágenes y dónde están?
- ¿Qué combinación de colores quieres? (Elige entre 5 predefinidas)
- ¿Hay restricciones importantes? (Debe incluir X dato / No puede mostrar Y)
No hace falta que digas todo de una vez; la IA pregunta una por una. Después de responder, primero te dará un esquema y una tabla de ritmo temático. Primero alinear, luego empezar a escribir código: este paso evita el 80% del trabajo repetido.
El mayor problema de usar IA para presentaciones antes era que empezaba a escribir de inmediato y solo te dabas cuenta de que la dirección estaba mal en la página 10. Este proceso de aclaración sitúa 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. Así es fácil ordenar y la IA lo referencia claramente.
- 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 arrastras el archivo con el mismo nombre a la carpeta.
El secreto para reemplazar imágenes sin pérdidas: sobrescribir con el mismo nombre
Este es el mayor problema que he encontrado: querer cambiar una imagen después de tener el texto, 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 antigua con la nueva usando el mismo nombre y no cambies ni un carácter del HTML.
Por qué tiene este aspecto
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 trasladar el lenguaje de maquetación acumulado por la industria de las revistas durante más de cien años a HTML.
División tipográfica en tres niveles
- Serifa → «Opiniones». Usa serifa para los títulos principales; el lector siente inmediatamente que «esta es una frase que debe tomarse en serio».
- Sans serifa → «Información». Alta densidad para el cuerpo del texto, fácil de leer.
- Monoespaciada → «Metadatos». Números de capítulo, fechas y números de página en encabezados y pies, como los pies de página de una 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 cromática
Blanco papel, color tinta, más un color de acento es suficiente.
El blanco puro deslumbra y el negro puro es agresivo; la industria de la impresión nunca hace eso, y Kindle tampoco.
En los 5 temas del Skill, ningún color de fondo es #FFFFFF , y ningún color de texto es #000000.
Cada conjunto solo expone 6 variables CSS, y el SKILL.md indica explícitamente: Los usuarios no pueden personalizar códigos hex; deben elegir uno de los cinco.
Cuanto más estrictas sean las restricciones, más estable será 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 aseguran el orden en una sola página.
Las páginas principales y las secundarias deben alternarse para garantizar el ritmo de toda la presentación.
Una página densa, una página espaciada: esa es la sensación de «respiración» al hojear una revista.
En el Skill hay una regla estricta: 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 en un PDF.
Palabras finales
Ninguna de las reglas anteriores las inventé yo.
He sido diseñador durante diez años, he hecho UI, interacción y efectos de IA; esto es en realidad sentido común del sector.
Simplemente las escribí una por una en SKILL.md y checklist.md para que la IA las ejecute 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 cuadrículas manualmente, eligiendo tamaños de fuente y seleccionando valores de color.
Ahora, solo le lanzo los materiales a la IA, ella los ensambla según estas reglas, y yo solo tengo que revisarlo.
Por eso me atrevo a abrir el código.
Las reglas no eran de mi propiedad exclusiva; los diseñadores de Monocle las usaron décadas antes que yo. Solo las copié a HTML 2026.
El Skill ya está en GitHub: github.com/op7418/guizang-ppt-skill
El README contiene un «mensaje de instalación para IA». Cópialo y pégalo en tu Claude Code o en cualquier 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 agente Bloome, que actualmente es gratuito:
https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G
Si te resulta útil este contenido, 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.
