csiddhant796-blip/claude-skills-collection

Demovideo

Du bist ein Videoproduzent. Kein Präsentationsersteller. Jedes Bild hat eine Aufgabe. Jede Sekunde verdient die nächste.

Überblick

Erstelle hochwertige Demovideos durch die Orchestrierung von Browser-Rendering, Text-to-Speech und Videokomposition. Denke wie ein Videoproduzent – Storybogen, Tempo, Emotion, visuelle Hierarchie. Verwandle Screenshots und Szenenbeschreibungen in teilbare Produktdemos.

Wann diese Fähigkeit verwenden

• Benutzer bittet um die Erstellung eines Demovideos, Produkt-Walkthroughs oder Feature-Showcases
• Benutzer wünscht sich eine animierte Präsentation, ein Marketingvideo oder einen Produktteaser
• Benutzer möchte Screenshots oder UI-Aufnahmen in ein poliertes Video oder GIF verwandeln
• Benutzer sagt „Video erstellen“, „Demo erstellen“, „Demo aufnehmen“ oder „Promovideo“

Kernworkflow

1. Wähle einen Rendering-Modus

Bevor du beginnst, überprüfe verfügbare Werkzeuge:

• Playwright MCP verfügbar? – benötigt für automatisierte Screenshots. Fallback: Benutzer bitten, die HTML-Dateien manuell zu screenshoten.
• edge-tts verfügbar? – benötigt für Erzählungsaudio. Fallback: Erzähltextdateien ausgeben, damit der Benutzer sie aufnehmen oder ein beliebiges TTS-Werkzeug verwenden kann.
• ffmpeg verfügbar? – benötigt für die Komposition. Fallback: Einzelne Szenenbilder + Audiodateien mit manuellen ffmpeg-Befehlen ausgeben, die der Benutzer ausführen kann.

Wenn keines verfügbar ist, erstelle HTML-Szenendateien + scenes.json-Manifest + Erzählskripte. Der Benutzer kann manuell komponieren oder einen beliebigen Videoeditor verwenden.

Modus	Wie	Wann
MCP-Orchestrierung	HTML → playwright-Screenshots → edge-tts-Audio → ffmpeg-Komposition	Verwenden, wenn playwright + edge-tts + ffmpeg MCPs alle verbunden sind
Manuell	HTML-Szenendateien schreiben, ffmpeg-Befehle für den Benutzer bereitstellen	Verwenden, wenn MCPs nicht verfügbar sind

2. Wähle eine Erzählstruktur

Die klassische Demo (30–60s): Haken (3s) -> Problem (5s) -> Magischer Moment (5s) -> Beweis (15s) -> Sozialer Beweis (4s) -> Einladung (4s)

Das Problem-Lösung (20–40s): Vorher (6s) -> Nachher (6s) -> Wie (10s) -> Handlungsaufforderung (4s)

Der 15-Sekunden-Teaser: Haken (2s) -> Demo (8s) -> Logo (3s) -> Slogan (2s)

3. Gestalte Szenen

Wenn keine Screenshots bereitgestellt werden:

• Für CLI-/Terminal-Werkzeuge: HTML-Szenen mit terminal-ähnlichem dunklen Hintergrund, monospace Schriftart und animiertem Tippeffekt generieren
• Für konzeptionelle Demos: textlastige Szenen mit dem Farbschema und Typografiesystem verwenden
• Benutzer nur nach Screenshots fragen, wenn das Produkt visuell ist und Beschreibungen nicht ausreichen

Jede Szene hat GENAU einen primären Fokus:

• Titelszenen: Produktname
• Problemszenen: der Schmerz (rot, chaotisch)
• Lösungsszenen: das Ergebnis (grün, geräumig)
• Funktionsszenen: der hervorgehobene Screenshot-Bereich
• Endszenen: URL / CTA-Button

4. Erzählung schreiben

• Eine Idee pro Szene. Wenn du „und“ brauchst, brauchst du zwei Szenen.
• Beginne mit dem Verb. „Organisiere deine Tabs“ nicht „Tab-Organisation wird bereitgestellt.“
• Kein Fachjargon. „Deine Tabs organisieren sich selbst“ nicht „KI-gestützte Tab-Kategorisierung.“
• Verwende Kontraste. „24 Tabs. Ein Klick. 5 Gruppen.“

Ausgabeartefakte

Für jedes Video erstelle diese Dateien in einem demo-output/-Verzeichnis:

1. scenes/ – eine HTML-Datei pro Szene (1920x1080 Viewport)
2. narration/ – eine .txt-Datei pro Szene (für edge-tts-Eingabe)
3. scenes.json – Manifest, das Szenen in Reihenfolge mit Dauer und Erzähltext auflistet
4. build.sh – Shell-Skript, das die gesamte Pipeline ausführt:
   • playwright screenshot jede HTML-Szene → frames/
   • edge-tts jede Erzählungsdatei → audio/
   • ffmpeg concat mit Überblendungen → output.mp4

Wenn MCPs nicht verfügbar sind, erstelle trotzdem die Punkte 1–3. Füge die ffmpeg-Befehle in build.sh ein, damit der Benutzer sie manuell ausführen kann.

Szenengestaltungssystem

Siehe references/scene-design-system.md für das vollständige Gestaltungssystem: Farbschema, Animationstiming, Typografie, HTML-Layout, Sprachoptionen und Tempoguide.

Qualitätscheckliste

• Video hat Audiostream
• Auflösung ist 1920x1080
• Keine schwarzen Frames zwischen Szenen
• Die ersten 3 Sekunden erregen Aufmerksamkeit
• Jede Szene hat einen Fokuspunkt
• Endkarte hat URL und CTA

Anti-Patterns

Anti-Pattern	Lösung
Präsentationsgeschwindigkeit – jede Szene gleiche Dauer, kein Rhythmus	Dauern variieren: Haken 3s, Beweis 8s, CTA 4s
Textwand auf dem Bildschirm	Informationen in die Erzählung verschieben, Visualisierungen vereinfachen
Generische Erzählung – „Diese Funktion ermöglicht es Ihnen...“	Spezifische Zahlen und konkrete Verben verwenden
Kein Storybogen – nur Funktionen auflisten	Problem -> Lösung -> Beweis-Struktur verwenden
Rohe Screenshots	Immer abgerundete Ecken, Schatten, dunklen Hintergrund hinzufügen
Verwendung von ease oder linear-Animationen	Federkurve verwenden: cubic-bezier(0.16, 1, 0.3, 1)

Querverweise

• Verwandt: engineering/browser-automation – für playwright-basierte Browser-Workflows
• Siehe auch: framecraft – Open-Source-Szenen-Rendering-Pipeline