hyperframes-creativepor HeyGen

HyperFrames Creative Skill.

Uma skill para Claude Code e Codex voltada a movimento e vídeo: direção criativa para vídeos HyperFrames: paleta, tipografia, composição, narração, ritmo.

Motion e Vídeo
Video

Baixar OpenDesign Ver guia 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

Cabeçalhos de metadados e seção lidos do arquivo upstream em 2026-09-14 · 6.317 caracteres no total

01 O que faz

O que o skill hyperframes-creative faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Direção criativa não relacionada à animação para vídeos HyperFrames, usada depois que o contrato técnico do hyperframes-core já está definido. Trata da leitura da especificação de design (frame.md / design.md com frontmatter como verdade da marca), paletas, tipografia, narração, planejamento de beats, visuais reativos a áudio, padrões de composição e decisões de marca.

Duas referências têm precedência sobre os instintos da web em trabalhos não triviais: house-style.md explica como interpretar prompts e gerar conteúdo real com receitas de camadas de fundo/frente, enquanto video-composition.md define escala, profundidade e detalhe de primeiro plano em formato de vídeo, para evitar layouts de página web vazios. Para padrões de movimento atômicos, blueprints de cena, transições e efeitos de marcador em CSS, use hyperframes-animation.

O que ele produz

Composição HTML usando escala em formato de vídeo, padrões de profundidade e cores e tipografia consistentes com a marca
Relatório de contraste de contrast-report.mjs que inspeciona a acessibilidade do frame renderizado
Arquivo de dados de bandas de áudio de extract-audio-data.py para composições reativas a áudio

Veja o exemplo de prompt ↗

Como funciona

01
Leia a Especificação de Design Primeiro
Se um projeto tiver frame.md, design.md ou DESIGN.md, leia-o primeiro e trate os tokens do frontmatter como verdade da marca para cores, fontes, espaçamento, tom e restrições.
02
Escolha uma Rota de Direção Visual
Se não existir uma especificação de design, adote um frame-preset pronto de frame-presets/, escolha um estilo nomeado em visual-styles.md, use os padrões rápidos de house-style.md ou execute uma seleção interativa via design-picker.md.
03
Planeje os Beats Antes de Escrever HTML
Para trabalhos com múltiplas cenas, consulte beat-direction.md para planejar ritmo e tempo antes de escrever HTML. Para transições de cena, vá para hyperframes-animation/transitions/.
04
Aplique as Diretrizes de Movimento
Para trabalhos com muito movimento, leia motion-principles.md para diretrizes de alto nível e depois vá para hyperframes-animation para as regras atômicas de movimento.

02 Encontre o ideal para você

Quando Usar a Skill hyperframes-creative

Use a skill hyperframes-creative no Claude Code ou Codex quando o trabalho é motion e vídeo deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Tratamento de especificações de design para arquivos frame.md ou design.md com tokens de frontmatter definindo a direção da marca
Seleção de paleta, escolhas tipográficas e decisões de marca ou estilo para vídeos HyperFrames
Padrões de composição como picture-in-picture, texto atrás do sujeito, cartões de título e slide shows
Visuais reativos ao áudio usando bandas de áudio pré-computadas mapeadas para movimento

Conheça os Limites

Padrões atômicos de movimento, que pertencem ao hyperframes-animation
Blueprints de cena, transições e efeitos de marcador CSS—use hyperframes-animation para isso

O Que Fornecer

Prompt do usuário para direção visualQuando não existir uma especificação de design, forneça uma solicitação de estilo nomeado, humor ou um prompt aberto para direcionar via visual-styles.md ou prompt-expansion.md.

03 Dentro da skill

Regras que a Skill hyperframes-creative Dá ao Claude Code e Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Leia house-style.md e video-composition.md Primeiro
Para qualquer composição não trivial, leia references/house-style.md e references/video-composition.md antes de escolher cores ou escrever HTML.
Tokens de Frontmatter São a Verdade da Marca
Em especificações de design, trate o frontmatter como normativo e o texto corrido como contexto. Tokens de frontmatter para cores, fontes, espaçamento, tom e restrições sobrescrevem outros padrões.
Nunca Sobrescreva as Regras Técnicas do hyperframes-core
Não sobrescreva o contrato técnico estabelecido pelo hyperframes-core, que define a estrutura fundamental e as restrições.
Sem Expansão de Conteúdo Não Solicitada
Não adicione cenas, narração, música, legendas ou transições extras, a menos que a solicitação exija explicitamente ou você proponha a expansão ao usuário primeiro.
Mantenha as Referências da Recipe Específicas à Tarefa
Não leia todos os arquivos de referência para edições simples. Carregue apenas as referências relevantes para a tarefa específica em questão.
Ordem de Precedência da Especificação de Design
Ao resolver qual especificação de design ler, siga esta ordem de precedência: primeiro frame.md, depois design.md, depois DESIGN.md.
Executar Scripts a Partir da Raiz do Repositório
Execute todos os scripts com caminhos explícitos a partir da raiz do repositório, por exemplo: python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>.
Design System Não É Necessário para Trabalho Mínimo
Não exija um design system completo para uma composição técnica mínima. O skill se ajusta à complexidade da tarefa.

04 Coloque em prática

Instale hyperframes-creative no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione hyperframes-creative ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Forma genérica de CLI skills para skills/hyperframes-creative/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Motion e Vídeo

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu 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.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Verifique a aderência ao design em cores, tipografia, cantos, espaçamento e profundidade conforme design-adherence.md
Verifique se as regras de densidade e escala de video-composition.md são seguidas para evitar layouts de página web

No OpenDesign importe hyperframes-creative a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
Arquivo da skill: skills/hyperframes-creative/SKILL.md Checksum de conteúdo registrado na verificação; commit 558c11b
License: Apache-2.0 De LICENSE.
Estrelas do repositório: 49.761 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório heygen-com/hyperframes, que contém 9 skills neste catálogo. Não é uma classificação ou contagem de uso para hyperframes-creative.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

HyperFrames CreativeDireção de marca, ritmo, estilo, narração e composição para uso após o contrato técnico do hyperframes-core
WorkflowProcesso de quatro etapas: ler a especificação de design, escolher a rota visual, planejar os beats, aplicar as diretrizes de movimento
RoteamentoTabela mapeando tópicos para arquivos de referência de paletas, composição, narração, audio-reactive e presets de estilo
Scriptscontrast-report.mjs, extract-audio-data.py, package-loader.mjs; execute a partir da raiz do repositório com caminhos explícitos
LimitesNão sobrescreva as regras principais, exija design systems, adicione conteúdo não solicitado ou leia todas as referências

A Descrição da Própria Skill

Direção criativa sem animação para vídeos HyperFrames. Use para manipulação de spec de design (frame.md / design.md), paletas, tipografia, narração, planejamento de batidas, visuais audio-reativos, padrões de composição e decisões de marca / estilo. Para padrões de movimento atômico e blueprints de cena, use `hyperframes-animation`.

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 6.317 caracteres. Leia o arquivo completo no GitHub.

HyperFrames Creative

Execute hyperframes-creative em uma tarefa real de movimento e vídeo.

Baixe OpenDesign, importe hyperframes-creative a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

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

O que o skill hyperframes-creative faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill hyperframes-creative

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que a Skill hyperframes-creative Dá ao Claude Code e Codex

Leia house-style.md e video-composition.md Primeiro

Tokens de Frontmatter São a Verdade da Marca

Nunca Sobrescreva as Regras Técnicas do hyperframes-core

Sem Expansão de Conteúdo Não Solicitada

Mantenha as Referências da Recipe Específicas à Tarefa

Ordem de Precedência da Especificação de Design

Executar Scripts a Partir da Raiz do Repositório

Design System Não É Necessário para Trabalho Mínimo