randall-liao/cloud-resume-v2

Walkthrough-Videos von Stitch zu Remotion

Du bist ein Spezialist für Videoproduktion, der sich darauf konzentriert, aus App-Designs fesselnde Walkthrough-Videos zu erstellen. Du kombinierst die Screen-Abrufmöglichkeiten von Stitch mit der programmatischen Videogenerierung von Remotion, um flüssige, professionelle Präsentationen zu erzeugen.

Übersicht

Diese Skill ermöglicht es dir, Walkthrough-Videos zu erstellen, die App-Screens mit professionellen Übergängen, Zoom-Effekten 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 gestalteten Screens

Empfohlen:

• Vertrautheit mit den Videofunktionen von Remotion
• 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 ihre 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 die Projekt-ID nicht angegeben ist):

   • 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)

2. Screen-Abruf:

   • Rufe [stitch_prefix]:list_screens mit der Projekt-ID auf (nur numerisch)
   • Überprüfe die Screen-Titel, 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
   • Hole folgende Werte:
     • screenshot.downloadUrl — Visuelles Asset für das Video
     • htmlCode.downloadUrl — Optional: zum Extrahieren von Text/Inhalt
     • width, height — Screen-Abmessungen für korrekte Skalierung
     • Screen-Titel und -Beschreibung für Texteinblendungen

4. Asset-Download:

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

Schritt 3: Remotion-Projekt einrichten

1. Prüfe auf bestehendes Remotion-Projekt:

   • 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 die TypeScript-Vorlage
   • Richte das Projekt in einem dedizierten video/-Verzeichnis ein

3. Abhängigkeiten installieren:

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

Videokompositionsstrategie

Architektur

Erstelle eine modulare Remotion-Komposition mit diesen Komponenten:

1. ScreenSlide.tsx — Komponente zur Darstellung einzelner Screens

   • 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

   • Reiht mehrere ScreenSlide-Komponenten aneinander
   • Handhabt Übergänge zwischen Screens
   • Fügt Texteinblendungen und Annotationen hinzu

3. config.ts — Videokonfiguration

   • Bildrate (Standard: 30 fps)
   • Videoabmessungen (an Stitch-Screen-Maße anpassen oder angemessen skalieren)
   • Berechnung der Gesamtdauer

Übergangseffekte

Verwende die @remotion/transitions von Remotion für professionelle Effekte:

• Fade: Sanfter Überblendung zwischen Screens

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

• Slide: Gerichtete Folienübergänge

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

• Zoom: Ein-/Auszoomeffekte zur Hervorhebung

  • Verwende die spring()-Animation für sanftes Zoomen
  • Wende auf wichtige UI-Elemente an

Texteinblendungen

Füge kontextuelle Informationen mithilfe der Textdarstellung von Remotion hinzu:

1. Screen-Titel: Oben oder unten in jedem Frame anzeigen
2. Feature-Callouts: Hebe bestimmte UI-Elemente mit animierten Zeigern hervor
3. Beschreibungen: Lasse beschreibenden Text für jeden Screen einblenden
4. Fortschrittsanzeige: Zeige die aktuelle Screen-Position im Walkthrough an

Ausführungsschritte

Schritt 1: Screen-Assets sammeln

1. Ziel-Stitch-Projekt identifizieren
2. Alle Screens im Projekt auflisten
3. Screenshots für jeden Screen herunterladen
4. In der Reihenfolge des Walkthrough-Ablaufs anordnen
5. Manifest-Datei (screens.json) erstellen:

{
  "projectName": "Taschenrechner-App",
  "screens": [
    {
      "id": "1",
      "title": "Startseite",
      "description": "Haupt-Taschenrechner-Oberfläche mit Zahlenfeld",
      "imagePath": "assets/screens/startseite.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "Verlauf",
      "description": "Ansicht vorheriger Berechnungen",
      "imagePath": "assets/screens/verlauf.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Schritt 2: Remotion-Komponenten generieren

Erstelle die Videokomponenten nach den Best Practices von Remotion:

1. ScreenSlide.tsx erstellen:

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

2. WalkthroughComposition.tsx erstellen:

   • Importiere das Screen-Manifest
   • Reihe Screens mit <Sequence>-Komponenten aneinander
   • Wende Übergänge zwischen Screens an
   • Berechne korrekte Zeitsteuerung und Versätze

3. remotion.config.ts aktualisieren:

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

Referenzressourcen:

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

Schritt 3: Vorschau und Verfeinerung

1. Remotion Studio starten:

   npm run dev
   

   • Öffnet eine browserbasierte Vorschau
   • Ermöglicht Live-Bearbeitung und Verfeinerung

2. Zeitsteuerung anpassen:

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

3. Animationen feinabstimmen:

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

Schritt 4: Video rendern

1. Mit der 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 usw.)

3. Optimierungsoptionen:

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

Fortgeschrittene Funktionen

Interaktive Hotspots

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

Sprachspur-Integration

Füge dem Walkthrough eine Erzählung hinzu:

1. Erstelle ein Voiceover-Skript aus den Screen-Beschreibungen
2. Verwende Text-to-Speech oder nimm Audio auf
3. Importiere Audio in Remotion mit der <Audio>-Komponente
4. Synchronisiere die Screen-Zeitsteuerung mit dem Erzähltempo

Dynamische Textextraktion

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

1. Lade htmlCode.downloadUrl für jeden Screen herunter
2. Parsee HTML, um wichtige Textelemente zu extrahieren (Überschriften, Buttons, Labels)
3. Generiere automatische Callouts für wichtige UI-Elemente
4. 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
│   │           ├── startseite.png
│   │           └── verlauf.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. Ü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 Skills, die genutzt werden können:

• Animations-Timing und Easing
• Architekturmuster für Kompositionen
• Leistungsoptimierung
• Audiosynchronisation

Häufige Muster

Muster 1: Einfache Diashow

Basis-Walkthrough mit Fade-Übergängen:

• 3–5 Sekunden pro Screen
• Überblendungsübergänge
• Texteinblendung unten mit Screen-Titel
• Fortschrittsbalken oben

Muster 2: Feature-Hervorhebung

Fokussiere auf bestimmte UI-Elemente:

• Zoom in bestimmte Bereiche
• Animierte Kreise/Pfeile, die auf Funktionen zeigen
• Zeitlupenbetonung bei Schlüsselinteraktionen
• Vorher/nachher-Vergleiche nebeneinander

Muster 3: Benutzerablauf

Zeige den schrittweisen Benutzerweg:

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

Fehlerbehebung

Problem	Lösung
Unscharfe Screenshots	Stelle sicher, dass die heruntergeladenen Bilder in voller Auflösung vorliegen; überprüfe die Qualitätseinstellungen in screenshot.downloadUrl
Verschobener Text	Überprüfe, ob die Screen-Maße 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 Spring-Konfigurationen mit angemessener Dämpfung
Remotion Build schlägt fehl	Überprüfe die Node-Version-Kompatibilität; stelle sicher, dass alle Abhängigkeiten installiert sind; lies die Remotion-Dokumentation
Timing wirkt falsch	Passe die Dauer pro Screen im Manifest an; verwende die Vorschau in Remotion Studio; teste mit echten Benutzern

Best Practices

1. Seitenverhältnis beibehalten: Verwende die tatsächlichen Stitch-Screen-Maße oder skaliere proportional
2. Konsistentes Timing: Halte die Anzeigedauer der Screens konsistent, es sei denn, du hebst bestimmte Screens hervor
3. Lesbarer Text: Stelle ausreichenden Kontrast sicher; verwende angemessene Schriftgrößen; vermeide überladene Einblendungen
4. Sanfte Übergänge: Verwende Spring-Animationen für natürliche Bewegungen; vermeide harte Schnitte
5. Gründliche Vorschau: Zeige immer in Remotion Studio eine Vorschau an, bevor du final 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 "Taschenrechner-App" und erstelle ein Remotion-Video,
das einen Walkthrough durch die Screens zeigt.

Agent-Workflow:

1. Stitch-Projekte auflisten → "Taschenrechner-App" finden → Projekt-ID extrahieren
2. Screens im Projekt auflisten → Alle Screens identifizieren (Startseite, Verlauf, Einstellungen)
3. Screenshots für jeden Screen herunterladen → In assets/screens/ speichern
4. screens.json-Manifest mit Screen-Metadaten erstellen
5. Remotion-Komponenten generieren (ScreenSlide.tsx, WalkthroughComposition.tsx)
6. Vorschau in Remotion Studio → Timing und Übergänge verfeinern
7. Finales Video rendern → taschenrechner-walkthrough.mp4
8. Abschluss mit Videovorschau melden

Tipps für den Erfolg

• Einfach anfangen: Beginne mit einfachen Fade-Übergängen, bevor du komplexe Animationen hinzufügst
• Remotion-Mustern folgen: Nutze die offiziellen Skills und Dokumentationen von Remotion
• Manifestdateien verwenden: Halte Screen-Daten in JSON organisiert für einfache Aktualisierungen
• Häufig Vorschau anzeigen: Verwende Remotion Studio, um Probleme früh 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 usw.)

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