anubhavg-icpl/vibe

Videos de Tutoriales desde Stitch a Remotion

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

Descripción General

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

Requisitos Previos

Requeridos:

• Acceso al Stitch MCP Server
• Acceso al Remotion MCP Server (o Remotion CLI)
• 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 Conexión de 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 Stitch

1. Búsqueda de 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 pantallas 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/{nombre-pantalla}.png
   • Organiza los activos en el orden del flujo del tutorial

Paso 3: Configurar el Proyecto Remotion

1. Verificar si existe un proyecto Remotion:

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

2. Crear nuevo proyecto 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 modular de Remotion 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-in, transiciones de fundido
   • Duración: Configurable (por defecto 3-5 segundos por pantalla)

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

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

3. config.ts — Configuración de video

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

Efectos de Transición

Usa @remotion/transitions de Remotion para efectos profesionales:

• Fundido: Transición suave de fundido cruzado entre pantallas

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

• Deslizamiento: Transiciones direccionales de deslizamiento

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

• Zoom: Efectos de zoom in/out para énfasis

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

Superposiciones de Texto

Añade información contextual usando el renderizado de texto de Remotion:

1. Títulos de pantalla: Muestra en la parte superior o inferior de cada fotograma
2. Llamadas a características: Resalta elementos UI específicos con punteros animados
3. Descripciones: Desvanece 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: Reunir Activos de Pantalla

1. Identificar el proyecto Stitch objetivo
2. Listar todas las pantallas en el 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/inicio.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "Vista de Historial",
      "description": "Vista de cálculos anteriores",
      "imagePath": "assets/screens/historial.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 la sincronización adecuada

2. Crear WalkthroughComposition.tsx:

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

3. Actualizar remotion.config.ts:

   • Configura el ID de composición
   • Configura las dimensiones de 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/walkthrough/

Paso 3: Previsualizar y Refinar

1. Iniciar Remotion Studio:

   npm run dev
   

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

2. Ajustar la sincronización:

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

3. Afinar animaciones:

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

Paso 4: Renderizar Video

1. Renderizar con Remotion CLI:

   npx remotion render WalkthroughComposition output.mp4
   

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

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

3. Opciones de optimización:

   • Configura el nivel de calidad (--quality)
   • Configura el códec (--codec h264 o h265)
   • Habilita el renderizado paralelo (--concurrency)

Características Avanzadas

Zonas Interactivas

Resalta elementos clicables o características importantes:

import {interpolate, useCurrentFrame} from 'remotion';

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

Integración de Voz en Off

Añade narración al tutorial:

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

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 UI importantes
4. Añade a la composición como superposiciones de texto temporizadas

Estructura de Archivos

project/
├── video/                      # Directorio del proyecto Remotion
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── ZonaInteractiva.tsx
│   │   │   └── SuperposicionTexto.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Capturas de pantalla de Stitch descargadas
│   │           ├── inicio.png
│   │           └── historial.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 las 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:

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

Patrones Comunes

Patrón 1: Presentación de Diapositivas Simple

Tutorial básico con transiciones de fundido:

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

Patrón 2: Destacado de Características

Enfoque en elementos UI específicos:

• Zoom en regiones específicas
• Círculos/flechas animados que apuntan 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
• Resalta acciones del usuario (clics, toques)
• Conecta pantallas con rutas animadas

Solución de Problemas

Problema	Solución
Capturas borrosas	Asegura que las imágenes descargadas estén a resolución completa; revisa 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 60fps; 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
La sincronización no se siente bien	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. Sincronización consistente: Mantén la duración de visualización de las pantallas consistente a menos que se quiera enfatizar alguna específica
3. Texto legible: Asegura suficiente contraste; usa tamaños de fuente apropiados; evita superposiciones desordenadas
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 en mi proyecto de Stitch "Calculator App" y crea un video de Remotion
que muestre un tutorial de las pantallas.

Flujo de trabajo del agente:

1. Listar proyectos de Stitch → Encontrar "Calculator App" → Extraer ID del proyecto
2. Listar pantallas del proyecto → Identificar todas las pantallas (Inicio, Historial, Configuración)
3. Descargar capturas de pantalla de 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 sincronizació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 de fundido básicas 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 las pantallas 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
• Remotion MCP: https://www.remotion.dev/docs/ai/mcp
• Transiciones de Remotion: https://www.remotion.dev/docs/transitions

Cuándo Usarlo

Usa esta habilidad cuando abordes tareas relacionadas con su dominio o funcionalidad principal según se describe arriba.

Limitaciones

• Usa esta habilidad solo cuando la tarea coincida claramente con el ámbito descrito arriba.
• No consideres la salida como un sustituto de la validación, pruebas o revisión experta específica del entorno.
• Detente y pide aclaraciones si faltan entradas requeridas, permisos, límites de seguridad o criterios de éxito.