HyperFrames Creative
Dirección de marca, ritmo, estilo, narración y composición. Se usa después de que el contrato técnico de hyperframes-core esté en su lugar.
Para patrones de movimiento, planos de escena, transiciones y efectos de marcadores CSS, usa hyperframes-animation — este skill es intencionalmente no relacionado con animación.
Lee estos dos PRIMERO para cualquier composición no trivial — anulan los instintos web:
references/house-style.md— "interpreta el prompt, genera contenido real", la lista de valores predeterminados perezosos y la receta de capas fondo/primer plano. Esto convierte un cambio de estilo literal en un concepto.references/video-composition.md— densidad, escala y detalle de primer plano del medio de video. Explica cómo evitar diseños vacíos de página web sin imponer un recuento de elementos universal.Saltarse estos es la mayor causa única de resultados genéricos que parecen páginas web. No son filas opcionales en la tabla de enrutamiento a continuación — para cualquier cosa más allá de una edición de una línea, abre ambos antes de elegir colores o escribir HTML.
Flujo de trabajo
- Si un proyecto tiene una especificación de diseño, léela primero y trata sus tokens de frontmatter como la verdad de la marca (colores, fuentes, espaciado, tono, restricciones). Qué archivo leer (precedencia
frame.md→design.md→DESIGN.md) y cómo analizarlo (frontmatter = normativo, prosa = contexto) se define una vez enreferences/design-spec.md— resuélvelo y cárgalo según ese documento. - Si no existe una especificación de diseño y el usuario solicita dirección visual, elige una ruta:
- Frame-preset listo (opcional) →
frame-presets/(adopta unFRAME.mdcomoframe.md; consultareferences/design-spec.md) - Estilo o ambiente con nombre →
references/visual-styles.md - Valores predeterminados rápidos →
references/house-style.md - Selección interactiva →
references/design-picker.md
- Frame-preset listo (opcional) →
- Para trabajos de múltiples escenas, planifica los beats y el ritmo antes de escribir HTML →
references/beat-direction.md. Para transiciones de escena, salta ahyperframes-animation/transitions/. - Para trabajos con mucho movimiento, lee
references/motion-principles.md(directrices de alto nivel), luego ve ahyperframes-animationpara reglas atómicas.
Enrutamiento
| Tema | Lee |
|---|---|
Adoptar un frame-preset listo como frame.md (opcional) | frame-presets/ · references/design-spec.md |
| Paletas predeterminadas, movimiento, tipografía, valores perezosos en cuestión | references/house-style.md |
| Presets de estilo con nombre, enrutamiento de ambiente a estilo | references/visual-styles.md |
| Tokens de color específicos de paleta | palettes/*.md |
| Patrones de composición — PiP, texto detrás del sujeto, tarjeta de título, presentación de diapositivas | references/composition-patterns.md |
| Presentación de estadísticas / infografías | references/data-in-motion.md |
| Expansión estructurada para prompts abiertos | references/prompt-expansion.md |
| Densidad, escala, color, composición de cuadro del medio de video | references/video-composition.md |
| Dirección por beat, planificación de ritmo, tiempo de transición | references/beat-direction.md |
| Verificación de especificación posterior a la autoría (colores, tipo, esquinas, espaciado, profundidad) | references/design-adherence.md |
| Directrices de movimiento de alto nivel y reglas de calidad GSAP | references/motion-principles.md |
| Selección de fuentes, combinaciones, directrices de tipo para video renderizado | references/typography.md |
| Doctrina de historia — lenguaje de gancho, valor antes de evidencia, storyboard como propuesta, visuales trazables a fuentes | references/story-spine.md |
| Ritmo del guion, tono, aperturas, pronunciación de números | references/narration.md |
| Bandas de audio precalculadas mapeadas a movimiento | references/audio-reactive.md |
Scripts
scripts/contrast-report.mjs— inspecciona advertencias de contraste de cuadros renderizados.scripts/extract-audio-data.py— preextrae bandas de audio para composiciones reactivas al audio.scripts/package-loader.mjs— script de soporte para herramientas creativas empaquetadas.
contrast-report.mjs resuelve paquetes auxiliares del proyecto actual primero, luego puede iniciar la versión empaquetada del paquete HyperFrames. Establece HYPERFRAMES_SKILL_PKG_VERSION=<version> solo cuando ejecutas el skill fuera de la instalación CLI/skill empaquetada y necesitas fijar explícitamente esa versión de inicio.
Ejecuta desde la raíz del repositorio con rutas explícitas, por ejemplo:
python skills/hyperframes-creative/scripts/extract-audio-data.py <archivo-de-audio>
El análisis de animación (animation-map.mjs) vive en hyperframes-animation/scripts/.
Límites
- No sobrescribir las reglas técnicas de
hyperframes-core. - No requerir un sistema de diseño para una composición técnica mínima.
- No agregar escenas extra, narración, música, subtítulos o transiciones a menos que la solicitud los requiera o primero propongas la expansión.
- Mantener las referencias de recetas específicas para la tarea; no leer cada referencia para ediciones simples.