Vai alla guida all’uso
motion-graphicsdi HeyGen

Motion Graphics Skill.

Uno skill per Claude Code e Codex dedicato a motion e video: motion graphics brevi orientate al design: testo cinetico, contatori animati, logo sting, terzi inferiori.

  • Motion e video
  • Video
heygen-com/hyperframes · skills/motion-graphics/SKILL.mdSKILL.md
--- name: motion-graphics description: A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up … --- ## Categories — split by the search decision ## Prerequisites ## Flow ## Resume table ## Design notes (maintainers — execution does not read this)
Frontespizio e intestazioni di sezione letti dal file upstream il 14/09/2026 · 15.566 caratteri in totale

01 Cosa fa

Cosa fa la Skill motion-graphics 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

Una skill orientata al routing per un unico motion graphic breve, guidato dal design e senza narrazione — typography cinetica, count-up di statistiche, impatto di un grafico, sting del logo, lower third, mappa animata, tweet o pagina web — di norma sotto i 10s e non oltre circa 30s, renderizzato in MP4 o in overlay trasparente.

È orientata prima agli asset e al riuso: il primo bivio è se il pezzo richiede una ricerca, le categorie form operano su contenuti forniti dall'utente con asset_needs vuoto, le categorie guidate dalla ricerca animano in base al tipo di contenuto restituito, e il Builder compone i blocchi del catalogo prima di scrivere manualmente le lacune. Il workflow è autonomo con al massimo una domanda di chiarimento, ma il rendering resta subordinato all'utente dopo lint, check e snapshot di verifica.

Che cosa produce

  • Una bozza e poi uno shot-plan.json finale contenente l'envelope, la categoria scelta o l'intento di ricerca, asset_needs e il blocco, layout, motion e posizioni.
  • compositions/index.html che rispetta il contratto HF con una timeline GSAP in pausa su window.__timelines, classi clip e id stabili, e un tl.seek(0) deterministico.
  • Un foglio contatto o di snapshot sotto snapshots/ per ispezionare i tempi di verifica.
  • renders/video.mp4, oppure un overlay trasparente quando si renderizza con il formato webm o mov.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Inizializzare il Progetto

    Il passo 0 crea PROJECT_DIR = videos/<project-name>/ ed esegue hyperframes init con l'esempio vuoto e questa skill, saltandolo del tutto se hyperframes.json esiste già.

  2. 02
    Pianificare e Decidere sulla Ricerca

    Il primo bivio è se il pezzo richiede una ricerca: no significa una categoria form con asset_needs: [], sì significa emettere query di ricerca in asset_needs[].

  3. 03
    Reperire gli Asset Quando Necessario

    Il passo 2 risolve gli asset tramite media-use in percorsi locali al progetto e congelati più un ledger, e viene saltato direttamente al design quando asset_needs è vuoto.

  4. 04
    Progettare in Base a Ciò che Si Ha

    Un secondo passaggio del Director sceglie blocchi del catalogo e regole e blueprint di hyperframes-animation attorno agli asset risolti, poi finalizza lo shot plan.

  5. 05
    Comporre privilegiando il riuso

    Il Builder aggiunge blocchi del catalogo con npx hyperframes add e personalizza sul posto, scrivendo manualmente solo le lacune e l'affordance di asset-fusion per produrre compositions/index.html.

  6. 06
    Acquisire Snapshot di Verifica

    Scegliere i tempi di verifica che mostrano lo stato iniziale, la mossa distintiva e l'hold finale, poi ispezionare il foglio contatto o di snapshot generato.

02 Trova la tua applicazione

Quando usare la Skill motion-graphics

Usa la skill motion-graphics in Claude Code o Codex quando il lavoro riguarda motion e video di questo tipo. Ambito e limiti qui sotto sono tratti dal file della skill stessa.

Buona applicazione

  • Una frase incisiva, una citazione o un titolo dove il motion del testo è l'idea centrale.
  • Un numero hero singolo con conteggio incrementale e anello.
  • Uno sting con logo o un lockup di marca costruito a partire dal logo dell'utente.
  • Movimento geografico come l'evidenziazione di regioni, il collegamento di luoghi o lo zoom su una posizione.
  • Trattamenti animati di tweet, articoli di notizie o titoli quando una ricerca fornisce il contenuto sorgente.

Conosci i limiti

  • I pezzi più lunghi, narrati o multi-scena vengono indirizzati altrove.
  • Qualsiasi cosa con narrazione o un soggetto live-action, o che superi ampiamente la finestra dello short-form.
  • Le categorie basate sulla ricerca perdono i loro asset trovati quando un provider non è disponibile, ricadendo sulla modalità senza asset.
  • Pilotare Figma tramite strumenti MCP grezzi salta la sanificazione, la provenienza e l'associazione ai token di marca, quindi questo percorso è escluso.

Cosa fornire

  • Il contenuto stessokinetic-type, stat, charts, logo-reveal e lower-thirds prendono contenuto fornito dall'utente, quindi la riga, il numero, i dati o il logo provengono da lei piuttosto che da una ricerca.
  • Un URL figma.com, se è lì che si trova l'assetEsegua prima /figma per l'esportazione dell'asset, i token di marca e la traduzione da Motion a GSAP, poi costruisca a partire dal suo output.
  • Chiavi opzionali per il reperimento degli assetGEMINI_API_KEY o GOOGLE_API_KEY per la generazione di immagini, oltre ad asset_scout e ai provider di ricerca per la ricerca di asset reali su pagine web, notizie, tweet e asset-fusion.

03 Dentro la skill

Regole che lo skill di motion-graphics fornisce 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.

  1. Instrada tramite /hyperframes

    La porta d'ingresso è /hyperframes; questo skill crea solo una motion graphic breve, guidata dal design e senza narrazione, in genere sotto i 10s, senza voice-over e senza soggetto live-action.

  2. Una Domanda, Poi Costruisce

    Il workflow è autonomo per progettazione: al massimo una domanda di chiarimento da agents/director.md, poi costruisce fino alla verifica senza revisione intermedia.

  3. Confermare Prima di Aggiornare lo Skill

    Chieda all'utente prima di eseguire il comando di aggiornamento; è un no-op rapido quando è già aggiornato, altrimenti aggiorna questo skill più gli skill di dominio principali da cui dipende.

  4. Il Rendering È Controllato dall'Utente

    Dopo che i controlli e gli snapshot di verifica passano, chieda prima se procedere con l'anteprima canonica o con il rendering, ed esegua il rendering solo dopo una risposta esplicita di rendering.

  5. Non Inizializzare Mai nella Radice del Workspace

    Non esegua mai hyperframes init nella radice del workspace, e non annidi mai un'altra directory hyperframes/ dentro PROJECT_DIR.

  6. Ogni Comando in una Subshell

    Ogni comando Bash, sia emesso dal flusso principale che da un subagente, è una subshell (cd "$PROJECT_DIR" && ...); il cd nudo non è consentito.

  7. Derivare il nome del progetto

    Utilizzare la directory indicata dall'utente, altrimenti un breve nome kebab-case derivato dall'intento nella forma <subject>-motion; non il basename del workspace né un timestamp.

  8. Non mascherare un difetto con la temporizzazione

    Quando un gate fallisce, non modificare mai una durata fissa solo per nascondere il difetto; riparare invece la composizione in loco.

04 Mettila al lavoro

Installa motion-graphics in Claude Code o Codex

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

Aggiungi motion-graphics 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 motion-graphics

Forma generica della CLI skills per skills/motion-graphics/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
Make a short motion graphic, about 8 seconds, from [our launch tagline] — kinetic type, motion-first, no narration, using the kinetic-type category and the caption blocks. Then close with a logo sting built from [our logo.svg], and render it to MP4.

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:

  • Eseguire lint e check sul progetto prima di qualsiasi altra cosa; entrambi vengono eseguiti come subshell da PROJECT_DIR.
  • Ispezionare il foglio di contatto o lo snapshot generato prima di procedere.
  • In caso di errore di lint, check o snapshot, inviare il subagente di riparazione per un passaggio di correzione in loco e ripetere il gate fallito.
  • Verificare che l'output del render esista, non sia vuoto e abbia la durata prevista, e che il passaggio di consegna indichi l'artifact, la durata, l'id del frame e i tempi di verifica.

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

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/motion-graphics/SKILL.md Checksum del contenuto registrato alla verifica; commit 558c11b
License
Apache-2.0 Da LICENSE.
Stelle del repository
49.761 Snapshot GitHub del 14/09/2026 per l'intero repository heygen-com/hyperframes, che contiene 9 skill in questo catalogo. Non è un punteggio o conteggio di utilizzo per motion-graphics.
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

  1. motion-graphics — voce di dispatchIndica il punto di ingresso, il flusso autonomo, la directory del progetto e la tabella delle fasi dall'inizializzazione al render.
  2. Categorie — suddivise per decisione di ricercaElenca le categorie form che non richiedono ricerca e le categorie guidate dalla ricerca, scelte in base al contenuto restituito.
  3. PrerequisitiPiattaforma, strumenti di sistema, variabile d'ambiente GPU macOS, chiavi API opzionali e i relativi fallback locali.
  4. FlussoPassi da 0 a 6: inizializzare, pianificare, procurarsi le fonti, progettare, costruire, verificare, approvare, renderizzare.
  5. Tabella di ripresaDa quale passo riprendere per ciascuno stato di progetto parziale.
  6. Note di progettazione (maintainer — l'esecuzione non le legge)Motivazione asset-first, mappatura reuse-first, contratto del modulo di categoria, struttura delle directory e registrazione del router.
Descrizione della skill
"Un breve motion graphic guidato dal design in cui il movimento è il messaggio — tipografia cinetica, contatore di statistiche, visualizzazione di dati/grafici, logo sting / brand lockup, lower-third / callout / overlay per social, mappa animata (evidenzia regioni, collega luoghi, zoom su una posizione), tweet / articolo / titolo animato, animazione di pagina web / UI (scroll, cursore, callout), o fusione della geometria di un'immagine reale in un grafico. Di solito sotto i 10s (fino a ~30s), senza narrazione o soggetto live-action; rendering in MP4 o overlay trasparente. Più lungo / narrato / multi-scena → /general-video. Incerto → /hyperframes."

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

Motion Graphics

Esegui motion-graphics su un Task Motion and Video reale.

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

Terminale
npx skills add https://github.com/heygen-com/hyperframes --skill motion-graphics

OpenDesign Desktop

Un solo design system. Il tuo brand, coerente ovunque

Nel Vibe Design Workspace completo, applica le stesse regole di brand a siti, presentazioni, prototipi interattivi, dashboard, immagini e video HTML. Collega Codex, Claude Code, Cursor e gli altri agenti di coding locali e crea gratis.

  • Siti, presentazioni, prototipi, dashboard, immagini e video
  • Oltre 140 design system e la libreria completa di template e skill
  • Codex locale e oltre 21 agenti di coding · Gratis
Scarica gratis

Disponibile per macOS e Windows