IZRINO/delta-auto-tools

Stitch to Remotion Walkthrough-Videos

Du bist ein Videoproduktions-Spezialist, der sich darauf konzentriert, fesselnde Walkthrough-Videos aus App-Designs zu erstellen. Du kombinierst die Bildschirmabruffunktionen von Stitch mit der programmatischen Videogenerierung von Remotion, um flüssige, professionelle Präsentationen zu produzieren.

Übersicht

Dieses Skill ermöglicht es dir, Walkthrough-Videos zu erstellen, die App-Bildschirme mit professionellen Übergängen, Zoomeffekten und kontextuellen Texteinblendungen präsentieren. Der Workflow ruft Screens aus Stitch-Projekten ab und orchestriert sie zu einer Remotion-Videokomposition.

Voraussetzungen

Erforderlich:

• Zugriff auf den Stitch MCP Server
• Zugriff auf den Remotion MCP Server (oder die Remotion CLI)
• Node.js und npm installiert
• Ein Stitch-Projekt mit entworfenen Screens

Empfohlen:

• Vertrautheit mit Remotions Videofunktionen
• Verständnis von React-Komponenten (Remotion verwendet React)

Abruf und Vernetzung

Schritt 1: Verfügbare MCP-Server ermitteln

Führe list_tools aus, um verfügbare MCP-Server und deren Präfixe zu identifizieren:

• Stitch MCP: Suche nach stitch: oder mcp_stitch: Präfix
• Remotion MCP: Suche nach remotion: oder mcp_remotion: Präfix

Schritt 2: Stitch-Projektinformationen abrufen

1. Projektsuche (falls Projekt-ID nicht angegeben):

   • Rufe [stitch_prefix]:list_projects mit filter: "view=owned" auf
   • Identifiziere das Zielprojekt anhand des Titels (z. B. "Calculator App")
   • Extrahiere die Projekt-ID aus dem Feld name (z. B. projects/13534454087919359824)

2. Screen-Abruf:

   • Rufe [stitch_prefix]:list_screens mit der Projekt-ID (nur numerisch) auf
   • Werte die Screentitel aus, um alle Screens für das Walkthrough zu identifizieren
   • Extrahiere die Screen-IDs aus dem Feld name jedes Screens

3. Screen-Metadaten abrufen: Für jeden Screen:

   • Rufe [stitch_prefix]:get_screen mit projectId und screenId auf
   • Rufe folgende Daten ab:
     • screenshot.downloadUrl — Visuelles Asset für das Video
     • htmlCode.downloadUrl — Optional: zum Extrahieren von Text/Inhalt
     • width, height — Bildschirmabmessungen für korrekte Skalierung
     • Screentitel und -beschreibung für Texteinblendungen

4. Asset-Download:

   • Verwende web_fetch oder Bash mit curl, um Screenshots herunterzuladen
   • Speichere sie in einem Staging-Verzeichnis: assets/screens/{screen-name}.png
   • Ordne die Assets in der Reihenfolge des geplanten Walkthrough-Ablaufs an

Schritt 3: Remotion-Projekt einrichten

1. Auf bestehendes Remotion-Projekt prüfen:

   • Suche nach remotion.config.ts oder package.json mit Remotion-Abhängigkeiten
   • Falls vorhanden, verwende die bestehende Projektstruktur

2. Neues Remotion-Projekt erstellen (falls nötig):

   npm create video@latest -- --blank
   

   • Wähle TypeScript-Vorlage
   • Richte es in einem dedizierten Verzeichnis video/ ein

3. Abhängigkeiten installieren:

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

Videokompositions-Strategie

Architektur

Erstelle eine modulare Remotion-Komposition mit diesen Komponenten:

1. ScreenSlide.tsx — Einzelne Bildschirm-Anzeigekomponente

   • Props: imageSrc, title, description, width, height
   • Funktionen: Zoom-In-Animation, Fade-Übergänge
   • Dauer: Konfigurierbar (Standard 3-5 Sekunden pro Screen)

2. WalkthroughComposition.tsx — Hauptvideokomposition

   • Sequenziert mehrere ScreenSlide-Komponenten
   • Behandelt Übergänge zwischen Screens
   • Fügt Texteinblendungen und Anmerkungen hinzu

3. config.ts — Videokonfiguration

   • Bildrate (Standard: 30 fps)
   • Videoabmessungen (entsprechen Stitch-Bildschirmabmessungen oder werden skaliert)
   • Berechnung der Gesamtdauer

Übergangseffekte

Verwende Remotions @remotion/transitions für professionelle Effekte:

• Fade: Sanfter Crossfade zwischen Screens

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

• Slide: Gerichtete Folienübergänge

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

• Zoom: Zoom-In/Out-Effekte zur Hervorhebung

  • Verwende spring() für flüssige Zoom-Animation
  • Wende auf wichtige UI-Elemente an

Texteinblendungen

Füge kontextuelle Informationen mit Remotions Textdarstellung hinzu:

1. Screentitel: Anzeige oben oder unten auf jedem Frame
2. Feature-Callouts: Hebe bestimmte UI-Elemente mit animierten Zeigern hervor
3. Beschreibungen: Blende beschreibenden Text für jeden Screen ein
4. Fortschrittsanzeige: Zeige die aktuelle Screen-Position im Walkthrough an

Ausführungsschritte

Schritt 1: Screen-Assets sammeln

1. Identifiziere das Ziel-Stitch-Projekt
2. Liste alle Screens im Projekt auf
3. Lade Screenshots für jeden Screen herunter
4. Ordne sie in der Reihenfolge des Walkthrough-Ablaufs
5. Erstelle eine Manifestdatei (screens.json):

{
  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Home Screen",
      "description": "Hauptrechneroberfläche mit Nummernblock",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "History View",
      "description": "Ansicht vorheriger Berechnungen",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Schritt 2: Remotion-Komponenten generieren

Erstelle die Videokomponenten gemäß den Remotion-Best-Practices:

1. Erstelle ScreenSlide.tsx:

   • Verwende useCurrentFrame() und spring() für Animationen
   • Implementiere Zoom- und Fade-Effekte
   • Füge Texteinblendungen mit korrektem Timing hinzu

2. Erstelle WalkthroughComposition.tsx:

   • Importiere das Screen-Manifest
   • Sequenziere Screens mit <Sequence>-Komponenten
   • Wende Übergänge zwischen Screens an
   • Berechne korrekte Timings und Offsets

3. Aktualisiere remotion.config.ts:

   • Setze die Kompositions-ID
   • Konfiguriere Videoabmessungen
   • Lege Bildrate und Dauer fest

Referenzressourcen:

• Verwende resources/screen-slide-template.tsx als Ausgangspunkt
• Folge resources/composition-checklist.md für Vollständigkeit
• Sieh dir Beispiele im Verzeichnis examples/ an

Schritt 3: Vorschau und Verfeinerung

1. Starte Remotion Studio:

   npm run dev
   

   • Öffnet eine browserbasierte Vorschau
   • Ermöglicht Echtzeitbearbeitung und -verfeinerung

2. Timing anpassen:

   • Stelle sicher, dass jeder Screen eine angemessene Anzeigedauer hat
   • Überprüfe, ob die Übergänge flüssig sind
   • Kontrolliere das Timing der Texteinblendungen

3. Animationen verfeinern:

   • Passe Spring-Konfigurationen für Zoomeffekte an
   • Modifiziere Easing-Funktionen für Übergänge
   • Stelle sicher, dass Text jederzeit lesbar ist

Schritt 4: Video rendern

1. Mit Remotion CLI rendern:

   npx remotion render WalkthroughComposition output.mp4
   

2. Alternative: Remotion MCP verwenden (falls verfügbar):

   • Rufe [remotion_prefix]:render mit den Kompositionsdetails auf
   • Gib das Ausgabeformat an (MP4, WebM, etc.)

3. Optimierungsoptionen:

   • Qualitätsstufe festlegen (--quality)
   • Codec konfigurieren (--codec h264 oder h265)
   • Paralleles Rendern aktivieren (--concurrency)

Erweiterte Funktionen

Interaktive Hotspots

Hecke anklickbare Elemente oder wichtige Funktionen hervor:

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>
  );
};

Voiceover-Integration

Füge dem Walkthrough eine Erzählung hinzu:

1. Generiere ein Voiceover-Skript aus den Screen-Beschreibungen
2. Verwende Text-to-Speech oder nimm Audio auf
3. Importiere Audio mit der <Audio>-Komponente in Remotion
4. Synchronisiere das Screen-Timing mit dem Voiceover-Tempo

Dynamische Textextraktion

Extrahiere Text aus dem Stitch-HTML-Code für automatische Anmerkungen:

1. Lade htmlCode.downloadUrl für jeden Screen herunter
2. Analysiere das HTML, um wichtige Textelemente zu extrahieren (Überschriften, Buttons, Labels)
3. Generiere automatische Callouts für wichtige UI-Elemente
4. Füge sie als zeitlich gesteuerte Texteinblendungen zur Komposition hinzu

Dateistruktur

project/
├── video/                      # Remotion-Projektverzeichnis
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Heruntergeladene Stitch-Screenshots
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Screen-Manifest
└── output.mp4                  # Gerendertes Video

Integration mit Remotion Skills

Remotion pflegt eigene Agent Skills, die Best Practices definieren. Sieh dir diese für fortgeschrittene Techniken an:

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

Wichtige Remotion Skills, die du nutzen solltest:

• Animation-Timing und Easing
• Kompositions-Architekturmuster
• Leistungsoptimierung
• Audiosynchronisation

Häufige Muster

Muster 1: Einfache Diashow

Einfaches Walkthrough mit Fade-Übergängen:

• 3-5 Sekunden pro Screen
• Crossfade-Übergänge
• Untere Texteinblendung mit Screentitel
• Fortschrittsbalken oben

Muster 2: Feature-Hervorhebung

Fokussiere auf bestimmte UI-Elemente:

• Zoom in bestimmte Bereiche
• Animierte Kreise/Pfeile, die auf Features zeigen
• Zeitlupen-Betonung wichtiger Interaktionen
• Vorher-Nachher-Vergleiche nebeneinander

Muster 3: Benutzerablauf

Zeige den schrittweisen Benutzer-Journey:

• Sequenzieller Screen-Ablauf mit gerichteten Folien
• Nummerierte Schritt-Einblendungen
• Hebe Benutzeraktionen hervor (Klicks, Taps)
• Verbinde Screens mit animierten Pfaden

Fehlerbehebung

Problem	Lösung
Verschwommene Screenshots	Stelle sicher, dass die heruntergeladenen Bilder in voller Auflösung vorliegen; prüfe die Qualitätseinstellungen von screenshot.downloadUrl
Verschobener Text	Überprüfe, ob die Bildschirmabmessungen der Kompositionsgröße entsprechen; passe die Textpositionierung basierend auf der tatsächlichen Bildschirmgröße an
Ruckelige Animationen	Erhöhe die Bildrate auf 60 fps; verwende korrekte Spring-Konfigurationen mit angemessenem Dämpfungsfaktor
Remotion-Build schlägt fehl	Überprüfe die Node-Versionskompatibilität; stelle sicher, dass alle Abhängigkeiten installiert sind; lies die Remotion-Dokumentation
Timing wirkt falsch	Passe die Dauer pro Screen im Manifest an; zeige eine Vorschau im Remotion Studio an; teste mit echten Benutzern

Bewährte Praktiken

1. Seitenverhältnis beibehalten: Verwende die tatsächlichen Stitch-Bildschirmabmessungen oder skaliere proportional
2. Konsistentes Timing: Halte die Anzeigedauer der Screens konsistent, es sei denn, bestimmte Screens sollen hervorgehoben werden
3. Lesbarer Text: Stelle ausreichenden Kontrast sicher; verwende angemessene Schriftgrößen; vermeide überladene Einblendungen
4. Flüssige Übergänge: Verwende Spring-Animationen für natürliche Bewegungen; vermeide abrupte Schnitte
5. Gründliche Vorschau: Zeige immer eine Vorschau im Remotion Studio an, bevor du endgültig renderst
6. Assets optimieren: Komprimiere Bilder angemessen; verwende effiziente Formate (PNG für UI, JPG für Fotos)

Beispielverwendung

Benutzeraufforderung:

Suche die Screens in meinem Stitch-Projekt "Calculator App" und erstelle ein Remotion-Video, 
das einen Walkthrough der Screens zeigt.

Agent-Workflow:

1. Liste Stitch-Projekte auf → Finde "Calculator App" → Extrahiere die Projekt-ID
2. Liste Screens im Projekt auf → Identifiziere alle Screens (Home, History, Settings)
3. Lade Screenshots für jeden Screen herunter → Speichere in assets/screens/
4. Erstelle das Manifest screens.json mit Screen-Metadaten
5. Generiere Remotion-Komponenten (ScreenSlide.tsx, WalkthroughComposition.tsx)
6. Zeige eine Vorschau im Remotion Studio an → Verfeinere Timing und Übergänge
7. Rendre das finale Video → calculator-walkthrough.mp4
8. Melde die Fertigstellung mit einem Link zur Videovorschau

Tipps für den Erfolg

• Fange einfach an: Beginne mit einfachen Fade-Übergängen, bevor du komplexe Animationen hinzufügst
• Folge Remotion-Mustern: Nutze die offiziellen Remotion Skills und die Dokumentation
• Verwende Manifestdateien: Halte Screen-Daten in JSON für einfache Aktualisierungen organisiert
• Vorschau häufig: Verwende Remotion Studio, um Probleme frühzeitig zu erkennen
• Barrierefreiheit beachten: Füge Untertitel hinzu; stelle sicher, dass Text lesbar ist; verwende klare visuelle Elemente
• Für die Plattform optimieren: Passe die Videoabmessungen an die Zielplattform an (YouTube, soziale Medien, etc.)

Referenzen

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