Produktdemo-Video, Schritt 2: 20–45 s SaaS-Schnitt im Takt

SaaS Produkt-Demo-Video

Kompletter Workflow für die Erstellung eines beat-synchronisierten SaaS-Produktfilms in Remotion. Deckt stille cineastische Filme, beat-locked horizontale Demos, vertikale Reels und Filme mit Collage-B-Roll-Ebenen ab.

Der Skill ist in Bezug auf drei Dinge festgelegt: Assets, Vibe, Beats. Wenn du einen davon auslässt, produzierst du einen generischen Canva-artigen Bewegtgrafiken-Reel, der wie jede andere SaaS-Demo aussieht. Die Disziplin macht den Unterschied.

Dies sind starke Empfehlungen und keine festen Regeln. Die meisten Produktionen folgen ihnen; einige brechen sie mit Absicht (z. B. Voice-over-getriebene Filme, bei denen der Beat-Sync mit dem VO kämpfen würde). Wenn du eine Regel brichst, tue dies bewusst.

---

Voraussetzungen

Bevor du beginnst, überprüfe, ob diese Voraussetzungen erfüllt sind. Die erste ist zwingend erforderlich; die anderen sind starke Empfehlungen mit dokumentierten Ausweichlösungen.

1. Remotion installiert (erforderlich). @remotion/cli 4.0.x + @remotion/google-fonts + React 19. Siehe references/project-scaffold.md für das exakte minimale package.json / tsconfig.json / remotion.config.ts - führe niemals npx create-video innerhalb eines bestehenden Git-Repos aus (es blockiert bei einer Pfeiltasten-Eingabeaufforderung).

2. Super Powers Plugin (stark empfohlen, nicht erforderlich). Wenn verfügbar, orchestriert dieser Skill superpowers:using-superpowers, superpowers:brainstorming (mit visuellem Begleiter), superpowers:writing-plans und superpowers:subagent-driven-development. Sie liefern HTML-Mockups im Browser für Layout-Entscheidungen, formale Plan-Dokumente und die Implementierungs- und Review-Subagenten-Schleife.

   Wenn Super Powers nicht installiert ist, funktioniert der Skill trotzdem – der Workflow wird etwas gesprächiger und etwas langsamer. Brainstorming wird zu Inline-Dialogen (kein Browser-Begleiter); Pläne werden direkt im Chat geschrieben; Szenen werden inline implementiert, anstatt über Subagenten dispatched zu werden. Die drei Säulen (Assets / Vibe / Beats) sowie B-Roll, schematische UI, Klickpositionierung, Schreibstil und die Skripte in scripts/ funktionieren alle gleich. Lehne die Arbeit nicht wegen eines fehlenden Plugins ab – passe dich an und fahre fort.

3. Python 3 + librosa verfügbar. Die Beat-Erkennung führt scripts/detect-beats.py aus, das librosa importiert. Wenn nicht installiert, führe pip install --break-system-packages librosa numpy soundfile aus und informiere den Benutzer – tue es nicht stillschweigend.

4. Für Referenz-Video-Analyse (Säule 2): Der Skill unterstützt drei Pfade in Prioritätsreihenfolge. Verwende den höchsten, der verfügbar ist – siehe references/reference-video-vibe.md für die vollständige Erkennungslogik.

   1. gemini CLI auf dem PATH (offizielle Google CLI oder Community-Wrapper wie gemini-yt). Führe sie mit dem Prompt + der YouTube-URL als Argumente aus.
   2. GEMINI_API_KEY gesetzt in env oder .env. Verwende den curl-Wrapper des Skills unter scripts/analyze-reference-video.sh.
   3. Keines der oben genannten – falle auf manuelles Google AI Studio Copy-Paste zurück. Unbequem, funktioniert aber immer; die Qualität ist vergleichbar.

Führe references/prereq-check.md als deine erste Aktion in einer neuen Sitzung aus.

---

Die drei Säulen

Dies sind die Aktivitäten mit hohem Hebel. Eine davon auszulassen, um „Zeit zu sparen“, kostet fast immer mehr Zeit im weiteren Verlauf.

Säule 1 – Asset-Erfassungs-Onboarding

Bevor du irgendetwas anderes tust, führe den strukturierten Fragebogen in assets/prompt-templates/asset-intake-questionnaire.md aus. Er fragt nach:

• Seitenverhältnis (16:9 horizontal, 9:16 vertikal oder beide parallel – siehe references/vertical-port.md, wenn beide)
• Dauer in Sekunden (20-45s empfohlen)
• Logo – SVG bevorzugt. Wenn nur PNG, erfasse die nativen Abmessungen, um Pixelbildung beim Skalieren zu verhindern.
• Marken-Hex-Farben (primärer Akzent + 3-6 unterstützende Pastelltöne)
• Schriftart-Stapel (alle müssen auf Google Fonts verfügbar sein)
• Text / Skript – bevorzuge einen vom Benutzer bereitgestellten Entwurf gegenüber der Generierung eines eigenen. Wenn sie kein Skript haben, siehe references/script-development.md.
• Voiceover (optional)
• Soundtrack-Datei – erforderlich für Beat-Sync. Wenn der Benutzer keine hat, wähle aus lizenzfreien Stock-Dateien aus.

Siehe references/asset-intake.md für den vollständigen Erfassungsablauf, einschließlich des minimal lebensfähigen Satzes für Teil-Assets, Namenshygiene beim Kopieren und der Pixelbildungsprüfung für die Hochskalierung von Assets.

Säule 2 – Referenz-Video-Vibe-Workflow

Bevor du Szenen schreibst, frage den Benutzer nach 2-3 YouTube-Referenzvideos, deren Vibe er sich wünscht. Erstelle dann für jedes eine Regie-Analyse.

Zwei Pfade werden unterstützt (siehe references/reference-video-vibe.md):

• Automatisiert (bevorzugt, wenn verfügbar) – wenn der Benutzer einen GEMINI_API_KEY gesetzt hat, führe scripts/analyze-reference-video.sh <youtube-url> <slug> für jedes Video aus. Verwendet Gemini Pro Preview über curl. Dauert ~30s pro Video. Die Ausgaben landen in references/gemini-<slug>.md.
• Manuell (funktioniert immer) – öffne aistudio.google.com, füge den Prompt aus scripts/reference-video-prompt.md zusammen mit der YouTube-URL ein, kopiere das Ergebnis zurück in eine Datei. Unbequem, liefert aber gleichwertig nutzbare Ausgaben. Verwende dies, wenn die API nicht verfügbar ist.

Das Vokabular der Regieverben (Push-Through, Whip-Pan, V-Cut Pull-Back, Ink-Mask, Match-Cut Zoom) ist die tragfähigste Ausgabe – es gibt dir spezifische Bewegungsprimitive, um die herum du aufbauen kannst.

Säule 3 – Soundtrack-Beat-Sync

Szenengrenzen sollten auf Snares (dem rhetorischen „Drum-Hit“-Gefühl) landen. Interne Ereignisse (Klicks, Karten-Landungen, Zählerstarts) sollten innerhalb der Szene entweder auf Kicks oder Snares landen.

Die Pipeline:

1. Führe scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json aus. Gibt BPM, First-Kick-Frame, Snare-Timestamps + Frames aus.
2. Integriere in ein einzelnes Konstantenobjekt für das Timing (siehe assets/code-templates/theme-v2.ts). Jede Szene <Sequence from={...} durationInFrames={...}> bezieht sich daraus.
3. Führe nach Phase 6 (Szenen gebaut) scripts/align-internal-events.py gegen beats.json + eine Liste von In-Szene-Ereignissen aus, um sie auf die nächsten Beats innerhalb von ±6 Frames zu verschieben. Dies ist die Iteration mit dem zweithöchsten Hebel nach dem initialen Render – das Publikum spürt nicht-beat-genaue interne Ereignisse als „Rhythmus manchmal daneben“, ohne genau sagen zu können, warum.
4. Verwende die Hilfsfunktionen isSnare(n) / isKick(n), um im Entwicklungsmodus Behauptungen aufzustellen.
5. Führe scripts/check-typing-budget.py gegen alle TypedText/TypedChars aus, um zu überprüfen, ob sie innerhalb der Szenendauer passen. Schneidet Bildschirmtippvorgänge ab, bevor sie ausgeliefert werden.

Vollständige Mathematik, Hilfsfunktionen, interne Ereignisausrichtung und die Tipp-Budget-Prüfung in references/beat-sync.md.

---

Angrenzende Fähigkeiten – wenn die Grundlagen nicht ausreichen

Diese decken Situationen ab, die über die Standard-„All-Motion-Graphics, einfach-einen-Screenshot-aufnehmen“-SaaS-Demo hinausgehen. Lese die entsprechende Referenz, wenn die Situation des Benutzers sie erfordert.

Drehbuchentwicklung – wenn der Benutzer kein Skript hat

Die meisten Benutzer kommen mit einer vagen Produktidee, nicht mit einem fertigen Bildschirm-für-Bildschirm-Konzept. references/script-development.md führt durch einen strukturierten Dialogablauf, der eine 4-Akt-Gliederung + festgelegten Bildschirm-für-Bildschirm + festgelegte Text-Referenzseite produziert, bereit für die Einspeisung in das Pflichtenheft.

B-Roll-Integration – wenn der Film Live-Action- oder Collage-Ebenen verwendet

Wenn der Benutzer Stock-Material, Collage-Clips oder Videos hat, die er als Hintergrundebene verwenden möchte, verwende references/b-roll-integration.md und die BRollLayer-Vorlage. B-Roll kann ein Hintergrund mit voller Deckkraft oder eine Textur mit geringer Deckkraft sein; das Primitiv handhabt Trim, Fade, Blend-Modi und fps-korrektes Timing.

(Frühere Versionen dieses Skills empfahlen, Live-Action-Arbeiten an Premiere/DaVinci zu senden. Das ist falsch, wenn das B-Roll als Ebene unter Bewegtgrafiken verwendet wird – Remotion handhabt dies gut und die Produktion in einem Tool zu belassen, ist ein Produktivitätsgewinn.)

Schematische UI-Treue – wenn das Produkt keine echte UI zum Aufnehmen hat

Wenn das Produkt eine Chrome-Erweiterung, eine API oder in einer frühen Phase ist und es keine echte Produkt-UI zum Screenshoten gibt, deckt references/schematic-ui-fidelity.md ab, wie man schematische UIs erfindet, die als poliert rüberkommen, ohne gegen reale Plattformen (LinkedIn, Gmail, Slack) zu verstoßen. Drei Referenzmuster: Profilkarte, E-Mail-Composer, API-Panel – Code-Vorlagen in assets/code-templates/Schematic*.tsx.

Klickpositionierung – die #1 Iterations-Frustrationsquelle

Mausklicks, die Buttons verfehlen, ist die häufigste Benutzerbeschwerde in Produktionen. references/click-positioning.md deckt drei Ansätze ab (Refs, berechnete Positionskonstanten, Debug-Overlay) – wähle einen im Voraus. Die Kosten, dies falsch zu machen, sind mehrere vollständige Renderzyklen pro Szene.

Schreibstil – KI-Verrat aus benutzersichtbaren Texten fernhalten

Gedankenstriche, geschweifte Anführungszeichen und bestimmte Phrasierungs-Ticks schreien „KI-generiert“. references/writing-style.md ist der Standard-Styleguide mit einer Pre-Render-grep-Prüfung, die diese erwischt. Wenn der Benutzer einen eigenen Markenstimmen-Leitfaden hat, bevorzuge diesen.

---

Ideale Abfolge

Der vollständige End-to-End-Ablauf. Siehe references/ideal-sequence.md für die kommentierte Version mit Begründung.

1. Sammle zuerst die Eingaben, schreibe Code zuletzt. Führe den Asset-Erfassungs-Fragebogen aus.
2. Entwickle das Skript, wenn der Benutzer keins hat – references/script-development.md.
3. Erstelle Referenz-Video-Analysen – automatisiert über scripts/analyze-reference-video.sh oder manuell über AI Studio.
4. Erkenne Beats und schreibe das Timing-Konstantenobjekt. scripts/detect-beats.py → theme-v2.ts. Jeder Szenenstart leitet sich von Beats ab.
5. Richte Remotion manuell ein. Minimales package.json / tsconfig.json / remotion.config.ts. Niemals npx create-video innerhalb eines Git-Repos.
6. Registriere Debug-Kompositionen pro Szene in Root.tsx. Wesentliche Beschleunigung. Das Durchsuchen einer 5-Sekunden-Szene ist 30x schneller als der vollständige Master.
7. Lade jede Schriftart auf der obersten Ebene von Root.tsx mit subsets: ["latin"].
8. Verwende Bindestriche in Kompositions-IDs (v2-Scene06, niemals v2_Scene06).
9. Rufe superpowers:brainstorming mit visuellem Begleiter für Stil-/Layout-Entscheidungen auf. HTML-Mockups schlagen Prosa jedes Mal.
10. Schreibe das Pflichtenheft. docs/superpowers/specs/YYYY-MM-DD-<name>-design.md. Füge einen Abschnitt zur schematischen UI-Treue hinzu, falls erforderlich.
11. Überprüfe das Pflichtenheft selbst, dann lass es vom Benutzer genehmigen. Kein Code bis zur grünen Licht.
12. Rufe superpowers:writing-plans auf. Überprüfe die Planvorlagen-Hygiene vor dem Dispatchen (siehe references/project-scaffold.md).
13. Baue zuerst die Animationsprimitiven (TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack nach Bedarf). Dann schematische UI-Karten. Dann Szenen. Dann Master.
14. Rufe superpowers:subagent-driven-development auf. Begrenze Subagenten-Batches auf 3-4 Dateien pro Dispatch – größere Batches verlaufen manchmal mitten in der Aufgabe aus dem Kontext. Siehe references/iteration-playbook.md.
15. Rendere Szene 1 einzeln als Spot-Test. Etabliere den Stil. Hole die Benutzerzustimmung ein, bevor es weitergeht.
16. Iteriere in Wellen. Begrenze jede Welle auf 5-8 Korrekturen. Führe den internen Ereignisausrichtungslauf einmal nach dem Basis-Render durch – dieser eine Durchgang strafft den Rhythmus merklich.
17. Master-Render in Veröffentlichungsqualität. --crf=14 --image-format=png (HD) oder --crf=15 --image-format=png --scale=2 (4K). Siehe references/render-export.md.
18. Überprüfe stichprobenartig gegen die Beat-Map bei 0,5x Geschwindigkeit.

---

Referenzindex

Das Verzeichnis references/ enthält die Tiefe. Lade nur das, was du für die aktuelle Phase benötigst.

• ideal-sequence.md – der vollständige kommentierte Ablauf mit Begründung
• prereq-check.md – was vor dem Start zu überprüfen ist
• asset-intake.md – vollständiger Erfassungsablauf, Teil-Asset-Ausweichlösung, Asset-Hochskalierungsprüfung, Namenshygiene
• script-development.md – Bildschirm-für-Bildschirm-Methodik, wenn der Benutzer kein Skript hat
• reference-video-vibe.md – Gemini-Analyseprotokoll (API / CLI / AI Studio-Pfade)
• beat-sync.md – Beat-Grid-Mathematik, Szenengrenzenregel, interne Ereignisausrichtung, Tipp-Budget-Prüfung
• project-scaffold.md – minimales Remotion-Setup, Commit-Checkliste, Planvorlagen-Hygiene, .gitignore-Grundlagen
• animation-patterns.md – TypedText, MaskReveal, PopIn, ZoomPunch, FloatingElements, plus Erweiterungen
• b-roll-integration.md – BRollLayer-Muster, Deckkraft-/Blend-Behandlungen, Render-Performance
• schematic-ui-fidelity.md – Design gefälschter UI, die als poliert rüberkommt
• click-positioning.md – drei Ansätze, um Mausklicks auf den richtigen Zielen landen zu lassen
• writing-style.md – Gedankenstriche und andere KI-Verrate, die in Bildschirmtexten zu vermeiden sind
• cursor-math.md – Hotspot-Offset, Keypoints, Scale-Ratio-Transformation
• iteration-playbook.md – Wellenstruktur, Batch-Reviews, Subagenten-Batching, Studio-Hot-Reload-Neustarts
• render-export.md – HD/4K-Render-Befehle, CRF-Begründung
• gotchas.md – Kompositions-ID-Unterstriche, Schriftart-Warnungen, kursives Laden, MaskReveal-Scale-Fettnäpfchen
• vertical-port.md – 9:16-Reel-Porting-Disziplin

Assets

• assets/prompt-templates/ – Ausfüllvorlagen für Asset-Erfassung, Pflichtenhefte, Beat-Sheets
• assets/code-templates/ – kampferprobte Komponenten (Theme-Konstanten, Easings, Cursor, MaskReveal, TypedText, PopIn, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack, SchematicProfileCard, SchematicEmailComposer, SchematicApiPanel, Act2Master, Act2MasterVertical)

Skripte

• scripts/detect-beats.py – librosa-betriebenes Beat-Tracking. Gibt BPM, ersten Kick, Snare/Kick-Frames bei Ziel-fps aus.
• scripts/analyze-reference-video.sh + scripts/reference-video-prompt.md – Gemini Pro-Wrapper für YouTube-Regie-Analysen.
• scripts/align-internal-events.py – Beat-Ausrichtung von In-Szene-Ereignissen innerhalb von ±Toleranz-Frames.
• scripts/check-typing-budget.py – Überprüfe, ob TypedText/TypedChars vor dem Render in die Szenendauer passt.

---

Wann der Skill NICHT verwendet werden sollte

• Tiefe Iteration in einem bestehenden Remotion-Projekt. Wenn der Benutzer 20+ Commits in einem Film hat und nach Welle N+1 Tweaks fragt, führe keine erneute Erfassung durch. Lade references/iteration-playbook.md und references/beat-sync.md und leg los.
• Nicht-SaaS-Demos. Event-Zusammenfassung, Testimonial-Montage, Tutorial-Screencast – die Beat-Sync + Produkt-UI-Karten-Muster passen nicht sauber.
• Dokumentation oder Talking-Head-Aufnahmen als Subjekt. Dieser Skill handhabt B-Roll als Ebene unter Bewegtgrafiken. Wenn Live-Action das Subjekt des Films ist (Interviews, Unboxing, Walkthroughs), verwende einen nicht-linearen Editor wie Premiere, DaVinci oder Final Cut.