PPT estilo revista digital @GuiCang
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".

Featured by
淡苍
Why we love this skill
Esta habilidad combina estilos de revistas electrónicas y tinta electrónica para crear presentaciones de PowerPoint web únicas, artísticas y con un diseño que permite pasar las páginas horizontalmente. Alejándose de las plantillas empresariales tradicionales, utiliza fuentes elegantes, fondos fluidos y diseños sofisticados para crear una experiencia visual de alta calidad que recuerda a la revista Monocle.
Instrucciones
Recuerda usar una página web para generarlo.
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
Cuerpo 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 `
#### 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 |
|------|------|--------|
| `
#### 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 `