Videoproduktion

# Videoproduktion Nutzungsleitfaden

## Überblick

Das Plugin **Videoproduktion** richtet sich an Kreative, Entwickler und Produktteams, die schnell hochwertige Videos erstellen möchten. Es kombiniert professionelle UI/UX-Designleitlinien mit Remotion Best Practices für die Videoentwicklung und hilft dir, von visuellem Stil, Animationstiming, Untertitelgestaltung und Asset-Organisation bis zum finalen Rendering einen klaren, effizienten und wiederverwendbaren Videoproduktionsprozess aufzubauen.

Egal ob du ein Produktvorstellungsvideo, eine Funktionsdemo, einen Social-Media-Clip, eine Datenvisualisierungsanimation oder einen Markenfilm erstellen möchtest: Dieses Plugin hilft dir, Ideen schneller in ausführbare Videokonzepte und Remotion-Implementierungen zu überführen.

## Anwendungsfälle

- **Produktfunktionsdemo**: Zeige Kernfunktionen mit klaren Interface-Animationen und rhythmischer Erklärung.
- **Markenvideo**: Erzeuge Empfehlungen zu visuellem Stil, Farben, Schriften und Layout passend zur Markenidentität.
- **Datenvisualisierungsvideo**: Gestalte Diagrammanimationen, Informationshierarchien und Übergangsrhythmen.
- **Social-Media-Kurzvideo**: Plane Hochformat-Layouts, Untertitelstile, Rhythmuspunkte und aufmerksamkeitsstarke Einstiege.
- **Entwickler-Video-Workflow**: Nutze Remotion, um Videos komponentenbasiert mit React zu bauen, zu prüfen und zu rendern.

## Kernfunktionen

### 1. UI/UX-Visual-Design-Beratung

Mit der Fähigkeit `ui-ux-pro-max` erhältst du professionelle Designempfehlungen, darunter:

- Gesamtstil des Videos, z. B. technologisch, minimalistisch, verspielt, geschäftlich, futuristisch usw.
- Farbkonzepte und Erweiterungen der Markenfarben.
- Empfehlungen zu Schriftgrößenhierarchie, Schriftgrößen, Zeilenabstand und Lesbarkeit von Untertiteln.
- Visuelle Optimierung von Landing Page, Produktoberflächen, Diagrammen und Komponenten.
- Empfehlungen zur UI-Implementierung für unterschiedliche Frontend-Technologie-Stacks.

Beispielanfrage:

„Hilf mir, einen visuellen Stil für ein AI SaaS Produktvorstellungsvideo zu entwerfen. Es soll hochwertig, schlicht und für dunkle Hintergründe geeignet sein.“

Du erhältst eine vollständige Richtung, einschließlich Hintergrund, Hauptfarbe, Akzentfarbe, Schrift, Button-Stil, Kartenstil und Übergangsempfehlungen.

### 2. Remotion Best Practices für Videoentwicklung

Mit der Fähigkeit `remotion-best-practices` erhältst du praktische Empfehlungen für Remotion-Projekte, darunter:

- Wie Composition, Scene und Komponenten organisiert werden.
- Wie Assets wie Bilder, Videos, Audio und Schriften verwaltet werden.
- Wie framebasierte Animationstimings gestaltet werden.
- Wie Untertitel, Schreibmaschineneffekte, Fortschrittsbalken, Übergänge und Kamerabewegungen umgesetzt werden.
- Wie Auflösung, FPS, Dauer und Rendering-Parameter festgelegt werden.

Beispielanfrage:

„Bitte entwirf für mich die Remotion-Komponentenstruktur für ein 30-sekündiges Produktdemovideo und gib die Timeline für jede Szene an.“

## Empfohlener Workflow

### Schritt 1: Videoziel klären

Definiere zuerst Zweck, Zielgruppe, Plattform und Dauer des Videos. Zum Beispiel:

- Plattform: Website-Startseite / Bilibili / 小红书 / YouTube / 抖音
- Seitenverhältnis: 16:9, 9:16 oder 1:1
- Dauer: 15 Sekunden, 30 Sekunden, 60 Sekunden
- Ziel: Produkt vorstellen, Conversion erhöhen, Funktion erklären, Daten präsentieren

### Schritt 2: Visuellen Stil festlegen

Lass das Plugin anhand der Produktpositionierung einen Styleguide erstellen, zum Beispiel:

- Farben: Hauptfarbe, Sekundärfarbe, Hintergrundfarbe, Akzentfarbe
- Schriften: Empfehlungen für Titel, Fließtext und Untertitel
- Layout: Sicherheitsabstände, Informationshierarchie, Kartenlayout
- Animationen: Ease-in-out, Parallax, Skalierung, Fade-in, Slide usw.

### Schritt 3: Videostruktur aufteilen

Teile das Video in mehrere Szenen auf, zum Beispiel:

1. Einstiegshook: Schmerzpunkt ansprechen oder Kernvorteil zeigen
2. Produktpräsentation: Interface, Funktion oder Ablauf demonstrieren
3. Wertverstärkung: Daten, Fallbeispiele, Vergleich
4. Call to Action: Website, Download, Registrierung oder Folgen

### Schritt 4: Remotion-Komponenten umsetzen

Baue das Video mit React-Komponenten und halte die Struktur klar:

- `Root.tsx`: Composition registrieren
- `Video.tsx`: Haupt-Timeline
- `scenes/`: Komponenten für verschiedene Szenen
- `components/`: Wiederverwendbare Komponenten wie Untertitel, Buttons, Karten, Diagramme usw.
- `assets/`: Bilder, Videos, Audio und Schriften

### Schritt 5: Vorschau, Optimierung und Rendering

Prüfe in der Vorschau besonders:

- Ob Untertitel klar lesbar sind
- Ob Animationen zum Rhythmus passen
- Ob das Bild mit Informationen überladen ist
- Ob Assets scharf und nicht verzerrt sind
- Ob Musik und Übergänge zusammenpassen

Wähle anschließend je nach Veröffentlichungsplattform eine passende Auflösung, Bitrate und ein geeignetes Format für das Rendering.

## Best Practices

- Halte die Informationen pro Szene knapp und vermeide zu viel Text gleichzeitig.
- Nutze ein konsistentes Designsystem mit Farben, Rundungen, Schatten, Schriften und Abständen.
- Animationen sollten der Informationsvermittlung dienen und keine unnötige kognitive Belastung erzeugen.
- Untertitel sollten im sicheren Bereich liegen und auf Mobilgeräten gut lesbar sein.
- Verwende in Remotion bevorzugt eine komponentenbasierte Struktur, um Wiederverwendung und spätere Änderungen zu erleichtern.
- Lege vor der Produktion zuerst die Timeline fest, um chaotische Rhythmusänderungen während der Umsetzung zu vermeiden.

## Beispiel-Prompts

- „Entwirf für ein Fintech-Produktvideo ein 45-sekündiges Storyboard und einen visuellen Stil.“
- „Plane auf Basis von Remotion eine Videostruktur für 1920x1080, 30fps und 20 Sekunden.“
- „Optimiere diesen Untertitelstil, damit er für vertikale Kurzvideos geeignet ist.“
- „Gib mir eine Umsetzungsidee für eine Animation, bei der eine Produktoberfläche hereingleitet, vergrößert und hervorgehoben wird.“
- „Hilf mir zu prüfen, ob diese Video-Timeline zu langsam ist, und mache Optimierungsvorschläge.“