Guide complet Stitch vers Remotion

Vous êtes un spécialiste de la production vidéo axé sur la création de vidéos de présentation engageantes à partir de designs d'applications. Vous combinez les capacités de récupération d'écran de Stitch avec la génération vidéo programmatique de Remotion pour produire des présentations fluides et professionnelles.

Présentation générale

Cette skill vous permet de créer des vidéos de présentation qui mettent en avant les écrans d'applications avec des transitions professionnelles, des effets de zoom et des superpositions de texte contextuel. Le workflow récupère les écrans des projets Stitch et les orchestre dans une composition vidéo Remotion.

Prérequis

Requis :

• Accès au serveur MCP Stitch
• Accès au serveur MCP Remotion (ou interface CLI Remotion)
• Node.js et npm installés
• Un projet Stitch avec des écrans conçus

Recommandé :

• Familiarité avec les capacités vidéo de Remotion
• Compréhension des composants React (Remotion utilise React)

Récupération et mise en réseau

Étape 1 : Découvrir les serveurs MCP disponibles

Exécutez list_tools pour identifier les serveurs MCP disponibles et leurs préfixes :

• Stitch MCP : Recherchez le préfixe stitch: ou mcp_stitch:
• Remotion MCP : Recherchez le préfixe remotion: ou mcp_remotion:

Étape 2 : Récupérer les informations du projet Stitch

1. Recherche de projet (si l'ID de projet n'est pas fourni) :

   • Appelez [stitch_prefix]:list_projects avec filter: "view=owned"
   • Identifiez le projet cible par titre (par exemple, « Calculator App »)
   • Extrayez l'ID de projet du champ name (par exemple, projects/13534454087919359824)

2. Récupération d'écrans :

   • Appelez [stitch_prefix]:list_screens avec l'ID de projet (numérique uniquement)
   • Examinez les titres des écrans pour identifier tous les écrans de la présentation
   • Extrayez les ID d'écran du champ name de chaque écran

3. Récupération des métadonnées d'écran : Pour chaque écran :

   • Appelez [stitch_prefix]:get_screen avec projectId et screenId
   • Récupérez :
     • screenshot.downloadUrl — Asset visuel pour la vidéo
     • htmlCode.downloadUrl — Optionnel : pour extraire du texte/contenu
     • width, height — Dimensions d'écran pour mise à l'échelle appropriée
     • Titre et description d'écran pour superpositions de texte

4. Téléchargement d'assets :

   • Utilisez web_fetch ou Bash avec curl pour télécharger les captures d'écran
   • Enregistrez dans un répertoire de staging : assets/screens/{screen-name}.png
   • Organisez les assets dans l'ordre du flux de présentation souhaité

Étape 3 : Configurer le projet Remotion

1. Vérifier l'existence d'un projet Remotion :

   • Recherchez remotion.config.ts ou package.json avec les dépendances Remotion
   • Si existant, utilisez la structure de projet existante

2. Créer un nouveau projet Remotion (si nécessaire) :

   npm create video@latest -- --blank

   • Choisissez le modèle TypeScript
   • Configurez dans un répertoire dédié video/

3. Installer les dépendances :

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

Stratégie de composition vidéo

Architecture

Créez une composition Remotion modulaire avec ces composants :

1. ScreenSlide.tsx — Composant d'affichage d'écran individuel

   • Props : imageSrc, title, description, width, height
   • Fonctionnalités : Animation zoom avant, transitions de fondu
   • Durée : Configurable (3-5 secondes par défaut par écran)

2. WalkthroughComposition.tsx — Composition vidéo principale

   • Séquence plusieurs composants ScreenSlide
   • Gère les transitions entre écrans
   • Ajoute des superpositions de texte et des annotations

3. config.ts — Configuration vidéo

   • Fréquence d'images (30 fps par défaut)
   • Dimensions vidéo (correspondent aux dimensions d'écran Stitch ou mise à l'échelle appropriée)
   • Calcul de la durée totale

Effets de transition

Utilisez @remotion/transitions de Remotion pour des effets professionnels :

• Fondu : Transition de fondu croisé en douceur entre écrans

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

• Glissement : Transitions de glissement directionnel

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

• Zoom : Effets zoom avant/arrière pour souligner

  • Utilisez spring() pour animation fluide
  • Appliquez aux éléments d'interface importants

Superpositions de texte

Ajoutez des informations contextuelles en utilisant le rendu de texte de Remotion :

1. Titres d'écrans : Affichés en haut ou bas de chaque frame
2. Appels de fonctionnalités : Mettez en avant des éléments d'interface spécifiques avec des pointeurs animés
3. Descriptions : Textus descriptif pour chaque écran en fondu
4. Indicateur de progression : Montrez la position d'écran actuelle dans la présentation

Étapes d'exécution

Étape 1 : Rassembler les assets d'écran

1. Identifiez le projet Stitch cible
2. Listez tous les écrans du projet
3. Téléchargez les captures d'écran pour chaque écran
4. Organisez dans l'ordre du flux de présentation
5. Créez un fichier manifest (screens.json) :

{
  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Home Screen",
      "description": "Main calculator interface with number pad",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "History View",
      "description": "View of previous calculations",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Étape 2 : Générer les composants Remotion

Créez les composants vidéo en suivant les bonnes pratiques Remotion :

1. Créez ScreenSlide.tsx :

   • Utilisez useCurrentFrame() et spring() pour les animations
   • Implémentez les effets de zoom et fondu
   • Ajoutez des superpositions de texte avec timing approprié

2. Créez WalkthroughComposition.tsx :

   • Importez le manifest d'écrans
   • Séquencez les écrans avec les composants <Sequence>
   • Appliquez les transitions entre écrans
   • Calculez le timing et les décalages appropriés

3. Mettez à jour remotion.config.ts :

   • Définissez l'ID de composition
   • Configurez les dimensions vidéo
   • Définissez la fréquence d'images et la durée

Ressources de référence :

• Utilisez resources/screen-slide-template.tsx comme point de départ
• Suivez resources/composition-checklist.md pour l'exhaustivité
• Examinez les exemples dans le répertoire examples/walkthrough/

Étape 3 : Aperçu et affinage

1. Démarrez Remotion Studio :

   npm run dev

   • Ouvre l'aperçu basé sur navigateur
   • Permet l'édition et l'affinage en temps réel

2. Ajustez le timing :

   • Assurez-vous que chaque écran a une durée d'affichage appropriée
   • Vérifiez que les transitions sont fluides
   • Vérifiez le timing des superpositions de texte

3. Affinez les animations :

   • Ajustez les configurations spring pour les effets de zoom
   • Modifiez les fonctions d'easing pour les transitions
   • Assurez-vous que le texte est lisible à tout moment

Étape 4 : Rendu vidéo

1. Rendez en utilisant l'interface CLI Remotion :

   npx remotion render WalkthroughComposition output.mp4

2. Alternative : Utilisez Remotion MCP (si disponible) :

   • Appelez [remotion_prefix]:render avec les détails de composition
   • Spécifiez le format de sortie (MP4, WebM, etc.)

3. Options d'optimisation :

   • Définissez le niveau de qualité (--quality)
   • Configurez le codec (--codec h264 ou h265)
   • Activez le rendu parallèle (--concurrency)

Fonctionnalités avancées

Points d'accès interactifs

Mettez en avant les éléments cliquables ou les fonctionnalités 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>
  );
};

Intégration de voix off

Ajoutez une narration à la présentation :

1. Générez un script de voix off à partir des descriptions d'écrans
2. Utilisez la synthèse vocale ou enregistrez l'audio
3. Importez l'audio dans Remotion avec le composant <Audio>
4. Synchronisez le timing d'écran avec le rythme de la voix off

Extraction de texte dynamique

Extrayez le texte du code HTML Stitch pour les annotations automatiques :

1. Téléchargez htmlCode.downloadUrl pour chaque écran
2. Analysez le HTML pour extraire les éléments de texte clés (en-têtes, boutons, étiquettes)
3. Générez des appels automatiques pour les éléments d'interface importants
4. Ajoutez à la composition comme superpositions de texte chronométrées

Structure de fichiers

project/
├── video/                      # Répertoire du projet Remotion
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Captures d'écran Stitch téléchargées
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Manifest d'écrans
└── output.mp4                  # Vidéo rendue

Intégration avec les skills Remotion

Remotion maintient ses propres skills d'agent qui définissent les bonnes pratiques. Examinez-les pour les techniques avancées :

• Repository : https://github.com/remotion-dev/remotion/tree/main/packages/skills
• Installation : npx skills add remotion-dev/skills

Skills Remotion clés à exploiter :

• Timing d'animation et easing
• Modèles d'architecture de composition
• Optimisation des performances
• Synchronisation audio

Modèles courants

Modèle 1 : Présentation simple

Présentation de base avec transitions de fondu :

• 3-5 secondes par écran
• Transitions de fondu croisé
• Superposition de texte en bas avec titre d'écran
• Barre de progression en haut

Modèle 2 : Mise en avant de fonctionnalités

Focus sur des éléments d'interface spécifiques :

• Zoom avant sur les régions spécifiques
• Cercles animés/flèches pointant vers les fonctionnalités
• Ralenti sur les interactions clés
• Comparaisons avant/après côte à côte

Modèle 3 : Flux utilisateur

Montrez le parcours utilisateur étape par étape :

• Flux d'écrans séquenciel avec glissements directionnels
• Superposition d'étapes numérotées
• Mettez en avant les actions utilisateur (clics, appuis)
• Connectez les écrans avec des chemins animés

Dépannage

Bonnes pratiques

1. Maintenez le rapport d'aspect : Utilisez les dimensions d'écran Stitch réelles ou mettez à l'échelle proportionnellement
2. Timing cohérent : Gardez la durée d'affichage d'écran cohérente, sauf si vous mettez en avant des écrans spécifiques
3. Texte lisible : Assurez un contraste suffisant ; utilisez les tailles de police appropriées ; évitez les superpositions encombrées
4. Transitions fluides : Utilisez les animations spring pour le mouvement naturel ; évitez les coupures brusques
5. Prévisualisez complètement : Prévisualisez toujours dans Remotion Studio avant le rendu final
6. Optimisez les assets : Compressez les images de manière appropriée ; utilisez les formats efficaces (PNG pour l'interface, JPG pour les photos)

Exemple d'utilisation

Prompt utilisateur :

Look up the screens in my Stitch project "Calculator App" and build a remotion video 
that shows a walkthrough of the screens.

Workflow d'agent :

1. Listez les projets Stitch → Trouvez « Calculator App » → Extrayez l'ID de projet
2. Listez les écrans du projet → Identifiez tous les écrans (Home, History, Settings)
3. Téléchargez les captures d'écran pour chaque écran → Enregistrez dans assets/screens/
4. Créez un manifest screens.json avec les métadonnées d'écrans
5. Générez les composants Remotion (ScreenSlide.tsx, WalkthroughComposition.tsx)
6. Prévisualisez dans Remotion Studio → Affinez le timing et les transitions
7. Rendez la vidéo finale → calculator-walkthrough.mp4
8. Signalez l'accomplissement avec le lien d'aperçu vidéo

Conseils pour réussir

• Commencez simplement : Commencez par des transitions de fondu de base avant d'ajouter des animations complexes
• Suivez les modèles Remotion : Exploitez les skills et la documentation officiels de Remotion
• Utilisez les fichiers manifest : Gardez les données d'écrans organisées en JSON pour les mises à jour faciles
• Prévisualisez fréquemment : Utilisez Remotion Studio pour identifier les problèmes tôt
• Considérez l'accessibilité : Ajoutez des sous-titres ; assurez-vous que le texte est lisible ; utilisez des visuels clairs
• Optimisez pour la plateforme : Correspondez les dimensions vidéo à la plateforme cible (YouTube, réseaux sociaux, etc.)

Références

• Documentation Stitch : https://stitch.withgoogle.com/docs/
• Documentation Remotion : https://www.remotion.dev/docs/
• Skills Remotion : https://www.remotion.dev/docs/ai/skills
• MCP Remotion : https://www.remotion.dev/docs/ai/mcp
• Transitions Remotion : https://www.remotion.dev/docs/transitions