Produkt-Demo
Verwandle die App in diesem Repository mit nur Node + Playwright + FFmpeg in ein bewertetes, untertitteltes und frame-genaues Demovideo. Die Pipeline ist deterministisch: Das gesamte Demo wird aus einem sauberen Checkout neu gerendert und neu bewertet.
Die Pipeline in der richtigen Reihenfolge
| Schritt | Rezept | Ausgabe |
|---|---|---|
| 1. Drehbuch | 01-script.md | Szenentabelle, Voiceover-Zeilen mit Timecodes, Rhythmusraster |
| 2. Standalone-UI | 02-standalone-ui.md | App-Komponenten, die aus einem statischen Ordner rendern |
| 3. Komposition | 03-composition.md | Ein React-Baum als reine Funktion einer Uhr |
| 4. Aufnahme | 04-record.md | PNG-Frames → visuell verlustfreie H.264-Master |
| 5. Untertitel + VO | 05-captions-vo.md | SRT/VTT-Seitendateien, zeitcodiertes Voiceover-Skript |
| 6. Sound | 06-sound.md | sfx-cues.json, Live-Vorschau-Player, Auto-Mixer |
| 7. Musik | 07-music.md | EQ-geformtes, geducktes Bett, das beim Drop startet |
| 8. Zusammenbau | 08-assemble.md | Intro + Übergang + Stems → endgültiger Export |
Arbeite die Schritte nacheinander ab; jeder Schritt verwendet die Ausgabe des vorherigen. Die Schritte 5–8 sind für eine stumme Vorschau optional, für einen starttauglichen Film jedoch zwingend erforderlich.
Ein einziger Start-Prompt führt alles aus
Wenn der Benutzer nach einem Demo fragt, orchestriere alle acht Schritte selbst. Gib dem Benutzer niemals eine Schrittanleitung oder sage ihm, er solle mit dem nächsten Prompt zurückkommen. Frage den Benutzer stattdessen direkt im Gespräch genau in dem Moment, in dem du etwas brauchst, das nur er geben kann, und füge das Artefakt bei, das die Frage in Sekunden beantwortbar macht:
- Nach Schritt 1: Zeige die Szenentabelle und das Voiceover-Skript an, bitte um Zustimmung, bevor Code geschrieben wird. Ein Skript neu zu timen ist billig; einen gerenderten Film neu zu timen nicht.
- Nach dem Rauch-Render: Zeige die 4 Spot-Frames an, bitte um Fortsetzung vor dem langen vollständigen Render.
- Bei Schritt 5: Übergib den einfügebereiten, getaggten Voiceover-Block (keine Synchronisationsnotizen darin) und frage nach dem Pfad der generierten Audiodatei.
- Bei Schritt 7: Übergib den von dir geschriebenen Musikgenerator-Prompt und frage nach dem Pfad der generierten Datei. Beide Anfragen können mit Schritt 3 gebündelt werden, wenn der Benutzer einen einzigen Ausflug zu den Tools bevorzugt.
- Nach der bewerteten Vorschau: Liefere einen kleinen Ausschnitt zum Anhören aus, bevor die endgültigen Master exportiert werden.
Fahre zwischen den Anfragen fort, ohne nachzufragen. Wenn der Benutzer ein optionales Asset (Stimme, Musik) ablehnt, liefere ohne es aus, anstatt anzuhalten.
Fortschrittsverfolgung (fortsetzbare Läufe)
Pflege demo/PROGRESS.md im Ziel-Repository: eine Zeile pro Schritt mit Status (todo / in progress / done) und den erzeugten Artefaktpfaden. Lese es in JEDER Sitzung ZUERST; eine halbfertige Pipeline wird ab der letzten Frage fortgesetzt, anstatt neu zu starten. Aktualisiere es nach jedem Schritt.
Entscheidungsregeln
- Benutzer hat kein Drehbuch oder keine Geschichte → beginne bei 01. Beginne niemals mit dem Schreiben von Code.
- Benutzer hat ein ruckelndes Video → nur 04 (Frame-für-Frame-Aufnahme behebt das).
- Benutzer möchte Ton/SFX zu einem vorhandenen Video → 06 (Cue-Datei + Mixer), dann 07, wenn Musik gewünscht ist.
- Das Demo des Benutzers „wirkt unecht“ → die Ehrlichkeitsregeln in 01 und 03 (echte Daten, abgestimmte Summen).
- Benutzer fragt nach Länge / Form → 45-60s, ein Anspruch pro Szene, ~6 Szenen, Bogen: Problem → Drop → Magie → Interaktion → Beweis → Marke.
- Stimmklon klingt langsam und flach → die Korrekturen in 05.
- SFX kommen zu spät oder werden begraben → gemessene Treffer-Offsets + Spitzennormalisierung in 06.
Nicht verhandelbar (setze diese auch durch, wenn nicht danach gefragt wird)
- Ehrliche Daten. Fixtures müssen echt sein: echte Artikel, ausgedruckte Preise, Summen, die übereinstimmen. Erfinde niemals glattere Zahlen.
- Nichts blendet ein. Alles stempelt, schiebt, reißt oder schnappt ein. Einblendungen wirken wie eine Entschuldigung. Easing lebt in höchstens drei gemeinsamen Helfern.
- Nie Bildschirm aufzeichnen. Rendere Frame für Frame über den Seek-Vertrag (04).
- Kein Ton ist besser als erzwungener Ton. Maximal ~10 Cues pro Minute, einer pro Story-Wendung, nichts wird hintereinander wiederholt.
- Zwei Master. Untertitel eingebrannt + sauber, aus einer einzigen Komposition über ein
window.__NO_CAPTIONS-Flag. - Kein reines Schwarz. Jede dunkle Szene liegt auf der eigenen Kunst oder Tapete des Produkts, unscharf und abgestuft; der erste Frame ist das Vorschaubild. Reines Schwarz nur dort, wo es die echte Oberfläche des Produkts ist (03).
Vorlagen
Funktionierende Skripte in templates/: record.mjs (deterministischer Playwright-Frame-Renderer, fortsetzbar), mix-audio.mjs (cue-gesteuerter FFmpeg-Mixer; --vo für einen nachgetimten Voiceover-Stem, --bgm für das Bett), retime-vo.mjs (schneidet eine generierte Lesung an ihren Stille-Stellen und platziert jede Phrase auf ihrem autorisierten Timecode), sfx-cues.example.json (eine echte 10-Cue-Partitur), package.json (die npm-Skripte). Kopiere sie in ein demo/-Verzeichnis im Ziel-Repository und passe die Pfade an; jedes Rezept sagt, wann.
Ergänzende Skills
Wenn das Ziel-Repository Remotion oder ElevenLabs verwendet, installiere auch deren offizielle Skills; dieser Skill deckt die Pipeline und den guten Geschmack ab, ihre Skills decken ihre APIs ab:
npx skills add remotion-dev/skills
npx skills add elevenlabs/skills
Was der Benutzer erhält (neben dem Film)
Zwei einfügebereite Artefakte, sodass die menschliche Arbeitslast genau zwei Einfügevorgänge umfasst: einen getaggten Voiceover-Block für das Sprach-Tool (05) und einen Style-Prompt für den Musikgenerator (07). Lass den Benutzer niemals eines davon selbst schreiben.
Referenzausgaben
Vier Demos beweisen die Pipeline an unabhängigen Produkten: das Vouch-Demo (54,3s, Belegsplitting), ein Excalidraw-Demo (35,5s, gefilmt mit der echten @excalidraw/excalidraw npm-Komponente, Quelle in diesem Repository unter examples/excalidraw), Asakiri Studio (54s, ein Tauri+React-Kurseditor, echte Komponenten mit esbuild gebündelt) und Colosseum (54s, eine Qt/QML-Windows-Medien-App, Oberflächen aus ihren Tokens und eigenen Screenshots rekonstruiert; siehe den native-app-Pfad in 02). Das Vouch-Repository github.com/Anshgrover23/vouch enthält das vollständige funktionierende demo/-Verzeichnis, Komposition, ausgelagerte Laufzeit, Cue-Datei, Untertitel als Referenzimplementierung. Das Handbuch mit allen Zahlen und Fehlern: https://anshgrover23.github.io/product-demo-playbook/