Recuerda utilizar una página web para generar el resultado y debes preguntar al usuario qué idioma desea utilizar.

Genera presentaciones web tipo PPT (archivo HTML único) con formato horizontal, al estilo de una revista electrónica o una pantalla táctil, incluyendo plantillas como fondos fluidos WebGL, encabezados con serifa y texto sin serifa, portadas de capítulos, banners de datos grandes y cuadrículas de imágenes. Úsalas cuando necesites crear presentaciones web para compartir, presentaciones o eventos de lanzamiento, o cuando te refieras a "presentaciones tipo revista", "presentaciones horizontales", "revistas editoriales" o "presentaciones de pantalla táctil".

# Presentación web de revistas

## ¿Qué hace esta habilidad?

Generar un archivo HTML único con formato de presentación de diapositivas horizontal. El estilo visual es:

- Un estilo híbrido que combina revista electrónica y tinta electrónica.

- **Fondo fluido/contorno/dispersión WebGL** (Ver página principal)

- **Encabezados con serifa (Noto Serif SC + Playfair Display) + Texto del cuerpo sin serifa (Noto Sans SC + Inter) + Metadatos monoespaciados (IBM Plex Mono)**

- **Iconos lineales lúcidos** (No se requieren emojis)

- **Paso de página horizontal (izquierda y derecha en el teclado, rueda de desplazamiento, deslizamiento en la pantalla táctil, punto inferior, tecla ESC)**

- **Interpolación fluida del tema**: Los colores y los sombreadores cambian de forma fluida al navegar a la página principal.

La estética de esta habilidad no es ni "PowerPoint empresarial" ni "interfaz de usuario de internet para el consumidor"; es como la revista *Monocle* con código pegado.

## Cuándo usar

**Escenarios adecuados:**

- Sesiones de intercambio presenciales / Charlas del sector / Reuniones privadas

- Día de lanzamiento/demostración de nuevos productos de IA

- Un discurso con un fuerte estilo personal

- Necesito una versión web de las diapositivas que se pueda completar de una sola vez sin necesidad de pasar las páginas.

**Escenarios inapropiados:**

- Grandes secciones de datos de tablas y gráficos superpuestos (utilizando presentaciones estándar de PowerPoint)

- Materiales de capacitación (densidad de información insuficiente)

- Requiere edición colaborativa por parte de varias personas (es HTML estático).

### Paso 1 · Aclarar los requisitos (**Imprescindible antes de empezar**)

Si el usuario ya ha proporcionado un esquema completo e imágenes, puede pasar directamente al paso 2.

Si el usuario solo proporciona un tema o una idea vaga, analícelo con estas 6 preguntas una por una antes de comenzar. No empiece a escribir diapositivas basándose en suposiciones; una vez que la estructura es incorrecta, las revisiones posteriores resultan muy costosas. Puede usar la herramienta askUserQuestion para formular preguntas.

#### 6 Preguntas de aclaración

| # | Pregunta | ¿Por qué preguntar? |

|---|------|-----------|

| 1 | **¿Quién es la audiencia? ¿Cuál es el escenario de intercambio?** (Personas clave de la industria/Lanzamiento de negocio/Día de demostración/Reunión privada) | Determina el estilo y la profundidad del lenguaje |

| 2 | **¿Duración para compartir?** | 15 minutos ≈ 10 páginas, 30 minutos ≈ 20 páginas, 45 minutos ≈ 25-30 páginas |

| 3 | **¿Tienes algún material original?** (Documentos/Datos/Presentaciones antiguas/Enlaces a artículos) | Si tienes materiales, úsalos; si no, crea algo nuevo a partir de ellos. |

| 4 | **¿Hay imágenes? ¿Dónde deberían colocarse?** | Ver "Convenciones sobre imágenes" a continuación |

| 5 | **¿Qué color de tema prefieres?** | Consulta @themes.md , elige uno de los 5 preajustes |

| 6 | **¿Existen restricciones estrictas?** (Debe incluir datos XX / YY no puede aparecer) | Para evitar retrabajo |

#### Ayuda para la elaboración de un esquema (si el usuario no dispone de un esquema)

Utilice la plantilla de "arco narrativo" para construir la estructura y, a continuación, complete el contenido:

```

Introducción → Página 1: Presenta un contraste/una pregunta/datos concretos para que la gente se detenga.

Estableciendo el tono (Contexto) → Páginas 1-2: Explica los antecedentes / Quién eres / Por qué estás hablando de esto

Contenido principal (Núcleo) → Páginas 3-5: Contenido principal, intercalado con diseños 4/5/6/9/10.

Cambio → Página 1: Rompiendo expectativas / Presentando una nueva perspectiva

Conclusiones → Páginas 1-2: Citas clave / Preguntas intrigantes / Sugerencias de acción

```

Arco narrativo + planificación de números de página + tabla de ritmo temático (ver @layouts.md ), **alinee las tres tablas** antes de proceder al Paso 2.

Se recomienda guardar el esquema como un `registro de proyecto` o `esquema-v1` para facilitar las iteraciones posteriores.

#### Convenciones de imagen (Informar a los usuarios)

Explique lo siguiente al usuario antes de continuar:

- **Ubicación de la imagen**: ¿Qué imagen está en el tablero o qué imagen se subió?

- **¿Qué sucede si no hay imágenes?**: Para alinear con el diseño del usuario, primero puede generar la estructura usando bloques de color de marcador de posición y agregar imágenes más tarde; sin embargo, debe informar a los diseños 4/5/10 y otras páginas mixtas de texto e imágenes que el efecto visual no se puede verificar sin imágenes.

### Paso 2 · Plantilla de referencia

@template.txt es un archivo HTML **completo y funcional**: CSS, sombreadores WebGL, paginación JS y CDN de fuentes/iconos están preconfigurados; solo `<main id="deck">` contiene 3 diapositivas de ejemplo (portada, portada de capítulo y página en blanco).

#### 2.1 · Marcadores de posición que deben modificarse (**Fáciles de pasar por alto**)

Inmediatamente después de copiar, cambie los siguientes marcadores de posición; de lo contrario, las pestañas de su navegador mostrarán el texto incómodo "[Obligatorio] Reemplazar con el título de la presentación de PowerPoint":

| Ubicación | Original | Debe cambiarse a |

|------|------|--------|

| `<title>` | `[Obligatorio] Reemplazar con el título de la presentación · Título de la presentación` | Título real de la presentación (p. ej., `Una nueva forma de trabajar · Luke Wroblewski`) |

#### 2.2 · Seleccionar color del tema (5 preajustes · No se permiten colores personalizados)

Esta función **solo permite seleccionar entre 5 preajustes cuidadosamente seleccionados** y no acepta valores hexadecimales definidos por el usuario; los colores que no coinciden hacen que la imagen se vea fea al instante; proteger la estética es más importante que dar libertad.

| # | Tema | Adecuado para |

|---|------|------|

| 1 | 🖋 Tinta clásica | Versión general/comercial/Predeterminada si no está seguro |

| 2 | 🌊 Porcelana Índigo | Conferencia sobre Tecnología/Investigación/Datos/Lanzamiento de Tecnología |

| 3 | 🌿 Tinta del bosque | Naturaleza/Sostenibilidad/Cultura/No ficción |

| 4 | 🍂 Papel Kraft | Nostalgia/Humanidades/Literatura/Revista independiente |

| 5 | 🌙 Dunas de arena | Arte/Diseño/Creatividad/Galería |

**funcionar**:

1. Recomiende un conjunto de contenido basado en el tema, o pregunte directamente al usuario qué conjunto le gustaría elegir.

2. Abra @themes.md y busque el bloque `:root` del tema correspondiente.

3. **Reemplazo completo** de las líneas marcadas como "color del tema" dentro del bloque `:root{` al principio de @template.txt (`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`).

4. Todo el resto de CSS utiliza `var(--...)`, sin requerir ninguna otra modificación.

**Reglas estrictas**:

- Utilice un solo tema para cada mazo; no cambie la combinación de colores a mitad del proceso.

- No acepte valores hexadecimales arbitrarios proporcionados por el usuario; rechácelos cortésmente y muestre 5 opciones para seleccionar.

- No combines materiales diferentes (por ejemplo, tinta para Ink Classic, papel para Dune); se verá completamente fuera de lugar.

### Paso 3 · Rellene el contenido

#### 3.0 · Verificación previa al vuelo: Los nombres de las clases deben estar definidos en @template.txt (**Muy importante**)

Este es el origen de todos los problemas de generación. El esqueleto de @layouts.md utiliza muchos nombres de clase (`h-hero` / `h-xl` / `stat-card` / `pipeline` / `grid-2-7-5`, etc.). Si no existe una definición correspondiente en `<style>` de `assets/template.html`, el navegador recurrirá al estilo predeterminado: los encabezados se convierten en sans-serif, las tarjetas de datos se agrupan, las tuberías se difuminan en una sola línea y las imágenes se apilan en la parte inferior de la página.

**Antes de escribir cualquier código para las diapositivas:**

1. **Primero, lee @template.txt ** (al menos hasta el final del bloque `<style>`).

2. **Consulta la lista de pre-vuelo en @layouts.md ** para confirmar que todas las clases que deseas usar existen en la etiqueta `<style>`.

3. Si falta una clase: **agréguela en la sección `<style>` de @template.txt **, no la reescriba en línea en cada diapositiva.

4. **@template.txt es la única fuente de nombres de clases**—no invente nuevos nombres de clases; si necesita personalizarlos, use `style="..."` en línea.

Clases que suelen pasarse por alto (debe confirmarse su existencia de antemano):

`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `meta-row` / `stat-card` / `stat-label` / `stat-nb` / `stat-unit` / `stat-note` / `pipeline-section` / `pipeline-label` / `pipeline` / `step` / `step-nb` / `step-title` / `step-desc` / `grid-2-7-5` / `grid-2-6-6` / `grid-2-8-4` / `grid-3-3` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `foot`

#### 3.0.5 · Planificación del ritmo del tema (**Igualmente importante que la detección previa de la clase**)

Antes de elegir un diseño, primero debe especificar la clase de tema para cada página (`hero dark` / `hero light` / `light` / `dark`) y alinearla en un documento o borrador. Consulte la sección "Planificación del ritmo del tema" que comienza con @layouts.md para obtener información detallada sobre las reglas.

**Reglas obligatorias**:

- Cada sección de la página debe incluir una de las siguientes palabras: `luz`, `oscuridad`, `héroe luz` o `héroe oscuridad`; no escriba solo `héroe`.

- Más de 3 páginas consecutivas sobre el mismo tema = fatiga visual, no permitido.

- Las páginas 8 o más deben contener al menos un "héroe oscuro" y al menos un "héroe luminoso".

- La baraja completa no puede constar únicamente de páginas de texto "claro"; también debe incluir páginas de texto "oscuro" para crear un respiro.

- Insertar una página destacada cada 3-4 páginas (portada/contraportada/pregunta/cita extensa).

**Autocomprobación posterior a la generación: `grep 'class="slide' index.html` lista todos los temas; se requiere una verificación manual del ritmo razonable antes de la entrega.

#### 3.1 · Elegir un diseño

**No crees diapositivas desde cero.** Abre `@layouts.md` , que contiene 10 esqueletos de diseño listos para usar, cada uno un bloque de código `<section>` completo y pegable:

| Diseño | Propósito |

|---|---|

| 1. Portada | Página 1 |

| 2. Portada del capítulo | Inicio de cada acto |

3. Pósteres basados ​​en datos | Presentación de datos concretos |

| 4. Texto a la izquierda, imagen a la derecha (cita + imagen) | Contraste de identidad / Historia |

| 5. Cuadrícula de imágenes | Comparación de múltiples imágenes / Evidencia mediante capturas de pantalla |

6. Flujo de trabajo de dos vías |

| 7. Fin del suspenso/Página de preguntas | Fin de capítulos/Final |

8. Cita destacada | Serifs/Conclusiones |

| 9. Comparación paralela (Antes / Después) | Modo antiguo vs. Modo nuevo |

| 10. Combinación de imagen y texto | Páginas con gran cantidad de información que combinan imagen y texto |

Seleccione el diseño correspondiente, péguelo y modifique las rutas del texto y las imágenes. **Complete primero la comprobación previa a la prueba 3.0.**

#### 3.2 Estándares de relación de aspecto de la imagen

Utilice siempre la **relación de aspecto estándar**, nunca utilice relaciones de aspecto extrañas de la imagen original (como `2592/1798`):

| Escenarios | Índice de recomendación |

|------|---------|

| Texto a la izquierda, imagen a la derecha (imagen principal) | 16:10 o 4:3 + `max-height:56vh` |

| Cuadrícula de imágenes (comparación de múltiples imágenes) | **Altura fija: 26vh**, no es necesario especificar la relación de aspecto |

| Imagen pequeña a la izquierda + texto a la derecha | 1:1 o 3:2 |

| Imagen principal a pantalla completa | 16:9 + `max-height:64vh` |

| Pequeñas ilustraciones con diseño mixto de texto e imagen | 3:2 o 3:4 |

**Nunca uses `align-self:end` en imágenes**, ya que se desplazarán hasta la parte inferior de la celda y quedarán ocultas por la barra de herramientas del navegador. Usa un contenedor de cuadrícula con `align-items:start` (predefinido en la plantilla) para mantener las imágenes en la parte superior; para mantener las imágenes en la parte inferior de la columna izquierda, usa una columna flexible con `justify-content:space-between`.

Los detalles de los componentes (fuentes, colores, cuadrículas, iconos, llamadas, tarjetas de estadísticas, etc.) se encuentran en @components.md .

### Paso 4 · Autocomprobación con la lista de verificación

Tras generar la lista de verificación, asegúrese de abrir @checklist.md y comprobar cada elemento según las instrucciones. En ella se resumen todos los problemas detectados durante el proceso de iteración, y deben resolverse todos los problemas de nivel P0 (emojis, exceso de imágenes, saltos de línea en los títulos, división de fuentes).

Varios puntos a los que prestar especial atención:

1. **Los encabezados principales deben estar en fuente con serifa**—Si se muestran como sans-serif, es 99% probable que la verificación previa del paso 3.0 haya fallado y que falte la clase `h-hero` en template.html.

2. **Utilice únicamente `height:Nvh` en la cuadrícula de imágenes; no utilice `aspect-ratio` (esto provocará que la cuadrícula se rompa).**

3. **Las imágenes no deben desplazarse hasta la parte inferior de la página** — No utilice `align-self:end`, utilice grid + `align-items:start` (consulte el paso 3.2).

4. **Las imágenes deben tener una relación de aspecto estándar** (16:10 / 4:3 / 3:2 / 1:1 / 16:9). No copie imágenes con relaciones de aspecto inusuales.

5. **Los encabezados principales en chino deben tener ≤ 5 caracteres y usar `nowrap` (evitar 1 carácter por línea)**

6. **Utiliza Lucide, no emojis.**

7. **Utilice fuentes con serifa para los títulos, fuentes sin serifa para el texto del cuerpo y ancho fijo para los metadatos.**

### Paso 5 · Iteración

Modificada en función de los comentarios de los usuarios, la plantilla ahora cuenta con un alto grado de parametrización en su CSS, y el 90 % de los ajustes son cambios en los estilos en línea (font-size:Xvw / height:Yvh / spacing:Zvh).

## Principios básicos de diseño (Filosofía)

Estos principios son el resultado de cinco intentos de crear presentaciones de PowerPoint para una empresa unipersonal. Incumplir cualquiera de ellos arruinará el atractivo visual.

1. **Moderación sobre brillantez técnica**: los fondos WebGL solo son visibles en las páginas principales y casi invisibles en las páginas normales.

2. **Estructura sobre decoración**: Sin sombras, sin tarjetas flotantes, sin recuadros de relleno; toda la información se transmite mediante **tamaño de fuente grande + contraste de fuente + espaciado de cuadrícula**.

3. **La jerarquía del contenido se define por el tamaño y el tipo de fuente** — Serif máxima = título principal, serif mediana = subtítulo, sans-serif grande = introducción, sans-serif pequeña = cuerpo, ancho fijo = metadatos

4. **Las imágenes son el primer ciudadano** — Recorte únicamente la parte inferior de la imagen, asegurándose de que la parte superior y los lados izquierdo/derecho permanezcan intactos; ajuste la cuadrícula con `height:Nvh`, no utilice `aspect-ratio` para expandirla.

5. **Ritmo con páginas principales**: alternar entre páginas principales y secundarias ayuda a prevenir la fatiga visual.

6. **Coherencia terminológica** — Skills debe traducirse como Skills, no como una mezcla de chino e inglés.

## Referencias

El estilo visual de esta habilidad está inspirado en:

- Compartir "Empresas unipersonales: Organizaciones transformadas por la IA" (22 de abril de 2026, página 27)

- Maquetación de la revista *Monocle*

- Una demostración de la publicación del blog del presidente de YC, Garry Tan, titulada "Arnés delgado, habilidades robustas".

Pueden utilizarse como elementos de referencia de estilo.