hyperframes-creativepor HeyGen

HyperFrames Creative Skill.

Un skill de Claude Code y Codex para movimiento y video: dirección creativa para videos HyperFrames: paleta, tipografía, composición, voz en off, ritmo.

Movimiento y video
Video

Descargar OpenDesign Ver guía de uso

heygen-com/hyperframes · skills/hyperframes-creative/SKILL.mdSKILL.md

--- name: hyperframes-creative description: Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`. --- ## Workflow ## Routing ## Scripts ## Boundaries

Encabezados de sección y metadatos leídos del archivo fuente el 14 de septiembre de 2026 · 6.317 caracteres en total

01 Qué hace

Qué hace el Skill hyperframes-creative en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Dirección creativa no relacionada con animación para videos de HyperFrames, utilizada después de que el contrato técnico de hyperframes-core esté en su lugar. Gestiona el análisis de especificaciones de diseño (frame.md / design.md con frontmatter como verdad de marca), paletas, tipografía, narración, planificación de beats, visuales reactivos al audio, patrones de composición y decisiones de marca.

Dos referencias anulan los instintos web para trabajo no trivial: house-style.md explica cómo interpretar los prompts y generar contenido real con recetas de capas de fondo/primer plano, mientras que video-composition.md define la escala del medio video, la profundidad y el detalle en primer plano para evitar layouts vacíos de página web. Para patrones de movimiento atómicos, blueprints de escena, transiciones y efectos de marcador CSS, use hyperframes-animation en su lugar.

Qué produce

Composición HTML usando escala de medio video, patrones de profundidad y colores y tipografía consistentes con la marca
Informe de contraste de contrast-report.mjs que inspecciona la accesibilidad del frame renderizado
Archivo de datos de bandas de audio de extract-audio-data.py para composiciones reactivas al audio

Ver el ejemplo de prompt ↗

Cómo funciona

01
Lea Primero la Especificación de Diseño
Si un proyecto tiene frame.md, design.md o DESIGN.md, léalo primero y trate los tokens de frontmatter como verdad de marca para colores, fuentes, espaciado, tono y restricciones.
02
Elija una Ruta de Dirección Visual
Si no existe una especificación de diseño, adopte un frame-preset ya hecho de frame-presets/, elija un estilo con nombre de visual-styles.md, use los valores rápidos predeterminados de house-style.md, o ejecute una selección interactiva mediante design-picker.md.
03
Planifique los beats antes de escribir HTML
Para trabajos con múltiples escenas, consulte beat-direction.md para planificar el ritmo y la temporización antes de escribir HTML. Para transiciones entre escenas, vaya a hyperframes-animation/transitions/.
04
Aplique las barreras de movimiento
Para trabajos con mucho movimiento, lea motion-principles.md para conocer las barreras de alto nivel y luego pase a hyperframes-animation para las reglas atómicas de movimiento.

02 Encuentra tu caso de uso

Cuándo Usar el Skill hyperframes-creative

Usa el skill hyperframes-creative en Claude Code o Codex cuando el trabajo sea motion y video de este tipo. El alcance y los límites a continuación están tomados del archivo propio del skill.

Buen caso de uso

Gestión de la especificación de diseño para archivos frame.md o design.md con tokens de frontmatter que definen la dirección de marca
Selección de paleta, elecciones tipográficas y decisiones de marca o estilo para videos de HyperFrames
Patrones de composición como imagen en imagen, texto detrás del sujeto, tarjetas de título y presentaciones de diapositivas
Visuales reactivos al audio usando bandas de audio precalculadas mapeadas a movimiento

Conozca los límites

Patrones atómicos de movimiento, que pertenecen a hyperframes-animation en su lugar
Planos de escenas, transiciones y efectos de marcadores CSS; use hyperframes-animation para eso

Qué proporcionar

Petición del usuario para la dirección visualCuando no existe una especificación de diseño, proporcione una solicitud de estilo con nombre, ambiente o un prompt abierto para enrutarlo mediante visual-styles.md o prompt-expansion.md.

03 Dentro del skill

Reglas que la skill hyperframes-creative le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Lea primero house-style.md y video-composition.md
Para cualquier composición no trivial, lea references/house-style.md y references/video-composition.md antes de elegir colores o escribir HTML.
Los tokens de frontmatter son la verdad de marca
En las especificaciones de diseño, trate el frontmatter como normativo y la prosa como contexto. Los tokens de frontmatter para colores, fuentes, espaciado, tono y restricciones tienen prioridad sobre otros valores predeterminados.
Nunca anule las reglas técnicas de hyperframes-core
No anule el contrato técnico establecido por hyperframes-core, que define la estructura fundamental y las restricciones.
Sin expansión de contenido no solicitada
No añada escenas, narración, música, subtítulos ni transiciones adicionales a menos que la solicitud lo exija explícitamente o proponga primero la expansión al usuario.
Mantenga las referencias de recetas específicas a la tarea
No lea todos los archivos de referencia para ediciones simples. Cargue solo las referencias pertinentes a la tarea concreta en cuestión.
Orden de precedencia de la especificación de diseño
Al resolver qué especificación de diseño leer, siga este orden de precedencia: primero frame.md, luego design.md, luego DESIGN.md.
Ejecute los scripts desde la raíz del repositorio
Ejecute todos los scripts con rutas explícitas desde la raíz del repositorio, por ejemplo: python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>.
No se requiere un sistema de diseño para trabajos mínimos
No exija un sistema de diseño completo para una composición técnica mínima. El skill se adapta a la complejidad de la tarea.

04 Ponlo a trabajar

Instalar hyperframes-creative en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar hyperframes-creative a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-creative

Forma genérica de la CLI skills para skills/hyperframes-creative/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una Primera Tarea de Motion y Video

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Create a 45-second product announcement video for [product name] using a cyberpunk visual style with fast pacing and high-contrast palette. Plan the beats to open with a hook about [customer pain point], then reveal three key features with audio-reactive text reveals. Use the brutalist frame-preset from frame-presets/ and generate voice-over narration that matches the technical tone from our existing design.md.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Verifique el cumplimiento del diseño en colores, tipografía, esquinas, espaciado y profundidad según design-adherence.md
Compruebe que se siguen las reglas de densidad y escala de video-composition.md para evitar diseños tipo página web

En OpenDesign importe hyperframes-creative desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Rama main
Archivo de skill: skills/hyperframes-creative/SKILL.md Suma de verificación del contenido registrada en la verificación; commit 558c11b
License: Apache-2.0 De LICENSE.
Estrellas del repositorio: 49.761 Captura de GitHub tomada el 14 de septiembre de 2026 para todo el repositorio heygen-com/hyperframes, que contiene 9 skills en este catálogo. No es una calificación ni un recuento de uso para hyperframes-creative.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

HyperFrames CreativeDirección de marca, ritmo, estilo, narración y composición para usar después del contrato técnico de hyperframes-core
Flujo de trabajoProceso de cuatro pasos: leer la especificación de diseño, elegir la ruta visual, planificar los beats y aplicar las pautas de movimiento
EnrutamientoTabla que asigna temas a archivos de referencia para paletas, composición, narración, reactividad de audio y preajustes de estilo
Scriptscontrast-report.mjs, extract-audio-data.py, package-loader.mjs; ejecútelos desde la raíz del repositorio con rutas explícitas
LímitesNo sobrescriba las reglas centrales, no exija sistemas de diseño, no agregue contenido no solicitado ni lea todas las referencias

La descripción propia del Skill

"Dirección creativa sin animación para videos de HyperFrames. Úsalo para manejo de especificaciones de diseño (frame.md / design.md), paletas, tipografía, narración, planificación de ritmo, visuales reactivos al audio, patrones de composición y decisiones de marca / estilo. Para patrones de movimiento atómico y planos de escena, usa `hyperframes-animation`."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 6.317 caracteres. Lee el archivo completo en GitHub.

HyperFrames Creative

Ejecuta hyperframes-creative en una tarea real de movimiento y video.

Descarga OpenDesign, importa hyperframes-creative desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-creative

Qué hace el Skill hyperframes-creative en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo Usar el Skill hyperframes-creative

Buen caso de uso

Conozca los límites

Qué proporcionar

Reglas que la skill hyperframes-creative le da a Claude Code y Codex

Lea primero house-style.md y video-composition.md

Los tokens de frontmatter son la verdad de marca

Nunca anule las reglas técnicas de hyperframes-core

Sin expansión de contenido no solicitada

Mantenga las referencias de recetas específicas a la tarea

Orden de precedencia de la especificación de diseño

Ejecute los scripts desde la raíz del repositorio

No se requiere un sistema de diseño para trabajos mínimos