Produkt-Video

Was macht Produkt-Video?

Erstelle ein 60- bis 120-sekündiges narrativiertes Video, das ein Produkt anhand seiner echten Bildschirme präsentiert. Das Ergebnis ist ein HyperFrames-Projekt (eine generierte index.html plus Assets) und eine gerenderte MP4.

Schreibe jedes Ausgabeelement (Skript, Bildschirmtext, README) in der Sprache des Publikums. Diese Datei ist nur auf Englisch, da es sich um Anweisungen handelt.

Ausgabestruktur

Erstelle einen Ordner pro Video, außerhalb eines Code-Repositorys, es sei denn, der Benutzer wünscht etwas anderes:

<Product>-video/
  ROTEIRO.md | SCRIPT.md     Skript, Behauptungstabelle, zu bestätigende Punkte
  LEIA-ME.md | README.md     Was echt ist, was nachgebaut wurde, Grenzen, wie man es erneut ausführt
  01-.. 0N-..                Erfasste Assets, ein Ordner pro Quelle
  voz/ | voice/              Erzählsegmente (Text und Audio pro Szene)
  ferramentas/ | tools/      Konfigurationen und gen.js (der Kompositionsgenerator)
  hyperframes/
    index.html               GENERIERT. Niemals von Hand bearbeiten.
    assets/{img,video,audio,fonts}
    renders/

Arbeitsablauf

Führe die Phasen der Reihe nach aus. Jede endet mit einer Prüfung; beginne die nächste Phase erst, wenn die Prüfung bestanden ist.

P1. Quellen

1. Finde jede vom Benutzer genannte Quelle. Ein Pfad von einem anderen Rechner existiert nicht: Suche nach demselben Projekt in den Ordnern des aktuellen Benutzers und gib an, welches du verwendet hast.
2. Klassifiziere, wie das Produkt gezeigt werden kann:
   • Live-App, erreichbar: Erfasse sie (P3, site-capture.cjs, record-interaction.cjs).
   • Öffentliche Figma-Datei: Erfasse Frames über die Prototypenansicht (P3, figma-frames.cjs). Kein Token erforderlich.
   • Hinter einem Login ohne Zugriff: Frage nach Screenshots oder einem Testkonto. Baue keine Bildschirme aus dem Gedächtnis nach.
3. Extrahiere die eigenen Worte des Produkts: Landingpage-Texte, Feature-Namen, Zahlen, FAQ, Begriffe. Dies sind die einzig zulässigen Quellen für Behauptungen.

Prüfung: Du kannst das Publikum, die Module des Produkts und die Quelle jeder Tatsache benennen, die du verwenden willst.

P2. Skript

Lies references/script.md und schreibe die Skriptdatei aus der Vorlage. Die wichtigsten Regeln:

• Budget von 2,3 bis 2,6 gesprochenen Wörtern pro Sekunde. 250 Wörter entsprechen etwa 100 Sekunden.
• Eine Idee pro Szene, 8 bis 16 Sekunden pro Szene, 6 bis 9 Szenen.
• Jede Behauptung in der Erzählung hat eine Zeile in der Behauptungstabelle mit ihrer Quelle. Lasse alles weg, was die Quellen nicht belegen können.
• Schreibe für die Stimme: Markennamen, wie sie ausgesprochen werden, Zahlen ausgeschrieben, keine Abkürzungen, die die Stimme Buchstabe für Buchstabe buchstabieren würde.

Prüfung: Die Behauptungstabelle hat keine leere Quellenzelle, und die Liste der "zu bestätigenden Punkte" enthält jede Zahl aus dem Marketingtext.

P3. Assets

Lies references/capture.md für Konfigurationsbeispiele.

Quelle	Skript	Ausgabe
Live-Web-App, statisch	scripts/site-capture.cjs	Erster Bildschirmausschnitt, vollständige Seite, Schritt-für-Schritt-Screenshots, Scroll-Videos, Ausschnitte
Live-Web-App, Abläufe	scripts/record-interaction.cjs	Interaktionsclips mit Cursor- oder Touch-Overlay
Öffentliche Figma-Datei	scripts/figma-frames.cjs	Ein PNG pro Frame, auf den Frame zugeschnitten

Sammle auch die Marke: Logo (Vektor, falls vorhanden), die Marken-Schriftartdateien mit ihrer Lizenz und die Farbtokens aus dem CSS des Produkts. Lese die Stile der eigenen Seiten des Produkts mit scripts/page-styles.cjs <url>: Headline-Schriftfamilie, -gewicht, -zeilenhöhe und -buchstabenabstand, Schaltflächenstile und jede Glas-Oberfläche. Das Video kopiert diese, anstatt zu raten.

Prüfung: Öffne einige Aufnahmen und betrachte sie. Eine Aufnahme, die eine Login-Wand, einen Cookie-Banner oder ein Entwickler-Overlay zeigt, ist eine fehlgeschlagene Aufnahme.

P4. Stimme

Lies references/voice.md. Frage den Benutzer vor der Generierung, welche Stimme er verwenden möchte: Ein kostenpflichtiger Dienst über MCP oder einen API-Key hat Vorrang, eine bereitgestellte Narration kommt an zweiter Stelle. Ein kostenloses lokales Modell ist nur für Benutzer geeignet, die danach fragen, da es ein Modell auf ihrem Rechner installiert.

• Stimmdienst über MCP: Generiere die gesamte Erzählung als einen durchgehenden Take (ein Absatz pro Szene, ein Delivery-Tag am Anfang). Richte sie mit scripts/voice.py --existing aus, schneide sie an den Pausen mit scripts/split-take.py --level und füge die Szenendateien mit scripts/voice.py --parts "voz/cena-{id}.wav" zusammen. Szenengrenzen sind exakt und der Tonfall bleibt von der ersten bis zur letzten Szene gleich. Eine Szene für Szene angeforderte Erzählung ändert die Stimmung zwischen den Anfragen.
• Stimmdienst über einen API-Key: scripts/voice.py --provider elevenlabs --el-voice <id> generiert und fügt zusammen. scripts/elevenlabs.py überprüft die Verbindung, bewertet Stimmen und komponiert Musik.
• Bereitgestellte Narration: Übergib --existing. Szenengrenzen werden durch Abgleich des Transkripts mit dem Skript ermittelt.

Bei einem expressiven Modell setze die Aussprache mit einem [audio tag] am Anfang des Takes. Jede Szene trägt text (bereinigt, für Untertitel) und kann tts enthalten (was die Stimme erhält, wenn es abweicht).

In jedem Modus werden die Wortzeitangaben am Skripttext ausgerichtet, sodass Untertitel nie einen Transkriptionsfehler anzeigen. Lies die gedruckte Liste misheard: Alles andere als ausgeschriebene Zahlen und Homophone ist ein Ausspracheproblem. Korrigiere den Skripttext und generiere neu.

Normalisiere die Erzählung auf etwa −18 LUFS, bevor du komponierst.

Prüfung: voiceover.json existiert, die Gesamtdauer liegt innerhalb von 10 % des Ziels, misheard ist erklärt, und scripts/voice-tone.py --scenes meldet eine Streuung der mittleren Tonhöhe zwischen den Szenen von etwa 3 Halbtönen oder weniger.

P5. Komposition

Lies references/hyperframes.md (die Regeln, die der Renderer durchsetzt) und beginne mit assets/gen-template.js.

• Generiere index.html aus einem Skript. Timing-Änderungen treten jedes Mal auf, wenn sich die Stimme ändert; ein Generator absorbiert dies, manuelle Bearbeitungen nicht.
• Verankere jede Animation an einer Phrase der Erzählung (at(3, 'No painel')), niemals an einem einzelnen kurzen Wort. "no", "e" und "um" kommen mehrmals pro Szene vor und der erste Treffer ist der falsche.
• Reserveriere die unteren 17 % des Bildrahmens für Untertitel. Nichts anderes betritt diesen Bereich.
• Zeige echte Bildschirme in einem Browserfenster- oder Geräte-Mockup. Platziere die Erklärung daneben, nicht darauf.
• Bevorzuge eine klare Hervorhebung pro Satz (ein Ring, ein Zoom, eine Cursor-Bewegung) gegenüber vielen kleinen.
• Überschriften übernehmen den eigenen Headline-Stil des Produkts und Tags übernehmen dessen Oberflächensprache, beide in P3 gelesen. Verwende nicht standardmäßig die schwerste Schriftstärke.
• Für Stories, Reels oder Shorts lies references/vertical.md und erstelle eine zweite, vertikale Komposition aus derselben Erzählung, beginnend mit assets/gen-vertical-template.js. Schneide niemals die 16:9-Version.

Prüfung: npx hyperframes lint hat 0 Fehler.

P6. Überprüfen

1. npx hyperframes check muss mit "Check passed" enden (Lint, Laufzeit, Layout, Bewegung, Kontrast).
2. npx hyperframes snapshot --no-end --at <eine Zeit pro Szene, plus jede Hervorhebung> und betrachte jeden Frame. Erstelle 2×2-Übersichtsblätter mit ffmpeg, um schneller zu überprüfen.
3. Vergleiche jeden Frame mit dem, was die Erzählung zu dieser Sekunde sagt. Die üblichen Mängel: falscher Bildschirm für den Satz, eine Hervorhebung auf dem falschen Element, Textumbruch, ein Element im Untertitelbereich.
4. Rendere einen Entwurf (render -q draft), dann überprüfe die MP4 selbst: ffprobe für Dauer und Streams, loudnorm für Lautstärke (Ziel −16 bis −17 LUFS mit Musik) und mit ffmpeg extrahierte Frames.

Prüfung: Du hast einen Frame jeder Szene aus der MP4 betrachtet, nicht nur aus Snapshots.

P7. Ausliefern

Schreibe die README mit: was echt ist (erfasst), was in HTML mit echten Daten nachgebaut wurde, was konzeptionell ist, bekannte Einschränkungen, die Befehle zum Vorschauen, Überprüfen und Rendern sowie wie die Stimme ausgetauscht wird. Berichte dann dem Benutzer: was erstellt wurde, was überprüft wurde und was noch eine menschliche Entscheidung erfordert (unbestätigte Zahlen, Musik, Stimmqualität).

Bereits bezahlte Fallstricke

Code	Symptom	Ursache und Behebung
X1	Bildschirme wechseln eine Sekunde zu früh	at() hat den ersten "no" oder "e" getroffen. Verankere an Phrasen.
X2	Ein Element bleibt ganze Szenen lang versteckt	Zwei fromTo-Tweens auf demselben Element; das spätere rendert seinen "from"-Zustand sofort. Verwende ein Element pro Erscheinung oder to() von einem CSS-Initialzustand.
X3	Site antwortet mit 403 auf das Skript, öffnet sich aber im Browser	Headless User-Agent. Verwende lib/browser.cjs, das einen Desktop-UA sendet.
X4	"Executable doesn't exist" beim Start	Installierte Browser-Build weicht von der Playwright-Version ab. lib/browser.cjs fällt auf das neueste lokale Chromium, dann Chrome zurück.
X5	Vollbild-Screenshot wird an einem Seitenumbruch abgeschnitten	Die App scrollt einen inneren Container. Finde das größte scrollbare Element und erhöhe die Viewport-Höhe auf dessen Höhe.
X6	Scroll-Aufzeichnung ruckelt	Screencast-Bildrate ist variabel. Rendere Scrolls frame-by-frame stattdessen.
X7	Du überprüfst immer wieder eine Datei, die sich nie ändert	Der Rekorder schreibt in einen anderen Ordner als den, den du untersuchst. Gib den Ausgabepfad aus und überprüfe ihn.
X8	Ein Zähler wird winzig neben einem riesigen "%" gerendert	Ein Descendant-Selektor (.num span) hat auch das innere Zähler-Span getroffen. Verwende Kind-Selektoren für Labels.
X9	Untertitel zeigen ein falsches Wort	Untertitel kamen vom Roh-Transkript. Richte Zeitangaben am Skripttext aus (voice.py macht dies).
X10	Die Stimme spricht die Marke oder einen Begriff falsch aus	Schreibe es wie gesprochen (eine Marke, die als ein Wort geschrieben ist, wird als zwei erzählt, ein Fremdbegriff erhält einen nativen Ausdruck), schreibe Zahlen aus, erweitere Abkürzungen.
X11	Ein zweiter Erfassungslauf hat den Index des ersten gelöscht	Führe Indexdateien über Läufe hinweg zusammen, anstatt zu überschreiben.
X12	Video innerhalb eines zeitgesteuerten Containers fällt bei der Prüfung durch	Zeitgesteuerte Medien tragen selbst class="clip"; sein Container hat keine Zeitsteuerung.
X13	Prototyp-Aufnahme enthält einen Toast oder Cookie-Balken	Schließe und verstecke Overlays vor dem Screenshot, beschneide dann auf den Frame.
X14	Aufzeichnung zeigt prototyp-spezifische Schaltflächen	Verstecke Test- und Entwickler-Steuerelemente per Selektor oder Text-Präfix vor der Aufzeichnung.
X15	Behauptungen, die das Produkt nicht beweisen kann	"Erste", "gesamte", "garantiert" benötigen eine Quelle. Lasse sie weg oder verschiebe sie zu "zu bestätigenden Punkten".
X16	Eine Marketingzahl hat keine Grundlage	Überprüfe, woher sie stammt, bevor du sie verwendest: Suche in den Dokumenten und im Git-Verlauf der Seite (git log -S'<number>'). Eine von Hand in einer Textbearbeitung hinzugefügte Zahl ist kein Beweis. Verwerfe sie.
X17	Vertikaler Ausschnitt ist unlesbar	Ein Desktop-Bildschirm in 9:16 hat 9-Px-Text, und ein Ausschnitt davon sieht immer noch wie ein Desktop aus. Zeige ein angepasstes Element nach dem anderen auf einem Panel, so wie es die mobile Landingpage des Produkts tut (references/vertical.md).
X18	Erzählung klingt dramatisch oder euphorisch	Non-verbale Tags ([seufzt]), [aufgeregt] und [ernst] schießen in einem Produktvideo über das Ziel hinaus. Verwende [ruhig] und [warm], generiere nur die genannten Szenen neu und vergleiche Takes mit scripts/voice-tone.py.
X19	Layout liest sich wie eine Webseite	Linksbündige Spalte, Abschnitts-Labels über Überschriften, ein kleines Logo in einer Ecke. In vertikalen Videos: alles zentrieren, Labels entfernen, das Logo größer und zentriert machen.
X20	Slogan sitzt weit vom Logo entfernt	Der Logo-Export hat transparente Ränder. Trimme die Datei und positioniere gegen die echte Markierung.
X21	Erzählung ist in manchen Szenen flach und in anderen aufgeregt	Jede Szene war eine separate Anfrage mit eigenem Tag, also jede eine separate Darbietung. Generiere einen durchgehenden Take mit einem Tag, schneide ihn an den Pausen mit scripts/split-take.py und messe mit scripts/voice-tone.py --scenes. Eine Streuung von 5 Halbtönen zwischen den Szenen wurde als Stimmungsschwankungen wahrgenommen, 2 als gleichmäßig.
X22	Überschriften wirken schwer und unterscheiden sich vom Produkt	Die Schriftstärke wurde angenommen (800). Lese den eigenen Headline-Stil des Produkts mit scripts/page-styles.cjs und kopiere Familie, Stärke, Zeilenhöhe und Buchstabenabstand.
X23	Wörter laufen in einer Überschrift zusammen	Enger Buchstabenabstand, der von einer Webseite kopiert wurde, schließt die Lücken zwischen Wörtern in Videogrößen. Füge word-spacing: .07em hinzu.
X24	Ein Glas-Tag sieht wie festes Weiß aus, oder sein Unschärfe erscheint nach dem Einblenden	Der Hintergrund ist zu undurchsichtig (halte den unteren Teil nahe 0,6), oder die Einblendung ist auf einem Elternelement: Deckkraft unter 1 bei einem Vorfahren schneidet das Element von dem ab, was dahinter liegt. Animierte das Element, das backdrop-filter hat.
X25	Die Kontrastprüfung schlägt bei Text fehl, der gut aussieht	Die Prüfung hat einen Frame in der Mitte einer Einblendung abgetastet. Mache einen Snapshot zur gemeldeten Zeit. Wenn das Element gerade eintritt, verschiebe den Eintritt um einige Frames und führe die Prüfung erneut aus. Sehr kurze Kompositionen sind davon am häufigsten betroffen.

Dateien in dieser Fähigkeit

• references/script.md: Skriptvorlage, Tempo, Behauptungstabelle, Aussprache-Tabelle.
• references/capture.md: Konfigurationen für die drei Erfassungsskripte, Erfassungsspezifikationen, Marken-Assets.
• references/voice.md: TTS-Setup, Stimmen, Ausrichtung, Lautstärke, Musik, Austauschen der Erzählung.
• references/hyperframes.md: Kompositionsregeln, CLI-Befehle, Layout-Zonen.
• references/vertical.md: 9:16-Version für Stories: Sicherheitsbereich, Kamera auf dem Bildschirm, Untertitel, Aufteilen in Teile.
• assets/gen-template.js: 16:9-Kompositionsgenerator zum Kopieren in den tools-Ordner des Projekts.
• assets/gen-vertical-template.js: Vertikaler Generator mit einer vollständigen und einer kurzen Edition.
• scripts/lib/browser.cjs, scripts/site-capture.cjs, scripts/record-interaction.cjs, scripts/figma-frames.cjs, scripts/element-shots.cjs, scripts/page-styles.cjs, scripts/voice.py, scripts/split-take.py, scripts/voice-tone.py, scripts/elevenlabs.py, scripts/lib/eleven.py.

Der ElevenLabs-API-Code (--provider elevenlabs, elevenlabs.py) wurde ohne einen zu testenden Schlüssel geschrieben. Sein erster echter Durchlauf kann eine Korrektur erfordern; der --parts-Weg und der lokale Weg sind getestet.