Prompt #21
Instalá las skills de video
Les enseña al agente las reglas de cada framework (tiempos, animación, audio, subtítulos) para que el código salga correcto a la primera y no tengás que corregir errores típicos.
Qué necesitás
Node.js y FFmpeg. npx skills add instala las skills para el agente que elijas (Claude Code, Codex, Cursor y otros). Remotion suma skills como remotion-best-practices y remotion-create. HyperFrames instala su núcleo: hyperframes (composición), hyperframes-cli (comandos), hyperframes-registry (bloques listos) y media-use (música, voz, subtítulos y recortes). remotion-to-hyperframes, slideshow y figma se instalan a pedido.
- Claude
-
✅ Funciona igual
En Claude Code aparecen como comandos:
/hyperframes,/hyperframes-cli,/media-use. HyperFrames también se instala como plugin:claude plugin marketplace add heygen-com/hyperframesy luegoclaude plugin install hyperframes@hyperframes. - Codex
-
✅ Funciona igual
El mismo comando
npx skills addlas instala para Codex. Si después querés actualizar el núcleo de HyperFrames:npx hyperframes skills update.
Los prompts
Lo que está entre [ ] es lo que completás vos.
Comandos (en la terminal, dentro de la carpeta del proyecto)
npx skills add remotion-dev/skills npx skills add heygen-com/hyperframes
Verificá que quedaron instaladas
Revisá qué skills de video tenés disponibles en este proyecto y explicame en una línea para qué sirve cada una.
Desbloqueá la Bóveda completa
Dejá tu correo una sola vez y accedés a estos prompts y a todos los de la Bóveda, con los repositorios de cada skill. Es gratis.
Repositorios y recursos
- Skills de Remotion github.com/remotion-dev/skills
- HyperFrames (skills y CLI) github.com/heygen-com/hyperframes
- Documentación: skills de Remotion www.remotion.dev/docs/ai/skills
- Node.js nodejs.org/
- FFmpeg ffmpeg.org/download.html
Armalo con tus datos
Completá lo que quieras. Los prompts de arriba se actualizan mientras escribís y lo que dejes vacío queda entre corchetes.
Pegalo en Claude Code o en Codex, abierto en la carpeta de tu proyecto. Tus datos quedan solo en tu navegador: no se envían a Diego Digital.
Remotion o HyperFrames
Las dos herramientas convierten código en video MP4 y están pensadas para trabajar con un agente de IA: vos describís el video, el agente escribe la composición y la renderiza. La diferencia principal está en cómo se escribe el video.
| Remotion | HyperFrames | |
|---|---|---|
| Cómo se escribe | Componentes de React (TSX) | HTML + CSS + animaciones (GSAP, Lottie, CSS) |
| Paso de compilación | Sí (bundler) | No, el HTML se reproduce tal cual |
| Pegar HTML/CSS existente | Hay que reescribirlo como JSX | Se pega y se anima |
| Licencia | Código disponible; las empresas por encima de cierto tamaño pagan licencia | Open source (Apache 2.0), uso comercial libre |
| Ideal para | Plantillas de marca reutilizables, video con datos, proyectos grandes | Videos rápidos desde HTML, sitios web, subtítulos con voz, gráficos |
Cuándo usar cuál: si ya tenés una plantilla en Remotion que funciona, seguí ahí. Para piezas nuevas y rápidas, sobre todo si partís de una página web, un PDF o datos, HyperFrames suele ser más directo porque el agente escribe HTML, que domina mejor que React.
Licencia: si usás Remotion con fines comerciales, revisá en remotion.dev/license si tu caso (freelance o equipo pequeño) entra en el uso gratuito. HyperFrames no tiene esa restricción.
Requisitos comunes: Node.js (HyperFrames pide la versión 22 o superior) y FFmpeg instalados en tu computadora. El render se hace localmente, así que conviene usar Claude Code, Claude con acceso a una carpeta de tu computadora o Codex.
Otros prompts de la Bóveda
-
Reel con voz en off y subtítulos animados
Genera la narración con texto a voz, transcribe el audio y sincroniza subtítulos animados estilo TikTok. Sirve para contenido educativo donde no querés grabarte.
Requiere terminal
-
De sitio web o PDF a video
Captura una página web o resume un documento y lo convierte en un video explicativo o promocional. Muy útil para mostrar un sitio entregado a un…
Requiere terminal
-
Video rápido desde cero con HyperFrames
Crea un video corto (intro, promo, anuncio) solo describiéndolo. Después lo editás conversando, como si le dieras indicaciones a un editor.
Requiere terminal
¿Querés que todo tu equipo trabaje así?
En los talleres practicamos estos prompts con las herramientas y las tareas reales de tu organización.