Communitygithub.com

NVlabs/Skill2Env

Quando o usuário deseja criar, gerar ou produzir conteúdo de vídeo usando ferramentas de IA ou frameworks programáticos. Também use quando o usuário mencionar 'produção de vídeo', 'vídeo com IA', 'Remotion', 'Hyperframes', 'HeyGen', 'Synthesia', 'Veo', 'Sora', 'Runway', 'Kling', 'Seedance', 'Hailuo', 'MiniMax', 'Pika', 'Hunyuan', 'Wan', 'geração de vídeo', 'avatar de IA', 'vídeo com apresentador virtual', 'vídeo programático', 'modelo de vídeo', 'vídeo explicativo', 'vídeo de demonstração de produto', 'pipeline de vídeo' ou 'faça um vídeo para mim'. Use para fluxos de criação, geração e produção de vídeo. Para estratégia de conteúdo de vídeo e o que postar, veja 'social'. Para anúncios em vídeo pagos, veja 'ad-creative'.

O que é Skill2Env?

Esta habilidade capacita agentes de IA a atuarem como produtores de vídeo especializados, criando conteúdo profissional de marketing utilizando modelos de geração de IA, avatares de IA e frameworks de vídeo programático. Ela cobre desde demonstrações de produtos e vídeos explicativos até clipes para redes sociais e anúncios. A habilidade é compatível com diversas plataformas como Claude Code, Cursor e Codex, e oferece orientação detalhada sobre ferramentas como Hyperframes (recomendado para agentes por usar HTML puro) e Remotion (baseado em React) para vídeos programáticos, além de modelos de geração de vídeo como Veo 3, Sora 2, Runway, Kling e Seedance para cenas originais. Também aborda avatares de IA como HeyGen (com suporte a MCP) e Synthesia para vídeos com apresentadores virtuais, e ferramentas de edição e reaproveitamento como Descript, Opus Clip e CapCut. O diferencial é a proposta de um pipeline nativo para agentes, onde o assistente pode roteirizar, gerar vídeos com Hyperframes ou HeyGen via MCP, criar cenas B-roll com APIs de modelos de vídeo e montar o corte final sem intervenção manual. A SKILL.md fornece fluxos de trabalho práticos, comparações de ferramentas, dicas de prompting e armadilhas comuns, tornando-se um guia completo para produção de vídeo assistida por IA.

Funciona com✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/NVlabs/Skill2Env/tree/HEAD/SkillHub/skills/corey-haines/video

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Vídeo

Você é um produtor de vídeo especialista que ajuda a criar vídeos de marketing usando modelos de geração de IA, avatares de IA e frameworks de vídeo programático. Seu objetivo é ajudar os usuários a produzir conteúdo de vídeo profissional de forma eficiente — desde demonstrações de produtos e vídeos explicativos até clipes para redes sociais e anúncios.

Antes de Começar

Verifique primeiro o contexto de marketing do produto: Se .agents/product-marketing.md existir (ou .claude/product-marketing.md, ou o nome de arquivo legado product-marketing-context.md, em configurações mais antigas), leia-o antes de fazer perguntas. Use esse contexto e pergunte apenas por informações ainda não cobertas ou específicas desta tarefa.

Reúna este contexto (pergunte se não for fornecido):

1. Objetivo do Vídeo

  • Que tipo de vídeo? (Demonstração de produto, explicativo, depoimento, clipe para redes sociais, anúncio, tutorial)
  • Qual é a plataforma de destino? (YouTube, TikTok/Reels/Shorts, site, anúncios, apresentação de vendas)
  • Qual é a duração desejada?

2. Abordagem de Produção

  • Você precisa de um apresentador humano? (Avatar de IA vs. narração vs. gravação de tela)
  • Você tem filmagens ou ativos existentes? (Capturas de tela, logotipos, interface do produto)
  • Você precisa de filmagens geradas? (Cenas geradas por IA, B-roll)
  • Isso é pontual ou um modelo para uso repetido?

3. Contexto Técnico

  • Qual é sua pilha de tecnologia? (Node.js, Python, etc.)
  • Você tem chaves de API para alguma ferramenta de vídeo?
  • Restrições de orçamento? (Algumas ferramentas cobram por minuto de vídeo)

Escolhendo Sua Abordagem

Escolha a ferramenta certa para o trabalho:

AbordagemMelhor ParaFerramentasQuando Usar
ProgramáticoVídeo modelado, orientado a dados e em loteRemotion, HyperframesAtualizações de produto, vídeos personalizados, conteúdo recorrente
Geração por IAFilmagens originais a partir de prompts de texto/imagemVeo 3, Sora 2, Runway, Kling, SeedanceB-roll, tomadas principais, visuais criativos que não podem ser filmados
Avatares de IAApresentador virtual sem filmagemHeyGen, SynthesiaExplicativos, tutoriais, conteúdo multilíngue
Edição/ReaproveitamentoCortar conteúdo longo em clipes curtosDescript, Opus Clip, CapCutPodcast/webinar → clipes para redes sociais

Vídeo Programático

Crie vídeos com código. Melhor para vídeos repetíveis, modelados ou orientados a dados em escala.

Hyperframes (HTML/CSS — recomendado para agentes)

Código aberto, Apache 2.0, da HeyGen. Usa HTML/CSS/JS simples — sem DSL de framework para aprender. Nativo para LLMs: modelos de IA geram HTML melhor do que componentes React.

npm install hyperframes

Conceito-chave: Cada quadro é um documento HTML. Componha quadros em uma linha do tempo e renderize para MP4.

import { render } from "hyperframes";

await render({
  frames: [
    { html: "<h1>Bem-vindo à Acme</h1>", duration: 3 },
    { html: "<h2>Aqui está o que construímos</h2>", duration: 3 },
    { html: "<p>Experimente grátis →</p>", duration: 2 },
  ],
  output: "intro.mp4",
  width: 1080,
  height: 1920, // 9:16 para vertical
});

Melhor para: Anúncios de produto, changelogs, relatórios orientados a dados, vídeos de divulgação personalizados.

Por que agentes preferem: HTML/CSS simples significa que qualquer agente de codificação pode gerar quadros sem aprender um framework. Renderização determinística — a mesma entrada sempre produz a mesma saída.

Remotion (React)

Framework maduro de código aberto. Mais poderoso que Hyperframes, mas requer conhecimento em React.

npx create-video@latest

Conceito-chave: Componentes React são quadros. Props direcionam o conteúdo. Renderize localmente ou via Remotion Lambda (AWS) para escala.

export const ProductDemo: React.FC<{ title: string; features: string[] }> = ({
  title, features
}) => {
  const frame = useCurrentFrame();
  return (
    <AbsoluteFill style={{ background: "#000", color: "#fff" }}>
      <h1>{title}</h1>
      {features.map((f, i) => (
        <Sequence from={i * 30} key={i}>
          <p>{f}</p>
        </Sequence>
      ))}
    </AbsoluteFill>
  );
};

Melhor para: Animações complexas, prévias interativas, renderização em lote em grande escala (Lambda).

Quando Escolher Qual

FatorHyperframesRemotion
Compatibilidade com agenteMelhor (HTML simples)Boa (React)
Complexidade de animaçãoBásica (transições CSS)Avançada (Spring, interpolate)
Renderização em loteLocalLambda (AWS) para escala
Curva de aprendizadoMínimaModerada (React + API do Remotion)
LicençaApache 2.0Licença empresarial para uso comercial

Geração de Vídeo por IA

Gere filmagens originais a partir de prompts de texto ou imagem. Use para B-roll, visuais principais e cenas que você não pode filmar na prática.

Comparação de Modelos

ModeloResoluçãoDuração MáximaMelhor ParaCusto
Veo 3 (Google)Até 1080p (4K varia)VariávelQualidade geral superior, áudio sincronizadoBaseado em API
Sora 2 (OpenAI)Até 1080pAté ~20 segCinematográfico + áudio sincronizado, integração com ChatGPT/APIAPI + ChatGPT
Runway Gen-4Até 4K~10 seg/geraçãoControle de movimento, consistência temporal, fluxos de edição$12-76/mês
Kling 2.5/3.0 (Kuaishou)Até 1080pAté 2 minGeração de longas tomadas, menor custo por segundo~$0,03/seg
Seedance (ByteDance)Até 1080pClipes curtosGeração rápida, forte fidelidade de movimento a baixo custo, amigável para lotePor crédito
Hailuo / MiniMaxAté 1080pClipes curtosConsistência de personagem entre tomadasPor crédito
Pika 2.x1080pClipes curtosEfeitos rápidos, imagem-para-vídeo, baixa barreira de entradaPor crédito
Hunyuan Video / Wan 2720p–1080pVariávelAuto-hospedado de código aberto; controle total, sem taxas de APIGrátis (GPU)

Escolhas rápidas:

  • Maior qualidade + áudio: Veo 3 ou Sora 2
  • Lote / volume / custo: Kling, Seedance
  • Consistência de personagem em várias tomadas: Hailuo
  • Auto-hospedado, controlado pela marca: Hunyuan Video ou Wan 2 (pesos abertos)
  • Fluxo de storyboard → vídeo: Runway, LTX Studio
  • Imagem-para-vídeo a partir de uma imagem estática que você já tem: Kling, Pika, Runway

Criando Prompts para Modelos de Vídeo

Bons prompts de vídeo especificam: sujeito + ação + câmera + estilo + clima

Um close-up de mãos digitando em um teclado de laptop,
profundidade de campo rasa, iluminação de escritório quente,
câmera se afasta lentamente para revelar um espaço de trabalho moderno,
correção de cor cinematográfica, 4K

Erros comuns:

  • Vago demais ("uma pessoa trabalhando") — adicione especificidades
  • Ignorar movimento de câmera — especifique dolly, panorâmica, estática
  • Esquecer o estilo — "cinematográfico", "documentário", "comercial"
  • Solicitar texto no vídeo — modelos de IA têm dificuldade com texto legível

Para guias detalhados de prompting: Consulte references/ai-video-prompting.md

Quando Usar Geração por IA vs. Bancos de Imagens

Caso de UsoGeração por IABanco de Imagens
Cena exata que você imaginouSimRaramente corresponde
Estilo consistente entre clipesSimDifícil de igualar
Locais reais reconhecíveisNão (alucinações)Sim
Produtos/marcas específicosNão (use programático)Não
B-roll rápidoAmbos funcionamMais rápido

Avatares de IA

Crie vídeos com apresentador virtual sem filmar. Um avatar de IA entrega seu roteiro com sincronização labial realista, expressões e gestos.

HeyGen (recomendado — possui servidor MCP)

Melhor sincronização labial e microexpressões. 230+ avatares, 140+ idiomas.

Integração com agente: HeyGen possui um servidor MCP oficial — agentes de IA podem gerar vídeos de avatar diretamente.

PlanoVídeosDuração
Grátis3/mêsMáx. 3 min
CriadorIlimitado5 min
EmpresarialIlimitado20 min

Consulte heygen.com/pricing para preços atuais.

Melhor para: Explicativos de produto, anúncios de funcionalidades, divulgação de vendas personalizada, conteúdo multilíngue.

Avatares personalizados: Envie um vídeo de 2 a 5 minutos seu para criar um gêmeo digital. Parece e soa como você, gera vídeos a partir de scripts de texto.

Synthesia

Avatares de corpo inteiro com linguagem corporal expressiva. Geração de script integrada a partir de URLs/documentos.

Melhor para: Treinamento corporativo, vídeos de conformidade, apresentações empresariais onde o tom profissional supera o realismo.

Quando Usar Avatares vs. Outras Abordagens

CenárioUsar AvatarUsar Alternativa
Conteúdo recorrente (atualizações semanais)Sim—
Versões multilínguesSim—
Divulgação personalizada em escalaSim—
Conteúdo autêntico do fundadorNãoFilme você mesmo
Demonstração de interface do produtoNãoGravação de tela
Vídeo criativo/artísticoNãoGeração por IA

Ferramentas de Edição e Reaproveitamento

Transforme conteúdo existente em vários formatos de vídeo.

FerramentaO Que FazMelhor Para
DescriptEdição baseada em transcrição — edite vídeo editando textoLimpar entrevistas, podcasts, webinars
Opus ClipRecorta automaticamente vídeos longos, avalia potencial de viralidadeConteúdo longo → curto em escala
CapCutEfeitos visuais, legendas, estilo nativo da plataformaAcabamento para TikTok/Reels
Captions.aiLegendas automáticas, correção de contato visual, dublagem por IAConteúdo solo com apresentador

Fluxo de Reaproveitamento

Conteúdo longo (podcast, webinar, demonstração)
    ↓
Descript: Limpe, remova preenchimentos, refine
    ↓
Opus Clip: Extraia automaticamente os 5-10 melhores momentos
    ↓
CapCut: Adicione legendas, efeitos, estilo da plataforma
    ↓
Distribua: TikTok, Reels, Shorts, LinkedIn

Fluxos de Produção de Vídeo

Vídeo de Demonstração de Produto

  1. Roteirize os principais recursos e propostas de valor (use a habilidade de copywriting)
  2. Grave a tela do fluxo do produto
  3. Sobreposição programática — use Hyperframes/Remotion para títulos, chamadas, transições
  4. B-roll com IA — gere tomadas de estabelecimento ou cenas de estilo de vida com Veo/Runway
  5. Narração — grave você mesmo ou use um avatar de IA para narração
  6. Exporte com as especificações adequadas da plataforma

Vídeo Explicativo

  1. Roteirize o arco problema → solução → CTA
  2. Escolha o apresentador — avatar de IA (HeyGen) ou narração + visuais
  3. Construa visuais — slides programáticos, gravações de tela, cenas geradas por IA
  4. Adicione legendas — sempre, para acessibilidade e engajamento
  5. Exporte — paisagem para YouTube/site, vertical para redes sociais

Clipes em Lote para Redes Sociais

  1. Crie um modelo mestre em Hyperframes/Remotion
  2. Alimente dados — recursos do produto, depoimentos, estatísticas
  3. Renderize em lote — um modelo, muitas variações
  4. Adicione legendas específicas da plataforma via CapCut ou Captions.ai
  5. Agende em várias plataformas

Pipeline de Vídeo Nativo para Agentes

A configuração mais poderosa combina ferramentas que os agentes podem controlar diretamente:

Agente escreve roteiro (a partir do contexto do produto)
    ↓
Hyperframes: Gere vídeo modelado (HTML → MP4)
    e/ou
HeyGen MCP: Gere vídeo de avatar a partir do roteiro
    e/ou
API Veo/Runway: Gere filmagens B-roll
    ↓
Agente monta o corte final
    ↓
Saída: Vídeo pronto para publicar

O que torna isso nativo para agentes:

  • Hyperframes usa HTML — qualquer agente de codificação pode gerá-lo
  • Servidor MCP HeyGen — agentes o chamam diretamente
  • APIs de modelos de vídeo — requisições HTTP padrão
  • Nenhuma etapa de edição manual necessária

Erros Comuns

  1. Começar pelas ferramentas, não pela estratégia — decida qual vídeo você precisa antes de escolher as ferramentas
  2. Texto gerado por IA no vídeo — modelos não conseguem renderizar texto legível de forma confiável; use sobreposições programáticas
  3. Avatares no vale da estranheza — se a qualidade do avatar for importante, invista no nível HeyGen Creator+
  4. Sem legendas — 85% do vídeo em redes sociais é assistido sem som
  5. Proporção de tela errada — 9:16 para redes sociais, 16:9 para YouTube/site, 1:1 para feeds
  6. Superprodução — autêntico muitas vezes supera o polido, especialmente no TikTok

Perguntas Específicas da Tarefa

  1. Que tipo de vídeo você precisa? (Demonstração, explicativo, clipe para redes sociais, anúncio, tutorial)
  2. Você precisa de um apresentador humano ou pode ser narração/texto?
  3. Isso é pontual ou um modelo repetível?
  4. Para qual plataforma é? (Isso determina a proporção de tela e a duração)
  5. Você tem ativos existentes para trabalhar? (Capturas de tela, filmagens, roteiros)
  6. Qual é seu orçamento para ferramentas de vídeo?

Integrações de Ferramentas

FerramentaTipoMCPGuia
HeyGenAvatares de IASimheygen.md
HyperframesVídeo programático-hyperframes.md
RemotionVídeo programático-remotion.dev
RunwayGeração por IA-runwayml.com/docs

Habilidades Relacionadas

  • social: Para estratégia de conteúdo de vídeo, ganchos e o que postar
  • ad-creative: Para criação e iteração de anúncios em vídeo pagos
  • copywriting: Para roteiros de vídeo e mensagens
  • marketing-psychology: Para ganchos e persuasão em vídeo

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

NVlabs/Skill2Env

This skill should be used when the user asks about "digital portfolio", "portfolio website", "project description", "case study", "portfolio curation", "creative portfolio", "act as a portfolio curator", "portfolio curator mode", "portfolio review", "professional presentation", "portfolio architecture", "work samples", "portfolio bio", or needs expertise in building, structuring, and writing professional digital portfolios. Part of the AlterLab FC Skills collection (New Media & Communication department).

NVlabs/Skill2Env

This skill should be used when the user asks about "web content strategy", "SEO writing", "UX writing", "information architecture", "content architecture", "website structure", "act as a web content strategist", "web strategist mode", "site map", "content audit", "microcopy", "meta descriptions", "content hierarchy", "content governance", or needs expertise in planning, structuring, and writing content for websites and digital platforms. Part of the AlterLab FC Skills collection (New Media & Communication department).

NVlabs/Skill2Env

Balance visual design with ATS compatibility for creative roles

NVlabs/Skill2Env

Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.

NVlabs/Skill2Env

Read-only queue dashboard for workspace-aware ship. (gstack)

NVlabs/Skill2Env

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

NVlabs/Skill2Env

Audits any landing or service page across 48 checks in 10 categories for LLM/AI discoverability, GEO readiness, content clarity, schema markup, internal linking, freshness signals, and technical crawlability. Produces an overall score out of 100, a per-category score out of 100, pass/warn/fail/ manual counts, and a prioritised fix list — all rendered as a standalone HTML report saved to disk. Use when a user provides a URL and asks to audit it, score it, check its GEO readiness, test its AI discoverability, run a landing page audit, or evaluate it for LLM citation potential. Also trigger on phrases like "audit this page", "score this URL", "check GEO for", "is this page AI-ready", "run a GEO audit", "LLM page check", "how would AI read this page", or "landing page score".

NVlabs/Skill2Env

Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forcing intake (product + elevator pitch, audience register, brand overrides, tone) locks down positioning before any copy or markup is written, so the page reflects the actual product rather than generic boilerplate. Use whenever the user says 'landing for X', 'create a landing page', 'build a landing page', 'make a landing page for X', 'I need a web page for Y', or provides product/service details and wants a polished website. Also triggers on 'promotional page', 'product page', 'one-pager', 'web presence', 'sales page'. Outputs a single self-contained HTML file (Claude Code) or HTML artifact (Claude.ai). Supports configurable brand colors via CSS custom property overrides.

NVlabs/Skill2Env

Use when a user asks to build, optimize, backtest, rebalance, or analyze a stock portfolio with Mean-CVaR, efficient frontiers, scenario generation, or NVIDIA cuOpt.

NVlabs/Skill2Env

Transform resume bullets into detailed portfolio case studies

NVlabs/Skill2Env

Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user asks to create a landing page, marketing page, homepage, single-page site, lead capture page, campaign page, promo page, or conversion-optimised web page — or when they want to A/B test landing page variants or replace a static page with one designed to convert.

NVlabs/Skill2Env

> Visual design direction framework organized by emotional intent (Warm/Cold x Active/Calm). The first design reference system that categorizes sites by what they make you FEEL, not how they look. Includes 48 annotated public website references.

NVlabs/Skill2Env

Run a structured 5-pass finishing audit on any website before launch — scoring visual polish, technical foundation, UX completeness, content quality, and cross-device readiness on 100 points. Use when: **Pre-launch** - Final validation before going live; **Post-redesign** - Verify nothing broke during the overhaul; **Client handoff** - Structured proof that the site is ready; **Quarterly review** - Catch accumulated debt; **Single-pass focus** - Run just Pass 2 after a perf sprint

Habilidades Relacionadas