wigtn/wigtn-plugins

Generador de Presentaciones WIGTN

Skill para crear presentaciones HTML únicas con la identidad de marca WIGTN. Sin depender de plantillas (.pptx), Claude diseña cada presentación desde cero usando principios de marca y referencias.

Principios Clave

1. Basado en principios, sin plantillas — No depende de archivos de plantilla fijos. Lee los tokens de marca + principios de diseño de references/ y genera cada presentación en el momento.
2. Fidelidad de Marca (Brand Fidelity) — Usa solo los HEX exactos. Prohibido usar "colores similares". Tinta #1E1E28, Púrpura Característico (Pantone 265) #9B51E0.
3. Punto Púrpura Característico Repetido — El punto púrpura (.) proveniente del punto en wigtn. es la firma de la marca. En cada diapositiva repite de forma coherente al menos un motivo de punto púrpura (punto junto al número de página, punto en el número de sección, punto en esquina, punto de progreso, etc.).
4. Tema Dual Claro / Oscuro — Elige uno según el entorno de presentación. No se mezclan en una misma presentación.
5. Ajuste al Viewport — Todas las diapositivas miden exactamente 100vh. Prohibido absolutamente el scroll dentro de la diapositiva.
6. Prohibidas diapositivas solo texto — Cada diapositiva debe tener al menos un elemento visual (forma, bloque de color, punto, línea, icono).
7. Muestra, no digas — No preguntes sobre el diseño verbalmente. Una vez definido el tema/contenido, genera directamente, muestra con capturas y luego ajusta.
8. Cero dependencias — Archivo HTML único. Se puede presentar directamente en el navegador (solo se permite una línea de <link> CDN para fuentes).

Marca (Resumen)

Token	Valor	Uso
Tinta (Navy)	#1E1E28	Fondo Oscuro / Texto Claro
Púrpura (Pantone 265)	#9B51E0	Punto característico, énfasis, enlaces
Púrpura Profundo	#6B2EAA	Sombra del punto, profundidad, final de degradado
Blanco	#FFFFFF	Fondo Claro / Texto Oscuro

La paleta completa (fragmento :root Claro/Oscuro), reglas de uso de variantes del logo, tipografía y reglas del punto característico se aplican después de leer obligatoriamente references/brand.md.

Flujo de Trabajo (4 Fases)

Fase 0: Tema + Contenido (1 AskUserQuestion)

Pregunta de una sola vez con AskUserQuestion:

1. Tema — Claro (sala iluminada, tipo documento) / Oscuro (escenario, tipo keynote). Incluye recomendación.
2. Propósito — Conferencia / Compartir en equipo / Pitch deck / Capacitación / Reporte ejecutivo
3. Extensión — 5–10 diapositivas / 10–20 / 20+
4. Mensaje clave e imágenes — Contenido a transmitir, si hay imágenes y su ubicación

También confirma metadatos para la portada: nombre del presentador, fecha, empresa/producto.

Fase 1: Diseño de Estructura

Descompón el contenido en un mapa de diapositivas. Límite de densidad: la portada incluye título+subtítulo; el cuerpo máximo 4–6 viñetas (o bloque visual equivalente) por diapositiva. Si se excede, divide automáticamente.

Estructura básica: Portada → Índice → (Separador de sección → Cuerpo N) × Capítulos → Cierre (Gracias). Elige el diseño de cuerpo para cada diapositiva desde references/design-guide.md.

Fase 2: Diagramas (si es necesario)

Si se necesitan diagramas de flujo o arquitectura, invoca el skill handdrawn-diagram del mismo plugin para crear diagramas commiteables (SVG+PNG) e insértalos en la diapositiva. Si el tono dibujado a mano no es adecuado, dibuja directamente con formas CSS/SVG simples.

Fase 3: Generación de HTML

1. Lee references/brand.md y references/design-guide.md.
2. Escribe un único HTML con los tokens :root del tema seleccionado. Reglas obligatorias:
   • .slide { height: 100vh; height: 100dvh; overflow: hidden; }
   • Todas las fuentes y espaciados con clamp(min, pref, max) (prohibido usar solo px fijo)
   • Media queries basadas en altura (max-height: 700px/600px) para escalonar la reducción
   • Barra de progreso + puntos de navegación (púrpura) + teclado/toque/deslizamiento + prefers-reduced-motion
   • Punto púrpura característico repetido en todas las diapositivas
   • Inserción del logo: sigue las reglas de "Uso del Logo" más abajo
3. Rellena el contenido y usa animaciones moderadas (profesionales: fundido/deslizamiento de 0.2–0.4s).

Fase 4: Verificación y Entrega

Verifica con capturas de pantalla el ajuste al viewport, la coherencia de marca y la firma del punto. Si hay Playwright/Chrome disponible, renderiza PNG por diapositiva y léelos para revisar; si no, indica al usuario que abra en el navegador.

Generación completada:
- HTML: docs/{nombre-archivo}-presentation.html  (en el navegador, presiona F para pantalla completa → flechas/deslizamiento)

Uso del Logo

El logo de WIGTN es un activo privado del equipo, por lo que no se commitea en el plugin público (.gitignore). Se busca en este orden de prioridad:

1. ${CLAUDE_PLUGIN_ROOT}/skills/wigtn-ppt/assets/logo/ — Logo empaquetado (local del equipo, *.png está en gitignore, por lo tanto no está en clones del repositorio público)
2. <project>/docs/images/ — Ubicación local de activos de marca del equipo (también gitignore, no incluido en el repo público)
3. Respaldo con marca de agua CSS/SVG — Si no hay PNG en las dos rutas anteriores (estado predeterminado en clones públicos o entornos nuevos), renderiza wigtn + el punto púrpura directamente con fuente/SVG (hay fragmentos en brand.md). El respaldo siempre funciona.

Al usar el logo, copia el archivo a usar al workspace de la presentación (ej. docs/workspace/) y luego refiérelo con ruta relativa en el HTML. Las variantes por tema siguen la tabla de mapeo en brand.md (Claro → Logo NAVY, Oscuro → Logo BLANCO).

Anti-Patrones (Evitar)

• Cliché de degradado morado (#6366f1), fondo blanco con morado/rosa básico → Usar solo el púrpura WIGTN #9B51E0
• Usar Inter/Roboto/Arial como fuente display (rompe el tono de marca)
• Centrar todos los elementos, repetir la misma cuadrícula de tarjetas
• Usar min-height (permite desbordamiento de diapositiva) → Siempre usar height
• Omitir la firma del punto, mezclar temas, reemplazar con "color similar"

Referencias

• references/brand.md — Sistema de marca WIGTN: paleta Claro/Oscuro, variantes y colocación del logo, reglas del punto púrpura, tipografía, respaldo CSS de marca de agua
• references/design-guide.md — Principios de diseño por tipo de diapositiva (portada/índice/sección/cuerpo/cierre), reglas de viewport, animaciones, anti-patrones
• Skill design-system-reference — Reutiliza ideas de densidad de diseño y jerarquía tipográfica (Swiss Minimal, Editorial, Minimal Corporate son los más cercanos al tono WIGTN). Sin embargo, siempre sobrescribe colores, punto y logo con los tokens de WIGTN.
• Skill handdrawn-diagram — Para diapositivas que requieran diagramas

Lista de Verificación

• Fase 0: AskUserQuestion para recoger tema (Claro/Oscuro) + contenido en una sola ronda
• Fase 1: Mapa de diapositivas + límite de densidad
• Fase 2: Identificar diapositivas que necesiten diagrama (handdrawn-diagram)
• Fase 3: Leer brand.md + design-guide.md → Generar HTML único (viewport, punto púrpura, logo)
• Fase 4: Verificar con capturas de pantalla → Entregar