Instalação do plugin: Antes dos comandos de configuração ou atualização, siga as regras de instalação do plugin quando este skill estiver dentro de um plugin HyperFrames. Instalações independentes mantêm as instruções de atualização abaixo.
Primeiro, mantenha este skill atualizado — confirme com o usuário antes de executar:
npx hyperframes skills update product-launch-video. Uma operação rápida e sem efeito quando tudo está atualizado; caso contrário, ele atualiza este skill e os skills de domínio principais dos quais depende, antes de você usá-los.
media-use: Antes de obter áudio/imagens/logotipos, chame
/media-usepara resolver BGM/SFX/imagens do catálogo HeyGen e logotipos de marca de suas fontes oficiais. Execute--adoptprimeiro para registrar ativos existentes. Consulte o skill/media-use.
fonte figma: Se a origem for uma URL figma.com, execute
/figmaprimeiro — exportação de ativos, tokens de marca e componentes/reconstrução do storyboard, se necessário — e então construa este fluxo de trabalho a partir de sua saída. Não acione o Figma diretamente por meio de ferramentas MCP brutas: isso pula a sanitização SVG, a proveniência.media/manifest.jsonle a vinculação de token de marcavar(), portanto, uma alteração posterior da marca não pode se propagar sem uma reimportação completa.
Lançamento de Produto para HyperFrames
Use este skill para capturar um produto, entender sua marca, planejar um vídeo de lançamento e construí-lo quadro a quadro no HyperFrames.
A porta de entrada é
/hyperframes. Você é o orquestrador. Execute cada etapa, verifique sua porta de entrada e só então continue para a próxima etapa. Este skill é para um produto sendo comercializado, lançado, promovido ou revelado, incluindo solicitações como "promo para nosso site" quando o propósito é promocional. Um pedido de tour/apresentação do site também permanece aqui:BRIEF.mdcarrega a intenção de mostrar como está, e as capturas de tela se tornam os ativos que o vídeo apresenta. Qualquer outra intenção, um "criar um vídeo" simples ou qualquer incerteza → leia/hyperframesprimeiro — a camada de intenção é dona de toda decisão de rota, e uma criação nova chegando aqui semBRIEF.mdpassa por ela de qualquer forma (regra inicial da Configuração).
Você é o orquestrador. Trabalhe em videos/<projeto>/. Execute as etapas em ordem e passe por cada porta de entrada antes de continuar. As etapas com porta de entrada do usuário são Etapa 0, Etapa 3 e Etapa 6. Leia ../hyperframes/references/brief-contract.md antes da Etapa 0 — ela define os tipos de porta de entrada e como flow/storyboard do BRIEF.md derivam o modo que rege as portas de entrada das Etapas 3/4/6. Faça cada etapa você mesmo, exceto a Etapa 5, onde você despacha um subagente por quadro. Não coloque regras de design ou movimento aqui; elas residem no subagente do trabalhador do quadro, nos ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ locais deste skill e no hyperframes-creative.
Fluxo de trabalho: Etapa 0 configuração -> hyperframes.json; Etapa 1 captura -> capture/; Etapa 2 sistema de design -> frame.md; Etapa 3 storyboard/roteiro -> STORYBOARD.md e SCRIPT.md; Etapa 3.1 áudio -> audio_meta.json; Etapa 4 design visual -> STORYBOARD.md enriquecido; Etapa 5 quadros -> compositions/frames/NN-*.html e index.html; Etapa 6 renderização final -> renders/video.mp4.
Etapa 0: Configuração
Objetivo: Entrar com um briefing confirmado, criar o projeto HyperFrames e tornar o briefing durável.
O briefing é confirmado pela camada de intenção, não por perguntas feitas aqui. Regra inicial, em ordem: (1) BRIEF.md existe → leia e não pergunte nada — o briefing está definido, e seu flow/storyboard derivam o modo (contrato do briefing § 1). (2) Não há BRIEF.md mas o projeto existe (hyperframes.json / STORYBOARD.md no disco) → retome a partir do frontmatter do storyboard e das preferências registradas; nunca reinterrogue um projeto meio construído. (3) Nem um nem outro — uma solicitação de criação nova que chegou aqui diretamente → leia /hyperframes e execute sua camada de intenção (references/intent-interview.md): ela verifica receitas e padrões lembrados, conduz as perguntas desta rota (../hyperframes/references/routes/product-launch-video.md) e devolve o briefing bloqueado. Solicitações de edição pulam tudo isso — vá fazer a edição.
Inicialize apenas se hyperframes.json estiver faltando. Nomeie <projeto> a partir da marca ou domínio em kebab-case, como acme-promo; nunca use o nome do workspace ou timestamp.
npx hyperframes init "videos/<projeto>" --non-interactive --example=blank --skill=product-launch-video — init verifica os skills instalados em relação aos mais recentes no GitHub e atualiza o conjunto global se algum estiver desatualizado.
Após a inicialização, defina <RAIZ_DO_PROJETO> como videos/<projeto> e execute cada comando de caminho relativo subsequente com esse diretório como seu diretório de trabalho. Nos comandos abaixo, . significa <RAIZ_DO_PROJETO>; nunca escreva .media, capture ou arquivos de saída no diretório do chamador.
Escreva BRIEF.md imediatamente após a inicialização (nunca antes — init recusa um diretório não vazio): o briefing bloqueado da camada de intenção, formato conforme ../hyperframes/references/brief-format.md. Resolva <DIR_MIDIA> como o diretório do skill /media-use instalado. Em seguida, registre cada resposta baseada em preferência com node <DIR_MIDIA>/scripts/prefs.mjs record --hyperframes . (brief-format.md nomeia o subconjunto). Se a camada de intenção adotou uma receita, execute node <DIR_MIDIA>/scripts/recipe.mjs use --hyperframes . --name <nome>; ela copia seu frame.md para o projeto (a Etapa 2 é então pulada) e retorna os esqueletos a partir dos quais a Etapa 3 rascunha. Uma receita preenche respostas, não aprovações; as portas de entrada de revisão ainda são executadas.
Mostre o status de login antes de prosseguir após a Configuração — execute npx hyperframes auth status e transmita sua saída literalmente. Ele informa se a voz/BGM usará mecanismos HeyGen ou locais e, quando desconectado, como fazer login. Observe o contrato do código de saída: auth status sai com código 1 quando não está logado (e quando a credencial armazenada é rejeitada) — essa saída não zero é o estado normal de desconexão, não uma falha de comando, portanto, não a trate como erro, não a repita e não a encadeie com &&/set -e de uma forma que abortaria o fluxo de trabalho. Aplique um ramo:
- Colaborativo: aguarde o usuário fazer login ou escolher explicitamente
offline/go. - Autônomo: informe o status e continue pelos mecanismos locais disponíveis.
Não omita silenciosamente uma capacidade necessária quando nenhum provedor offline existir; exponha o bloqueador. Não coloque essa decisão em outra pergunta nem escreva chaves em um .env por repositório. Propriedade de autenticação e fallbacks offline: /media-use references/setup-providers.md § Providers.
Porta de entrada: hyperframes.json e BRIEF.md existem; as respostas baseadas em preferência foram registradas (contrato do briefing § 2); o status de login foi mostrado (logado ou continuando offline).
Etapa 1: Capturar ativos
Objetivo: Coletar o material de origem, sinais de marca e ativos utilizáveis para o vídeo.
Classifique a entrada e escolha o caminho. URL explícita -> capture-a e use o site para narração e ativos. Roteiro/briefing colado -> salve literalmente como user_script.txt; VO_MODE (literal ou reestruturado) vem de BRIEF.md — a camada de intenção pergunta quando um roteiro chega (pergunte uma vez aqui apenas se o briefing de alguma forma não o tiver). Em seguida, resolva o alvo da captura: URL no texto -> use-a; apenas nome da marca -> WebSearch, confirme a URL em uma linha e depois rastreie; sem URL/site (ou o briefing diz para não raspar) -> caminho sem captura.
Execute a captura com: npx hyperframes capture "<URL>" -o ./capture --json. Mantenha o orçamento de navegação pós-captura padrão, a menos que o solicitante possua um prazo menor; então, passe um --capture-budget <milissegundos> positivo que deixe tempo para o trabalho downstream. --timeout controla apenas a navegação da página. Use --skip-vision apenas quando a legendagem opcional de imagem estiver intencionalmente desabilitada.
Inspecione o resultado do comando e o diretório de saída imediatamente. Uma saída não zero, JSON ok: false ou capture/BLOCKED.md é uma parada forçada para o caminho de captura: relate o motivo registrado e não consuma capturas de tela parciais, DOM, tokens ou ativos. Não fabrique um fallback sintético sem captura após uma falha de captura de URL. Continue pelo caminho sem captura apenas quando o briefing original forneceu o material de origem ou quando o usuário alternar explicitamente para uma captura de tela ou briefing fornecidos após a falha.
Avisos como "muito pouco conteúdo de texto" juntamente com um catálogo de ativos vazio não são prova de uma página utilizável. Para um tour de site ou briefing de "mostrar como está", exija estrutura capturada confiável ou uma captura de tela fornecida; se nenhum existir, pare. Não invente ou reconstrua a página meramente porque a captura é inutilizável.
Para um tour de site ou briefing de "mostrar como está", a página capturada é a fonte visual da verdade. Use a captura de tela real em vez de reconstruir o site inteiro em HTML. Se a captura precisar de movimento interno, mantenha a captura de tela como base e sobreponha ativos capturados reais em posições medidas, ou reconstrua apenas o componente que se move. Para uma captura de rolagem, anime a janela de visualização sobre capture/screenshots/full-page.png — a placa 1x de todo o documento, pixel-exata para uma janela de visualização de 1920px de largura percorrendo-a. Ela está ausente quando a página era muito alta para ser capturada em uma peça; recorra às capturas de rolagem sobrepostas no mesmo diretório. Ampliar além de 1:1 requer sua própria captura 2x dessa região, pois a placa não tem margem acima de 1x. Reconstrua a página inteira apenas quando o usuário solicitar explicitamente uma interpretação estilizada; uma captura inutilizável sozinha não é autorização.
Se GEMINI_API_KEY, GOOGLE_API_KEY ou uma chave OpenRouter existir, a captura legenda automaticamente os ativos em capture/extracted/asset-descriptions.md. Isso não é uma porta de entrada de revisão. Sem uma chave de visão, use o contexto DOM e continue.
Caminho sem captura: crie capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md e capture/assets/ manualmente. tokens.json deve ser { "title": "", "description": "", "colors": [], "fonts": [] }; preencha título/descrição do briefing quando possível. visible-text.txt contém o briefing ou roteiro completo. asset-descriptions.md deve informar que nenhum ativo foi capturado, a menos que o usuário tenha fornecido notas de ativos.
Porta de entrada: o JSON de captura relatou ok: true; capture/BLOCKED.md não existe; capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md e capture/assets/ existem; e você pode declarar a marca em uma frase clara. Trate asset-descriptions.md como o inventário principal de ativos. Se estiver faltando após a captura real, pare e relate a captura incompleta. Avisos sobre uma fase opcional degradada são aceitáveis apenas quando esta porta de entrada estrutural ainda passa.
Etapa 2: Sistema de Design
Objetivo: Escolher um preset de quadro fornecido; um script o transforma no frame.md + skin de legenda deste vídeo.
Quando BRIEF.md nomear um style_preset — o usuário o escolheu visualmente a partir das vitrines na camada de intenção — use-o; a decisão é sua apenas quando o briefing estiver silencioso. Então você faz a única chamada — qual preset: leia ../hyperframes-creative/references/design-spec.md e escolha o preset cuja aparência melhor se adapte à marca e ao briefing. Em seguida, execute:
node <DIR_SKILL>/scripts/build-frame.mjs --preset <nome> --hyperframes .
O script faz o resto deterministicamente: copia o FRAME.md do preset → frame.md e o remixa com os tokens de marca em capture/extracted/tokens.json (cores da marca mapeadas nas chaves de cor do preset por função — tinta, tela, acentos — mantendo chaves/estrutura/componentes; as fontes de exibição + corpo do preset trocadas pelas da marca), copia a skin de legenda do preset para .hyperframes/caption-skin.html e se autovalida (sai com 1 em um mapeamento quebrado). Prossiga para a próxima etapa assim que ele sair com 0 — sem edição manual da especificação.
tokens.json sem cores/fontes de marca (por exemplo, sem captura) → o script mantém a própria paleta do preset, um design completo e enviável. Se o briefing nomear cores/fontes de marca que a captura perdeu, adicione-as a capture/extracted/tokens.json antes de executar (ou use o design.md do usuário para preenchê-lo); ajuste frame.md manualmente depois apenas se um mapeamento realmente precisar.
Porta de entrada: build-frame.mjs saiu com 0 — frame.md existe a partir de um preset nomeado e (quando o preset fornece um) .hyperframes/caption-skin.html existe como a fonte da skin de legenda; o preset escolhido foi registrado como preferência (--key style_preset --workflow <este fluxo>, contrato do briefing § 2).
Etapa 3: Storyboard e Roteiro
Objetivo: Transformar o briefing e o material capturado em um plano de história quadro a quadro aprovado.
Leia ../hyperframes-creative/references/story-spine.md (linguagem de gancho, valor antes da evidência, storyboard como proposta, visuais rastreáveis por fonte), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes/references/storyboard-format.md e ../hyperframes/references/script-format.md. Use-os para escrever STORYBOARD.md e, quando a narração for necessária, SCRIPT.md. Defina o duration: do frontmatter a partir do length do briefing — uma expectativa aproximada; a montagem relata onde o corte final se posiciona em relação a ela.
Use story-design.md para o blueprint da história, gancho, lógica de persuasão, batidas, VO_MODE e escolhas de ativos. Como um guia suave, consulte o menu função→blueprint em ../hyperframes-animation/blueprints-index.md: para cada batida, anote um id de blueprint candidato quando um se encaixar. A verdade da história ainda decide quais batidas existem — nunca force uma batida a se encaixar em um blueprint e nunca invente uma batida apenas porque uma forma comprovada está disponível. Escolha os asset_candidates de cada quadro visual a partir de capture/extracted/asset-descriptions.md (o inventário canônico) — não navegue pelos capture/assets/ brutos. Não peça ao usuário para escolher ativos, a menos que esse inventário esteja faltando ou seja inutilizável. Use os campos exatos exigidos das referências de storyboard e roteiro.
Após rascunhar, execute a passagem de plano do loop de revisão — ../hyperframes/references/review-loop.md § 1: apresente o plano como uma proposta e faça as duas perguntas — aprovar ou alterar, e rascunhos primeiro (recomendado) ou pular. O feedback chega como uma resposta de chat; repita até a aprovação. Esta é uma porta de entrada de checkpoint (contrato do briefing § 1): no modo autônomo, confirme que a proposta atende aos critérios do contrato e continue sem esperar pela aprovação do usuário.
Etapa 3.1: Áudio
Objetivo: Selecionar voiceover (VO), música de fundo (BGM), efeitos sonoros (SFX) para o vídeo e meta-informações de registro.
Consulte /media-use para material de áudio. As decisões de áudio que exigem entrada do usuário são: voz (qual locução/voz sintética), BGM (qual faixa e loop) e SFX (quais sons chave). Se o usuário quiser que tudo seja padrão, defina valores padrão. Escreva as meta-informações de áudio em audio_meta.json no formato prescrito por /media-use.
Etapa 4: Design Visual
Objetivo: Enriquecer o storyboard com decisões de design visual.
Leia ../hyperframes-animation/rules/ e ../hyperframes-animation/blueprints/. Aplique o sistema de design (de frame.md) a cada quadro no storyboard. Atualize STORYBOARD.md com:
- plano de quadro: close-up, médio, amplo, etc.
- transições: corte, fade, deslize, etc.
- animações: mover, desbotar, dimensionar, etc.
- **posicionamento do texto/legendas com relação ao quadro/skin.
Não crie quadros HTML aqui; isso é para a Etapa 5.
Porta de entrada: STORYBOARD.md está atualizado com decisões de design visual e todas as referências de blueprint são válidas.
Etapa 5: Quadros
Objetivo: Gerar HTML para cada quadro.
Para cada quadro em STORYBOARD.md, crie um subagente. O subagente deve:
- Ler
frame.md(sistema de design). - Ler o quadro correspondente de
STORYBOARD.md. - Gerar
compositions/frames/NN-description.html.
O subagente deve seguir as regras em ../hyperframes-animation/rules/ e usar blueprints de ../hyperframes-animation/blueprints/.
Após todos os quadros estarem prontos, gere index.html na raiz do projeto que orquestra os quadros em ordem. Use transições de STORYBOARD.md.
Etapa 6: Renderização Final
Objetivo: Renderizar o vídeo final.
Execute npx hyperframes render para produzir renders/video.mp4. Mostre o resultado ao usuário para aprovação final. Se aprovado, pronto. Caso contrário, repita as etapas necessárias.
Leia
../hyperframes/references/render-settings.mdantes de executar.
Porta de entrada: O usuário aprova a saída renderizada.