Graphic Slide Deck

¿Qué hace Graphic Slide Deck?

Genera una presentación HTML profesional de diapositivas a partir de un resumen, notas de contenido o un archivo existente. La salida es un único archivo HTML autónomo: se abre en cualquier navegador, sin herramientas de compilación.

---

Reglas críticas -- no negociables:

1. Cada diapositiva DEBE caber dentro de 100vh. Sin desplazamiento dentro de las diapositivas. Si el contenido se desborda, dividir en dos diapositivas.
2. TODOS los tamaños de fuente y espaciados DEBEN usar clamp(). Nunca usar px/rem fijos para elementos que escalan.
3. HTML autónomo único: todo el CSS/JS incrustado. Cero dependencias externas, excepto el enlace CDN de la fuente.
4. Nunca volcar HTML en el chat. Guardar en archivo, mostrar solo el resumen.
5. Sin estética genérica de IA de baja calidad: verificar contra la lista NO USAR en references/style-presets.md.

---

Paso 1: Recepción del resumen

Necesito tres cosas para empezar. Si las tres están presentes en el mensaje: saltar al Paso 2.

Si falta alguna, preguntar exactamente:

"Para empezar, necesito tres cosas:

1. Propósito -- ¿para qué es esta presentación? (pitch para inversores / llamada de ventas / charla en conferencia / presentación interna / incorporación / otro)
2. Audiencia -- ¿quién la verá? (VCs, prospectos, tu equipo, ejecutivos, sala de conferencias, LinkedIn)
3. Tema o contenido -- pega notas, una URL, una breve descripción o sube un archivo"

Esperar las tres antes de continuar.

---

Paso 2: Recepción completa

Hacer todas las preguntas en un solo mensaje, agrupadas por categoría. El usuario puede omitir cualquier: se aplican valores predeterminados.

"Algunas preguntas antes de comenzar:

Contenido

1. Mensaje clave -- una sola frase que la audiencia debe recordar después de irse
2. Número de diapositivas -- Corta (5-10) / Media (10-20) / Larga (20+)?
3. Fuente de contenido -- Todo el contenido listo / Notas aproximadas (yo estructuraré) / Solo tema (yo redactaré)?
4. Activos existentes -- ¿Alguna imagen, captura de pantalla o logotipo para incluir? (sí + rutas / no)

Diseño 5. Estilo -- midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / "muéstrame opciones" 6. Relación de aspecto -- 16:9 (1920×1080, predeterminado) / 1:1 (1080×1080, LinkedIn) 7. Edición en línea -- ¿debería el texto ser editable en el navegador después de exportar? (Sí / No)

Salida 8. Formato de salida -- Solo HTML / HTML + PDF / HTML + PDF + desplegar en URL 9. Nombre de la presentación -- slug para nombrar archivos/carpetas (ej. "q2-investor-pitch"); lo derivaré si se omite"

Valores predeterminados si se omite:

Pregunta	Predeterminado
Mensaje clave	derivado del propósito + tema
Número de diapositivas	12
Fuente de contenido	solo tema
Activos existentes	ninguno
Estilo	clean-slate
Relación de aspecto	16:9
Edición en línea	No
Formato de salida	HTML + PDF
Nombre de la presentación	derivado del slug del tema

Si estilo = "muéstrame opciones": Generar 3 vistas previas HTML de una sola diapositiva (una para cada uno de 3 preajustes de estilo que se ajusten al propósito de la presentación). Guardar en .claude-design/previews/style-a.html, style-b.html, style-c.html. Abrir cada una: open .claude-design/previews/style-a.html, etc. Pedir al usuario que elija antes del Paso 3.

---

Paso 2.5: Dirección de diseño interna (no mostrada al usuario)

A partir de las respuestas del Paso 2, determinar antes del Paso 3:

Carácter visual (derivado del estilo, o inferido si no se especifica):

• midnight-editorial o magazine-red → dark-editorial
• clean-slate o product-minimal → light-minimal
• matt-gray → neutral-professional
• brutalist → bold-expressive
• mint-pixel-corporate o soft-cloud → fresh-corporate
• Estilo no especificado: pitch para inversores → midnight-editorial; ventas → clean-slate; conferencia → brutalist o midnight-editorial; interno → matt-gray

UNA diapositiva imperdible -- identificar antes del Paso 3:

• Pitch para inversores → destacado-de-estadísticas (diapositiva de tracción/métricas)
• Presentación de ventas → destacado-de-estadísticas (diapositiva de ROI/resultados)
• Charla en conferencia → cita-destacada o destacado-de-estadísticas (idea clave)
• Presentación interna → cierre-llamada-a-la-acción (diapositiva de decisión/recomendación)

Sesgo de selección de diseño -- anotar los 2-3 diseños más relevantes para este tipo de presentación para priorizar en el Paso 3.

Nunca preguntar al usuario por la dirección de diseño: derivarla completamente de sus respuestas.

---

Paso 3: Diseño de estructura

Leer references/layout-library.md antes de planificar.

Planificar la secuencia completa de diapositivas. Asignar un tipo de diseño de los 13 en references/layout-library.md a cada diapositiva.

Tipo de presentación → estructura típica:

Pitch para inversores (12 diapositivas):

1. [title-hero] Empresa + eslogan
2. [section-divider] El Problema
3. [text-full] Detalle del problema
4. [text-left-image-right] Visión general de la solución
5. [image-full] Captura de pantalla del producto
6. [stat-highlight] Tracción -- diapositiva imperdible
7. [comparison-table] vs. competidores
8. [timeline] Hoja de ruta
9. [text-full] Equipo
10. [stat-highlight] Tamaño del mercado
11. [text-left-image-right] Modelo de negocio
12. [closing-cta] La solicitud

Presentación de ventas (8-10 diapositivas):

1. [title-hero]
2. [quote-callout] Punto de dolor del prospecto
3. [text-left-image-right] Solución
4. [image-grid] Capturas de pantalla del producto
5. [stat-highlight] ROI/resultados -- imperdible
6. [comparison-table] vs. alternativas
7. [text-full] Implementación / próximos pasos
8. [closing-cta]

Charla en conferencia (15-20 diapositivas): title-hero → section-dividers → diapositivas text-full → image-full → stat-highlight o quote-callout (imperdible) → timeline → closing-cta

Presentación interna (8-12 diapositivas): title-hero → text-full (contexto) → stat-highlight (estado actual) → two-column-text (opciones) → comparison-table → text-full (recomendación) → closing-cta (la decisión -- imperdible)

Mostrar la estructura propuesta como una lista numerada con [tipo-de-diseño] entre corchetes. Ejemplo:

Estructura propuesta (12 diapositivas, estilo midnight-editorial):

1. [title-hero] DataPulse -- Decisiones de ingresos en 5 minutos
2. [section-divider] El Problema
...
12. [closing-cta] La solicitud + [email protected]

¿Funciona esta estructura, o debería ajustar alguna diapositiva?

Esperar confirmación antes del Paso 4.

---

Paso 4: Borrador de contenido

Escribir el texto por diapositiva en secuencia. Solo texto plano -- aún sin HTML.

Reglas de texto por diseño:

• title-hero: titular (máx. 6 palabras) + subtítulo (1 oración) + opcionalmente texto de etiqueta
• section-divider: solo etiqueta de sección de 2-4 palabras
• text-full: encabezado (máx. 5 palabras) + 4-6 viñetas O 2 párrafos (nunca ambos en la misma diapositiva)
• text-left-image-right / image-left-text-right: encabezado + 3-4 viñetas + [IMAGEN: descripción]
• two-column-text: 2 encabezados de columna + máx. 3 viñetas cada uno
• image-full: [IMAGEN: descripción] + opcionalmente pie de foto (máx. 10 palabras)
• image-grid: hasta 6 marcadores de posición [IMAGEN: descripción] con pies de foto cortos
• stat-highlight: 2-4 métricas escritas como NÚMERO | etiqueta (ej. 3× | cierre más rápido). CERO texto de cuerpo.
• quote-callout: cita (máx. 30 palabras) + atribución (nombre, cargo)
• comparison-table: encabezados de columna (máx. 3) + 4-6 etiquetas de fila + contenido de celda (1-3 palabras cada una)
• timeline: 3-6 hitos (etiqueta + fecha + descripción de 1 línea)
• closing-cta: titular (máx. 5 palabras) + texto de acción de CTA + información de contacto (correo electrónico + URL -- ambos obligatorios)

Palabras prohibidas (en todo el texto, sin excepciones): "poderoso", "sin fisuras", "revolucionario", "apalancar", "innovador", "transformador", "de vanguardia", "robusto", "desbloquear", "escalable" (como adjetivo de relleno).

Filosofía del texto: Los fragmentos están bien. Los números superan a los adjetivos. Cada palabra gana su lugar.

---

Paso 5: Generación HTML

Leer TODO antes de generar cualquier HTML:

Referencias de esta habilidad:

• references/design-system.md
• references/layout-library.md
• references/style-presets.md
• references/animation-guide.md

Referencias cruzadas de frontend-slides (leer estos archivos exactos):

• /Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css -- incluir el contenido COMPLETO textual dentro del bloque <style>
• /Users/ksd/Desktop/Varnan_skills/frontend-slides/html-template.md -- clase SlidePresentation, navegación por teclado, sistema de edición en línea
• /Users/ksd/Desktop/Varnan_skills/frontend-slides/animation-patterns.md -- animaciones de entrada, efectos de fondo, efectos interactivos

Reglas de generación:

1. HTML autónomo único. Todo el CSS y JS incrustados. El enlace CDN de la fuente <link> es la única referencia externa.
2. Incluir el contenido COMPLETO textual de viewport-base.css dentro del bloque <style> -- no parafrasear ni acortar.
3. Fuentes solo de Google Fonts o Fontshare. Las opciones de fuente provienen del preajuste elegido en references/style-presets.md.
4. Usar la clase SlidePresentation de html-template.md. Implementar navegación completa por teclado (flechas, espacio, avance/retroceso de página), táctil/deslizamiento, barra de progreso y puntos de navegación. navDotsContainer.innerHTML = "" antes de construir los puntos de navegación -- nunca omitir esto.
5. Si se opta por edición en línea: implementar el sistema completo de edición en línea de html-template.md, incluyendo exportFile(). La función exportFile() DEBE eliminar contenteditable, body.edit-active y las clases .active/.show antes de capturar outerHTML.
6. Relación de aspecto:
   • 16:9 (predeterminado): las diapositivas son width: 100vw; height: 100vh
   • 1:1 (LinkedIn): agregar propiedad personalizada CSS --slide-height: min(100vh, 100vw) y usarla en .slide
7. Cada sección de diapositiva DEBE usar class="slide" -- necesario para la detección de diapositivas de export-pdf.sh.
8. Agregar un comentario antes de cada diapositiva: /* === SLIDE N: TIPO-DE-DISEÑO === */
9. Aplicar la UNA diapositiva imperdible del Paso 2.5 con el máximo peso visual -- la tipografía más grande, la mayor animación, el elemento característico del preajuste de estilo a máxima intensidad. Todas las demás diapositivas son compositivamente más tranquilas.
10. Sin imágenes proporcionadas → usar elementos visuales generados por CSS (mallas de degradado, formas geométricas, patrones de cuadrícula de animation-patterns.md). Este es un camino de primera clase, no una solución alternativa.

Disciplina tipográfica:

• Números de estadísticas: clamp(3.5rem, 12vw, 9rem) -- una métrica que llena un tercio de la diapositiva se lee con autoridad
• Titular heroico: clamp(2.5rem, 8vw, 6rem) como mínimo. Nunca reducir el tamaño por seguridad.
• Nunca usar px/rem fijos en ningún elemento que el usuario verá. Usar clamp en todo.

Problema común de CSS de viewport-base.css: Nunca escribir -clamp(), -min(), -max() directamente en CSS. Envolver en calc(-1 * clamp(...)).

---

Paso 6: Autoverificación

Revisar cada elemento. Corregir cada fallo -- no omitir.

Viewport y renderizado:

• Cada .slide tiene height:100vh; height:100dvh; overflow:hidden
• TODOS los tamaños de fuente y espaciados usan clamp() -- sin px fijos en elementos que escalan
• Ninguna diapositiva se desborda en viewport 1280×720 (verificar contra límites de densidad de layout-library.md)
• Las imágenes usan max-height: min(50vh, 400px)
• Puntos de interrupción para alturas de viewport de 700px, 600px, 500px presentes (de viewport-base.css)
• Media query prefers-reduced-motion presente
• Sin -clamp(), -min(), -max() en CSS -- envuelto en calc(-1 * ...) si se necesita un valor negativo

Estructura:

• El número de diapositivas coincide con el plan del Paso 3
• Cada diapositiva usa class="slide"
• Cada tipo de diseño se implementa correctamente según references/layout-library.md
• Clase SlidePresentation presente con navegación por teclado, táctil, barra de progreso, puntos de navegación
• navDotsContainer.innerHTML = "" antes de construir los puntos de navegación
• Si se opta por edición en línea: exportFile() elimina el estado de edición antes de capturar outerHTML

Calidad de diseño:

• UNA diapositiva imperdible visualmente dominante -- no enterrada entre diapositivas de igual peso
• Jerarquía tipográfica clara: display >> encabezado >> cuerpo (al menos relación de tamaño 2:1 entre niveles)
• Los tokens del preajuste de estilo se aplican de manera consistente (colores, fuentes de references/style-presets.md)
• Sin patrones de baja calidad (verificar contra la lista NO USAR en references/style-presets.md)

Contenido:

• Sin palabras prohibidas en ningún texto de diapositiva
• El titular de title-hero tiene 6 palabras o menos
• stat-highlight tiene CERO texto de cuerpo compitiendo con los números
• closing-cta tiene acción específica + información de contacto (no solo "Gracias")

Si alguna verificación falla: corregir en línea, luego volver a ejecutar la lista de verificación mentalmente antes de continuar.

---

Paso 7: Salida

Guardar el HTML principal primero:

mkdir -p deck/[nombre]-slides

Escribir en: deck/[nombre]-slides/index.html

Abrirlo: open deck/[nombre]-slides/index.html

Archivos HTML por diapositiva (generar siempre):

Extraer cada <section class="slide"> del HTML principal. Para cada una, crear un archivo independiente con:

• El bloque <style> completo del HTML principal (copiado textual)
• La <section class="slide"> individual envuelta en un shell HTML mínimo
• Sin JS de SlidePresentation (visualización estática por diapositiva, sin necesidad de navegación)

Escribir en: deck/[nombre]-slides/slide-001.html, slide-002.html, etc. (con relleno de ceros a 3 dígitos).

Si se solicita PDF:

bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
  deck/[nombre]-slides/index.html \
  deck/[nombre].pdf

Nota: la primera ejecución instala Playwright automáticamente (~30-60 segundos). Informar al usuario.

Si se solicita despliegue:

bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/deploy.sh \
  deck/[nombre]-slides/

Limpieza: Eliminar .claude-design/previews/ si se generaron archivos de vista previa de estilo en el Paso 2.

---

Paso 8: Resumen (sin HTML en el chat)

Presentar en el chat:

## Presentación: [nombre de la presentación]
Fecha: [hoy] | Estilo: [estilo] | Diapositivas: [N] | Aspecto: [16:9 o 1:1]
Propósito: [propósito] | Audiencia: [audiencia]

---

### Archivos
Principal:      deck/[nombre]-slides/index.html
Por diapositiva: deck/[nombre]-slides/slide-001.html → slide-0NN.html
PDF:       deck/[nombre].pdf  [si se generó]
URL en vivo:  [url]  [si se desplegó]

---

### Navegación
Teclas de flecha / Espacio / Avance/Retroceso de página -- avanzar diapositivas
Hacer clic en puntos de navegación -- saltar a cualquier diapositiva
Tocar / deslizar -- funciona en móvil

---

### Personalizar
Editar las variables CSS de :root en la parte superior del archivo para cambiar colores
Cambiar la URL de fuente @import para cambiar la tipografía
Eliminar la clase .reveal de los elementos para desactivar las animaciones de entrada

---

### Lista de verificación de la presentación
- [ ] Reemplazar los marcadores de posición [IMAGEN: descripción] con imágenes reales
- [ ] Verificar que la métrica/cita en la diapositiva [N] sea precisa (la diapositiva imperdible)
- [ ] Probar en el tamaño de pantalla de destino ([1920×1080 o 1080×1080])
- [ ] Si se presenta en vivo: probar la navegación por teclado en pantalla completa

...