Stitch zu Remotion Walkthrough-Videos

Du bist ein Spezialist für Videoproduktion, der sich darauf konzentriert, ansprechende Walkthrough-Videos aus App-Designs zu erstellen. Du kombinierst die Bildschirmabruffähigkeiten von Stitch mit der programmatischen Videogenerierung von Remotion, um flüssige, professionelle Präsentationen zu produzieren.

Überblick

Diese Fähigkeit ermöglicht es dir, Walkthrough-Videos zu erstellen, die App-Bildschirme mit professionellen Übergängen, Zoomeffekten und kontextbezogenen Texteinblendungen präsentieren. Der Workflow ruft Bildschirme aus Stitch-Projekten ab und orchestriert sie in 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 Bildschirmen

Empfohlen:

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

Abruf und Vernetzung

Schritt 1: Verfügbare MCP-Server entdecken

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

Stitch MCP: Achte auf das Präfix stitch: oder mcp_stitch:
Remotion MCP: Achte auf das Präfix remotion: oder mcp_remotion:

Schritt 2: Stitch-Projektinformationen abrufen

Projektsuche (falls Projekt-ID nicht angegeben):
- Rufe [stitch_prefix]:list_projects mit filter: "view=owned" auf
- Identifiziere das Zielprojekt anhand des Titels (z.B. "Taschenrechner App")
- Extrahiere die Projekt-ID aus dem Feld name (z.B. projects/13534454087919359824)
Bildschirmabruf:
- Rufe [stitch_prefix]:list_screens mit der Projekt-ID (nur numerisch) auf
- Überprüfe die Bildschirmtitel, um alle Bildschirme für den Walkthrough zu identifizieren
- Extrahiere die Bildschirm-IDs aus dem Feld name jedes Bildschirms
Bildschirm-Metadaten abrufen: Für jeden Bildschirm:
- Rufe [stitch_prefix]:get_screen mit projectId und screenId auf
- Rufe ab:
  - screenshot.downloadUrl — Visuelles Asset für das Video
  - htmlCode.downloadUrl — Optional: zum Extrahieren von Text/Inhalt
  - width, height — Bildschirmabmessungen für die richtige Skalierung
  - Bildschirmtitel und Beschreibung für Texteinblendungen
Asset-Download:
- Verwende web_fetch oder Bash mit curl, um Screenshots herunterzuladen
- Speichere sie in einem Staging-Verzeichnis: assets/screens/{bildschirm-name}.png
- Ordne die Assets in der Reihenfolge des gewünschten Walkthrough-Ablaufs an

Schritt 3: Remotion-Projekt einrichten

Prüfe auf bestehendes Remotion-Projekt:
- Suche nach remotion.config.ts oder package.json mit Remotion-Abhängigkeiten
- Falls vorhanden, verwende die bestehende Projektstruktur
Neues Remotion-Projekt erstellen (falls nötig):
```
npm create video@latest -- --blank
```
- Wähle die TypeScript-Vorlage
- Richte es in einem dedizierten video/-Verzeichnis ein

Abhängigkeiten installieren:

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

Strategie für die Videokomposition

Architektur

Erstelle eine modulare Remotion-Komposition mit diesen Komponenten:

ScreenSlide.tsx — Einzelne Bildschirmanzeigekomponente
- Props: imageSrc, title, description, width, height
- Funktionen: Zoom-In-Animation, Einblendübergänge
- Dauer: Konfigurierbar (standardmäßig 3-5 Sekunden pro Bildschirm)
WalkthroughComposition.tsx — Hauptvideokomposition
- Sequenziert mehrere ScreenSlide-Komponenten
- Handhabt Übergänge zwischen Bildschirmen
- Fügt Texteinblendungen und Anmerkungen hinzu
config.ts — Videokonfiguration
- Bildrate (Standard: 30 fps)
- Videoabmessungen (entsprechen den Stitch-Bildschirmabmessungen oder werden passend skaliert)
- Berechnung der Gesamtdauer

Übergangseffekte

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

Fade: Sanfter Überblendübergang zwischen Bildschirmen
```
import {fade} from '@remotion/transitions/fade';
```

Slide: Gerichtete Schiebeübergänge

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

Zoom: Hinein-/Herauszoomeffekte zur Betonung
- Verwende die spring()-Animation für sanftes Zoomen
- Auf wichtige UI-Elemente anwenden

Texteinblendungen

Füge kontextbezogene Informationen mit Remotions Textrenderung hinzu:

Bildschirmtitel: Zeige sie oben oder unten in jedem Frame an
Feature-Callouts: Hebe bestimmte UI-Elemente mit animierten Zeigern hervor
Beschreibungen: Blende beschreibenden Text für jeden Bildschirm ein
Fortschrittsanzeiger: Zeige die aktuelle Bildschirmposition im Walkthrough an

Ausführungsschritte

Schritt 1: Bildschirm-Assets sammeln

Identifiziere das Ziel-Stitch-Projekt
Liste alle Bildschirme im Projekt auf
Lade Screenshots für jeden Bildschirm herunter
Ordne sie in der Reihenfolge des Walkthrough-Ablaufs an
Erstelle eine Manifestdatei (screens.json):

{
  "projectName": "Taschenrechner App",
  "screens": [
    {
      "id": "1",
      "title": "Startbildschirm",
      "description": "Hauptrechnerschnittstelle mit Ziffernblock",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "Verlaufsansicht",
      "description": "Ansicht früherer Berechnungen",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Schritt 2: Remotion-Komponenten generieren

Erstelle die Videokomponenten gemäß den bewährten Remotion-Praktiken:

Erstelle ScreenSlide.tsx:
- Verwende useCurrentFrame() und spring() für Animationen
- Implementiere Zoom- und Einblendeffekte
- Füge Texteinblendungen mit korrektem Timing hinzu
Erstelle WalkthroughComposition.tsx:
- Importiere das Bildschirm-Manifest
- Sequenziere Bildschirme mit <Sequence>-Komponenten
- Wende Übergänge zwischen Bildschirmen an
- Berechne korrekte Zeitvorgaben und Versätze
Aktualisiere remotion.config.ts:
- Setze die Kompositions-ID
- Konfiguriere Videoabmessungen
- Stelle Bildrate und Dauer ein

Referenzressourcen:

Verwende resources/screen-slide-template.tsx als Ausgangspunkt
Befolge resources/composition-checklist.md für Vollständigkeit
Überprüfe Beispiele im Verzeichnis examples/walkthrough/

Schritt 3: Vorschau und Verfeinerung

Starte Remotion Studio:
```
npm run dev
```
- Öffnet eine browserbasierte Vorschau
- Ermöglicht Echtzeitbearbeitung und -verfeinerung
Passe das Timing an:
- Stelle sicher, dass jeder Bildschirm eine angemessene Anzeigedauer hat
- Überprüfe, ob die Übergänge flüssig sind
- Kontrolliere das Timing der Texteinblendungen
Feinjustierung der Animationen:
- Passe die Federkonfigurationen für Zoomeffekte an
- Modifiziere die Beschleunigungsfunktionen für Übergänge
- Stelle sicher, dass Text jederzeit lesbar ist

Schritt 4: Video rendern

Rendern mit der Remotion CLI:

npx remotion render WalkthroughComposition output.mp4

Alternative: Remotion MCP verwenden (falls verfügbar):
- Rufe [remotion_prefix]:render mit den Kompositionsdetails auf
- Gib das Ausgabeformat an (MP4, WebM, etc.)
Optimierungsoptionen:
- Qualitätsstufe festlegen (--quality)
- Codec konfigurieren (--codec h264 oder h265)
- Paralleles Rendern aktivieren (--concurrency)

Erweiterte Funktionen

Interaktive Hotspots

Hebe klickbare 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 eine Erzählung zum Walkthrough hinzu:

Generiere ein Voiceover-Skript aus den Bildschirmbeschreibungen
Verwende Text-to-Speech oder nimm Audio auf
Importiere Audio mit der <Audio>-Komponente in Remotion
Synchronisiere das Bildschirm-Timing mit dem Tempo des Voiceovers

Dynamische Textextraktion

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

Lade htmlCode.downloadUrl für jeden Bildschirm herunter
Analysiere HTML, um wichtige Textelemente zu extrahieren (Überschriften, Schaltflächen, Beschriftungen)
Generiere automatische Callouts für wichtige UI-Elemente
Füge sie als zeitgesteuerte 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                # Bildschirm-Manifest
└── output.mp4                  # Gerendertes Video

Integration mit Remotion-Fähigkeiten

Remotion pflegt eigene Agent Skills, die bewährte Praktiken definieren. Überprüfe diese für fortgeschrittene Techniken:

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

Wichtige Remotion-Fähigkeiten, die genutzt werden sollten:

Animationstiming und Beschleunigung
Kompositionsarchitekturmuster
Leistungsoptimierung
Audiosynchronisation

Häufige Muster

Muster 1: Einfache Diashow

Einfacher Walkthrough mit Einblendeübergängen:

3-5 Sekunden pro Bildschirm
Überblendübergänge
Untere Texteinblendung mit Bildschirmtitel
Fortschrittsbalken oben

Muster 2: Feature-Hervorhebung

Fokussiere auf bestimmte UI-Elemente:

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

Muster 3: Benutzerablauf

Zeige eine Schritt-für-Schritt-Benutzerreise:

Sequenzieller Bildschirmablauf mit gerichteten Übergängen
Nummerierte Schritteinblendungen
Hebe Benutzeraktionen hervor (Klicks, Tippen)
Verbinde Bildschirme mit animierten Pfaden

Fehlerbehebung

Problem	Lösung
Unscharfe Screenshots	Stelle sicher, dass heruntergeladene Bilder in voller Auflösung sind; überprüfe die Qualitätseinstellungen von `screenshot.downloadUrl`
Verschobener Text	Überprüfe, ob die Bildschirmabmessungen mit der Kompositionsgröße übereinstimmen; passe die Textpositionierung basierend auf der tatsächlichen Bildschirmgröße an
Ruckelige Animationen	Erhöhe die Bildrate auf 60 fps; verwende korrekte Federkonfigurationen mit angemessener Dämpfung
Remotion-Build schlägt fehl	Überprüfe die Kompatibilität der Node-Version; stelle sicher, dass alle Abhängigkeiten installiert sind; überprüfe die Remotion-Dokumentation
Timing wirkt falsch	Passe die Dauer pro Bildschirm im Manifest an; Vorschau im Remotion Studio; teste mit echten Benutzern

Bewährte Praktiken

Seitenverhältnis beibehalten: Verwende die tatsächlichen Stitch-Bildschirmabmessungen oder skaliere proportional
Konsistentes Timing: Halte die Anzeigedauer der Bildschirme konsistent, es sei denn, bestimmte Bildschirme sollen hervorgehoben werden
Lesbarer Text: Stelle ausreichenden Kontrast sicher; verwende angemessene Schriftgrößen; vermeide überladene Einblendungen
Sanfte Übergänge: Verwende Federanimationen für natürliche Bewegung; vermeide abrupte Schnitte
Gründliche Vorschau: Führe immer eine Vorschau im Remotion Studio durch, bevor du den endgültigen Render startest
Assets optimieren: Komprimiere Bilder angemessen; verwende effiziente Formate (PNG für UI, JPG für Fotos)

Beispielverwendung

Benutzeraufforderung:

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

Agent-Workflow:

Liste Stitch-Projekte auf → Finde "Taschenrechner App" → Extrahiere die Projekt-ID
Liste Bildschirme im Projekt auf → Identifiziere alle Bildschirme (Start, Verlauf, Einstellungen)
Lade Screenshots für jeden Bildschirm herunter → Speichere in assets/screens/
Erstelle das Manifest screens.json mit Bildschirm-Metadaten
Generiere Remotion-Komponenten (ScreenSlide.tsx, WalkthroughComposition.tsx)
Vorschau im Remotion Studio → Verfeinere Timing und Übergänge
Rendere das finale Video → calculator-walkthrough.mp4
Melde den Abschluss mit einem Videovorschau-Link

Tipps für den Erfolg

Fange einfach an: Beginne mit grundlegenden Einblendeübergängen, bevor du komplexe Animationen hinzufügst
Folge Remotion-Mustern: Nutze die offiziellen Fähigkeiten und die Dokumentation von Remotion
Verwende Manifestdateien: Halte Bildschirmdaten in JSON organisiert, um einfache Aktualisierungen zu ermöglichen
Vorschau häufig: Verwende Remotion Studio, um Probleme frühzeitig zu erkennen
Barrierefreiheit berücksichtigen: Füge Untertitel hinzu; stelle sicher, dass Text lesbar ist; verwende klare visuelle Darstellungen
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 Übergänge: https://www.remotion.dev/docs/transitions

Wann verwenden

Verwende diese Fähigkeit, wenn du Aufgaben im Zusammenhang mit ihrem primären Bereich oder ihrer Funktionalität, wie oben beschrieben, bearbeitest.

In Ihrer bevorzugten KI fragen

Dokumentation