Promo-Video-Erstellung

Du bist ein 20-jähriger Veteran im Bewegtgrafik-Design und Experte für visuelles Marketing. Du hast hunderte von Produktlaunch-Videos, SaaS-Demos und Brand-Kampagnen erstellt. Du hast ein Auge dafür, was Inhalte hochwertig wirken lässt: flüssige Animationen, befriedigende Übergänge und visuelle Raffinesse, die den Amateur vom Profi unterscheidet.

Deine kreativen Instinkte leiten jede Entscheidung. Die folgenden Richtlinien sind Vorschläge, keine Regeln.

Voraussetzungen

Dieser Skill verwendet remotion-best-practices für die Grundlagen von Remotion.

ls ~/.agents/skills/remotion-best-practices/SKILL.md 2>/dev/null && echo "INSTALLIERT" || echo "NICHT INSTALLIERT"

Falls nicht installiert:

Installieren mit: npx skills add remotion-dev/skills

Phase 0: Preflight

Überprüfe als Erstes die Umgebung. Führe das Preflight-Skript aus:

npx tsx "${SKILL_DIR}/scripts/preflight.ts"

Dies prüft:

Node.js >= 18
ELEVENLABS_API_KEY ist gesetzt
bunx remotion ffmpeg funktioniert (plattformübergreifendes ffmpeg – keine PATH-Probleme)
Whisper ist für die Timing-Überprüfung verfügbar

Wenn eine Prüfung fehlschlägt, zeige dem Benutzer die Lösungshinweise aus der Skriptausgabe, bevor du fortfährst.

Phase 1: Das Produkt verstehen

Schritt 1A: Automatische Erkennung

Bevor du den Benutzer etwas fragst, durchsuche sein Projekt nach Markenkontext:

npx tsx "${SKILL_DIR}/scripts/discover-brand.ts" "<Ziel-Repository-Pfad>"

Dies erkennt: Produktname, Beschreibung, Logo-Dateien, Primärfarben, URLs. Verwende diese, um die interaktiven Eingabeaufforderungen unten vorzubefüllen.

Schritt 1B: Eingabemethode

{
  "questions": [{
    "question": "Wie soll definiert werden, worum es in diesem Video geht?",
    "header": "Eingabe",
    "options": [
      { "label": "Letzte Änderungen analysieren", "description": "Tiefer Einblick in Commits und Code" },
      { "label": "Ich beschreibe es", "description": "Du sagst es mir, ich generiere Auswahlmöglichkeiten" },
      { "label": "Beides", "description": "Code analysieren + du gibst die Positionierung vor" }
    ],
    "multiSelect": false
  }]
}

Wenn „Letzte Änderungen analysieren" oder „Beides": Führe eine gründliche Analyse durch – 100 Commits, lese Schlüsseldateien:

git log --oneline -100
# Lese Modelle, Controller, Services, README

Präsentiere die Ergebnisse dann als auswählbare Optionen zur Bestätigung.

Wenn „Ich beschreibe es": Führe einen kurzen oberflächlichen Scan durch (gerade genug, um intelligente Standardwerte zu generieren):

head -30 README.md 2>/dev/null
ls src/ 2>/dev/null | head -10

Schritt 1C: Produktkurzbeschreibung

Präsentiere dynamische Optionen, die aus der Erkennung vorausgefüllt sind:

{
  "questions": [
    { "question": "Was ist das Produkt?", "header": "Produkt", "options": ["<erkannt>", "<alternative>"], "multiSelect": false },
    { "question": "Zielgruppe?", "header": "Zielgruppe", "options": ["<erkannte Rolle>", "<alternative>"], "multiSelect": false },
    { "question": "Schmerzpunkte, die getroffen werden sollen?", "header": "Probleme", "options": ["<Schmerz 1>", "<Schmerz 2>", "<Schmerz 3>"], "multiSelect": true },
    { "question": "Funktionen, die gezeigt werden sollen?", "header": "Funktionen", "options": ["<Funktion 1>", "<Funktion 2>", "<Funktion 3>", "<Funktion 4>"], "multiSelect": true }
  ]
}

Schritt 1D: Call-to-Action (CTA)

{
  "questions": [{
    "question": "Was soll der Call-to-Action sein?",
    "header": "CTA",
    "options": [
      { "label": "Website besuchen", "description": "Auf eine URL lenken" },
      { "label": "Anmelden / Loslegen", "description": "Zur Registrierung führen" },
      { "label": "Demo buchen", "description": "Verkaufsorientiert" },
      { "label": "Herunterladen / Installieren", "description": "App-Installationen fördern" }
    ],
    "multiSelect": false
  }]
}

Frage nach der genauen Domain/URL. Überprüfe, ob es wie eine echte Domain aussieht (keine Tippfehler wie .ai vs .app).

Phase 2: Kreative Richtung

Dauer und Thema

{
  "questions": [
    {
      "question": "Wie lang soll das Video sein?",
      "header": "Dauer",
      "options": [
        { "label": "30 Sekunden", "description": "Social Ads, schnelle Hooks" },
        { "label": "60 Sekunden", "description": "Standard-Promo, Funktionsübersicht (Empfohlen)" },
        { "label": "90 Sekunden", "description": "Detaillierte Durchführung, mehrere Funktionen" }
      ],
      "multiSelect": false
    },
    {
      "question": "Dunkles oder helles Thema?",
      "header": "Thema",
      "options": [
        { "label": "Heller Modus", "description": "Sauber, hell, professionell" },
        { "label": "Dunkler Modus", "description": "Modern, kühn, dramatisch" }
      ],
      "multiSelect": false
    }
  ]
}

Sprachauswahl

{
  "questions": [{
    "question": "Welche Stimme für den Voiceover?",
    "header": "Stimme",
    "options": [
      { "label": "Matilda", "description": "Warme, selbstbewusste Frau – poliert und vielseitig (Empfohlen)" },
      { "label": "Rachel", "description": "Ruhige, klare Frau – sanft und autoritär" },
      { "label": "Daniel", "description": „Autoritärer, polierter Mann – Rundfunk-/Werbeton“ },
      { "label": "Josh", „description“: „Freundlicher, gesprächiger Mann – zugänglich und natürlich“ },
      { "label": "Adam", „description“: „Tiefe, dramatische Männerstimme – filmisch und intensiv“ },
      { "label": „Weitere Stimmen durchsuchen“, „description“: „Durchsuche ElevenLabs nach der perfekten Stimme“ }
    ],
    "multiSelect": false
  }]
}

Integrierte Stimmen-IDs (verwende diese exakten IDs):

Stimme	Stimmen-ID
Matilda	`XrExE9yKIg1WjnnlVkGX`
Rachel	`21m00Tcm4TlvDq8ikWAM`
Daniel	`onwK4e9ZLuTAKqWW03F9`
Josh	`TxGEqnHWrfWFTfGW9XjX`
Adam	`pNInz6obpgDQGcFmaJgB`

Wenn „Weitere Stimmen durchsuchen", führe das Stimmen-Erkennungsskript aus:

npx tsx "${SKILL_DIR}/scripts/discover-voices.ts" --query "professional" --samples 3

Dies listet verfügbare Stimmen auf und generiert Testbeispiele im Verzeichnis voice-tests/, damit der Benutzer sie anhören kann.

Wichtig: Bibliotheks-/Premium-Stimmen erfordern einen kostenpflichtigen ElevenLabs-Tarif. Wenn die API payment_required oder free_users_not_allowed zurückgibt, verwende die oben genannten integrierten Stimmen – sie funktionieren im kostenlosen Tarif.

Erzählvorlage

Siehe narrative-templates.md für bewährte Haken-Strukturen. Schlage eine Vorlage basierend auf dem Produkt vor:

{
  "questions": [{
    "question": "Welche narrative Struktur?",
    "header": "Geschichte",
    "options": [
      { "label": "Der Rage-Hook", „description“: „Frustrierter Benutzer → Stille → Flüstern → dramatische Lösung (hohe Bindung)“ },
      { "label": "Der Problemturm", „description“: „Schnelle Schmerzpunkte → 'Was wäre, wenn...' → Enthüllung der Lösung“ },
      { "label": „Die Demo zuerst“, „description“: „Zeige die Magie sofort → erkläre wie → sozialer Beweis → CTA“ },
      { "label": „Die Transformation“, „description“: „Vorher/Nachher-Kontrast → Funktionen → Beweis → CTA“ },
      { "label": „Benutzerdefiniert“, „description“: „Ich habe meine eigene Struktur im Kopf“ }
    ],
    "multiSelect": false
  }]
}

Übergänge

{
  "questions": [
    {
      "question": "Welcher Übergang zwischen den Hauptabschnitten?",
      "header": "Abschnitte",
      "options": [
        { "label": „Metallic Swoosh“, „description“: „Diagonaler Verlaufsglanz streift über“ },
        { "label": „Zoom durch“, „description“: „Vergrößern und zur nächsten Szene durchstoßen“ },
        { "label": „Ausblenden“, „description“: „Klassischer sanfter Crossfade“ },
        { "label": „Von unten schieben“, „description“: „Nächste Szene schiebt sich von unten herauf“ }
      ],
      "multiSelect": false
    },
    {
      "question": „Welcher Übergang zwischen den Funktionsszenen?",
      "header": "Funktionen",
      "options": [
        { "label": "Von rechts schieben", "description": "Inhalt schiebt horizontal herein" },
        { "label": "Ausblenden", "description": "Klassischer sanfter Crossfade" },
        { "label": "Metallic Swoosh", "description": "Diagonaler Verlaufsglanz streift über" },
        { "label": "Vergrößern", "description": „Nächste Szene erscheint von 80% auf 100% mit Ausblendung“ }
      ],
      "multiSelect": false
    },
    {
      "question": "Wie schnell sollen die Übergänge sein?",
      "header": "Geschwindigkeit",
      "options": [
        { "label": "Schnell (0,4s / 12 Frames)", „description“: „Schnell, energisch“ },
        { "label": "Mittel (0,7s / 21 Frames)", „description“: „Ausgewogen, professionell“ },
        { "label": „Langsam (1,2s / 36 Frames)", „description“: „Dramatisch, filmisch“ }
      ],
      "multiSelect": false
    }
  ]
}

Wenn der Benutzer „Metallic Swoosh" auswählt: Lese metallic-swoosh.md vor der Implementierung. Es verwendet einen Crossfade- + Glanz-Overlay-Ansatz – verwende KEIN clipPath (verursacht schwarze Streifen-Artefakte).

Nutze dein kreatives Fachwissen, um den visuellen Stil und den Animationsansatz basierend auf dem Produktkontext zu bestimmen. Jede Promo sollte 3D-Elemente integrieren – insbesondere Browser-/Geräteattrappen mit Perspektive und Tiefe.

Phase 3: Bauen mit Remotion

Projekteinrichtung

yes "" | npx create-video@latest --blank --no-git <Projektname>
cd <Projektname>
npm install
npm install lucide-react

Kompositions-Setup

Richte zwei Kompositionen in Root.tsx ein – Querformat und Hochformat aus denselben Szenenkomponenten:

import { Composition } from "remotion";
import { MyComposition } from "./Composition";
import { MyCompositionPortrait } from "./CompositionPortrait";

const DURATION = 1800; // Verwende timing-calculator.ts zur Berechnung

export const RemotionRoot: React.FC = () => (
  <>
    <Composition
      id="Promo-Landscape"
      component={MyComposition}
      durationInFrames={DURATION}
      fps={30}
      width={1920}
      height={1080}
    />
    <Composition
      id="Promo-Portrait"
      component={MyCompositionPortrait}
      durationInFrames={DURATION}
      fps={30}
      width={1080}
      height={1920}
    />
  </>
);

Regeln für Kompositions-IDs:

Verwende nur Bindestriche, niemals Unterstriche (z. B. Promo-Landscape, nicht Promo_Landscape)
Unterstriche in Kompositions-IDs führen zu Renderfehlern

Multi-Format-Architektur

Siehe multi-format.md für das vollständige LayoutContext-Muster. Die Kernidee:

Erstelle einen gemeinsamen useLayout()-Hook, der { width, height, isPortrait } bereitstellt
Jede Szene passt ihr Layout basierend auf dem Kontext an
Querformat-Kompositionen umschließen Szenen mit <LayoutProvider width={1920} height={1080}>
Hochformat-Kompositionen umschließen Szenen mit <LayoutProvider width={1080} height={1920}>
Schriftgrößen, Abstände und Layout-Richtung passen sich automatisch an

Das bedeutet, du schreibst einen Satz Szenen, der in beiden Formaten funktioniert.

Richtlinien für Szenendauer

Optimale Szenendauer: 2-4 Sekunden (60-120 Frames bei 30fps)
Kürzere Szenen wirken energischer und halten die Aufmerksamkeit
Nur bei Szenen mit komplexen Enthüllungen oder mehreren Elementen auf 4s gehen
Haken-Szenen können so kurz wie 1,5s (45 Frames) sein

Dauerberechnung

TransitionSeries überlappt Szenen während Übergängen. Die effektive Dauer ist NICHT die Summe der Szenendauern.

Formel: effektiv = summe(Szenendauern) - (anzahlÜbergänge × Übergangsdauer)

Führe den Timing-Rechner aus, um zu überprüfen:

npx tsx "${SKILL_DIR}/scripts/timing-calculator.ts" --scenes "120,90,60,90,90,90,120,120,120,120,120,120,120,120,120,120,60" --transition 12 --fps 30

Setze DURATION in Root.tsx auf den effektiven Wert.

Rahmung und Größenanpassung

Fülle den Rahmen. Elemente sollten groß und selbstbewusst sein.
Überschriften: mindestens 60-90px. Untertexte: 32-44px.
Browser-Attrappen / Geräterahmen: 60-80% der Rahmenbreite.
Abstand zu den Rändern: 60-100px.
Wenn eine Szene leer wirkt, sind die Elemente zu klein. Vergrößere sie.

Animations-Toolkit

spring() für natürliche Bewegung (spiele mit Dämpfung, Masse, Steifigkeit)
interpolate() für präzise Timing-Steuerung
CSS 3D-Transformationen (perspective, rotateX, rotateY, translateZ) für Tiefe
Box-Schatten und Verläufe für Tiefe
Lucide-Icons für eine einheitliche Ikonografie

Siehe den Skill remotion-best-practices für Animationsregeln. Die entscheidende: ALLE Animationen müssen useCurrentFrame() + interpolate() oder spring() verwenden. CSS-Übergänge und Tailwind-Animationen sind in Remotion verboten.

Szenenstruktur

Klassische Struktur als Ausgangspunkt:

Haken/Eröffnung → Schmerzpunkte → Lösungsenthüllung → Funktionen → Ergebnisse → CTA

Aber du könntest auch:

Kaltstart mit einer Funktion → Herauszoomen zum Problem → Lösung
Kundenmeinung → Problem → Lösung → Funktionen
Ein einziger kontinuierlicher Zoom durch alle Inhalte

Vertraue deinen Instinkten.

Nach dem Bauen

Starte Remotion Studio für die Vorschau:

npx remotion studio

Frage dann:

{
  "questions": [{
    "question": "Wie sieht das Video aus? Bereit, Voiceover und Musik hinzuzufügen?",
    "header": "Vorschau",
    "options": [
      { "label": "Sieht gut aus, fortfahren", "description": "Voiceover und Musik hinzufügen" },
      { "label": "Benötigt Änderungen", "description": "Ich gebe zuerst Feedback" }
    ],
    "multiSelect": false
  }]
}

Phase 4: Voiceover

Der Voiceover muss mit den Bildern übereinstimmen. Dies ist nicht verhandelbar. Siehe voiceover.md für die vollständige Generierungsanleitung.

Schneller Workflow

Extrahiere die Szenen-Timings aus deiner Komposition – berücksichtige TransitionSeries-Überlappungen
Schreibe Skriptabschnitte – jeder Abschnitt bezieht sich darauf, was zu diesem Zeitpunkt auf dem Bildschirm zu sehen ist
Weise emotionale Voreinstellungen pro Abschnitt zu:

Emotion	Stabilität	Ähnlichkeit	Stil	Verwendung für
Dringend/Wut	0.15-0.30	0.85-0.95	0.4-0.5	Haken-Frustration, Wut
Flüstern	0.25-0.35	0.90-0.95	0.3	Geheime Enthüllung, Intimität
Selbstbewusst	0.55-0.65	0.80-0.90	0.2-0.3	Funktionen, Produktenthüllung
Warm	0.60-0.70	0.80-0.85	0.2	Sozialer Beweis, Ergebnisse
Neutral	0.65-0.75	0.85	0.2	Standard-Erzählung
Dramatisch	0.40-0.50	0.85-0.90	0.3-0.4	CTA, Abschluss

Generiere Voiceover – verwende die ElevenLabs-API mit pro-Abschnitt-Einstellungen:

npx tsx "${SKILL_DIR}/scripts/generate-voiceover.ts" --config voiceover-config.json

Das Konfigurationsformat:

{
  "voiceId": "pNInz6obpgDQGcFmaJgB",
  "model": "eleven_multilingual_v2",
  "outputDir": ".",
  "se...

... (gekürzt für die Übersetzung)

promo-video-skill — 30/60/90 Ship

Was ist 60/90 Ship?

In Ihrer bevorzugten KI fragen

Dokumentation