DeckMason: Flujo de Trabajo de Presentaciones con IA
Resumen: Crea presentaciones HTML de calidad profesional a partir de un tema, documento o esquema. Este archivo es el punto de entrada para el flujo de trabajo de 6 fases. Léelo primero, luego carga los archivos de referencia bajo demanda cuando llegues a cada fase. No cargues todos los archivos de referencia a la vez.
Requiere un agente de IA de codificación con acceso al sistema de archivos: Claude Code, Cursor, Codex CLI, Windsurf, Aider o cualquier agente que pueda leer archivos y ejecutar scripts.
Estándar de Calidad de Salida
Cada presentación debe sentirse como si perteneciera a una página de marketing SaaS de primer nivel o a un reportaje editorial. Limpio, seguro, minimalista, profesional. Sin basura de IA. Sin degradados genéricos. Sin texto de relleno.
Inicio Rápido
Para una presentación nueva:
"Crea una presentación de pitch sobre [tema]"
"Haz una presentación sobre [asunto] para [audiencia]"
Con tu propio contenido:
"Convierte estas notas en diapositivas: [pegar contenido]"
"Dale estilo a este esquema como una presentación"
Con una marca:
"Crea una presentación usando la marca de company-deck.pptx"
"Iguala el estilo de https://linear.app para esta presentación de pitch"
Importar un PPTX existente:
"Convierte company-deck.pptx en una presentación HTML"
Scoping Pre-Vuelo (antes de generar cualquier presentación)
Define la dirección estética antes de escribir una sola diapositiva. Solo omite una pregunta si el usuario ya dio una respuesta inequívoca. Si la omites, reafirma la suposición explícitamente.
Paso 0: Vista Previa Visual (ruta preferida)
Genera 3 diapositivas de vista previa visual rápida usando 3 temas diferentes para que el usuario pueda elegir una dirección visualmente:
python3 scripts/preview_themes.py "Tu Tema Aquí"
Esto crea 3 archivos HTML de una diapositiva en previews/:
previews/preview-1-dark.html(tema Espacio Profundo)previews/preview-2-light.html(tema SaaS Moderno)previews/preview-3-bold.html(tema Señal Audaz)
Indica al usuario que abra los 3 archivos y elija una dirección. La dirección elegida se convierte en la dirección estética (paso 1), saltándose la propuesta basada en texto a continuación.
Paso 1: Dirección estética (alternativa de texto)
Si el usuario prefiere texto, propón 3 direcciones visuales adaptadas a ESTE tema y audiencia específicos. No de una lista predefinida. Cada opción combina una palabra de ambiente + una pista visual concreta (paleta, tipografía, motivo) para que el usuario pueda imaginarla. Las tres direcciones deben sentirse significativamente diferentes entre sí, no tres variantes de la misma idea. Marca una como recomendada.
Para cada dirección, indica la armonía de color (monocromática, análoga, complementaria, complementaria dividida, triádica, neutro+acento), la temperatura (cálida, fría, neutra) y la distribución 60-30-10 (qué color es dominante, secundario, acento). Esto obliga a tomar decisiones de color en la etapa de planificación, no como una ocurrencia tardía.
Paso 2: Número de páginas
Ofrece rangos:
- 3-5 diapositivas: corto / teaser
- 6-10 diapositivas: estándar
- 11-20 diapositivas: inmersión profunda
- Personalizado: el usuario especifica
Paso 3: Densidad de texto por página
Uno de cuatro niveles:
- Mínimo: una línea o un número grande
- Ligero: encabezado + 2-3 viñetas
- Estándar: encabezado + 4-5 viñetas
- Denso: varias columnas o contenido de referencia detallado
Paso 4: Movimiento
Estático, movimiento sutil de revisión en vivo, o activo de video separado. Elige estático por defecto para PDF, PPTX, Google Slides y presentaciones para leer.
Para patrones de animación impulsados por GSAP (aparición ascendente, revelación escalonada, revelación por recorte de trayectoria, escalado, deslizamiento desde izquierda/derecha, desenfoque), consulta references/animation-patterns.md. Úsalos cuando el usuario quiera revisión HTML en vivo o reproducción al estilo de un programa de presentaciones.
Solo continúa con el esquema después de que estos estén definidos.
El Flujo de Trabajo de 6 Fases (Visión General)
Lee esta visión general para entender el pipeline completo. Carga cada archivo de referencia cuando llegues a esa fase.
| Fase | Nombre | Qué sucede | Archivo de referencia |
|---|---|---|---|
| Pre-Vuelo | Scoping | Vista previa visual o 4 preguntas de texto: dirección estética, número de páginas, densidad de texto, movimiento | Este archivo (arriba) |
| 0 | Brief | Registra la solicitud, valores predeterminados, suposiciones. Escribe un brief con audiencia, arco, petición, éxito. También cubre el flujo de importación PPT. | references/phase0-brief.md |
| 1 | Estructura | Principio de Pirámide, encabezados de afirmación-evidencia, tesis, contrastes rítmicos, Capas de Diseño de Producto | references/phase1-structure.md |
| 2 | Esquema | Taxonomía de Tipos de Página, 10 Tipos de Diseño Editorial, escalado de número de diapositivas | references/phase2-outline.md |
| 3 | HTML | Arquitectura de Escala de Lienzo, Ajuste de Viewport, Matemáticas de Presupuesto Vertical, Una Idea Por Diapositiva, estructura HTML, patrones de animación, reglas DOM, proporciones de cuadrícula | references/phase3-html.md |
| 4 | Imágenes | 7 roles de imagen nombrados, taxonomía de tipos de imagen, Modo de Diapositivas de Imagen, Anti-patrones de Gráficos | references/phase4-images.md |
| 5 | Pulido | Ritmo de Página, Jerarquía Tipográfica, Sistema de Teoría del Color, Pistas de IA, Restricciones de la Industria, Guía de Voz, Crítica de Ojo de Diseñador, Columna Vertebral Narrativa | references/phase5-polish.md |
| 6 | Exportación | PPTX (python-pptx o pptxgenjs), PDF, despliegue en Vercel | references/phase6-export.md |
Modos especializados (cargar bajo demanda)
- Modo de Diapositiva Cinemática: clip de película de 22 segundos con 5 escenas para demostraciones de flujo de trabajo
- Modo Estricto Suizo Internacional: diseño de cuadrícula ultralimpio inspirado en Vignelli
- Modo de Presentación Web Editorial: presentaciones estilo revista de clave
- Biblioteca de Plantillas de Diapositivas HTML: 32 plantillas de calidad profesional de
beautiful-html-templates - Protocolo de Variación de Tema: 3 direcciones visuales distintas antes de fijar
- Sistema de Escuela de Filosofía de Diseño: 5 escuelas para briefs vagos
- Superposición de Notas del Orador: tecla N de alternancia, autoactualización por diapositiva
- Flujo de Trabajo de Importación de Marca: extraer tema de PPTX, URL de sitio web o PDF de guía de marca
Detalles completos para todos los modos especializados: references/specialized-modes.md
Salvaguardas de calidad (cargar antes de la entrega)
Todas las salvaguardas de calidad, palabras prohibidas, Regla de Basura de Datos, Regla de Recorte del 30% de Copia, Autoverificación Antes de la Entrega, resolución de problemas y requisitos: references/quality-guardrails.md
Preajustes de Estilo
Consulta STYLE_PRESETS.md para 31 estilos seleccionados (11 originales + 20 extendidos) más Kami Warm Editorial:
11 Originales: SaaS Moderno (predeterminado), Cibernético Nocturno, Ejecutivo de Medianoche, Espacio Profundo, Verde Terminal, Papel y Tinta, Suizo Moderno, Pastel Suave, Editorial Cálido, Brutalista, Ola Degradada
20 Extendidos: Señal Audaz, Estudio Eléctrico, Voltaje Creativo, Botánico Oscuro, Pestañas de Cuaderno, Geometría Pastel, Pastel Dividido, Editorial Vintage, Bento de Vidrio Líquido, Plano de Ingeniería, Mapa de Acuarela, Cita Serifa Dorada, Lección de Pizarra, Pila de Capas Explotadas, Producto Hiperreal, Infografía de Resumen, Cuadrícula Cobalto, Órbita 8-Bit, Cuadrícula Cruda, Pliego Publicitario
Kami Warm Editorial: una especificación editorial completa para presentaciones de calidad de impresión, similares a papel. Consulta la sección Kami en STYLE_PRESETS.md.
Detalles completos de CSS y fuentes en STYLE_PRESETS.md.
Cómo Leer Esta Habilidad
- Lee este archivo primero. Contiene el Inicio Rápido, el Scoping Pre-Vuelo y la visión general de 6 fases.
- Carga los archivos de referencia bajo demanda cuando llegues a esa fase. No cargues todas las referencias a la vez.
- Antes de entregar cualquier presentación, carga
references/quality-guardrails.mdy ejecuta la lista de verificación de Autocomprobación. - Para modos especializados (Cinemático, Suizo Estricto, Web Editorial, etc.), carga
references/specialized-modes.mdsolo cuando el usuario solicite ese modo. - Para animaciones GSAP, carga
references/animation-patterns.mdcuando el usuario quiera movimiento más allá de las transiciones CSS estándar.
Esta estructura de divulgación progresiva ahorra tokens de contexto. El archivo SKILL.md único original tenía 1,195 líneas. Este punto de entrada tiene ~200 líneas. Cada archivo de referencia se carga solo cuando es necesario.
Referencia Rápida de Exportación
# Exportación PPTX (Ruta A: python-pptx, basada en imágenes)
python3 scripts/pptx_export.py presentation.html --output presentation.pptx
# Importación PPTX (convertir .pptx existente a JSON para DeckMason)
python3 scripts/pptx_import.py input.pptx --output decks/input_deck.json
# Vista previa visual (3 temas para que el usuario elija)
python3 scripts/preview_themes.py "Tu Tema"
# Exportación PDF (Chrome sin interfaz)
chrome --headless --print-to-pdf=presentation.pdf --run-all-compositor-stages-before-draw --virtual-time-budget=5000 presentation.html
# Despliegue en Vercel (URL en vivo)
npx vercel
Requisitos
- Un agente de IA de codificación con acceso al sistema de archivos y terminal
- Cualquier backend LLM capaz
- Python 3 +
python-pptxpara la ruta de exportación PPTX A (pip3 install python-pptx) - Node.js +
pptxgenjspara la ruta de exportación PPTX B (npm install pptxgenjs) - Navegador moderno (Chrome/Edge/Firefox/Safari)
No se requieren claves API adicionales. Todo se ejecuta localmente.
Instalación mediante npm (opcional)
# Inicio rápido sin clonar
npx deckmason init [dir]
# Instalación global
npm install -g deckmason
deckmason init
deckmason themes
deckmason preview "Tu Tema"
deckmason import company-deck.pptx
Consulta README.md para instrucciones completas de npm.