adminosinthub-bit/Claude-Video-Skill

HTML → video: múltiples variantes, selección de la mejor, ensamblaje final

Claude es más fuerte en diseño con HTML/CSS. Por eso hacemos el video así: escribimos la animación en HTML, la renderizamos en video, vemos el resultado con nuestros propios ojos (cuadros), comparamos variantes y mejoramos.

Requisitos

• node + playwright (con Chromium), ffmpeg. Verificación: bash scripts/check-env.sh.

Inicio rápido

cp references/template-scenes.html work/<nombre>/v1.html     # plantilla del motor de escenas
node scripts/render.mjs work/<nombre>/v1.html --preset vertical-preview --duration 20 --out work/<nombre>/v1.mp4

• references/engine.js — motor de escenas: fondo, subtítulos con resaltado (*palabra*), progreso, transiciones, easing (E.pop, E.type, E.set).
• references/parts.js — detalles: mascota P.bot, iconos P.icon, ventana macOS P.win, burbujas de chat.
• references/design-notes.md — qué hace que un video sea «vivo» (trama, gancho, ritmo, subtítulos). Léelo antes de escribir las variantes.
• Ejemplos de videos terminados: examples/ (claude-ad — 16:9; chatgpt-ad — 9:16, 25 s; duolingo-ad — 9:16, 40 s, 60 fps con trama y demostraciones; claude-self-ad — 9:16, 39 s, 60 fps, anuncio del propio Claude con un meta-giro).
• Tamaño del archivo: un video de 40 s / 60 fps ≈ 10 MB; si se necesita un límite más pequeño — --fps 30 o recodifica ffmpeg -i in.mp4 -crf 24 out.mp4.

Principios clave de calidad

1. Muestra, no cuentes. Cualquier afirmación en el video debe ser una escena de demostración, no un texto.

   Afirmación	Qué mostrar
   «Escribe código»	se escribe la consulta, luego aparece el código línea por línea
   «Explica con claridad»	un error real (she drink), resaltado y la regla «+s», un búho con explicación
   «Enseña en la práctica»	un dedo toca las palabras, se forma la frase, panel verde «¡Correcto!»
   «Racha de 346 días»	contador 1→346 con una llama, calendario se llena con una ola, notificación, felicitaciones con confeti
   «Juego»	tabla de la liga, donde la fila del héroe sube al 1.er lugar, y +XP

2. Describe lo que ocurre. En cada escena, dos capas de texto: un pequeño título-etiqueta arriba (<div class="kick">: «Lección», «Liga») y un subtítulo abajo con la palabra clave resaltada (cap: 'Explica los *errores* con claridad'). Las frases completas son mejores que los lemas de una sola palabra.

3. Suavidad. El video final se renderiza a 60 fps. Todo vive de forma continua: apariciones elásticas (E.spring, E.pop), lento zoom de cámara (cam: [1, 1.05]), balanceo de la mascota, parpadeo (P.blink), toques de dedo con ondas (P.touch), contadores (E.count), transiciones circle/wipe/left. No dejes fotogramas estáticos por más de ~0.5 s.

4. Trama: gancho (dolor/humor) → demostraciones → «mejores cualidades» → clímax (recompensa/resultado) → llamada a la acción. 30–45 s para publicidad.

5. Tres variantes — tres ideas diferentes, no tres variaciones de color (por ejemplo: «contador de racha», «lección en vivo», «diálogo con la mascota»). Luego el final se ensambla a partir de las mejores escenas de todas las variantes.

Proceso

1. Briefing

Precisa (o elige valores predeterminados razonables): tema/texto, audiencia, duración (publicidad 20–30 s, historia hasta 60 s), formato (por defecto vertical 1080×1920 para Reels/Shorts/TikTok; 1920×1080 y 1080×1080 — bajo petición), fps (30), estilo, colores/tipografía. Crea un storyboard corto: gancho → problema → solución → demo → llamada a la acción. Para publicidad de marca, no uses logotipos oficiales — dibuja tu propia mascota.

2. Tres o más variantes DIFERENTES

Crea una carpeta de trabajo work/<nombre>/ y dentro v1.html, v2.html, v3.html (pueden ser más). Las variantes deben diferir en concepto, no en detalles menores. Por ejemplo: (a) historia con mascota, (b) demo del producto con tarjetas, (c) cortes rápidos con tipografía grande. Diferente composición, paleta, ritmo. Cada archivo debe ser un HTML autónomo (sin cargas externas, fuentes — del sistema o incrustadas). Reglas de animación — en references/animation-contract.md; plantilla de inicio — references/template.html.

3. Renderizado de cada variante

Variantes — en resolución de vista previa (rápido), final — en resolución completa:

node scripts/render.mjs work/<nombre>/v1.html --out work/<nombre>/v1.mp4 --preset vertical-preview --duration 21
node scripts/render.mjs work/<nombre>/final.html --out work/<nombre>/final.mp4 --preset vertical --fps 60 --duration 40 [--audio music.mp3]

El renderizado es determinista y paralelo (según el número de núcleos): el tiempo se asigna manualmente a cada fotograma, sin tirones ni saltos. --from 5 --to 9 renderiza solo un fragmento. Un solo fotograma sin video: node scripts/frame.mjs v1.html 3.5,7 work/<nombre>/frames --width 540 --height 960.

4. Análisis — obligatorio revisar

bash scripts/contact-sheet.sh work/<nombre>/v1.mp4 work/<nombre>/v1-sheet.png 12

Abre *-sheet.png y fotogramas individuales mediante Read (las imágenes se leen visualmente). Evalúa según references/rubric.md (suma de 8 criterios con 5 puntos cada uno): legibilidad, jerarquía, ritmo, fluidez, equilibrio, unidad, adherencia al briefing. Para cada variante anota: puntuaciones por criterio, qué salió mejor, qué salió peor. No evalúes por el código — solo por lo que se ve en los fotogramas. Si algo no está claro — haz fotogramas más densos o en los momentos adecuados: bash scripts/contact-sheet.sh <mp4> <png> 12 <start_s> <end_s>.

5. Selección del líder y síntesis

• Elige la mejor variante según la puntuación total.
• Haz una lista de «préstamos»: soluciones exitosas específicas de las otras variantes (por ejemplo, «tipografía de v2», «animación de aparición de v3», «paleta de v1»).
• Crea final.html basado en el líder e incorpora esos ajustes. Corrige los puntos débiles del líder.

6. Iteración y verificación del final

Renderiza final.mp4, vuelve a hacer una hoja de contactos, compáralo con el líder. Si el final no es mejor que el líder según la rúbrica — corrígelo y repite (máximo 3 iteraciones). Luego muestra al usuario el resultado: ruta a final.mp4, tabla resumen de puntuaciones de las variantes y lista de lo que se tomó prestado de dónde.

7. Sonido (opcional)

ffmpeg -i final.mp4 -i music.mp3 -shortest -c:v copy -c:a aac final-audio.mp4

Reglas

• No copies mascotas ni logotipos oficiales de marcas: dibuja tu propio personaje, el nombre de la marca solo con texto.
• No te saltes el paso 4: la decisión se toma basándose en los fotogramas vistos, no en suposiciones.
• Coloca todos los artefactos en work/ (en .gitignore), en el repositorio solo commitea la habilidad y los ejemplos.
• Si Chromium/ffmpeg no están disponibles — dilo directamente, no simules el resultado.