bayvibe/promo-video-skill

Skill de Video Promocional (Remotion)

Genera un video promocional a partir de la URL de un sitio web o información de marca proporcionada por el usuario.

Dos Rutas

Ruta A: El usuario proporcionó una URL

Cuando el usuario te dé una URL:

1. Ejecuta python generate_promo.py --source <url> para generar src/data/brand.json y src/data/script.json
2. Muestra inmediatamente al usuario el guion generado — presenta un resumen limpio:

   Marca: xxx
   Eslogan: xxx
   Color principal: #xxx
   Plan de escenas:
     1. Introducción (3s) — Logo + Nombre + eslogan
     2. Característica (5s) — Característica 1 / Característica 2 / Característica 3
     3. Dashboard (4s) — Interfaz del producto
     4. CTA (3s) — "xxx" + botón
   

3. Pregunta: "¿Confirmas este guion o necesitas ajustes?"
4. Tras la confirmación, ejecuta npm run dev e indica al usuario que previsualice en http://localhost:3000

Ruta B: El usuario no proporcionó nada

Cuando el usuario solo diga "genera un video" / "haz un promo" sin especificar, no empieces a programar. En su lugar, haz las siguientes preguntas (un solo mensaje, todas a la vez):

1. ¿Cuál es el nombre de la marca? (o el nombre del producto/proyecto que quieres promocionar)
2. Describe tu producto en una frase (que servirá como eslogan)
3. ¿Tienes colores de marca? (si no, te ayudaré a elegirlos)
4. ¿Qué puntos destacados quieres resaltar? (máximo 3)
5. ¿Tienes una URL del sitio web? (si la tienes, puedo extraer la información automáticamente)

Una vez que el usuario responda, escribe directamente src/data/brand.json y src/data/script.json basados en sus respuestas. Luego muestra el resumen del guion y confirma (igual que en la Ruta A, pasos 2-3).

Después de la Confirmación

1. Ejecuta npm run dev para iniciar Remotion Studio
2. Indica al usuario que previsualice en http://localhost:3000
3. Para exportar: npx remotion render PromoVideo out/promo.mp4

Directrices de Diseño

Principios Visuales

• Llena el encuadre, reduce el espacio en blanco — Las escenas intermedias (Característica / Dashboard) usan flex: 1 o diseño de ancho completo para llenar el lienzo de 1920×1080, evitando grandes áreas vacías
• Evita diseños repetitivos — No uses repetidamente la estructura "título grande a la izquierda + tarjeta/mockup a la derecha + subtítulo en la parte inferior" en el mismo video. Cada video debe usar al menos 3 composiciones claramente diferentes: por ejemplo, título a pantalla completa, ticker diagonal, composición de eje central, tarjetas en collage, columnas tipo revista, interfaz de producto a pantalla completa, superposición de código, composición tipo línea de tiempo/ruta.
• Las esquinas redondeadas de las tarjetas deben ser consistentes — Define un token CARD_RADIUS por video; todas las tarjetas, paneles, contenedores de mockup y bloques de características deben usar el mismo valor. No mezcles ángulos rectos, 12px, 34px en el mismo video. Los subtítulos, logotipos, botones pequeños y barras de progreso pueden tener sus propios radios funcionales, pero las tarjetas de contenido deben ser uniformes.
• Las tarjetas no son la solución predeterminada — Las escenas de Característica pueden usar diseños desplazados, apilamientos en profundidad, tickers, diagramas de nodos, paneles de editor, recortes de captura de producto, etc.; no asumas tres tarjetas de ancho igual en fila.
• La página final debe usar una forma de cierre diferente — La escena CTA/Final no debe reutilizar la estructura de título a la izquierda + tarjeta a la derecha o título a la izquierda + botón a la izquierda. Prioriza el bloque centrado, diseño tipo póster, bloques de información alrededor, cierre tipográfico a pantalla completa, o la marca/URL como centro visual, formando un claro último impacto. En la composición centrada, el botón CTA y la URL deben estar dispuestos verticalmente, manteniendo un eje central estable.
• El color principal se obtiene del botón CTA del sitio web — El color de marca debe extraerse del estilo en línea de los elementos button/a, no de un color CSS aleatorio
• Subtítulos globales — Cada escena muestra una barra de subtítulos centrada en la parte inferior (fondo semitransparente en forma de píldora), tamaño de fuente 32px, padding 18px 48px, animación de entrada tipo resorte. Los subtítulos se controlan mediante el campo subtitle de cada escena en script.json; si no se establece, no se muestra
• Solo admite entrada de URL — El modo SVG se ha eliminado; solo se aceptan URLs de sitios web como fuente de datos

Reglas de Extracción

• El nombre de la marca se toma primero de og:site_name, luego de la etiqueta title (tomando el primer segmento separado por - o |)
• El eslogan se toma primero de og:description, truncado a 80 caracteres
• El color de marca se extrae preferentemente del color de gradiente en el estilo en línea del elemento button/CTA
• Los títulos de las características se filtran si tienen menos de 45 caracteres; se saltan frases demasiado largas
• Detecta el tema claro/oscuro del sitio y ajusta automáticamente el color de fondo y texto

Lista de Verificación de Datos

Después de generar los datos, verifica lo siguiente antes de presentarlo al usuario:

• El nombre de la marca es corto y limpio (no es un título HTML completo)
• El eslogan tiene menos de 80 caracteres
• El color principal proviene del botón CTA (no de un color aleatorio)
• Hay exactamente 3 características, con títulos cortos y contundentes
• El texto de cada escena es legible en el lienzo de 1920×1080

Lista de Autoverificación Visual (Obligatoria)

Después de implementar o modificar el video, debes realizar una revisión visual tú mismo, no solo ejecutar el linter:

1. Ejecuta npm run lint
2. Usa npx remotion compositions src/index.ts para confirmar que la composición existe y su duración es correcta
3. Exporta al menos 1 still por escena principal y revisa el diseño. Por ejemplo:

   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene1.png --frame=30
   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene2.png --frame=120
   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene3.png --frame=210
   

4. Abre las imágenes de los fotogramas clave y revisa lo siguiente; si encuentras algún problema, debes corregirlo antes de entregar:
   • No hay texto clave, botones o subtítulos recortados o que salgan del lienzo
   • Los elementos decorativos/de movimiento que sangran intencionadamente (como tickers, gráficos de fondo, títulos grandes recortados) deben verse como una elección de diseño, no como un error; pueden salir del lienzo
   • Los controles dentro de las tarjetas no deben sobrepasar los límites de la tarjeta, incluidas las barras de progreso, barras de gráficos, campos de entrada, botones, barras de estado; estos desbordamientos no intencionados deben corregirse
   • Ningún elemento se superpone hasta el punto de no poder leerse
   • Los subtítulos están centrados y no cubren el CTA principal ni la imagen central
   • Todas las tarjetas/paneles/contenedores de mockup del mismo video usan el mismo CARD_RADIUS
   • Hay al menos 3 diseños diferentes, no toda la repite la misma estructura de división izquierda-derecha
   • Los bordes del encuadre tienen zona segura: el texto clave está al menos a 64px del borde
   • Las palabras largas, titulares largos y texto de botones no desbordan los contenedores
5. Si el usuario solo quiere previsualizar en Studio, no exportes repetidamente mp4; asegúrate de que http://localhost:3000 se pueda abrir.

Estructura de Archivos

src/
├── Root.tsx              # Registro de composiciones de Remotion
├── PromoVideo.tsx        # Orquestador principal del video
├── scenes/
│   ├── Scene01_Intro.tsx     # Logo + Nombre de marca + eslogan
│   ├── Scene02_Feature.tsx   # Tres tarjetas de ancho igual en fila
│   ├── Scene03_Dashboard.tsx # Simulación de interfaz de producto a pantalla completa
│   └── Scene04_CTA.tsx       # Llamada a la acción + botón
└── data/
    ├── script.json       # Guion del video (texto, tiempos)
    └── brand.json        # Datos de marca (colores, fuente, logotipo)

Formato de Datos

brand.json

{
  "name": "Nombre de la marca",
  "tagline": "Descripción en una línea",
  "colors": {
    "primary": "#3E4E33",
    "secondary": "#687058",
    "background": "#FFFFFF",
    "surface": "#F8FAFC",
    "text": "#0F172A",
    "textSecondary": "#64748B",
    "accent": "#3E4E33"
  },
  "font": "Inter, sans-serif",
  "logoUrl": "",
  "features": [
    { "title": "Característica 1", "description": "Descripción corta" },
    { "title": "Característica 2", "description": "Descripción corta" },
    { "title": "Característica 3", "description": "Descripción corta" }
  ],
  "cta": {
    "headline": "¿Listo para empezar?",
    "buttonText": "Empieza gratis",
    "url": "https://example.com"
  }
}

script.json

{
  "fps": 30,
  "width": 1920,
  "height": 1080,
  "scenes": [
    { "id": "intro", "duration": 90, "headline": "", "subtext": "", "subtitle": "" },
    { "id": "feature", "duration": 150, "headline": "", "subtitle": "", "items": [] },
    { "id": "dashboard", "duration": 120, "headline": "", "subtitle": "" },
    { "id": "cta", "duration": 90, "headline": "", "buttonText": "", "subtitle": "" }
  ]
}

Personalización

• Edita src/data/brand.json para cambiar colores, fuentes, logotipo, nombre de marca
• Edita src/data/script.json para cambiar el texto y la duración de las escenas
• Edita los componentes de escena en src/scenes/ para cambios de diseño/animación