bayvibe/promo-video-skill

Habilidade de Vídeo Promocional (Remotion)

Gere um vídeo promocional a partir de uma URL de site ou informações de marca fornecidas pelo usuário.

Dois Caminhos

Caminho A: Usuário forneceu uma URL de site

Quando o usuário lhe der uma URL:

1. Execute python generate_promo.py --source <url> para gerar src/data/brand.json e src/data/script.json
2. Mostre imediatamente o roteiro gerado ao usuário — apresente um resumo limpo:

   Nome da Marca: xxx
   Tagline: xxx
   Cor Principal: #xxx
   Planejamento das Cenas:
     1. Introdução (3s) — Logo da Marca + Nome + tagline
     2. Funcionalidade (5s) — Funcionalidade 1 / Funcionalidade 2 / Funcionalidade 3
     3. Dashboard (4s) — Exibição da interface do produto
     4. CTA (3s) — "xxx" + Botão
   

3. Pergunte: "Confirma este roteiro ou precisa de ajustes?"
4. Após confirmação, execute npm run dev e informe ao usuário para visualizar em http://localhost:3000

Caminho B: Usuário não forneceu nada

Quando o usuário apenas disser "gerar um vídeo" / "fazer um vídeo promocional" sem especificações, NÃO comece a codificar. Em vez disso, faça as seguintes perguntas (uma mensagem, todas de uma vez):

1. Qual é o nome da marca? (Ou o nome do produto/projeto que você quer promover)
2. Descreva seu produto em uma frase (usado como tagline)
3. Tem cor(es) da marca? (Se não tiver, eu escolho para você)
4. Quais pontos fortes você quer destacar? (No máximo 3)
5. Tem uma URL do site? (Se tiver, posso extrair informações automaticamente)

Assim que o usuário responder, escreva diretamente src/data/brand.json e src/data/script.json com base nas respostas. Em seguida, mostre o resumo do roteiro e confirme (mesmo que o Caminho A etapas 2-3).

Após Confirmação

1. Execute npm run dev para iniciar o Remotion Studio
2. Informe ao usuário para visualizar em http://localhost:3000
3. Para exportar: npx remotion render PromoVideo out/promo.mp4

Diretrizes de Design

Princípios Visuais

• Preencha a tela, reduza espaços em branco — As cenas intermediárias (Funcionalidade / Dashboard) usam flex: 1 ou layout de largura total para preencher a tela 1920×1080, evitando grandes áreas vazias
• Evite layouts repetitivos e modelares — Não use repetidamente o esqueleto "título grande à esquerda + cartão/mockup à direita + legenda inferior" no mesmo vídeo. Cada vídeo deve usar pelo menos 3 composições visivelmente diferentes: por exemplo, título em tela cheia, ticker diagonal, eixo central, cartões em colagem, colunas estilo revista, interface de produto em tela cheia, overlay de código, composição de linha do tempo/caminho.
• Os raios dos cantos dos cartões devem ser consistentes no mesmo vídeo — Defina um token CARD_RADIUS para cada vídeo, e todos os cartões, painéis, containers de mockup e blocos de funcionalidade usam o mesmo valor. Não misture ângulos retos, 12px e 34px no mesmo vídeo. Legendas, logotipos, botões pequenos e barras de progresso podem ter seus próprios raios funcionais, mas os cartões de conteúdo devem ser uniformes.
• Cartões não são a resposta padrão — As cenas de funcionalidade podem ser expressas com colagem deslocada, sobreposição vertical, ticker, diagrama de nós, painéis de editor, recortes de tela do produto etc; não use três cartões iguais lado a lado por padrão.
• A página final deve usar uma forma de encerramento diferente — A cena de CTA/Encerramento não deve reutilizar o layout padrão de título à esquerda e cartão à direita, ou título à esquerda e botão à direita. Priorize lockup centralizado, layout tipo pôster, blocos de informação ao redor, close tipográfico em tela cheia ou a marca/URL como centro visual, criando um último momento claro. Em composição centralizada, o botão CTA e a URL devem ser empilhados verticalmente, mantendo o eixo central estável.
• A cor principal é extraída do botão CTA do site — A cor da marca deve ser extraída do estilo inline do elemento button/a (gradiente), não de uma cor CSS aleatória.
• Legendas globais — Cada cena tem uma barra de legenda centralizada na parte inferior (fundo semitransparente em forma de pílula), tamanho de fonte 32px, padding 18px 48px, animação de entrada com mola. As legendas são controladas pelo campo subtitle de cada cena no script.json; se não estiver definido, não é exibido.
• Suporta apenas entrada de URL — O modo SVG foi removido; aceita apenas URL de site como fonte de dados.

Regras de Extração

• O nome da marca tem prioridade og:site_name, em seguida a tag title (pegue o primeiro segmento antes de - ou |)
• A tagline tem prioridade og:description, truncada em 80 caracteres.
• A cor da marca tem prioridade da cor gradiente do estilo inline do elemento button/CTA.
• Filtre títulos de funcionalidade com comprimento < 45 caracteres; pule frases muito longas.
• Detecte o tema claro/escuro do site e corresponda automaticamente as cores de fundo e texto.

Lista de Verificação de Validação de Dados

Após gerar os dados, verifique os seguintes problemas antes de confirmar com o usuário:

• O nome da marca é curto e limpo (não é o título HTML completo)
• A tagline tem < 80 caracteres
• A cor principal veio do botão CTA (não é uma cor aleatória)
• As funcionalidades são exatamente 3, com títulos curtos e impactantes
• O texto das cenas é legível na tela 1920×1080

Lista de Autoverificação Visual (Obrigatória)

Após implementar ou modificar um vídeo, você deve fazer uma revisão visual você mesmo, não apenas executar o lint:

1. Execute npm run lint
2. Use npx remotion compositions src/index.ts para confirmar que a composição existe e a duração está correta
3. Exporte pelo menos 1 still de cada cena principal e verifique o layout. Por exemplo:

   npx remotion still src/index.ts <CompositionId> /tmp/<id>-cena1.png --frame=30
   npx remotion still src/index.ts <CompositionId> /tmp/<id>-cena2.png --frame=120
   npx remotion still src/index.ts <CompositionId> /tmp/<id>-cena3.png --frame=210
   

4. Abra as imagens dos quadros-chave e verifique os seguintes problemas; se algum for encontrado, corrija antes de entregar:
   • Nenhum texto, botão ou legenda importante está cortado ou fora da tela
   • Decorações/layouts de movimento que sangram (como ticker, gráficos de fundo, títulos grandes cortados) devem parecer uma escolha de design, não um erro; podem ultrapassar a tela
   • Os controles dentro dos cartões não ultrapassam os limites do cartão, incluindo trilhas de barras de progresso, barras de gráfico, campos de entrada, botões, barras de status; esse tipo de estouro não intencional deve ser corrigido
   • Nenhum elemento está obstruindo outro a ponto de impossibilitar a leitura
   • As legendas estão centralizadas e não cobrem o CTA principal ou a imagem central
   • Todos os cartões/painéis/containers de mockup no mesmo vídeo usam o mesmo CARD_RADIUS
   • Pelo menos 3 layouts diferentes, não repetindo a mesma estrutura de divisão esquerda-direita no vídeo inteiro
   • As bordas da tela têm zona de segurança: o texto-chave está a pelo menos 64px das bordas
   • Palavras longas, manchetes longas e texto de botão não transbordam do container
5. Se o usuário quiser apenas visualizar no Studio, não exporte repetidamente o mp4; garanta que http://localhost:3000 possa ser aberto.

Estrutura de Arquivos

src/
├── Root.tsx              # Registro de composição do Remotion
├── PromoVideo.tsx        # Orquestrador principal do vídeo
├── scenes/
│   ├── Scene01_Intro.tsx     # Logo + Nome da marca + tagline
│   ├── Scene02_Feature.tsx   # Três cartões iguais lado a lado com animação
│   ├── Scene03_Dashboard.tsx # Simulação de interface de produto em tela cheia
│   └── Scene04_CTA.tsx       # Chamada para ação + botão
└── data/
    ├── script.json       # Roteiro do vídeo (texto, temporização)
    └── brand.json        # Dados da marca (cores, fonte, Logo)

Formato dos Dados

brand.json

{
  "name": "Nome da Marca",
  "tagline": "Descrição em uma linha",
  "colors": {
    "primary": "#3E4E33",
    "secondary": "#687058",
    "background": "#FFFFFF",
    "surface": "#F8FAFC",
    "text": "#0F172A",
    "textSecondary": "#64748B",
    "accent": "#3E4E33"
  },
  "font": "Inter, sans-serif",
  "logoUrl": "",
  "features": [
    { "title": "Funcionalidade 1", "description": "Descrição curta" },
    { "title": "Funcionalidade 2", "description": "Descrição curta" },
    { "title": "Funcionalidade 3", "description": "Descrição curta" }
  ],
  "cta": {
    "headline": "Pronto para começar?",
    "buttonText": "Comece Grátis",
    "url": "https://exemplo.com"
  }
}

script.json

{
  "fps": 30,
  "width": 1920,
  "height": 1080,
  "scenes": [
    { "id": "intro", "duration": 90, "headline": "", "subtext": "", "subtitle": "" },
    { "id": "feature", "duration": 150, "headline": "", "subtitle": "", "items": [] },
    { "id": "dashboard", "duration": 120, "headline": "", "subtitle": "" },
    { "id": "cta", "duration": 90, "headline": "", "buttonText": "", "subtitle": "" }
  ]
}

Personalização

• Edite src/data/brand.json para alterar cores, fontes, logotipo, nome da marca
• Edite src/data/script.json para alterar o texto e a temporização das cenas
• Edite os componentes de cena em src/scenes/ para alterações de layout/animação