IZRINO/delta-auto-tools

Videos Tutoriales de Stitch a Remotion

Eres un especialista en producción de video enfocado en crear videos tutoriales atractivos a partir de diseños de aplicaciones. Combinas las capacidades de recuperación de pantallas de Stitch con la generación de video programática de Remotion para producir presentaciones fluidas y profesionales.

Resumen

Esta habilidad te permite crear videos tutoriales que muestran pantallas de aplicaciones con transiciones profesionales, efectos de zoom y superposiciones de texto contextuales. El flujo de trabajo recupera pantallas de proyectos de Stitch y las orquesta en una composición de video de Remotion.

Prerrequisitos

Requeridos:

• Acceso al Servidor MCP de Stitch
• Acceso al Servidor MCP de Remotion (o CLI de Remotion)
• Node.js y npm instalados
• Un proyecto de Stitch con pantallas diseñadas

Recomendados:

• Familiaridad con las capacidades de video de Remotion
• Comprensión de componentes de React (Remotion usa React)

Recuperación y Red

Paso 1: Descubrir Servidores MCP Disponibles

Ejecuta list_tools para identificar los servidores MCP disponibles y sus prefijos:

• Stitch MCP: Busca el prefijo stitch: o mcp_stitch:
• Remotion MCP: Busca el prefijo remotion: o mcp_remotion:

Paso 2: Recuperar Información del Proyecto de Stitch

1. Búsqueda del proyecto (si no se proporciona el ID del proyecto):

   • Llama a [stitch_prefix]:list_projects con filter: "view=owned"
   • Identifica el proyecto objetivo por título (ej.: "Calculator App")
   • Extrae el ID del proyecto del campo name (ej.: projects/13534454087919359824)

2. Recuperación de pantallas:

   • Llama a [stitch_prefix]:list_screens con el ID del proyecto (solo numérico)
   • Revisa los títulos de las pantallas para identificar todas las del tutorial
   • Extrae los IDs de pantalla del campo name de cada pantalla

3. Obtención de metadatos de pantalla: Para cada pantalla:

   • Llama a [stitch_prefix]:get_screen con projectId y screenId
   • Recupera:
     • screenshot.downloadUrl — Activo visual para el video
     • htmlCode.downloadUrl — Opcional: para extraer texto/contenido
     • width, height — Dimensiones de la pantalla para escalado adecuado
     • Título y descripción de la pantalla para superposiciones de texto

4. Descarga de activos:

   • Usa web_fetch o Bash con curl para descargar capturas de pantalla
   • Guarda en un directorio de preparación: assets/screens/{screen-name}.png
   • Organiza los activos en el orden del flujo del tutorial

Paso 3: Configurar el Proyecto de Remotion

1. Verificar si existe un proyecto de Remotion:

   • Busca remotion.config.ts o package.json con dependencias de Remotion
   • Si existe, usa la estructura del proyecto existente

2. Crear un nuevo proyecto de Remotion (si es necesario):

   npm create video@latest -- --blank
   

   • Elige la plantilla TypeScript
   • Configura en un directorio dedicado video/

3. Instalar dependencias:

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

Estrategia de Composición de Video

Arquitectura

Crea una composición de Remotion modular con estos componentes:

1. ScreenSlide.tsx — Componente de visualización de pantalla individual

   • Props: imageSrc, title, description, width, height
   • Características: Animación de zoom, transiciones de fundido
   • Duración: Configurable (por defecto 3-5 segundos por pantalla)

2. WalkthroughComposition.tsx — Composición principal del video

   • Secuencia múltiples componentes ScreenSlide
   • Maneja transiciones entre pantallas
   • Añade superposiciones de texto y anotaciones

3. config.ts — Configuración del video

   • Fotogramas por segundo (por defecto: 30 fps)
   • Dimensiones del video (coincidir con dimensiones de Stitch o escalar adecuadamente)
   • Cálculo de la duración total

Efectos de Transición

Usa @remotion/transitions de Remotion para efectos profesionales:

• Fundido: Fundido cruzado suave entre pantallas

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

• Deslizamiento: Transiciones direccionales de deslizamiento

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

• Zoom: Efectos de zoom para énfasis

  • Usa la animación spring() para un zoom suave
  • Aplica a elementos de UI importantes

Superposiciones de Texto

Añade información contextual usando la representación de texto de Remotion:

1. Títulos de pantalla: Se muestran en la parte superior o inferior de cada fotograma
2. Llamadas de características: Resalta elementos específicos de la UI con indicadores animados
3. Descripciones: Aparece texto descriptivo para cada pantalla
4. Indicador de progreso: Muestra la posición actual de la pantalla en el tutorial

Pasos de Ejecución

Paso 1: Recopilar Activos de Pantalla

1. Identificar el proyecto de Stitch objetivo
2. Listar todas las pantallas del proyecto
3. Descargar capturas de pantalla para cada pantalla
4. Organizar en orden del flujo del tutorial
5. Crear un archivo de manifiesto (screens.json):

{
  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Pantalla de Inicio",
      "description": "Interfaz principal de la calculadora con teclado numérico",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "Vista de Historial",
      "description": "Vista de cálculos anteriores",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Paso 2: Generar Componentes de Remotion

Crea los componentes de video siguiendo las mejores prácticas de Remotion:

1. Crear ScreenSlide.tsx:

   • Usa useCurrentFrame() y spring() para animaciones
   • Implementa efectos de zoom y fundido
   • Añade superposiciones de texto con temporización adecuada

2. Crear WalkthroughComposition.tsx:

   • Importa el manifiesto de pantallas
   • Secuencia las pantallas con componentes <Sequence>
   • Aplica transiciones entre pantallas
   • Calcula la temporización y los desplazamientos adecuados

3. Actualizar remotion.config.ts:

   • Establece el ID de composición
   • Configura las dimensiones del video
   • Establece los fotogramas por segundo y la duración

Recursos de referencia:

• Usa resources/screen-slide-template.tsx como punto de partida
• Sigue resources/composition-checklist.md para completitud
• Revisa ejemplos en el directorio examples/

Paso 3: Vista Previa y Refinamiento

1. Iniciar Remotion Studio:

   npm run dev
   

   • Abre una vista previa basada en navegador
   • Permite edición y refinamiento en tiempo real

2. Ajustar temporización:

   • Asegura que cada pantalla tenga la duración de visualización adecuada
   • Verifica que las transiciones sean suaves
   • Revisa la temporización de las superposiciones de texto

3. Afinar animaciones:

   • Ajusta configuraciones de spring para efectos de zoom
   • Modifica funciones de easing para transiciones
   • Asegura que el texto sea legible en todo momento

Paso 4: Renderizar Video

1. Renderizar usando CLI de Remotion:

   npx remotion render WalkthroughComposition output.mp4
   

2. Alternativa: Usar MCP de Remotion (si está disponible):

   • Llama a [remotion_prefix]:render con los detalles de composición
   • Especifica el formato de salida (MP4, WebM, etc.)

3. Opciones de optimización:

   • Establecer nivel de calidad (--quality)
   • Configurar códec (--codec h264 o h265)
   • Habilitar renderizado paralelo (--concurrency)

Características Avanzadas

Puntos Calientes Interactivos

Resalta elementos cliqueables o características importantes:

import {interpolate, useCurrentFrame} from 'remotion';

const PuntoCaliente = ({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>
  );
};

Integración de Locuciones

Añade narración al tutorial:

1. Genera un guion de locución a partir de las descripciones de pantalla
2. Usa texto a voz o graba audio
3. Importa audio en Remotion con el componente <Audio>
4. Sincroniza la temporización de las pantallas con el ritmo de la locución

Extracción Dinámica de Texto

Extrae texto del código HTML de Stitch para anotaciones automáticas:

1. Descarga htmlCode.downloadUrl para cada pantalla
2. Analiza el HTML para extraer elementos de texto clave (encabezados, botones, etiquetas)
3. Genera llamadas automáticas para elementos de UI importantes
4. Añade a la composición como superposiciones de texto temporizadas

Estructura de Archivos

project/
├── video/                      # Directorio del proyecto de Remotion
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Capturas de pantalla descargadas de Stitch
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Manifiesto de pantallas
└── output.mp4                  # Video renderizado

Integración con Habilidades de Remotion

Remotion mantiene sus propias Habilidades de Agente que definen mejores prácticas. Revisa estas para técnicas avanzadas:

• Repositorio: https://github.com/remotion-dev/remotion/tree/main/packages/skills
• Instalación: npx skills add remotion-dev/skills

Habilidades clave de Remotion a aprovechar:

• Temporización y easing de animación
• Patrones de arquitectura de composición
• Optimización de rendimiento
• Sincronización de audio

Patrones Comunes

Patrón 1: Presentación Simple

Tutorial básico con transiciones de fundido:

• 3-5 segundos por pantalla
• Transiciones de fundido cruzado
• Superposición de texto en la parte inferior con título de pantalla
• Barra de progreso en la parte superior

Patrón 2: Destacar Características

Enfoque en elementos de UI específicos:

• Zoom en regiones específicas
• Círculos/flechas animadas apuntando a características
• Énfasis en cámara lenta en interacciones clave
• Comparaciones lado a lado de antes/después

Patrón 3: Flujo de Usuario

Muestra el recorrido del usuario paso a paso:

• Flujo de pantallas secuencial con deslizamientos direccionales
• Superposición de pasos numerados
• Destaca acciones del usuario (clics, toques)
• Conecta pantallas con caminos animados

Solución de Problemas

Problema	Solución
Capturas borrosas	Asegura que las imágenes descargadas estén a resolución completa; verifica la configuración de calidad de screenshot.downloadUrl
Texto desalineado	Verifica que las dimensiones de la pantalla coincidan con el tamaño de la composición; ajusta la posición del texto según el tamaño real de la pantalla
Animaciones entrecortadas	Aumenta los fotogramas por segundo a 60 fps; usa configuraciones de spring adecuadas con damping apropiado
Error de compilación de Remotion	Verifica la compatibilidad de la versión de Node; asegura que todas las dependencias estén instaladas; revisa la documentación de Remotion
Temporización incorrecta	Ajusta la duración por pantalla en el manifiesto; previsualiza en Remotion Studio; prueba con usuarios reales

Mejores Prácticas

1. Mantén la relación de aspecto: Usa las dimensiones reales de las pantallas de Stitch o escala proporcionalmente
2. Temporización consistente: Mantén la duración de visualización de pantalla consistente a menos que se quiera enfatizar una en particular
3. Texto legible: Asegura suficiente contraste; usa tamaños de fuente apropiados; evita superposiciones abarrotadas
4. Transiciones suaves: Usa animaciones spring para movimiento natural; evita cortes bruscos
5. Previsualiza a fondo: Siempre previsualiza en Remotion Studio antes del renderizado final
6. Optimiza activos: Comprime imágenes adecuadamente; usa formatos eficientes (PNG para UI, JPG para fotos)

Ejemplo de Uso

Solicitud del usuario:

Busca las pantallas de mi proyecto de Stitch "Calculator App" y crea un video de Remotion
que muestre un tutorial de las pantallas.

Flujo del agente:

1. Listar proyectos de Stitch → Encontrar "Calculator App" → Extraer ID del proyecto
2. Listar pantallas en el proyecto → Identificar todas las pantallas (Inicio, Historial, Configuración)
3. Descargar capturas de pantalla para cada pantalla → Guardar en assets/screens/
4. Crear manifiesto screens.json con metadatos de pantalla
5. Generar componentes de Remotion (ScreenSlide.tsx, WalkthroughComposition.tsx)
6. Previsualizar en Remotion Studio → Refinar temporización y transiciones
7. Renderizar video final → calculator-walkthrough.mp4
8. Reportar finalización con enlace de vista previa del video

Consejos para el Éxito

• Empieza simple: Comienza con transiciones básicas de fundido antes de añadir animaciones complejas
• Sigue los patrones de Remotion: Aprovecha las habilidades y documentación oficiales de Remotion
• Usa archivos de manifiesto: Mantén los datos de pantalla organizados en JSON para actualizaciones fáciles
• Previsualiza con frecuencia: Usa Remotion Studio para detectar problemas temprano
• Considera la accesibilidad: Añade subtítulos; asegura que el texto sea legible; usa imágenes claras
• Optimiza para la plataforma: Ajusta las dimensiones del video a la plataforma objetivo (YouTube, redes sociales, etc.)

Referencias

• Documentación de Stitch: https://stitch.withgoogle.com/docs/
• Documentación de Remotion: https://www.remotion.dev/docs/
• Habilidades de Remotion: https://www.remotion.dev/docs/ai/skills
• MCP de Remotion: https://www.remotion.dev/docs/ai/mcp
• Transiciones de Remotion: https://www.remotion.dev/docs/transitions