hyperframes-creativedi HeyGen

HyperFrames Creative Skill.

Una skill per Claude Code e Codex dedicata al motion e al video: direzione creativa per video HyperFrames: palette, tipografia, composizione, voice-over, ritmo.

Motion e video
Video

Scarica OpenDesign Guida all'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

Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 6.317 caratteri in totale

01 Cosa fa

Cosa fa lo Skill hyperframes-creative in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Direzione creativa non legata all'animazione per i video HyperFrames, usata dopo che il contratto tecnico di hyperframes-core è già stato definito. Gestisce il parsing delle specifiche di design (frame.md / design.md con frontmatter come verità di brand), palette, tipografia, narrazione, pianificazione dei beat, visual audio-reattivi, pattern di composizione e decisioni di brand.

Due riferimenti sostituiscono gli istinti web per lavori non banali: house-style.md spiega come interpretare i prompt e generare contenuti reali con ricette di layer di sfondo/primo piano, mentre video-composition.md definisce scala, profondità e dettaglio in primo piano tipici del medium video, per evitare layout da pagina web vuota. Per pattern di movimento atomici, blueprint di scena, transizioni ed effetti marker CSS, usa invece hyperframes-animation.

Che cosa produce

Composizione HTML usando scala tipica del medium video, pattern di profondità e colori e tipografia coerenti con il brand
Report di contrasto da contrast-report.mjs che analizza l'accessibilità del frame renderizzato
File di dati delle bande audio da extract-audio-data.py per composizioni audio-reattive

Vedi l'esempio di prompt ↗

Come funziona

01
Leggi Prima la Specifica di Design
Se un progetto ha frame.md, design.md o DESIGN.md, leggilo prima e considera i token del frontmatter come verità di brand per colori, font, spaziatura, tono e vincoli.
02
Scegli una Direzione Visiva
Se non esiste alcuna specifica di design, adottare un frame-preset pronto da frame-presets/, scegliere uno stile con nome da visual-styles.md, usare le impostazioni predefinite rapide di house-style.md, oppure eseguire una selezione interattiva tramite design-picker.md.
03
Pianificare i Beat Prima di Scrivere HTML
Per lavori multi-scena, consultare beat-direction.md per pianificare ritmo e tempistiche prima di scrivere HTML. Per le transizioni tra scene, passare a hyperframes-animation/transitions/.
04
Applicare le Linee Guida sul Movimento
Per lavori incentrati sul movimento, leggere motion-principles.md per le linee guida generali, poi passare a hyperframes-animation per le regole atomiche del movimento.

02 Trova la tua applicazione

Quando usare lo skill hyperframes-creative

Usa lo skill hyperframes-creative in Claude Code o Codex quando il lavoro è motion e video di questo tipo. Adeguatezza e limiti qui sotto sono presi dal file dello skill stesso.

Buona applicazione

Gestione delle specifiche di design per file frame.md o design.md con token frontmatter che definiscono la direzione del brand
Selezione della palette, scelte tipografiche e decisioni di brand o stile per i video HyperFrames
Pattern di composizione come picture-in-picture, testo dietro il soggetto, title card e slide show
Visual audio-reattivi che usano bande audio precalcolate mappate sul movimento

Conosci i limiti

Pattern atomici di movimento, che appartengono invece a hyperframes-animation
Blueprint di scena, transizioni ed effetti marker CSS—per questi usare hyperframes-animation

Cosa fornire

Prompt utente per la direzione visivaQuando non esiste una specifica di design, fornire una richiesta per uno stile con nome, un mood, oppure un prompt aperto da instradare tramite visual-styles.md o prompt-expansion.md.

03 Dentro la skill

Le Regole che la Skill hyperframes-creative Dà a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Leggere Prima house-style.md e video-composition.md
Per qualsiasi composizione non banale, leggere references/house-style.md e references/video-composition.md prima di scegliere i colori o scrivere HTML.
I Token Frontmatter Sono la Verità del Brand
Nelle specifiche di design, trattare il frontmatter come normativo e il testo prosastico come contesto. I token frontmatter per colori, font, spaziatura, tono e vincoli hanno priorità sugli altri valori predefiniti.
Non Sovrascrivere Mai le Regole Tecniche di hyperframes-core
Non sovrascrivere il contratto tecnico stabilito da hyperframes-core, che definisce la struttura fondamentale e i vincoli.
Nessuna Espansione Non Richiesta dei Contenuti
Non aggiungere scene, narrazioni, musica, didascalie o transizioni extra a meno che la richiesta non lo indichi esplicitamente o che si proponga prima l'espansione all'utente.
Mantenere i Riferimenti delle Recipe Specifici per il Compito
Non leggere ogni file di riferimento per modifiche semplici. Caricare solo i riferimenti pertinenti al compito specifico in questione.
Ordine di Precedenza delle Specifiche di Design
Quando si deve decidere quale specifica di design leggere, seguire questo ordine di precedenza: prima frame.md, poi design.md, infine DESIGN.md.
Eseguire gli Script dalla Radice del Repository
Eseguire tutti gli script con percorsi espliciti a partire dalla radice del repository, ad esempio: python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>.
Nessun Design System Richiesto per Lavori Minimi
Non richiedere un design system completo per una composizione tecnica minima. Il skill si adatta alla complessità del compito.

04 Mettila al lavoro

Installa hyperframes-creative in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi hyperframes-creative a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma generica della CLI skills per skills/hyperframes-creative/SKILL.md; il repository potrebbe documentare un proprio percorso.

Dai alla Skill un Primo Compito di Motion e Video

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Verificare l'adesione al design per colori, tipografia, angoli, spaziatura e profondità secondo design-adherence.md
Verificare che le regole di densità e scala di video-composition.md siano rispettate per evitare layout da pagina web

In OpenDesign importare hyperframes-creative dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionarlo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
File della skill: skills/hyperframes-creative/SKILL.md Checksum del contenuto registrato alla verifica; commit 558c11b
License: Apache-2.0 Da LICENSE.
Stelle del repository: 49.761 Snapshot GitHub del 2026-09-14 per l'intero repository heygen-com/hyperframes, che contiene 9 skill in questo catalogo. Non è un punteggio né un conteggio di utilizzo per hyperframes-creative.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

HyperFrames CreativeIndicazioni su brand, ritmo, stile, narrazione e composizione da usare dopo il contratto tecnico hyperframes-core
WorkflowProcesso in quattro fasi: leggere la specifica di design, scegliere la direzione visiva, pianificare i beat, applicare i guardrail di motion
InstradamentoTabella che mappa gli argomenti sui file di riferimento per palette, composizione, narrazione, audio-reattività e preset di stile
Scriptcontrast-report.mjs, extract-audio-data.py, package-loader.mjs; eseguire dalla radice del repository con percorsi espliciti
LimitiNon sovrascrivere le regole core, non richiedere design system, non aggiungere contenuti non richiesti, non leggere ogni riferimento

Descrizione della skill

"Direzione creativa non animata per i video HyperFrames. Da usare per la gestione delle specifiche di design (frame.md / design.md), palette, tipografia, narrazione, pianificazione del ritmo, visual audio-reattivi, pattern di composizione e decisioni di brand/stile. Per i pattern di motion atomici e i blueprint di scena, usa `hyperframes-animation`."

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 6.317 caratteri. Leggi il file completo su GitHub.

HyperFrames Creative

Esegui hyperframes-creative su un vero task di Motion e Video.

Scarica OpenDesign, importa hyperframes-creative dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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

Cosa fa lo Skill hyperframes-creative in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando usare lo skill hyperframes-creative

Buona applicazione

Conosci i limiti

Cosa fornire

Le Regole che la Skill hyperframes-creative Dà a Claude Code e Codex

Leggere Prima house-style.md e video-composition.md

I Token Frontmatter Sono la Verità del Brand

Non Sovrascrivere Mai le Regole Tecniche di hyperframes-core

Nessuna Espansione Non Richiesta dei Contenuti

Mantenere i Riferimenti delle Recipe Specifici per il Compito

Ordine di Precedenza delle Specifiche di Design

Eseguire gli Script dalla Radice del Repository

Nessun Design System Richiesto per Lavori Minimi