gabelul/stitch-kit

Stitch → Remotion Walkthrough-Videos

Einschränkung: Verwende dieses Skill nur, wenn der Benutzer explizit „Stitch“ und Walkthrough-Video, Demo oder Remotion erwähnt.

Du bist ein Videoproduktionsspezialist, der Walkthrough-Videos aus Stitch-App-Designs erstellt. Du rufst Stitch-Screenshots ab und erstellst eine Remotion-Komposition – Folienübergänge, Zoom-Animationen und Textüberlagerungen.

Voraussetzungen

• Stitch MCP-Server (oder bereits bekannte Bildschirm-IDs)
• Node.js 18+ und npm
• Remotion-CLI (npm install -g remotion oder Nutzung über npx)

Schritt 1: Stitch-Assets sammeln

Bildschirme erkennen

1. Führe list_tools aus → finde das Stitch MCP-Präfix
2. Rufe [prefix]:list_projects auf → wähle das Projekt aus
3. Rufe [prefix]:list_screens mit projects/[projectId] auf → liste alle Bildschirme auf
4. Für jeden Bildschirm, den du im Video haben möchtest, rufe [prefix]:get_screen mit numerischen IDs auf

Screenshots herunterladen

Für jeden Bildschirm:

# Screenshot in das Assets-Verzeichnis herunterladen
curl -L "[screenshot.downloadUrl]" -o "video/public/assets/[screen-name].png"

Oder mit dem Fetch-Skript:

bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/[screen-name].html"
# Screenshots sind separat – lade sie via curl mit der Screenshot-URL herunter

Bildschirm-Manifest erstellen

Erstelle screens.json zur Beschreibung des Videos:

{
  "projectName": "Meine App",
  "fps": 30,
  "screens": [
    {
      "id": "startseite",
      "title": "Startbildschirm",
      "description": "Haupt-Dashboard mit wichtigen Kennzahlen",
      "imagePath": "./public/assets/startseite.png",
      "width": 390,
      "height": 844,
      "durationSeconds": 4
    },
    {
      "id": "profil",
      "title": "Benutzerprofil",
      "description": "Einstellungen und Kontoverwaltung",
      "imagePath": "./public/assets/profil.png",
      "width": 390,
      "height": 844,
      "durationSeconds": 3
    }
  ]
}

Schritt 2: Remotion-Projekt einrichten

# Neues Remotion-Projekt im Arbeitsverzeichnis erstellen
cd video
npm create video@latest -- --blank
cd walkthrough-video
npm install @remotion/transitions

Schritt 3: Komposition erstellen

ScreenSlide-Komponente

// video/src/ScreenSlide.tsx
import { AbsoluteFill, Img, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'

interface ScreenSlideProps {
  /** Pfad zum Screenshot-Bild */
  imagePath: string
  /** Bildschirmtitel, der als Überlagerung angezeigt wird */
  title: string
  /** Beschreibungstext */
  description: string
  /** Ob während der Anzeige leicht hineingezoomt werden soll */
  withZoom?: boolean
}

/**
 * Einzelne Bildschirmfolie mit optionalem Zoomeffekt und Textüberlagerung.
 * Blendet ein, bleibt stehen und blendet aus.
 */
export function ScreenSlide({ imagePath, title, description, withZoom = true }: ScreenSlideProps) {
  const frame = useCurrentFrame()
  const { fps, durationInFrames } = useVideoConfig()

  // Einblendung über die ersten 15 Frames
  const fadeIn = spring({ fps, frame, config: { damping: 200 } })

  // Dezenter Zoom: 100% → 105% über die Dauer
  const scale = withZoom
    ? interpolate(frame, [0, durationInFrames], [1, 1.05], { extrapolateRight: 'clamp' })
    : 1

  return (
    <AbsoluteFill style={{ backgroundColor: '#000' }}>
      {/* Screenshot */}
      <AbsoluteFill style={{ opacity: fadeIn, transform: `scale(${scale})`, transformOrigin: 'center' }}>
        <Img src={imagePath} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
      </AbsoluteFill>

      {/* Textüberlagerung unten */}
      <AbsoluteFill
        style={{
          justifyContent: 'flex-end',
          padding: '40px 60px',
          background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
          opacity: fadeIn,
        }}
      >
        <h2 style={{ color: '#fff', fontSize: 36, fontWeight: 700, margin: 0 }}>{title}</h2>
        {description ? (
          <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 20, margin: '8px 0 0' }}>
            {description}
          </p>
        ) : null}
      </AbsoluteFill>
    </AbsoluteFill>
  )
}

Walkthrough-Komposition

// video/src/WalkthroughComposition.tsx
import { Series, TransitionSeries } from '@remotion/transitions'
import { fade } from '@remotion/transitions/fade'
import { slide } from '@remotion/transitions/slide'
import screensData from '../../screens.json'
import { ScreenSlide } from './ScreenSlide'

const TRANSITION_FRAMES = 15  // 0,5s bei 30fps

/**
 * Haupt-Walkthrough-Komposition – ein Bildschirm pro Folie, Fade-/Slide-Übergänge.
 */
export function WalkthroughComposition() {
  return (
    <TransitionSeries>
      {screensData.screens.map((screen, i) => (
        <>
          <TransitionSeries.Sequence
            key={screen.id}
            durationInFrames={screen.durationSeconds * screensData.fps}
          >
            <ScreenSlide
              imagePath={screen.imagePath}
              title={screen.title}
              description={screen.description}
            />
          </TransitionSeries.Sequence>
          {/* Übergang zwischen den Bildschirmen (außer nach dem letzten) */}
          {i < screensData.screens.length - 1 && (
            <TransitionSeries.Transition
              key={`t-${screen.id}`}
              timing={fade({ durationInFrames: TRANSITION_FRAMES })}
            />
          )}
        </>
      ))}
    </TransitionSeries>
  )
}

In Root.tsx registrieren

// video/src/Root.tsx
import { Composition } from 'remotion'
import { WalkthroughComposition } from './WalkthroughComposition'
import screensData from '../../screens.json'

const TOTAL_FRAMES = screensData.screens.reduce(
  (acc, s) => acc + s.durationSeconds * screensData.fps,
  0
)

export const RemotionRoot = () => (
  <>
    <Composition
      id="Walkthrough"
      component={WalkthroughComposition}
      durationInFrames={TOTAL_FRAMES}
      fps={screensData.fps}
      width={screensData.screens[0]?.width ?? 390}
      height={screensData.screens[0]?.height ?? 844}
    />
  </>
)

Schritt 4: Vorschau und Rendern

# Vorschau im Browser
cd video/walkthrough-video
npm run dev

# Zu MP4 rendern
npx remotion render Walkthrough output.mp4

# Höhere Qualität rendern
npx remotion render Walkthrough output.mp4 --jpeg-quality 95 --concurrency 4

Übliche Videostile

Stil	Konfiguration
Kurze Demo (1–2 Min.)	2–3s pro Bildschirm, Fade-Übergänge, nur Titel
Feature-Durchlauf	4–5s pro Bildschirm, Zoom + Slide, Titel + Beschreibung
Präsentationsfolien	5–8s pro Bildschirm, nur Fade, vollständige Beschreibung als Overlay
Social-Media-Clip	1–2s pro Bildschirm, schnelle Schnitte, Musik

Dateistruktur

projekt/
├── screens.json             ← Bildschirm-Manifest
├── scripts/fetch-stitch.sh  ← GCS-Downloader
└── video/
    ├── public/
    │   └── assets/          ← Heruntergeladene Screenshots
    └── walkthrough-video/
        ├── src/
        │   ├── WalkthroughComposition.tsx
        │   ├── ScreenSlide.tsx
        │   └── Root.tsx
        ├── remotion.config.ts
        └── package.json

Fehlersuche

Problem	Lösung
Unscharfe Screenshots	Vollauflösung herunterladen: Verwende die Screenshot-URL direkt, kein Thumbnail
Layout-Konflikte	Remotion-Kompositionsabmessungen auf width + height des Bildschirms aus get_screen setzen
Übergänge ruckeln	TRANSITION_FRAMES erhöhen oder von slide auf fade wechseln
Build schlägt bei ESM fehl	"type": "module" zur package.json hinzufügen und Remotion-Version prüfen
MP4 wird nicht abgespielt	Prüfen, ob FFmpeg installiert ist: ffmpeg -version

Referenzen

• Remotion-Dokumentation: https://www.remotion.dev/docs/
• Remotion-Übergänge: https://www.remotion.dev/docs/transitions
• scripts/fetch-stitch.sh — Zuverlässiger GCS-Downloader
• stitch-mcp-list-screens — Bildschirme in einem Stitch-Projekt erkennen
• stitch-mcp-get-screen — Screenshot-Download-URLs abrufen