IZRINO/delta-auto-tools

Vídeos de Walkthrough do Stitch para Remotion

Você é um especialista em produção de vídeo com foco em criar vídeos tutoriais atraentes a partir de designs de aplicativos. Você combina as capacidades de recuperação de tela do Stitch com a geração programática de vídeo do Remotion para produzir apresentações suaves e profissionais.

Visão Geral

Esta habilidade permite criar vídeos tutoriais que exibem telas de aplicativos com transições profissionais, efeitos de zoom e sobreposições de texto contextuais. O fluxo de trabalho recupera telas de projetos Stitch e as orquestra em uma composição de vídeo Remotion.

Pré-requisitos

Obrigatórios:

• Acesso ao Servidor MCP do Stitch
• Acesso ao Servidor MCP do Remotion (ou CLI do Remotion)
• Node.js e npm instalados
• Um projeto Stitch com telas projetadas

Recomendados:

• Familiaridade com as capacidades de vídeo do Remotion
• Compreensão de componentes React (Remotion usa React)

Recuperação e Rede

Passo 1: Descobrir Servidores MCP Disponíveis

Execute list_tools para identificar os servidores MCP disponíveis e seus prefixos:

• Stitch MCP: Procure pelo prefixo stitch: ou mcp_stitch:
• Remotion MCP: Procure pelo prefixo remotion: ou mcp_remotion:

Passo 2: Recuperar Informações do Projeto Stitch

1. Busca de projeto (se o ID do projeto não for fornecido):

   • Chame [stitch_prefix]:list_projects com filter: "view=owned"
   • Identifique o projeto alvo pelo título (ex.: "Calculator App")
   • Extraia o ID do projeto do campo name (ex.: projects/13534454087919359824)

2. Recuperação de telas:

   • Chame [stitch_prefix]:list_screens com o ID do projeto (apenas numérico)
   • Revise os títulos das telas para identificar todas as telas para o tutorial
   • Extraia os IDs das telas do campo name de cada tela

3. Busca de metadados das telas: Para cada tela:

   • Chame [stitch_prefix]:get_screen com projectId e screenId
   • Recupere:
     • screenshot.downloadUrl — Ativo visual para o vídeo
     • htmlCode.downloadUrl — Opcional: para extrair texto/conteúdo
     • width, height — Dimensões da tela para dimensionamento adequado
     • Título e descrição da tela para sobreposições de texto

4. Download de ativos:

   • Use web_fetch ou Bash com curl para baixar screenshots
   • Salve em um diretório de preparação: assets/screens/{screen-name}.png
   • Organize os ativos na ordem do fluxo de tutorial pretendido

Passo 3: Configurar o Projeto Remotion

1. Verificar se há um projeto Remotion existente:

   • Procure por remotion.config.ts ou package.json com dependências do Remotion
   • Se existir, use a estrutura do projeto existente

2. Criar novo projeto Remotion (se necessário):

   npm create video@latest -- --blank
   

   • Escolha o template TypeScript
   • Configure em um diretório dedicado video/

3. Instalar dependências:

   cd video
   npm install @remotion/transitions @remotion/animated-emoji
   

Estratégia de Composição de Vídeo

Arquitetura

Crie uma composição Remotion modular com estes componentes:

1. ScreenSlide.tsx — Componente de exibição de tela individual

   • Propriedades: imageSrc, title, description, width, height
   • Funcionalidades: Animação de zoom, transições de fade
   • Duração: Configurável (padrão 3-5 segundos por tela)

2. WalkthroughComposition.tsx — Composição principal do vídeo

   • Sequencia vários componentes ScreenSlide
   • Lida com transições entre telas
   • Adiciona sobreposições de texto e anotações

3. config.ts — Configuração do vídeo

   • Taxa de quadros (padrão: 30 fps)
   • Dimensões do vídeo (corresponder às dimensões da tela Stitch ou redimensionar adequadamente)
   • Cálculo da duração total

Efeitos de Transição

Use @remotion/transitions do Remotion para efeitos profissionais:

• Fade: Transição suave entre telas

  import {fade} from '@remotion/transitions/fade';
  

• Slide: Transições de deslizamento direcionais

  import {slide} from '@remotion/transitions/slide';
  

• Zoom: Efeitos de zoom para ênfase

  • Use spring() para animação suave de zoom
  • Aplique a elementos importantes da interface

Sobreposições de Texto

Adicione informações contextuais usando a renderização de texto do Remotion:

1. Títulos das telas: Exibidos na parte superior ou inferior de cada quadro
2. Destaques de funcionalidades: Destaque elementos específicos da interface com indicadores animados
3. Descrições: Texto descritivo que aparece gradualmente para cada tela
4. Indicador de progresso: Mostra a posição atual da tela no tutorial

Etapas de Execução

Passo 1: Coletar Ativos das Telas

1. Identifique o projeto Stitch alvo
2. Liste todas as telas do projeto
3. Baixe screenshots de cada tela
4. Organize na ordem do fluxo do tutorial
5. Crie um arquivo de manifesto (screens.json):

{
  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Tela Inicial",
      "description": "Interface principal da calculadora com teclado numérico",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "Visualização de Histórico",
      "description": "Visualização dos cálculos anteriores",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Passo 2: Gerar Componentes Remotion

Crie os componentes de vídeo seguindo as melhores práticas do Remotion:

1. Crie ScreenSlide.tsx:

   • Use useCurrentFrame() e spring() para animações
   • Implemente efeitos de zoom e fade
   • Adicione sobreposições de texto com temporização adequada

2. Crie WalkthroughComposition.tsx:

   • Importe o manifesto de telas
   • Sequencie telas com componentes <Sequence>
   • Aplique transições entre telas
   • Calcule temporização e deslocamentos adequados

3. Atualize remotion.config.ts:

   • Defina o ID da composição
   • Configure as dimensões do vídeo
   • Defina a taxa de quadros e a duração

Recursos de Referência:

• Use resources/screen-slide-template.tsx como ponto de partida
• Siga resources/composition-checklist.md para completude
• Revise exemplos no diretório examples/

Passo 3: Visualizar e Refinar

1. Inicie o Remotion Studio:

   npm run dev
   

   • Abre uma prévia no navegador
   • Permite edição e refinamento em tempo real

2. Ajuste a temporização:

   • Garanta que cada tela tenha duração de exibição adequada
   • Verifique se as transições são suaves
   • Verifique a temporização das sobreposições de texto

3. Ajuste as animações:

   • Modifique as configurações de spring para efeitos de zoom
   • Altere as funções de easing para transições
   • Garanta que o texto seja legível o tempo todo

Passo 4: Renderizar o Vídeo

1. Renderize usando a CLI do Remotion:

   npx remotion render WalkthroughComposition output.mp4
   

2. Alternativa: Use o MCP do Remotion (se disponível):

   • Chame [remotion_prefix]:render com os detalhes da composição
   • Especifique o formato de saída (MP4, WebM, etc.)

3. Opções de otimização:

   • Defina o nível de qualidade (--quality)
   • Configure o codec (--codec h264 ou h265)
   • Ative a renderização paralela (--concurrency)

Funcionalidades Avançadas

Hotspots Interativos

Destaque elementos clicáveis ou funcionalidades importantes:

import {interpolate, useCurrentFrame} from 'remotion';

const Hotspot = ({x, y, label}) => {
  const frame = useCurrentFrame();
  const scale = spring({
    frame,
    fps: 30,
    config: {damping: 10, stiffness: 100}
  });
  
  return (
    <div style={{
      position: 'absolute',
      left: x,
      top: y,
      transform: `scale(${scale})`
    }}>
      <div className="pulse-ring" />
      <span>{label}</span>
    </div>
  );
};

Integração de Narração

Adicione narração ao tutorial:

1. Gere um roteiro de narração a partir das descrições das telas
2. Use texto-para-fala ou grave áudio
3. Importe o áudio no Remotion com o componente <Audio>
4. Sincronize a temporização das telas com o ritmo da narração

Extração Dinâmica de Texto

Extraia texto do código HTML do Stitch para anotações automáticas:

1. Baixe htmlCode.downloadUrl de cada tela
2. Analise o HTML para extrair elementos de texto chave (cabeçalhos, botões, rótulos)
3. Gere destaques automáticos para elementos importantes da interface
4. Adicione à composição como sobreposições de texto temporizadas

Estrutura de Arquivos

project/
├── video/                      # Diretório do projeto Remotion
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Screenshots baixadas do Stitch
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Manifesto de telas
└── output.mp4                  # Vídeo renderizado

Integração com Skills do Remotion

O Remotion mantém suas próprias Skills de Agente que definem melhores práticas. Consulte-as para técnicas avançadas:

• Repositório: https://github.com/remotion-dev/remotion/tree/main/packages/skills
• Instalação: npx skills add remotion-dev/skills

Skills chave do Remotion para aproveitar:

• Temporização de animação e easing
• Padrões de arquitetura de composição
• Otimização de desempenho
• Sincronização de áudio

Padrões Comuns

Padrão 1: Apresentação de Slides Simples

Tutorial básico com transições de fade:

• 3-5 segundos por tela
• Transições cross-fade
• Sobreposição de texto inferior com título da tela
• Barra de progresso no topo

Padrão 2: Destaque de Funcionalidade

Foco em elementos específicos da interface:

• Zoom em regiões específicas
• Círculos/setas animadas apontando para funcionalidades
• Ênfase em câmera lenta em interações chave
• Comparações lado a lado antes/depois

Padrão 3: Fluxo de Usuário

Mostre a jornada do usuário passo a passo:

• Fluxo sequencial de telas com slides direcionais
• Sobreposição de etapas numeradas
• Destaque de ações do usuário (cliques, toques)
• Conecte telas com caminhos animados

Solução de Problemas

Problema	Solução
Screenshots borradas	Certifique-se de que as imagens baixadas estão em resolução total; verifique as configurações de qualidade de screenshot.downloadUrl
Texto desalinhado	Verifique se as dimensões da tela correspondem ao tamanho da composição; ajuste o posicionamento do texto com base no tamanho real da tela
Animações travadas	Aumente a taxa de quadros para 60fps; use configurações spring adequadas com damping apropriado
Falha na compilação do Remotion	Verifique a compatibilidade da versão Node; certifique-se de que todas as dependências estão instaladas; revise a documentação do Remotion
Temporização estranha	Ajuste a duração por tela no manifesto; visualize no Remotion Studio; teste com usuários reais

Melhores Práticas

1. Mantenha a proporção: Use as dimensões reais da tela do Stitch ou redimensione proporcionalmente
2. Temporização consistente: Mantenha a duração de exibição das telas consistente, a menos que queira enfatizar telas específicas
3. Texto legível: Garanta contraste suficiente; use tamanhos de fonte adequados; evite sobreposições poluídas
4. Transições suaves: Use animações spring para movimentos naturais; evite cortes bruscos
5. Visualize completamente: Sempre visualize no Remotion Studio antes da renderização final
6. Otimize ativos: Comprima imagens adequadamente; use formatos eficientes (PNG para UI, JPG para fotos)

Exemplo de Uso

Prompt do usuário:

Consulte as telas do meu projeto Stitch "Calculator App" e crie um vídeo Remotion
que mostre um tutorial das telas.

Fluxo de trabalho do agente:

1. Liste projetos Stitch → Encontre "Calculator App" → Extraia o ID do projeto
2. Liste telas no projeto → Identifique todas as telas (Início, Histórico, Configurações)
3. Baixe screenshots de cada tela → Salve em assets/screens/
4. Crie o manifesto screens.json com metadados das telas
5. Gere componentes Remotion (ScreenSlide.tsx, WalkthroughComposition.tsx)
6. Visualize no Remotion Studio → Refine temporização e transições
7. Renderize o vídeo final → calculator-walkthrough.mp4
8. Relate a conclusão com um link de prévia do vídeo

Dicas para o Sucesso

• Comece simples: Inicie com transições básicas de fade antes de adicionar animações complexas
• Siga os padrões do Remotion: Aproveite as skills e documentação oficiais do Remotion
• Use arquivos de manifesto: Mantenha os dados das telas organizados em JSON para facilitar atualizações
• Visualize com frequência: Use o Remotion Studio para detectar problemas cedo
• Considere acessibilidade: Adicione legendas; garanta que o texto seja legível; use visuais claros
• Otimize para a plataforma: Corresponda as dimensões do vídeo à plataforma alvo (YouTube, redes sociais, etc.)

Referências

• Documentação do Stitch: https://stitch.withgoogle.com/docs/
• Documentação do Remotion: https://www.remotion.dev/docs/
• Skills do Remotion: https://www.remotion.dev/docs/ai/skills
• MCP do Remotion: https://www.remotion.dev/docs/ai/mcp
• Transições do Remotion: https://www.remotion.dev/docs/transitions