Communitygithub.com

XiaoDuoYa/AeVideoGen

Crea videos comerciales de nivel profesional para lanzamientos de productos, explicaciones, interacciones de UI y promociones de funciones mediante renderizado web determinista a partir del código fuente real del producto, sitios web, extensiones de navegador, aplicaciones, música, activos de marca, puntos de venta y videos de referencia.

¿Qué es AeVideoGen?

AeVideoGen es un skill especializado para agentes de IA como Codex, diseñado para producir videos de producto con calidad comercial sin depender de HyperFrames. Su propósito principal es transformar un brief de video incompleto en una producción estructurada, causal y fiel al producto real, utilizando el código fuente como verdad visual y de comportamiento. El skill cubre todo el flujo: desde la validación del brief, el análisis denso de videos de referencia para extraer su gramática de movimiento, la edición de música sincronizada con los momentos clave, la reconstrucción de estados reales del producto en el navegador, hasta la revisión en localhost con controles de reproducción y la exportación final de un MP4 estable. Está pensado para casos de uso como videos promocionales, resúmenes de lanzamiento, demostraciones de UI y animaciones de complementos. La principal innovación es su "contrato de producción": exige que cada clic, transición y afirmación esté respaldado por evidencia del código fuente o confirmación explícita del usuario, evitando invenciones o degradaciones silenciosas. Funciona en entornos de desarrollo web donde se pueda servir una composición en localhost, y utiliza scripts de Python y Node.js para procesos como validación, análisis de referencia y renderizado final.

Compatible con~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/XiaoDuoYa/AeVideoGen/tree/main

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

AeVideoGen By HxdLabs_ v1.0.1

Crea un video de producto que pueda distribuirse comercialmente. Mantén el comportamiento del producto fiel a la realidad, la historia causal, la tipografía legible, el enfoque intencionado, la animación viva, la revisión exacta y la exportación estable.

Cumple el contrato de producción

  • Nunca uses HyperFrames.
  • Trata la versión del producto solicitada y su código fuente como verdad visual y de comportamiento.
  • Usa videos de referencia para ritmo, gramática de movimiento, lenguaje de cámara, tipografía y estructura de transiciones; nunca copies activos de productos de terceros ni finjas que otro producto es del usuario.
  • Conserva las proporciones nativas de la UI. Escala de manera uniforme; nunca estires.
  • Haz que cada clic del puntero sea el control real visible y que la cámara enfoque el mismo objetivo.
  • No inventes funciones, afirmaciones, estados del código, copia, iconos o diseños no soportados.
  • No renderices un video final hasta que el usuario apruebe explícitamente la vista previa exacta en el navegador.
  • Realiza una copia de seguridad de la línea base aceptada antes de cambios sustanciales y usa rutas de salida versionadas.
  • No degrades silenciosamente la resolución, tasa de cuadros, duración, versión del código fuente, prioridad de la historia o sincronización con la música.

Ejecuta la puerta de completitud antes de la implementación

Inspecciona primero el prompt del usuario y todos los artefactos proporcionados. No preguntes por datos que ya estén presentes en archivos, código fuente, metadatos o la conversación.

Devuelve inmediatamente un inicio guiado antes de la implementación:

  1. resume lo que ya se ha recibido;
  2. enumera las brechas que bloquean y explica cómo afectan cada una a la calidad comercial;
  3. ofrece de manera proactiva los activos o decisiones exactos que el usuario puede proporcionar;
  4. haz las siguientes una a tres preguntas de mayor impacto;
  5. recomienda el modo Goal para producción en múltiples etapas y proporciona un objetivo, entradas, restricciones, etapas y criterios de finalización listos para pegar.

Para cada decisión faltante que sea bloqueante o útil, ofrece dos o tres opciones concretas. Pon la opción recomendada primero, explica la consecuencia visible de cada opción y permite que el usuario responda con "按推荐方案" cuando sea apropiado. Nunca bloquees con una pregunta abierta sin explicación.

No crees un Goal a menos que el usuario pida explícitamente crear/iniciar/usar Goal. La recomendación y el resumen del Goal listo para pegar son obligatorios para trabajos de video sustanciales; la creación automática de Goal está prohibida.

Crea brief.json a partir de assets/web-motion-starter/brief.json, luego ejecuta:

python3 scripts/validate_brief.py brief.json

Si un campo bloqueante sigue siendo desconocido, haz preguntas concisas y continúa preguntando en turnos posteriores hasta que el brief esté completo. Haz una a tres preguntas relacionadas a la vez. No comiences la implementación creativa solo porque se mencionaron algunos requisitos.

Procede con suposiciones registradas solo cuando el usuario diga explícitamente que uses tu mejor criterio, omitas preguntas o comiences con un brief incompleto. Marca cada uno de esos campos en assumptions y mantén los hechos de alto impacto respaldados por el código fuente.

Lee references/intake-and-clarification.md completamente cada vez que el brief sea nuevo, incompleto, contradictorio o modificado de manera sustancial. Lee references/guided-production.md completamente al inicio y usa su formato de informe de progreso durante toda la producción. Lee references/decision-options.md cuando falten requisitos o el usuario pregunte qué elegir.

Ejecuta el flujo de trabajo

1. Protege y audita

  • Inspecciona el estado del repositorio, versión, rutas, componentes, stores, estilos, dimensiones, fuentes, iconos, transiciones de estado, áreas de destino de clics y datos privados.
  • Crea una línea base recuperable antes de ediciones grandes.
  • Construye un registro de evidencia que mapee cada afirmación y estado filmado a evidencia del código fuente o confirmación explícita del usuario.
  • Envía un informe de progreso breve después de la auditoría: evidencia completada, riesgo restante y el siguiente artefacto revisable.
  • Lee references/source-reconstruction.md completamente antes de reconstruir una UI de producto.

2. Analiza referencias sin copiarlas

Para cada video de referencia proporcionado:

  1. Lee duración, resolución, tasa de cuadros, audio y estructura de tomas.
  2. Extrae cuadros con suficiente densidad para ver animación, no miniaturas de varios segundos.
  3. Agrega ventanas de 8 a 12 fps alrededor de cortes, morphs, zooms, entradas de texto, clics y transiciones.
  4. Ve la referencia completa a velocidad normal con audio.
  5. Produce un registro de lenguaje de movimiento: sujeto, trayectoria de cámara, easing, duración, traspaso, máscara/forma, tipografía, pausa y señal de sonido.
  6. Traduce esa gramática al producto real y la marca del usuario.

Ejecuta scripts/analyze_reference_video.py para una extracción determinista. Lee references/reference-video-analysis.md completamente antes de afirmar una coincidencia de estilo o recreación.

3. Escribe el film causal

Usa esta cadena narrativa:

contexto del usuario → fricción → acción del producto → resultado visible → valor recordado

  • Dale a cada escena un propósito y un sujeto visual dominante.
  • Pon la promesa principal—no una característica secundaria—dentro del clímax musical.
  • Usa texto puro como puntuación significativa o elemento compartido, nunca como relleno.
  • Muestra una pregunta grande el tiempo suficiente para leerla, luego transforma/acopla ese mismo elemento en la entrada real.
  • Planifica cada salto de línea de los titulares. Nunca permitas un salto accidental.
  • Crea production.json antes de la animación y mantenlo actualizado.
  • Ejecuta scripts/validate_timeline.py production.json --strict después de cambios de ritmo.
  • Reporta la cadena de escenas propuesta, la ubicación del clímax y las decisiones creativas no resueltas antes de la implementación completa.

Lee references/creative-direction.md completamente antes de diseñar el grafo de escenas. Lee references/commercial-quality.md antes de declarar una dirección como comercialmente lista.

4. Analiza y edita música

Ejecuta:

python3 scripts/analyze_music.py music.mp3 --target-duration 30 --output music-map.json
  • Escucha todas las ventanas candidatas; los marcadores algorítmicos son propuestas.
  • Elige un rango de origen musicalmente coherente y registra su desplazamiento.
  • Mapea subidas de secciones y beats principales, no cada beat.
  • Preserva una cuenca de clímax: aproximación, recompensa legible, liberación.
  • Mantén el ritmo de las escenas legible mientras los acentos internos de la escena pueden seguir golpeando los beats.

5. Reconstruye estados reales del producto

  • Reutiliza componentes reales del código fuente, CSS, SVG, iconos, fuentes, copia y lógica de estado donde esté permitido.
  • Reemplaza el estado de red con fixtures locales deterministas y fieles al esquema.
  • Mantén la composición final independiente de llamadas de red en tiempo de ejecución.
  • Registra cada dimensión de superficie nativa y escálala de manera uniforme.
  • Deriva los centros de clic después del diseño final usando getBoundingClientRect().
  • Demuestra cambios de estado reales; no escales una captura de pantalla y la llames interacción.

6. Coreografía el enfoque y la continuidad

  • Secuencia la atención: enfoque, aproximación del puntero, clic, retroalimentación, resultado.
  • Cuando una escena llega a su encuadre previsto, usa un movimiento continuo de cámara—no tres o cuatro re-centrados correctivos.
  • Trata al grupo completo significativo como centro visual: para chat, centra pregunta más respuesta; para un complemento, centra el complemento a menos que un control específico sea el sujeto declarado.
  • Haz zoom de manera decisiva donde la audiencia deba leer. No protejas espacio vacío a costa de la legibilidad.
  • Mantén las pausas legibles vivas con movimiento subordinado; no fijes el cuadro muerto.
  • Desenfoca/oscurece material irrelevante cuando no se pueda leer a tiempo.
  • Prefiere transiciones de elemento compartido, FLIP, herencia de forma, máscara, cambio de enfoque y continuidad de desplazamiento.
  • Deriva cada estado de un tiempo determinista. Expón window.__AE_VIDEO__.render(t).

7. Revisa en localhost

  • Sirve la composición exacta con reproducción/pausa, control deslizante, segundos, índice de cuadro, avance de ±1 cuadro, lectura de tiempo y marcadores de escena.
  • Oculta todos los controles de revisión en modo de captura.
  • Inspecciona puntos de control alrededor de cada clic, zoom, transición de línea, elemento compartido, clímax y final.
  • Reproduce todo el film con audio a velocidad normal.
  • Verifica los objetivos de clic reales, proporciones nativas, saltos de línea previstos, tiempo de lectura, centro visual, movimiento continuo, verdad del código fuente y sincronización con la música.
  • Muestra la vista previa exacta al usuario y espera la aprobación explícita.
  • Reporta qué cambió desde la última vista previa aceptada y dirige al usuario a los rangos de tiempo exactos que necesitan revisión.

Lee references/qa-gates.md completamente y pasa cada puerta bloqueante.

8. Renderiza solo la versión aprobada

  • Trata la aprobación de la vista previa y el permiso de exportación como dos decisiones separadas.
  • Después de la aprobación de la vista previa, explica en lenguaje sencillo que la exportación convierte la animación en localhost en un archivo de video compartible. Pregunta si el usuario desea exportar ahora.
  • Antes de exportar, ofrece opciones de calidad claras con consecuencias para claridad, suavidad, carga de renderizado, tiempo, almacenamiento y compatibilidad. Recomienda una opción para el dispositivo y plataforma del usuario.
  • Confirma resolución, tasa de cuadros, formato/códecs, audio, plataforma y nombre de archivo. No exportes hasta que el usuario confirme explícitamente la especificación de exportación.
  • Establece approval.status, approval.approvedVersion, approval.exportRequested y approval.exportSpecConfirmed solo después de sus correspondientes decisiones explícitas.
  • Ejecuta scripts/validate_brief.py brief.json --final y scripts/validate_timeline.py production.json --final --strict.
  • Renderiza a un nuevo directorio de cuadros y nombre de archivo. Nunca mezcles cuadros antiguos y nuevos.
  • Prefiere el handshake del compositor estable en scripts/render_web_video.mjs; detente en un cuadro inestable en lugar de exportar corrupción.
  • Trata 2560×1440 a 60 fps como un valor predeterminado sólido cuando 4K60 excede el hardware disponible, pero nunca cambies las especificaciones objetivo sin la aprobación del usuario.
  • Codifica H.264/AAC yuv420p con faststart, luego ejecuta ffprobe, una decodificación completa, verificaciones de continuidad y revisión visual de hoja de contactos.

Bloquea estos fallos

  • brief incompleto sin permiso explícito para asumir;
  • clic virtual, zoom centrado incorrectamente o característica no soportada;
  • micro-recentrado repetido dentro de una acción;
  • superficie del producto estirada/recortada o redimensionamiento de tipo interno arbitrario;
  • texto importante demasiado pequeño, demasiado breve, oscurecido o con salto accidental;
  • copia pequeña sin significado insertada para llenar espacio;
  • escena congelada o rápida sin completar una acción significativa;
  • sujetos no relacionados intercambiándose repetidamente en el centro;
  • texto grande y su campo de destino discrepan durante un morph;
  • transición sin geometría, movimiento, color, enfoque o significado heredados;
  • clímax musical asignado al valor incorrecto;
  • video de referencia muestreado con demasiada poca densidad para entender su movimiento;
  • página final inventada a partir de tarjetas de características genéricas en lugar de evidencia del producto respaldada por el código fuente;
  • renderizado final comenzado antes de la aprobación o exportado con cuadros rotos/parciales.
  • exportación iniciada sin una opción de calidad independiente en lenguaje sencillo y confirmación explícita de exportación.

Enruta recursos empaquetados

  • references/intake-and-clarification.md: requerido para la completitud del brief y el comportamiento de seguimiento.
  • references/guided-production.md: requerido para una incorporación sólida, transferencia del modo Goal y comunicación de progreso.
  • references/decision-options.md: requerido para opciones recomendadas, alternativas y compensaciones para principiantes.
  • references/reference-video-analysis.md: requerido para análisis de video de referencia o recreación de estilo.
  • references/source-reconstruction.md: requerido para sitio web, extensión, aplicación o

Skills relacionados