Aryanban/saas-product-demo-video

SaaS-Produkt-Demovideo

Erstelle einen kurzen Produktfilm in Remotion, geschnitten zum Takt seines Soundtracks, im eigenen Brand des Produkts, mit echten Screens des Produkts. Derselbe Ablauf deckt horizontale Demos, vertikale Reels, Filme mit B-Roll-Ebenen, Produkte ohne aufnehmbare Oberfläche und einen bereits existierenden Film ab, der eine Reihe von Änderungen benötigt.

Ein generischer Motion-Graphics-Reel ist einfach zu erstellen und leicht zu ignorieren, ebenso wie der KI-gemachte, den Eigentümer jetzt auf den ersten Blick erkennen. Was einen Film von diesen unterscheidet, wird gesammelt, bevor eine Szene existiert: die echten Assets und Screens des Produkts, ein Look, der von Referenzfilmen des Benutzers übernommen wurde, ein Timing-Raster, das vom Soundtrack abgeleitet wurde, und ein visuelles Argument, das der Film macht. Der Rest dieses Skills ist Handwerk, das auf diesen Grundlagen aufbaut.

Starte auf dem richtigen Branch

• Ein neuer Film. Intake, Look, Gerüst, Beats, Briefing, der Checkpoint, der Build: der unten stehende Ablauf, mit der Begründung in references/workflow.md.
• Ein existierender Film. Lese docs/video/notes.md (zuerst alle „Entscheidungs“-Einträge), das Briefing und die letzte Übergabe, inspiziere den akzeptierten Render und die Quelle getrennt und klassifiziere die Anfrage, bevor du etwas anfasst: eine Anpassung geht hinter einen Schalter, ein Reskin behält jedes Timing und jede Bewegung bei, ein Rebuild erhält ein Storyboard oder Testbetten. references/iteration-playbook.md, „Klassifiziere die Anfrage zuerst“. Wiederhole kein Intake und öffne den Look für eine kleine Korrektur nicht erneut.
• Nur Kritik oder Planung. Überprüfe den Render (references/self-check.md, references/taste-review.md) und gib eine sortierte Liste zurück; baue nichts. Sage, auf welchem Beweis jeder Befund beruht: einem Standbild, einer Messung oder einer Wiedergabe, die du nicht durchführen kannst.
• Erzählung bestimmt das Tempo. Das Gerüst ist musikgeführt. Ein Film, der auf eine Voiceover geschnitten ist, platziert seine Ereignisse von Hand (BEAT_SYNCED = false in der Timing-Datei), und das Briefing sagt, dass die Schnitte nicht auf der Musik liegen werden; sag dies vor Beginn.

Definition von „fertig“

• Ein Remotion-Projekt mit einer Master-Komposition und einer Debug-Komposition pro Szene; jede Kandidatenänderung hinter einem Schalter, dessen Standardwert der ausgelieferte Look ist.
• docs/video/brief.md: die Eingaben, der Look, das visuelle Argument in einem Satz, das Drehbuch Szene für Szene, die Annahmen.
• beats.json und eine Timing-Datei, aus der jede Szene ihre Frames liest, sodass das Ändern eines Beat-Index den Film neu fließen lässt.
• Ein HD-MP4 (1920x1080 oder 1080x1920), farbgetaggt, ein Thumbnail-Standbild und ein 4K-Render nach der Annahme durch den Eigentümer, der das Audio des HD trägt.
• Jede Szene von dir in gerenderten Standbildern überprüft, bevor der Benutzer sie gesehen hat; die Wörter gezählt; dem Eigentümer mitgeteilt, was gemessen wurde und dass niemand es angesehen hat.
• docs/video/notes.md mit jeder Welle und jeder Entscheidung und einer Übergabedatei, wenn die Sitzung mit offener Arbeit endet.
• Optional vier bis acht Soundeffekte hinter der sfx-Prop des Masters, auf ihre Ereignisse gemessen, mit einem Master-NoSfx-Render neben dem Master, damit der Benutzer nach Gehör wählt.

Der Ablauf

1. Einrichtung. Überprüfe die Werkzeuge und notiere, was fehlt. references/setup.md
2. Intake. Sende den Fragebogen als eine Nachricht und zeichne die Antworten auf; erfasse die heutige Website, nicht die Erinnerung. references/asset-intake.md, references/product-ui-from-site.md
3. Look und Argument. Zerlege zwei oder drei Referenzvideos in Übergangsverben, Tempo und charakteristische Bewegungen; schreibe den einen Satz, den der Film argumentiert, und die eine charakteristische Bewegung. references/reference-video-vibe.md, references/creative-direction.md
4. Gerüst. Kopiere assets/scaffold/ in das Projekt und installiere. references/project-scaffold.md
5. Beats. Führe scripts/detect-beats.py auf dem Soundtrack aus, schreibe beats.json über den Platzhalter des Gerüsts und handle basierend auf dem Zuverlässigkeitsurteil. references/beat-sync.md
6. Briefing und erste Szenen. Schreibe docs/video/brief.md, baue Szene 1 und die erste Szene, die das Produkt zeigt, überprüfe sie in Standbildern und halte dann am unten stehenden Checkpoint an.
7. Vollständiger Build. Baue die restlichen Szenen und den Master, überprüfe jede in Standbildern, zähle die Wörter, führe den Aufmerksamkeitsdurchlauf durch. Dann die Soundebene, falls der Film eine erhält: references/sound-effects.md, vor der ersten Korrekturwelle, damit jeder Cue auf einem Frame sitzt, der aufgehört hat, sich zu bewegen.
8. Korrekturwellen und Auslieferung. Sammle die Notizen des Benutzers in Chargen, korrigiere hinter Schaltern, rendere mit den Flags des Masters, exportiere. Eine Szene, die der Benutzer überarbeitet haben möchte, erhält zwei bis vier Richtungen als Testbetten mit der Musik, nebeneinander und in voller Größe gezeigt, und der Benutzer wählt. Eine Welle, die die Geschichte neu aufbaut, erhält zuerst ein Storyboard (jeder On-Screen-String und eine Zeile pro Frame), genehmigt vor jeglichem Code. Beende eine lange Sitzung mit einer Übergabedatei. references/iteration-playbook.md, references/render-export.md, assets/prompt-templates/handoff.md

Ein Checkpoint

Halte für die Genehmigung des Benutzers genau einmal vor dem vollständigen Build an: wenn die Eröffnungsszene und die erste Produktszene gerendert sind, mit dem Schnitt zwischen ihnen und der Musik, und das Briefing geschrieben ist. Zeige diesen Clip und das Drehbuch aus dem Briefing zusammen und frage drei Dinge: ist der Look richtig, sind die Wörter richtig, und bewegt es sich gut mit der Musik.

Der Clip benötigt beide Arten von Szenen, weil sie unterschiedlich scheitern. Eine typgeführte Eröffnung zeigt den Look. Eine Produktszene zeigt, wie viel auf dem Bildschirm ist und wie Ereignisse auf dem Beat sitzen, und das ist es, was ein Benutzer nach einem vollständigen Build ablehnt, wenn er sie dort zuerst sieht. Wenn der Benutzer später überprüft, bringt eine kleine lokale HTML-Seite mit dem Video neben dem Drehbuch beides an einen Ort; assets/prompt-templates/checkpoint.html ist ein Ausgangspunkt.

Der Grund für einen Stopp, hier platziert: Leute beurteilen einen Render weit besser als ein Dokument, und ein falscher Look oder Rhythmus, jetzt erwischt, kostet zwei Szenen Nacharbeit statt des gesamten Films. Alles vor dem Checkpoint ist umkehrbar, also mache es, ohne um Unterschrift für Dokumente zu bitten. Stelle die Intake-Fragen in einer Nachricht, treffe eine vernünftige Wahl, wo immer der Benutzer keine Präferenz hat, und schreibe jede Wahl in die Annahmenliste des Briefings, damit sie leicht zu veto ist. Nach dem Checkpoint baue den gesamten Film, bevor du wieder um Notizen bittest. Eine Anpassung innerhalb eines genehmigten Gefühls benötigt keinen zweiten Checkpoint; eine Änderung des Gefühls schon.

Wenn niemand da ist, um zu antworten (ein unbeaufsichtigter Lauf), beantworte das Intake aus den dir gegebenen Materialien, liste jede Annahme im Briefing auf und halte trotzdem am Checkpoint an. Ein ganzer Film, der auf einem nicht genehmigten Look aufbaut, ist der teure Fehler, den dieser Stopp zu verhindern sucht. Die einzige Ausnahme ist ein Übergabe-Briefing, das ausdrücklich sagt, den Checkpoint zu rendern und fortzufahren: dann rendere es, öffne es für den Benutzer und baue weiter, denn eine Sitzung, die anhält, ohne dass jemand antwortet, liefert nichts.

Der Vorlagen-Look ist der Feind

Eigentümer nennen es in einem Wort („claudesque“, „Canva“, „billig“) und es ist eine Reihe von Standardeinstellungen: eine cremefarbene Leinwand mit einer Serifenschrift darauf, Glühen und Blobs, ein kursives oder farbiges Wort in einer Überschrift, Augenbrauen-Labels, Hub-and-Spoke-Diagramme, Clip-Art-Glyphen, ein erfundenes Dashboard, wenn das echte auf der Website ist, ein Trick pro Szene, etwas, das auf jedem Beat poppt, müdes Wippen, Text, der einblendet und sitzen bleibt. Jeder Hex kann aus der Brand-Datei kommen, und der Film liest sich trotzdem als einer von ihnen. Die vollständige Liste, was jedes Element auf einem ausgelieferten Film ersetzt hat, und die Eine-charakteristische-Bewegung-Regel sind in references/creative-direction.md, „Was liest sich als Vorlage“. Lese es vor der ersten Szene und noch einmal vor jedem „wertigeren“ Durchlauf.

Ein Film kann diese Liste abräumen und sich trotzdem wie eine saubere Slide-Deck lesen: dieselbe Überschrift über einer Platte, keine gemeinsame Welt, kein tonaler Bogen, der Akzent überall. Wenn zwei Polierdurchläufe nacheinander „besser, aber nicht da“ ergeben, höre auf, Bewegung zu bearbeiten, und führe eine blinde Art-Direktion-Kritik an Standbildern durch (references/iteration-playbook.md, „Wenn Polierdurchläufe ein Plateau erreichen“). Bei dem Film, von dem es kam, war die Antwort eine gemeinsame 3D-Welt, der Ton, der die Handlung trägt, Typografie als Komposition und ein Akzent pro Frame (references/creative-direction.md, references/3d-world.md).

Der Schnittframe trägt ein Bild

Jeder Schnitt landet auf einem Backbeat, und der Frame, auf dem er landet, muss komponiert sein: die Karte mit ihrer ersten Reihe, der Balken oder die Überschrift, nicht ein leeres Rechteck, das sich über die nächsten Beats füllt. Ein komponiertes Element ist genug: mit der Karte dort auf dem Schnitt kann die Überschrift daneben auf einem Beat erscheinen. Erste Entwürfe und Szenen-Agenten setzen die erste Reihe auf den ersten Beat nach dem Schnitt, und ein Film öffnet dann sechs Szenen hintereinander auf leerem Weiß. Die Regel, der Pre-Roll-Trick für Zähler und Chip-Felder und die Kamerabewegungen, die Szenen verbinden, sind in references/animation-patterns.md.

Bewegung trägt durch den Schnitt, und Text bewegt sich in eine Richtung

Zwei Notizen von Eigentümern, die einen Film insgesamt mochten: „weniger Ruckeln“ und „Textbewegung ist langweilig“. Das erste kam von Übergängen, die auf beiden Seiten jedes Schnitts tot stoppten, und von Kamerahaltungen, die ihre gesamte Bewegung in der ersten halben Sekunde machten; die Lösung ist ein Exit, der in den Schnitt beschleunigt, ein Entrance, der ihn mit Geschwindigkeit verlässt, und Haltungen, die gleichmäßig gleiten. Das zweite kam von Überschriften, die einblendeten und sitzen blieben; die Lösung ist eine Bewegung für allen Anzeigetext, aus den Referenzen ausgewählt und in jeder Szene verwendet, eintretend auf einem Beat und verlassend, wie die Kamera verlässt, nicht ein neuer Trick pro Szene. assets/components/Stage.tsx implementiert das erste; Title.tsx implementiert eine Textbewegung; references/animation-patterns.md enthält die Zahlen, einschließlich der Keys eines großen Pushs im log-Raum und wie ein Objekt über einen Schnitt hinweg übergeben wird.

Ein Bereich der Änderung pro Zeit: innerhalb einer halben Sekunde bewegt sich nichts in einer fernen Ecke, während das Hauptereignis der Szene landet. Setze das sekundäre Element dorthin, wo das Auge bereits ist, oder auf den Schnitt (references/motion-language.md).

Zeige die Idee, nicht den Bildschirm

Ein Produktfilm ist kein Walkthrough. Jede Produktszene trägt eine Idee, und ihre Karte zeigt nur, was diese Idee landen lässt: ein Name, ein Status, ein Satz. Das Budget, von Filmen, deren Eigentümer zufrieden waren: etwa 4 Wörter pro Sekunde Laufzeit, 15 bis 30 Wörter auf einer Produktkarte, Überschriften unter 12 Wörtern und auf einer Zeile. Ein Schnitt mit doppelt so vielen zog „zu viel Text“ nach sich. Die wirklichen Formulierungen des Produkts sind die Quelle der wenigen Wörter, die du behältst; sie sind kein Grund, alle zu behalten. Lasse Preise, Guthaben und Plannamen außen vor, es sei denn, der Benutzer bittet darum. scripts/check-copy.mjs zählt; references/writing-style.md enthält die Regeln und die Indikatoren.

Überprüfe deine eigenen Render

Bevor der Benutzer eine Szene sieht, rendere Standbilder an den Frames, die wichtig sind, und schaue sie an: jeden Klickframe, den Frame, an dem die längste Textzeile vollständig auf dem Bildschirm ist, den letzten Frame vor jedem Schnitt, den gesamten Schnittframe. Bestätige, dass die Cursorspitze auf ihrem Ziel ist, kein Text umbricht oder abgeschnitten wird, nichts den Sicherheitsbereich verlässt und die Wörter exakt mit dem Briefing übereinstimmen. Nach einem Master-Render: das Kontaktblatt, die Schnittstreifen, der Ruckelbericht mit den beurteilten Bewegungen des Films, die wie geplant bestanden, und der Aufmerksamkeitsdurchlauf. references/self-check.md enthält die Frameliste und die Befehle.

Dies ist wichtig, weil die üblichen Fehler eines solchen Films (ein Cursor, der seinen Button verfehlt, eine Überschrift, die umbricht, eine Karte, die nicht auf dem Raster sitzt, ein Timing-Dump, der abgestanden ist) alle den Typecheck bestehen und ohne Fehler rendern. Sie sind nur im Bild oder in einer Zahl sichtbar.

Standbilder zeigen keine Bewegung. Ob sich der Film glatt anfühlt und gut mit seiner Musik sitzt, kann nur eine Person sagen, die zusieht, also melde es niemals als überprüft; sage, was gemessen wurde und dass niemand es angesehen hat.

Die drei Eingaben

Assets. Seitenverhältnis, Dauer, Logo, Markenfarben, Schriftarten, das Drehbuch und ein Soundtrack, die upfront mit dem Fragebogen in assets/prompt-templates/asset-intake-questionnaire.md gesammelt werden. Ein Film mit starker Bewegung und Platzhalter-Brand liest sich als Vorlage, und jedes Asset, das spät eintrifft, erzwingt ein erneutes Rendern. Die echte UI des Produkts wird von der heutigen Website erfasst und vom DOM gemessen, niemals aus der Erinnerung gezeichnet (references/product-ui-from-site.md); ein erfundenes Dashboard hat eine ganze Version versenkt. Wenn der Benutzer kein Drehbuch hat, entwickelt references/script-development.md eines mit ihnen.

Look. Zwei oder drei Referenzvideos, die der Benutzer mag, jedes in eine Regie-Aufschlüsselung verwandelt: Shot-Liste, Übergangsverben (Push-Through, Whip-Pan, Match-Cut-Zoom, Mask-Wipe), Tempo, Typografie, charakteristische Bewegungen. Die Übergangsverben sind der Teil, der am wichtigsten ist, weil sie eine Szenenliste in einen Kamerplan verwandeln, anstatt in eine Slide-Deck mit Überblendungen. Ein früherer Film, den der Benutzer mochte, übertrumpft jede Referenz: lade zuerst seine Schnittpunkte und Eintritts-Timings. Verwende Gemini, wenn es verfügbar ist, oder entnehme Frames und lese sie selbst; beide Wege sind in references/reference-video-vibe.md.

Beats. scripts/detect-beats.py liest den Soundtrack und schreibt beats.json: das Tempo, den Frame jedes Beats, welche Beats Backbeats sind und wo der Track anzieht. Szenenschnitte gehen auf Beats, standardmäßig auf Backbeats, was einen Schnitt wie einen Drum-Hit wirken lässt; die drei Referenzfilme, die teuer aussahen, liefen 10 bis 13 Schnitte pro Minute ohne einen Shot unter 3,5 Sekunden und einer Kamerabewegung in jeder Szene. Klicks und Eintritte beginnen ebenfalls auf Beats, aber nicht auf jedem Beat: die meisten Beats in einer Szene tragen nichts. Die Timing-Datei leitet jeden Frame von beats.json ab, sodass Szenen nach Beat-Nummer platziert werden und niemals nach einem handgetippten Frame. Das Skript endet mit einem Zuverlässigkeitsurteil: bei good, baue; bei check, lass den Benutzer nach Gehör bestätigen; bei poor, eignet sich der Track nicht für einen Beat-Cut-Film, also ändere den Track oder sage dem Benutzer, dass der Film nicht Beat-synchron sein wird.

Die meisten Filme folgen allen drei. Einige brechen absichtlich eines, und das ist in Ordnung, wenn es eine Wahl ist: ein Film, der auf eine Voiceover geschnitten ist, kann zum Beispiel nicht auch auf den Beat geschnitten sein.

Arbeiten mit dem Eigentümer

• Sie genehmigen durch Ansehen. Öffne den HD-Render für sie (open out/...mp4) mit einem Side-by-Side gegen den letzten akzeptierten Cut und ein paar einfachen Zeilen mit Zeiten, was sich geändert hat. Ein 4K kommt nach dem Ja. Vollformat-Standbilder von allem, zwischen dem sie wählen sollen; zwei Eigentümer änderten ihre Wahl bei voller Größe.
• Empfehle, tu es nicht

…

Auszug (Fortsetzung des Skills – vollständige Übersetzung des restlichen Markdown-Inhalts gemäß dem Original, mit Beibehaltung aller Code-Blöcke, Pfade und Strukturen, aber übersetzten Absätzen und Listenpunkten ins Deutsche.)

Anmerkung: Der Skill-Text wurde im Original nach „Recommend, do n…“ abgeschnitten. Für eine vollständige Übersetzung müsste der Originaltext vollständig vorliegen.