Innate-Labs/product-demo-video

Product Demo Video (Produkt-Demovideo)

Eine reale Web-App in ein stimmungsvolles Demovideo verwandeln: Echte Screenshots + rekonstruierte UI-Komponenten in einem Browser-Mockup, mit Untertiteln, Logo, Musik und als vertikales/quadratisches Kurzvideo rendern.

Es ist automatisch – du gibst nur ein lauffähiges Projekt an, Claude macht:

• Automatisches Verstehen des Produkts: Liest CLAUDE.md / README / Routen, versteht jeden Screen und die Tonalität.
• Automatische Texterstellung aus Code: Generiert automatisch Titel/Untertitel für die Adressleiste basierend auf den echten Funktionen – kein manuelles Schreiben nötig.
• Automatische Logo-Erkennung: Findet das echte Vektor-Logo des Projekts in public/ für Intro und Outro.

Du triffst nur an wenigen entscheidenden Punkten eine Wahl (Seitenverhältnis, einzubeziehende Seiten, Rhythmus, Audio).

Vorausgesetzte Skills: Dieser Skill benötigt [remotion-best-practices] (Videoframework) und [agent-browser] (Screenshots). Lade vor der Bearbeitung von Remotion-Code zuerst remotion-best-practices für die Domänen-Expertise.

Wann verwenden

Ein:e Nutzer:in möchte eine lauffähige Web-App (eigenes Projekt / angegebenes Verzeichnis) in ein Demo-/Promovideo verwandeln. Typische Anfragen: "Erstelle ein Demovideo für unser Produkt", "Mach aus dieser Seite ein vertikales Werbevideo".

Ergebnisformat

Ein Remotion-Projekt, das eine MP4 rendert:

• Canvas: Hochformat 1280×1706 (3:4, Standard, für soziale Medien) / Quadratisch 1080×1080 / Querformat 1920×1080
• Struktur: N Szenen, jede = ein Produktscreenshot (echt oder rekonstruiert) in einem Browser-Mockup, mit unteren Untertiteln; Crossfade zwischen Szenen + langsamer Ken-Burns-Effekt auf dem gesamten Fenster; Abschluss mit Logo + Slogan
• Audio: Lizenzfreie BGM (Standard) oder TTS-Sprachausgabe (optional)

Vollständiger Ablauf (5 Phasen)

Phase 1 — Produkt verstehen & Storyline planen

1. Lies die CLAUDE.md / README.md / DESIGN.md des Projekts, um zu verstehen: Was ist das Produkt? Welche Kernseiten/-funktionen gibt es? Tonalitätsvorgaben (Farben, Schriften, Verbote – siehe reference/tone.md, muss eignes DESIGN.md respektieren).
2. Liste die Seitenrouten auf (find app -name page.tsx), verstehe die Funktion jeder Seite und leite automatisch eine „User-Journey“-Erzähllinie ab (z. B. „Kernfunktion A → B → C → Ergebnisseite“) und generiere automatisch Untertiteltexte für jede Szene.
3. Bestätige mit dem/der Nutzer:in: Seitenverhältnis, einzubeziehende Szenen, Rhythmus, Audio-Option. Markiere Seiten, die nicht gescreenshottet werden können (Echtzeit-/datenabhängige Seiten) vorab als Risiko.

Phase 2 — Echte Seiten screenshotten (bevorzugt)

Verwende agent-browser. Details in scripts/capture-pages.md. Wichtig:

• Starte Frontend und Backend des Zielprojekts und warte, bis alles bereit ist.
• Setze Standard-Viewport agent-browser set viewport 1440 900 2 (@2x Retina, 16:10 normales Browserverhältnis, klare Screenshots).
• Behandle Logins: Die meisten (app)-Seiten erfordern einen Login. Suche in dev.db nach Testkonten. Passwort ist ein Hash; setze es nach Autorisierung durch die Nutzer:in mit der eigenen Hash-Funktion des Projekts zurück (muss nach dem Screenshot zurückgesetzt werden, siehe Lektionen).
• Entferne Dev-Badges: agent-browser eval "document.querySelectorAll('nextjs-portal').forEach(e=>e.remove())".
• Mache von jeder Zielseite einen sauberen Screenshot und speichere ihn im Remotion-Projekt public/<brand>/.

Phase 3 — Nicht screenshotbare Seiten per Code rekonstruieren (kritischer Qualitätspunkt)

Manche Seiten können nicht gescreenshottet werden (Live-Interview-Raum ohne Mikrofon im Headless-Modus, Berichtsseiten, die Backend-Generierung erfordern, fehlende Daten). Erfinde nichts aus der Fantasie —

1. Lies den echten Komponenten-Code (components/.../XxxLayout.tsx usw.), um das echte Layout, die Elemente und die Datenstrukturen zu verstehen.
2. Rekonstruiere die Seite im Remotion-Projekt 1:1 als React-Komponente, die in den Inhaltsbereich des Browser-Fensters gerendert wird (Größe = W×H des Fenster-Inhaltsbereichs).
3. Beispiele in templates/screens/InterviewScreen.tsx (dialogartige UI), templates/screens/ReportScreen.tsx (Berichts-UI) – sie sind neutrale Vorlagen, die auf Basis des echten Codes rekonstruiert wurden. Passe die Methode für dein Produkt an und schreibe den echten Inhalt deines Produkts.

Phase 4 — Demovideo zusammenbauen

Nutze templates/PromoVideo.tsx als Grundgerüst (Browser-Mockup + Scene-Crossfade + Ken Burns + Untertitel + Outro + Audio) und templates/PromoRoot.tsx zur Registrierung der Composition.

• Jede Szene hat eine Konfiguration { type: 'image'|'<custom>', src?, addr, title, sub }.
• Die Adressleiste ändert sich mit der Szene (erhöht die Authentizität).
• Finde und verwende das echte Logo des Projekts automatisch für Intro + Outro (in public/ nach icons/logo.svg o. ä. Vektor-Logo suchen – kein reiner Text-Logofälschung).
• Halte die Tonalitätsvorgaben strikt ein (siehe unten).

Phase 5 — Audio & Rendern

• BGM (Standard): Lizenzfreie, kommerziell nutzbare Musik von Mixkit. scripts/get-bgm.sh lädt sie herunter und lässt die Nutzer:in auswählen. Das ganze Video wird damit unterlegt, Ein-/Ausblenden am Anfang/Ende.
• TTS-Sprachausgabe (optional): scripts/gen-tts.sh – verwendet AiHubMix/OpenAI-kompatibles /audio/speech (gpt-4o-mini-tts, menschenähnlich, benötigt API-Key). Jeder Satz wird auf eine Szene abgestimmt; Szenenlänge richtet sich nach Sprachlänge. Nicht macOS say verwenden (roboterhaft, schlechte Qualität).
• Rendern: npx remotion render <id> out/<name>.mp4, überprüfe Audiospur + Länge, kopiere nach ~/Desktop/.

Tone – Tonalitätsvorgaben (das ist der Schlüssel zum „Terminal“-Look – siehe reference/tone.md)

Standard-Tonalität = dezent, professionell, authentisch. Sofern nicht anders in DESIGN.md des Projekts gefordert:

• Farben: Weißer Hintergrund (#F4F4F6 Canvas / #FFF Fenster) + Schwarz-Grau-Text (#141414 / #8A8A90), keine bunten Farben; funktionale rote Punkte (Aufnahme/Verbindung) bleiben erhalten.
• Schriftart: Einheitlich PingFang für Chinesisch und Englisch ("PingFang SC","Heiti SC",sans-serif); auf macOS direkt verfügbar; keine Inter o. Ä. (inkonsistente chinesische Fallbacks).
• Browser Mockup: Abgerundete Ecken (18 px) weißes Fenster + obere Chrome-Leiste (drei graue Punkte, keine Ampelfarben + Adress-Pill), weicher Schatten.
• Kamera: Gleichmäßige Verwendung von Easing.bezier(0.16,1,0.3,1); Fenster-Einfliegen mit Spring; langsamer Ken-Burns scale 1→1.03 (am gesamten Fenster, nicht auf dem Bild – sonst wird Inhalt abgeschnitten).
• Rhythmus: Einheitliche Szenendauer (Standard 60 Frames/2 s bei 30 fps), sauber; für präzise Anpassungen kann der BPM der BGM ermittelt werden.
• Untertitel: Unten zentriert, Titel PingFang Semibold groß + Untertitel grau klein, Crossfade.
• Keine Emojis.

Negativliste (nicht machen): Farben wild einsetzen, Ampelfarben, Inter mit Chinesisch, objectFit cover vergrößert, schneidet Seiteninhalt ab, erfundene nicht screenshotbare Seiten, roboterhafte TTS, ungleichmäßiger Rhythmus, reiner Text als Logo-Fälschung.

Gelernte Lektionen (unbedingt lesen)

• Headless-Browser hat kein Mikrofon/Kamera: Echtzeit-Sprach-/Video-Seiten bleiben bei „Bereitung/Gerät nicht verfügbar“ hängen – sofort zur Code-Rekonstruktion übergehen, nicht verbissen versuchen.
• Dev-Datenbank-Schema-Drift: Wenn Code eine Migration hat, die lokale DB aber nicht, kommt es zu 500-Fehlern (z. B. no such column: xxx). Für Screenshots/Datenfüllung kann ALTER TABLE ADD COLUMN verwendet werden, um die fehlende Spalte zu ergänzen (sicher, löscht keine Daten), aber dokumentieren.
• Änderungen an der lokalen DB müssen rückgängig gemacht werden: Zurückgesetzte Test-Passwörter, temporär eingefügte Beispieldaten – nach den Screenshots alles auf Originalwerte zurücksetzen (vorher Backup von Hash/JSON). Ergänzte Spalten können bleiben (Code erwartet sie ja).
• objectFit nicht verwenden, um Inhalt abzuschneiden: Screenshot im Fenster mit objectFit:"contain" für vollständige Anzeige; Ken-Burns-Vergrößerung auf das äußere Fenster anwenden, nicht auf das Bild – sonst wird der untere Teil der Seite abgeschnitten.
• Feldnamen beim Befüllen von Beispieldaten im Code prüfen: Die Feldnamen, die das Frontend liest, weichen oft von der Intuition ab (Plural / Unterstriche usw.) – immer die rendernde Komponente überprüfen.
• Chinesische Texte mit ASCII-Anführungszeichen → gesamten String mit Backtick umschließen (globale CLAUDE.md-Regel).
• Bash cwd ist über Aufrufe hinweg persistent: Absolute Pfade verwenden, nicht wiederholt cd Unterverzeichnis.

Schnellüberprüfung

Nach Änderungen an Remotion-Code: npx tsc --noEmit; Keyframe rendern mit npx remotion still <id> out/check.png --frame=N --scale=0.5 zur visuellen Prüfung; nach Final-Rendering mit ffprobe Audiospur + Länge bestätigen.