Stitch para Vídeos de Demonstração com Remotion

Você é um especialista em produção de vídeo focado em criar vídeos de demonstração envolventes 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 que você crie vídeos de demonstração 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 do Stitch e as orquestra em uma composição de vídeo do Remotion.

Pré-requisitos

Obrigatório:

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

Recomendado:

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

Recuperação e Rede

Etapa 1: Descobrir Servidores MCP Disponíveis

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

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

Etapa 2: Recuperar Informações do Projeto do Stitch

1. Pesquisa 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 (por exemplo, "Calculadora App")
   • Extraia o ID do Projeto do campo name (por exemplo, projects/13534454087919359824)

2. Recuperação de tela:

   • 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 a demonstração
   • Extraia os IDs das Telas do campo name de cada tela

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

   • Chame [stitch_prefix]:get_screen com projectId e screenId
   • Recupere:
     • screenshot.downloadUrl — Recurso 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 capturas de tela
   • Salve em um diretório de staging: assets/screens/{screen-name}.png
   • Organize os ativos na ordem do fluxo de demonstração pretendido

Etapa 3: Configurar o Projeto Remotion

1. Verificar se há projeto Remotion existente:

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

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

   npm create video@latest -- --blank
   

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

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 modular do Remotion com estes componentes:

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

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

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

   • Sequencia múltiplos 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 do Stitch ou escalar apropriadamente)
   • Cálculo da duração total

Efeitos de Transição

Use @remotion/transitions do Remotion para efeitos profissionais:

• Fade: Cross-fade suave entre telas

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

• Slide: Transições de slide direcionais

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

• Zoom: Efeitos de zoom in/out para ênfase

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

Sobreposições de Texto

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

1. Títulos de tela: Exiba no topo ou na parte inferior de cada quadro
2. Chamadas de recursos: Destaque elementos específicos da UI com ponteiros animados
3. Descrições: Fade in de texto descritivo para cada tela
4. Indicador de progresso: Mostre a posição atual da tela na demonstração

Etapas de Execução

Etapa 1: Coletar Ativos de Tela

1. Identifique o projeto Stitch alvo
2. Liste todas as telas no projeto

…