🎬 Skill para crear videos

Hasta ahora hemos visto cómo las skills permiten ampliar las capacidades de nuestros agentes. Sin embargo, no solo sirven para automatizar tareas o mejorar flujos de trabajo.

También pueden utilizarse para crear contenido completamente nuevo.

En esta clase veremos cómo generar un vídeo promocional utilizando la skill HyperFrames, directamente desde OpenCode.

🚀 Generando vídeos con una skill

El objetivo es crear automáticamente un vídeo promocional para un producto utilizando inteligencia artificial.

Para ello instalamos HyperFrames mediante:

npx skills agent hyperframes

Esta skill añade todas las herramientas necesarias para que el agente pueda generar composiciones de vídeo utilizando tecnologías web estándar.

📦 Instalación de las skills

Durante la instalación aparecen varias opciones importantes:

Instalar las skills de forma local o global
Crear enlaces simbólicos (symlinks)
Seleccionar compatibilidad con distintos agentes

La recomendación es clara:

Instala siempre las skills a nivel de proyecto.

Esto evita contaminar otros proyectos con herramientas que quizás no necesites y mantiene cada entorno completamente aislado.

🤖 Compatibilidad con múltiples agentes

Uno de los puntos interesantes de HyperFrames es que utiliza una estructura universal compatible con distintos agentes:

OpenCode
GitHub Copilot
Gemini
Cursor
Codex

De esta forma una misma skill puede reutilizarse en diferentes entornos sin modificaciones importantes.

Una vez instalada la skill, podemos pedir al agente que genere un vídeo mediante un prompt.

Por ejemplo:

Utilizando HyperFrames, crea una promo de vídeo de 10 segundos mostrando el dashboard construido anteriormente.

El agente analiza el proyecto, revisa las skills instaladas y comienza a construir todos los elementos necesarios para generar la composición.

📝 El prompt importa

En el ejemplo de la clase se proporciona un prompt bastante detallado.

Entre los requisitos se incluyen:

Duración de 10 segundos
Uso de HTML, CSS y JavaScript
Diseño minimalista
Transiciones sencillas
Sin dependencias externas innecesarias
Adaptado al diseño del proyecto existente

Cuanto más contexto recibe el agente, mejores resultados suele producir.

🔐 Gestión de permisos

Durante la ejecución OpenCode puede solicitar permisos para determinadas acciones:

Acceso a directorios temporales
Inicio de servidores locales
Ejecución de comandos auxiliares

La interfaz permite:

Autorizar una sola vez
Autorizar siempre
Rechazar la acción

Normalmente resulta recomendable aprobar únicamente las acciones necesarias para la tarea que se está realizando.

🎨 El nuevo archivo design.md

Uno de los aspectos más interesantes mostrados en la clase es la aparición de un nuevo archivo:

design.md

Este archivo sigue una nueva especificación impulsada por Google.

Su objetivo es describir visualmente un proyecto de forma similar a cómo:

agents.md

describe reglas e instrucciones para los agentes.

🖌️ Qué contiene design.md

El archivo puede incluir información como:

Colores corporativos
Tipografías
Bordes
Espaciados
Componentes visuales
Reglas de accesibilidad
Restricciones de diseño

Gracias a ello los agentes pueden generar contenido visual respetando la identidad gráfica del proyecto.

⚙️ Cómo trabaja HyperFrames

Mientras genera el vídeo, HyperFrames realiza numerosas tareas automáticamente:

Analiza el proyecto
Detecta estilos existentes
Construye HTML
Genera CSS
Crea animaciones
Valida la composición
Comprueba accesibilidad
Ejecuta validaciones automáticas

Todo ello ocurre sin necesidad de instalar frameworks adicionales.

🎬 Renderizando el vídeo

Una vez generada la composición, HyperFrames permite renderizar el resultado final.

Durante este proceso:

Captura los frames
Procesa las animaciones
Genera el archivo de vídeo
Valida posibles errores

Es normal encontrar advertencias menores relacionadas con recursos o accesibilidad, sin que ello impida generar correctamente el vídeo.

🧩 HyperFrames Studio

Además del render final, HyperFrames incluye una vista de edición denominada:

HyperFrames Studio

Desde ella es posible:

Visualizar la línea de tiempo
Modificar elementos visuales
Añadir recursos
Ajustar transiciones
Revisar la composición completa

Esto convierte al vídeo generado en algo totalmente editable.

🌐 Todo está hecho con tecnologías web

Uno de los aspectos más sorprendentes de HyperFrames es que el vídeo se construye utilizando únicamente:

HTML
CSS
JavaScript

No utiliza React ni dependencias complejas.

Esto significa que cualquier elemento puede modificarse posteriormente editando directamente el código generado.

🔄 Vídeos completamente iterables

Una vez generado el primer resultado podemos seguir refinándolo mediante nuevos prompts:

Cambiar colores
Ajustar transiciones
Modificar textos
Alterar métricas mostradas
Cambiar duración
Añadir nuevas escenas

El agente puede iterar sobre el vídeo tantas veces como sea necesario hasta alcanzar el resultado deseado.

📌 Ideas clave de esta clase

Quédate con estos conceptos:

HyperFrames permite generar vídeos mediante IA
Se instala como una skill dentro del proyecto
Es compatible con múltiples agentes
La instalación local es la opción recomendada
Los prompts detallados producen mejores resultados
El archivo design.md ayuda a mantener consistencia visual
Todo el vídeo se genera con HTML, CSS y JavaScript
HyperFrames Studio permite editar la composición visualmente
Los vídeos son completamente iterables y personalizables
No es necesario instalar dependencias complejas para empezar

🚀 Lo siguiente: crear composiciones más avanzadas

Ahora que ya sabes cómo generar vídeos utilizando HyperFrames, el siguiente paso será aprender a crear composiciones más complejas, reutilizar assets y construir secuencias visuales cada vez más sofisticadas directamente desde tus agentes de IA.

💡 Tip: No busques que el primer vídeo sea perfecto. Genera una primera versión rápidamente y utiliza iteraciones sucesivas para mejorar el resultado. HyperFrames está pensado precisamente para trabajar de esta manera.