HyperFramespor HeyGen

HyperFrames Skill.

Comece pelo vídeo de que você precisa, não por um monte de ferramentas de animação. HyperFrames é a skill de entrada que lê o estado do projeto, seleciona o fluxo de produção adequado e traz os recursos necessários para transformar composições em HTML em vídeo.

HTML para vídeo
Roteamento de fluxo de trabalho
Produção de vídeo

Baixar OpenDesign Ver guia de uso

Revisão da fonte · hyperframesSKILL.md

Tarefa Produção de vídeo Produz • Um fluxo de trabalho selecionado e um briefing para criação do zero • Uma composição HTML e uma prévia por meio desse fluxo de trabalho • Vídeo renderizado, quando a renderização for solicitada e concluída Antes de começar A CLI exige Node.js 22+ e FFmpeg. Comece pelas skills principais; os fluxos de criação são instalados sob demanda. Serviços de mídia e renderização na nuvem podem acrescentar requisitos.

Resumo editorial · fonte revisada em 2026-10-12 · não é um exemplo gerado

01 O que ela faz

Um único ponto de entrada, diferentes fluxos de produção

A skill principal escolhe como o trabalho deve prosseguir. O fluxo de trabalho selecionado e as skills de domínio cuidam da composição, da mídia e da renderização propriamente ditas.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Um lançamento de produto, uma passada de legendas e uma apresentação interativa são entregas diferentes, mesmo que todas tenham movimento. HyperFrames faz o roteamento pelo resultado solicitado: um vídeo promocional a partir de um site, legendas simples em uma filmagem existente, música sincronizada com as batidas, um motion graphic curto ou uma composição personalizada têm, cada um, um caminho próprio. A fonte também oferece um caminho explícito para portar código-fonte Remotion.

Projetos existentes não são tratados como começos do zero. O roteador verifica o briefing e os artefatos do projeto, retoma o fluxo de trabalho registrado ou executa apenas a operação solicitada. Na criação do zero, ele registra a intenção em BRIEF.md, instala o fluxo de trabalho selecionado e carrega recursos especializados somente quando necessário.

Entregas esperadas

Uma escolha de fluxo de trabalho e um BRIEF.md para criação do zero
Uma composição HTML editável, com prévia e arquivos de apoio do projeto conforme o fluxo de trabalho exigir
Um vídeo renderizado, quando solicitado; uma apresentação navegável ou um storyboard revisado pode ser um ponto final diferente

Ver o briefing de exemplo

Do pedido à produção

01
Identifique o estado do projeto
Distinga criação do zero de uma edição, de uma operação apenas de renderização ou de um projeto com briefing existente. Reaproveite as preferências registradas em vez de reiniciar a entrevista.
02
Escolha pela entrega
Relacione o resultado solicitado ao contrato do fluxo de trabalho. Uma filmagem existente com legendas não é um novo vídeo explicativo, e música de fundo, por si só, não torna um projeto guiado por música.
03
Carregue os recursos necessários
Instale sob demanda o fluxo de criação selecionado. Traga orientações de composição, motion, mídia, áudio ou CLI para o trabalho que realmente for necessário, em vez de instalar todos os fluxos por padrão.
04
Revise e renderize com critério
Use a prévia e as verificações do fluxo de trabalho e, depois, renderize a entrega acordada. A validação de HTML não substitui assistir ao resultado; um pedido explícito de apenas renderização continua sendo essa operação.

02 Quando usar

Quando usar

Use o roteador quando um pedido de vídeo precisar do caminho de produção certo ou quando quiser retomar um projeto HyperFrames existente sem perder o contexto.

Bom uso

Um vídeo novo com assunto claroTraga um site, PR, tema, filmagem ou faixa de música e descreva o resultado pretendido. O roteador decide qual fluxo de trabalho, especializado ou geral, se aplica.
Retomada de um projeto existenteUm briefing salvo, a configuração do projeto e o storyboard permitem que o agente continue a direção estabelecida em vez de refazer as mesmas perguntas.
Combinação de várias camadas de produçãoUma peça pode precisar de temporização de HTML, movimento navegável por tempo, mídia e áudio. O roteador conecta esses recursos sem tratar uma única técnica de animação como o trabalho inteiro.

Limites a verificar

Não é um preset de animação independenteEsta skill é um ponto de entrada de orquestração. Instalar suas instruções não substitui o fluxo de trabalho selecionado, a CLI, as dependências de renderização nem os ativos de mídia.
Nem todo pedido termina em MP4Uma apresentação navegável, um storyboard aprovado ou uma tarefa só de prévia têm um ponto final diferente. Especifique se um arquivo renderizado é realmente necessário.
Serviços externos têm requisitos própriosA fonte verifica o uso durante a criação. A geração de mídia e os serviços hospedados podem exigir contas, cota disponível ou autorização adicional; uma licença de código aberto não torna todos os serviços ilimitados.

Traga estes insumos

A entrega pretendidaInforme público, assunto, proporção de tela, duração aproximada e formato final. Deixe claro se é um vídeo promocional, uma passada de legendas, uma apresentação, um explicativo ou uma edição personalizada.
Material de origem que você pode usarForneça textos aprovados, filmagens, capturas de tela do produto, música ou URLs de origem. Identifique as afirmações e os direitos dos ativos; mídia gerada não substitui evidências factuais do produto.
Projeto existente e limites de revisãoCompartilhe BRIEF.md e os arquivos relevantes do projeto ao continuar o trabalho. Especifique pontos de aprovação, restrições de uso apenas local e se a renderização ou a publicação estão autorizadas.

03 Decisões que importam

Decisões que importam

O briefing leva a rota adiante
Em um trabalho novo, o processo de levantamento da intenção termina em BRIEF.md. A produção posterior deve seguir essa escolha registrada, em vez de reinterpretar repetidamente o pedido original.
A temporização de HTML precisa ser navegável
O framework renderiza quadros individuais a partir de uma composição temporizada. Movimento e mídia devem seguir o contrato de autoria dele, e não apenas parecer corretos na reprodução comum no navegador.
A instalação de fluxos permanece enxuta
A configuração independente documentada instala o conjunto principal e adiciona fluxos de criação quando selecionados. Um pacote de plugin tem seu próprio catálogo incluído e gerenciador de atualizações; os dois caminhos de instalação não são intercambiáveis.

04 Experimente um briefing focado

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Instale as skills principais

O comando abaixo é o caminho de instalação do conjunto principal descrito no README, para agentes e uso não interativo.

Instalação documentada do conjunto principal

npx hyperframes skills update

A CLI exige Node.js 22+ e FFmpeg. A alternativa interativa é npx skills add heygen-com/hyperframes e, depois, selecionar Core Skills. Claude Code também tem uma instalação como plugin, documentada separadamente. Os fluxos de criação são carregados sob demanda; esta página não afirma que a instalação foi testada.

Comece com um pedido de vídeo delimitado

Use o briefing não testado abaixo para deixar explícitos o assunto, os ativos, a saída e o ponto de parada. Um projeto existente deve incluir o briefing e a configuração atuais.

Briefing de exemplo

Use o ponto de entrada HyperFrames para planejar um vídeo de apresentação de produto de 20 segundos, 16:9, a partir das capturas de tela e dos textos aprovados que eu fornecer. Use somente esses ativos e afirmações; não gere música, narração nem mídia adicional. Primeiro, verifique se esta pasta já tem BRIEF.md ou hyperframes.json e preserve quaisquer decisões registradas. Em um trabalho novo, confirme o público e o fluxo de trabalho, escreva o briefing e, depois, prepare uma composição HTML e uma prévia local. Mantenha o projeto local. Mostre a prévia e informe as verificações realmente executadas antes de renderizar; não publique nem use serviços pagos. Se um fluxo de trabalho, uma dependência ou uma verificação de uso necessários não estiverem disponíveis, explique a limitação em vez de fingir que foi concluído.

Revise antes da renderização final

Inspecione a rota escolhida, o uso dos ativos, a prévia e as verificações informadas. Assista ao arquivo renderizado, caso um seja produzido, e mantenha a renderização separada da publicação.

O fluxo de trabalho selecionado corresponde à entrega solicitada e preserva as decisões já existentes do projeto.
A prévia usa as afirmações e os ativos fornecidos, com texto legível e temporização que funciona ao navegar pela linha do tempo.
Os resultados de dependência, uso e renderização são explícitos; uma prévia local não é descrita como vídeo publicado ou renderizado.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos do projeto original podem mudar.

Responsável pela fonte: HeyGen
Repositório: heygen-com/hyperframes
Arquivo da skill: skills/hyperframes/SKILL.md
Licença: Apache-2.0
Snapshot revisado: 2026-10-12 · 2905162d925f

Resumo editorial da fonte

HyperFrames é o ponto de entrada de roteamento e retomada de projetos para uma família de fluxos de vídeo nativos em HTML. Ela seleciona caminhos de produção e carrega recursos de domínio; não é, em si, um efeito de animação isolado nem um resultado registrado.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não de uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Em que a skill principal é diferente de hyperframes-animation?

A skill principal identifica o estado do projeto e escolhe o fluxo de produção. A skill de animação fornece regras de movimento e orientações de runtime quando esse fluxo precisa delas. Comece pelo ponto de entrada principal em um pedido de vídeo de ponta a ponta.

Preciso de React ou de todas as skills publicadas?

React não é necessário: HyperFrames cria composições em HTML com animação navegável por tempo. O README da instalação independente recomenda começar pelo conjunto principal, com os fluxos de criação instalados sob demanda; as instalações por plugin incluem o próprio catálogo.

Ela pode apenas renderizar um projeto existente?

Sim. A fonte trata um pedido específico de renderizar, inspecionar, validar ou visualizar como uma operação delimitada, sem reiniciar a entrevista de criação do zero. O projeto ainda precisa da CLI e do ambiente de renderização necessários.

HyperFrames

Comece pelo vídeo de que você precisa

Traga um briefing delimitado ou um projeto existente. Escolha o fluxo de trabalho certo, inspecione a prévia e decida explicitamente quando renderizar ou publicar.

Baixar OpenDesign Ver skills de design