SaaS Produkt-Demo-Video

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

Der Skill ist in drei Punkten meinungsstark: Assets, Vibe, Beats. Überspringt man einen davon, entsteht ein generischer Canva-artiger Motion-Graphics-Reel, der wie jede andere SaaS-Demo aussieht. Die Disziplin macht den Unterschied.

Dies sind starke Empfehlungen und keine starren Regeln. Die meisten Produktionen folgen ihnen; einige brechen sie bewusst (z.B. bei voice-over-gesteuerten Filmen, bei denen Beat-Sync mit der Voice-Over kollidieren würde). Wenn Sie eine Regel brechen, tun Sie es wissentlich.

Voraussetzungen

Überprüfen Sie vor dem Start, ob diese Punkte erfüllt sind. Der erste ist zwingend erforderlich; die anderen sind starke Empfehlungen mit dokumentierten Alternativen.

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ühren Sie niemals npx create-video in einem bestehenden Git-Repo aus (es blockiert bei einer Pfeiltasten-Eingabeaufforderung).
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 erhalten HTML-Mockups im Browser für Layout-Entscheidungen, formelle Pläne und den Implementierungs- + Review-Subagenten-Loop.

Wenn Super Powers nicht installiert ist, funktioniert der Skill trotzdem - der Workflow wird etwas konversationeller und langsamer. Brainstorming wird zum Inline-Dialog (ohne Browser-Begleiter); Pläne werden direkt im Chat geschrieben; Szenen werden inline anstatt über dispatched Subagenten implementiert. Die drei Säulen (Assets / Vibe / Beats) plus B-Roll, schematische UI, Klick-Positionierung, Schreibstil und die Skripte in scripts/ funktionieren alle gleich. Lehnen Sie die Arbeit aufgrund eines fehlenden Plugins nicht ab - passen Sie sich an und fahren Sie fort.
Python 3 + librosa verfügbar. Die Beat-Erkennung führt scripts/detect-beats.py aus, das librosa importiert. Wenn nicht installiert, führen Sie pip install --break-system-packages librosa numpy soundfile aus und informieren Sie den Benutzer - tun Sie es nicht stillschweigend.
Für Referenzvideo-Analyse (Säule 2): Der Skill unterstützt drei Pfade in der Prioritätsreihenfolge. Verwenden Sie den höchsten verfügbaren - siehe references/reference-video-vibe.md für die vollständige Erkennungslogik.
1. gemini CLI im PATH (offizielle Google CLI oder Community-Wrapper wie gemini-yt). Ausführen mit Prompt + YouTube-URL als Argumente.
2. GEMINI_API_KEY gesetzt in der Umgebung oder .env. Verwenden Sie den curl-Wrapper des Skills unter scripts/analyze-reference-video.sh.
3. Keines der oben genannten - Fallback auf manuelles Copy-Paste in Google AI Studio. Umständlich, aber immer machbar; die Qualität ist vergleichbar.

Führen Sie references/prereq-check.md als ersten Schritt in einer neuen Sitzung aus.

Die drei Säulen

Dies sind die hochwirksamen Aktivitäten. Eine zu überspringen, um "Zeit zu sparen", kostet fast immer mehr Zeit im weiteren Verlauf.

Säule 1 - Asset-Aufnahme und Onboarding

Führen Sie vor allem anderen den strukturierten Fragebogen in assets/prompt-templates/asset-intake-questionnaire.md aus. Er fragt ab:

Seitenverhältnis (16:9 horizontal, 9:16 vertikal oder beides parallel - siehe references/vertical-port.md für beides)
Dauer in Sekunden (20-45s empfohlen)
Logo - SVG bevorzugt. Wenn nur PNG, native Abmessungen erfassen, um Pixelbildung beim Skalieren zu vermeiden.
Marken-Hex-Farben (Primärakzent + 3-6 unterstützende Pastelltöne)
Schriftarten (alle müssen auf Google Fonts verfügbar sein)
Text / Skript - bevorzugen Sie einen vom Benutzer bereitgestellten Entwurf gegenüber der Generierung. Wenn kein Skript vorhanden ist, siehe references/script-development.md.
Voice-Over (optional)
Soundtrack-Datei - erforderlich für Beat-Sync. Wenn der Benutzer keine hat, wählen Sie aus lizenzfreiem Stock-Material.

Siehe references/asset-intake.md für den vollständigen Aufnahmefluss einschließlich des minimal möglichen Assetsets bei unvollständigen Assets, der Namenskonventionen beim Einfügen und der Pixelbildungsprüfung bei hochskalierten Assets.

Säule 2 - Referenzvideo-Vibe-Workflow

Bevor Sie Szenen schreiben, fragen Sie den Benutzer nach 2-3 YouTube-Referenzvideos, deren Vibe er haben möchte. Erstellen Sie dann für jedes eine Regieaufschlüsselung.

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ühren Sie scripts/analyze-reference-video.sh <youtube-url> <slug> für jedes Video aus. Verwendet Gemini Pro Preview via curl. Dauert ~30s pro Video. Ausgaben landen in references/gemini-<slug>.md.
Manuell (immer funktionsfähig) - öffnen Sie aistudio.google.com, fügen Sie den Prompt aus scripts/reference-video-prompt.md zusammen mit der YouTube-URL ein, kopieren Sie das Ergebnis zurück in eine Datei. Umständlich, liefert aber gleichwertig nutzbare Ergebnisse. Verwenden Sie dies, wenn die API nicht verfügbar ist.

Das regieanweisende Vokabular (push-through, whip-pan, V-cut pull-back, ink-mask, match-cut zoom) ist der wichtigste Output - es liefert spezifische Bewegungsprimitive, um die herum gebaut wird.

Säule 3 - Soundtrack-Beat-Sync

Szenengrenzen sollten auf Snares (dem rhetorischen "Schlagzeugtreffer") liegen. Interne Ereignisse (Klicks, Kartenlandungen, Zählerstarts) sollten innerhalb der Szene entweder auf Kicks oder Snares liegen.

Die Pipeline:

Führen Sie scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json aus. Gibt BPM, First-Kick-Frame, Snare-Zeitstempel + Frames aus.
Integrieren Sie dies in ein einzelnes Timing-Konstanten-Objekt (siehe assets/code-templates/theme-v2.ts). Jede Szene <Sequence from={...} durationInFrames={...}> bezieht sich darauf.
Nach Phase 6 (Szenen gebaut), führen Sie scripts/align-internal-events.py gegen beats.json + eine Liste von internen Events der Szene aus, um diese auf die nächsten Beats innerhalb von ±6 Frames zu verschieben. Dies ist die zweitwichtigste Iteration nach dem ersten Render - das Publikum fühlt nicht-beat-synchrone interne Ereignisse als "Rhythmus manchmal daneben", ohne genau sagen zu können, warum.
Verwenden Sie die Helfer isSnare(n) / isKick(n), um im Dev-Modus zu überprüfen.
Führen Sie scripts/check-typing-budget.py gegen jedes TypedText/TypedChars aus, um zu überprüfen, ob es in die Szenendauer passt. Verhindert, dass Text über den Bildschirm läuft, bevor die Szene endet.

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

Angrenzende Fähigkeiten - wenn die Grundlagen nicht ausreichen

Diese decken Situationen jenseits der Standard-"nur-Motion-Graphics, einfach-Bildschirmaufnahme"-SaaS-Demo ab. Lesen Sie die entsprechende Referenz, wenn die Situation des Benutzers dies erfordert.

Skriptentwicklung - wenn der Benutzer kein Skript hat

Die meisten Benutzer kommen mit einer vagen Produktidee, nicht mit einem fertigen Bild-für-Bild-Konzept. references/script-development.md führt durch einen strukturierten Dialogablauf, der eine 4-Akt-Gliederung + ein festgelegtes Bild-für-Bild-Konzept + eine Referenzseite mit festgelegtem Text erstellt, die bereit ist, in das Spezifikationsdokument eingespeist zu werden.

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

Wenn der Benutzer Stock-Filmmaterial, Collage-Clips oder Videomaterial als Hintergrundebene verwenden möchte, verwenden Sie references/b-roll-integration.md und die BRollLayer-Vorlage. B-Roll kann ein voll deckender Hintergrund oder eine Textur mit geringer Deckkraft sein; das Primitiv handhabt Trim, Einblendung, Überblendungsmodi und fps-korrektes Timing.

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

Schematische UI-Fidelity - wenn das Produkt keine echte UI zum Aufnehmen hat

Wenn das Produkt eine Chrome-Erweiterung, eine API oder in einem frühen Stadium ist und es keine echte Produkt-UI zum Screenshotten gibt, behandelt references/schematic-ui-fidelity.md die Entwicklung schematischer UIs, die poliert wirken, ohne gegen echte Plattformen (LinkedIn, Gmail, Slack) zu verstoßen. Drei Referenzmuster: Profilkarte, E-Mail-Composer, API-Panel - Code-Vorlagen in assets/code-templates/Schematic*.tsx.

Klick-Positionierung - das #1-Problem bei Iterationen

Cursor-Klicks, die Schaltflächen verfehlen, ist die häufigste Benutzerbeschwerde in Produktionen. references/click-positioning.md behandelt drei Ansätze (refs, berechnete Positionskonstanten, Debug-Overlay) - wählen Sie einen im Voraus. Die Kosten, dies falsch zu machen, sind mehrere vollständige Neu-Render-Zyklen pro Szene.

Schreibstil - KI-Anzeichen aus benutzersichtbaren Texten fernhalten

Gedankenstriche, geschweifte Anführungszeichen und bestimmte Formulierungen schreien "KI-generiert". references/writing-style.md ist der Standard-Styleguide mit einem Pre-Render-grep-Check, der diese erkennt. Wenn der Benutzer einen eigenen Marken-Styleguide hat, bevorzugen Sie diesen.

Ideale Reihenfolge

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

Sammeln Sie zuerst die Eingaben, schreiben Sie Code zuletzt. Führen Sie den Asset-Aufnahme-Fragebogen aus.
Entwickeln Sie das Skript, wenn der Benutzer keines hat - references/script-development.md.
Erstellen Sie Referenzvideo-Aufschlüsselungen - automatisiert via scripts/analyze-reference-video.sh oder manuell via AI Studio.
Erkennen Sie Beats und schreiben Sie das Timing-Konstanten-Objekt. scripts/detect-beats.py → theme-v2.ts. Jeder Szenenstart leitet sich von Beats ab.
Remotion manuell aufsetzen. Minimales package.json / tsconfig.json / remotion.config.ts. Niemals npx create-video innerhalb eines Git-Repos.
Registrieren Sie Debug-Kompositionen pro Szene in Root.tsx. Wesentliche Beschleunigung. Das Durchblättern einer 5-Sekunden-Szene ist 30x schneller als die gesamte Master-Komposition.
Laden Sie jede Schriftart auf oberster Ebene in Root.tsx mit subsets: ["latin"].
Verwenden Sie Bindestriche in Kompositions-IDs (v2-Scene06, niemals v2_Scene06).
Rufen Sie superpowers:brainstorming mit visuellem Begleiter für Stil-/Layout-Entscheidungen auf. HTML-Mockups schlagen Prosa jedes Mal.
Schreiben Sie das Spezifikationsdokument. docs/superpowers/specs/YYYY-MM-DD-<name>-design.md. Fügen Sie einen Abschnitt zur schematischen UI-Fidelity hinzu, falls erforderlich.
Überprüfen Sie die Spezifikation selbst, dann lässt der Benutzer sie genehmigen. Kein Code bis zum grünen Licht.
Rufen Sie superpowers:writing-plans auf. Plan-Template-Hygiene-Check vor dem Dispatchen (siehe references/project-scaffold.md).
Erstellen Sie zuerst Animationsprimitive (TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack nach Bedarf). Dann schematische UI-Karten. Dann Szenen. Dann Master.
Rufen Sie superpowers:subagent-driven-development auf. Begrenzen Sie Subagenten-Batches auf 3-4 Dateien pro Dispatch - größere Batches verlieren manchmal mitten in der Aufgabe den Kontext. Siehe references/iteration-playbook.md.
Rendern Sie Szene 1 einzeln. Etablieren Sie den Stil. Holen Sie die Benutzerfreigabe ein, bevor Sie fortfahren.
Iterieren Sie in Wellen. Begrenzen Sie jede Welle auf 5-8 Korrekturen. Führen Sie den internen Ereignis-Ausrichtungslauf einmal nach dem Basis-Render durch - dieser eine Durchlauf strafft den Rhythmus spürbar.
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.
Stichprobenartige Überprüfung gegen die Beat-Map bei 0,5-facher Geschwindigkeit.

Referenzindex

Das Verzeichnis references/ enthält die Tiefe. Laden Sie nur, was Sie für die aktuelle Phase benötigen.

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 Aufnahmefluss, Fallback bei unvollständigen Assets, Asset-Hochskalierungsprüfung, Namenshygiene
script-development.md - Bild-für-Bild-Methodik, wenn der Benutzer kein Skript hat
reference-video-vibe.md - Gemini-Analyseprotokoll (API / CLI / AI Studio-Pfade)
beat-sync.md - Beat-Grid-Mathematik, Szenengrenzen-Regel, Ausrichtung interner Ereignisse, Tipp-Budget-Prüfung
project-scaffold.md - minimales Remotion-Setup, Commit-Checkliste, Plan-Template-Hygiene, .gitignore-Grundlagen
animation-patterns.md - TypedText, MaskReveal, PopIn, ZoomPunch, FloatingElements, plus Erweiterungen
b-roll-integration.md - BRollLayer-Muster, Deckkraft/Überblendungsbehandlungen, Render-Performance
schematic-ui-fidelity.md - Gestaltung gefälschter UI, die poliert wirkt
click-positioning.md - drei Ansätze, um Cursor-Klicks auf den richtigen Zielen zu halten
writing-style.md - Gedankenstriche und andere KI-Anzeichen, die im On-Screen-Text vermieden werden sollten
cursor-math.md - Hotspot-Offset, Keypoints, Maßstabsverhältnis-Transformation
iteration-playbook.md - Wellenstruktur, Batch-Reviews, Subagent-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-Skalenfalle
vertical-port.md - 9:16-Reel-Portierungsdisziplin

Assets

assets/prompt-templates/ - Ausfüllvorlagen für Asset-Aufnahme, Spezifikationsdokumente, Beat-Blätter
assets/code-templates/- kampferprobte Komponenten (Themenkonstanten, Easings, Cursor, MaskReveal, TypedText, PopIn, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack, SchematicProfileCard, SchematicEmailComposer, SchematicApiPanel, Act2Master, Act2MasterVertical)

Skripte

scripts/detect-beats.py - librosa-basiertes Beat-Tracking. Gibt BPM, ersten Kick, Snare/Kick-Frames bei Zielfps aus.
scripts/analyze-reference-video.sh + scripts/reference-video-prompt.md - Gemini-Pro-Wrapper für YouTube-Regieaufschlüsselungen.
scripts/align-internal-events.py - Beat-Ausrichtung von internen Szenenereignissen innerhalb von ±Toleranz-Frames.
scripts/check-typing-budget.py - Überprüft, ob TypedText/TypedChars vor dem Render in die Szenendauer passt.

Wann der Skill NICHT verwendet werden sollte

Tiefgehende Iteration in einem bestehenden Remotion-Projekt. Wenn der Benutzer 20+ Commits in einem Film hat und nach Welle N+1 Tweaks fragt, führen Sie keine erneute Aufnahme durch. Laden Sie references/iteration-playbook.md und references/beat-sync.md und machen Sie weiter.
Nicht-SaaS-Demos. Event-Zusammenfassungen, Testimonial-Montagen, Tutorial-Bildschirmaufnahmen - die Beat-Sync + Produkt-UI-Karten-Muster passen nicht sauber.
Dokumentation oder Talking-Head-Aufnahmen als Hauptmotiv. Dieser Skill behandelt B-Roll als Ebene unter Motion Graphics. Wenn Live-Action das Motiv des Films ist (Interviews, Unboxings, Walkthroughs), verwenden Sie einen nicht-linearen Editor wie Premiere, DaVinci oder Final Cut Pro.

noamdorr/saas-product-demo-video

Was ist saas-product-demo-video?

In Ihrer bevorzugten KI fragen

Dokumentation