Was macht App-Demo-Video?

Kernidee

Das Flair steckt in der App. Baue eine dunkle, kinematografische UI, die tickt, pulsiert und echte Ergebnisse anzeigt; nimm diese UI auf; füge dann im Schnitt eine reservierte Caption-Leiste, Punch-Ins sowie typografische Titel- und Endkarten hinzu.

Wenn der Inhalt noch keine App ist – eine Pipeline, ein bewerteter Datensatz, ein Kostenmodell, ein CLI – dann baue ihn zuerst als kleine, kamerataugliche Frontend-Oberfläche auf (siehe FRONTEND_STYLE.md und theme.css). Springe nicht direkt zu typografischen Folien oder einem Videomodell.

Generiere die Demo nicht mit einem Videogenerierungsmodell, einem Bildgenerierungsmodell oder TTS. Titel- und Endkarten sind Typografie. Das Standardbild ist stumm; füge keine Stockmusik oder eine Stimme hinzu, es sei denn, der Auftrag verlangt nach Ton.

Ein ausgearbeitetes, anonymisiertes Beispiel von drei Schnitten (Overlay-Untertitel vs. Folienpräsentation vs. reservierte Leiste bei einer Live-Sitzung) befindet sich in REFERENCE_CASE.md.

Assets

Alle Pfade sind relativ zu diesem Skill-Ordner.

FRONTEND_STYLE.md – Design-Tokens, Komponenten-Muster, Copy-Ton, Bewegungsvorgaben, Checkliste vor der Aufnahme
theme.css – Einsetzbare CSS-Variablen, Aurora / Glas / Glühen, Keyframes
tailwind-theme.css – Tailwind v4 @theme-Snippet
./record_demo_template.py – Parametrisierter Playwright-Rekorder
./edit_demo.py / ./edit_demo.sh – Titel, Untertitel, Punch-Ins, Endkarte, Encodierung
example_timeline.json – Beat-Liste, die der Editor liest
REFERENCE_CASE.md – Anonymisiertes Arbeitsbeispiel und die Lehren aus drei Schnitten

Visueller Stil (Kurzreferenz)

In-App-Theme (auch in FRONTEND_STYLE.md und theme.css):

Rolle	Hex
Seitenfarbe	`#05060A` / `#0A0C14` / `#11131F` / `#1A1D2E`
Fließtext	`#E5E7F0`
Cyan (im Fokus / live)	`#22D3EE` / `#67E8F9`
Violett (schwerwiegend oder kostenpflichtige Engine)	`#A855F7` / `#A78BFA`
Fuchsia (Farbverlaufsende)	`#F0ABFC`
Smaragdgrün (Treffer / Abschluss / Summen)	`#10B981`
Rosa (Bedrohung / harter Stopp)	`#F43F5E`
Bernstein (Lücke, Annahme, nicht genehmigt)	`#F59E0B`
Gold (Leistungsausbruch)	`#FBBF24`

Aurora-Waschung, verblassendes 48-Pixel-Raster, Glaskarten, farbcodiertes Glühen. Inter für die UI, JetBrains Mono für Uhren und Feeds, tabellarische Zahlen. Lade die Schriftarten; sie nur im Theme zu nennen reicht nicht (theme.css enthält den Import). Hero ist font-black tracking-tight bei etwa 48–60px, mit einem Wort in einem #67E8F9 → #A78BFA → #F0ABFC Textverlauf. Kicker sind 11–13px Großbuchstaben mit 0,14–0,25em Abstand.

Caption-Leiste / Titelkarten-Theme (die Bearbeitungsebene, nicht die App):

Rolle	Hex
Hintergrund	`#08070C`
Goldlinie / Kicker	`#E1A01D`
Überschrift	`#F3ECE3`
Untertext	`#9A958C`

Der Überschriftentyp im Editor ist eine fette kursive Grotesk. ./edit_demo.py verwendet ./fonts oder APP_DEMO_FONT / APP_DEMO_FONT_ITALIC oder eine systemweite DejaVu/Liberation-Schrift. Geist Italic 900 ist ein guter Ersatz, falls vorhanden.

Bewegung

Geteilte Beschleunigung: cubic-bezier(0.16, 1, 0.3, 1). Zähler ticken vom vorherigen Wert (Standard 1,1 s, bei KPI-Kacheln 1,6 s, bei Prognosen 1,8 s). Aktive Schritte pulsieren (1,4 s) mit einem expandierenden Ring (1,3 s). Abschluss ist ein Feder-Check plus ein Partikelausbruch. Ein Leistungs-Toast hält etwa 1,7 s. Der CTA und der aktive Schritt schimmern (1,6 s Schleife).

Tempo eingehender Ereignisse so, dass jeder Durchlauf lesbar ist (ca. 1,5 s nach Ende eines Schritts). Serverzeiten und -zahlen bleiben echt; nur ihr Erscheinen ist verzögert. Nachdem der Lauf beendet ist, warte etwa 900 ms, dann sanftes Scrollen zu einer maßstabsgetreu einfliegenden Ergebnis-Hero.

Copy-Ton

Schreibe wie ein Trailer, beweise es dann mit Zahlen.

Hero: eine kurze Metapher, ein Wort mit Farbverlauf. Der Untertitel sagt, was der Zuschauer sehen wird, wie es freigeschaltet wird, und dass sie dann auf eine Kosten- und Konfidenzanzeige stoßen werden.
Live-CTA: ein Verb der Zündung. Replay-CTA: ein Verb der Wiedergabe.
Jeder Schritt hat einen konkreten Titel und eine 2–3 Wörter lange Title-Case-Errungenschaft, die bei Abschluss als Toast erscheint und in der Zeile mit einem Stern markiert wird.
Lücken sind Arbeit, keine Fehler. Bedrohungen haben einen benannten Schild. Nicht genehmigte Ausgaben werden in der UI gekennzeichnet. Eine Sicherheits-/Schreibschutzzeile bleibt im Header.
Kosten sind exakt (genügend Nachkommastellen, damit ein Wert unter einem Cent nicht zu 0,00 $ wird) und gekennzeichnet als gemessen vs. geschätzt. Annahmen sind auf der Kachel benannt.
Der Kosten- oder Wertvergleich des gesamten Workflows und seine Einschränkungen befinden sich im Produkt, damit die Kamera zu ihnen scrollen kann.

Demo-UX

?replay=<id> (optional ?speed=) startet automatisch einen zuvor gemessenen Lauf mit seinen tatsächlichen Timings, und die UI zeigt an, dass es sich um eine Wiederholung handelt.
?run=<id> (optional ?backend=) öffnet einen abgeschlossenen Lauf für Dashboard-Nachaufnahmen erneut, ohne erneute Abrechnung.
Live-Pfad: Hochladen oder Verbinden echter Daten → Bestätigung einer kostenpflichtigen Engine (falls erforderlich) → Zündung → getakteter Zeitplan + Anforderungsfeed → Dashboard, Prognosen, Kostenbereich, Einschränkungen.

Arbeitsablauf

Gestalte die Frontend-Oberfläche für die Kamera. Falls noch keine UI vorhanden ist, erstelle eine. Wende theme.css (und tailwind-theme.css an, falls die App Tailwind v4 verwendet). Folge der Checkliste in FRONTEND_STYLE.md.
Lege die echten Daten fest. Verwende einen Live-Lauf oder eine originalgetreue Wiedergabe-Fixtur. Jeder spätere Untertitel muss in der Lage sein, eine Zahl zu zitieren, die auf dem Bildschirm oder in den Metriken des Laufs erscheint.
Nimm mit Playwright auf bei 1920×900. Keine Caption-Pills auf der Seite – diese verdecken die UI. Skripte einen durchgehenden Take (Landing → Workflow → Ergebnisse) mit 2–4 s Pausen und einem langsamen Scrollen. Verwende ./record_demo_template.py. Behalte die native Bildrate von Playwright bei (oft 25 fps).
Bearbeite mit ./edit_demo.sh. Die Leinwand ist 1920×1080: ein 1920×900 App-Bereich über einer reservierten 180px Leiste (#08070C / #E1A01D / #F3ECE3 / #9A958C). Etwa 2 s Titelcard, harte Schnitte (keine 1 s Überblendungen), ~0,4 s 1,3× Punch-Ins nur auf den App-Bereich (die Leiste bleibt fix). Endet auf dem In-App Kosten- oder Wertvergleich, dann eine ~3 s Einschränkungen-Karte. Ziel: 60–70 s. Standardmäßig stumm (ein leiser AAC-Track ist in Ordnung für die Player-Kompatibilität).
Überprüfe die Frames. Stelle sicher, dass die Leiste niemals die UI verdeckt, Punch-Ins die Leiste nicht abschneiden und jede beschriftete Zahl auf dem Bildschirm erscheint oder als Annahme gekennzeichnet ist.
Prozess-Walkthroughs gehören in ein separates Deck. Architektur-, Funktionsweise- und Fazit-Karten ersetzen nicht die Sitzung in diesem Video.

Untertitel-Ton

Kicker: ein paar ausgeschriebene Großbuchstaben (LIVE SESSION, MISSION COMPLETE, THE CATCH).
Überschrift: ein oder zwei kurze Sätze. Punkt, nicht Auslassungspunkte.
Setze die überraschende gemessene Tatsache an die erste Stelle: Zählungen, Zeit, Kosten, was entdeckt wurde.
Zeige auf das, was jetzt auf dem Bildschirm zu sehen ist, und füge dann die Schlussfolgerung hinzu. Erzähle kein Tutorial.
Wenn du zu einem In-App-Kostenbereich schneidest, sage, dass es der eigene Bereich der App ist, keine Folie.

Fehlermodi

Fehler	Behebung
HTML/CSS-Caption-Overlay auf der Seite	Reservierte Leiste unter der App, immer
Screenshot-Collage oder typografische „Prozess“-Folien als Hauptinhalt	Nimm die Sitzung auf; verschiebe Prozesskarten in ein Deck
Überblendungen zwischen jedem Beat	Harte Schnitte; hebe Bewegungen für Punch-Ins und die App selbst auf
Erfundene oder ohne Kennzeichnung gerundete Zahlen	Kopiere die Ziffern des Laufs; kennzeichne Annahmen
Punch-In zoomt den gesamten 1080p-Frame und schneidet die Leiste ab	Zoome nur den 1920×900 Bereich
Ende mit Architektur oder einer Funktionsweise-Grafik	Ende mit dem Kosten-/Wertvergleich des Produkts, dann Einschränkungen
Generieren einer „Demo“ mit einem Videomodell	Nur Playwright + ffmpeg
Sprachausgabe oder Musik hinzugefügt, „um es kinematografisch zu machen“	Standard ist stumm; das Bild und die Untertitel tragen es
Flache UI, Zahlen erscheinen plötzlich, kein In-App-Kostenbereich	Gestalte die App zuerst (`FRONTEND_STYLE.md`); versuche nicht, es nur im Schnitt zu beheben
Hero oder CTA klingen wie eine Einstellungsseite	Metapher + Wort mit Farbverlauf; Zündungsverb für live, Wiedergabeverb für Wiederholung
Schriftarten in CSS genannt, aber nie geladen	Füge den Import von Inter + JetBrains Mono aus `theme.css` hinzu
Datensatz oder CLI als Folien aufgenommen, weil „es keine App gibt“	Baue zuerst eine kleine Frontend-Oberfläche für das Flair, nimm sie dann auf

Schnellstart

Erfordert ffmpeg und Python 3.

python3 -m venv .venv && .venv/bin/pip install playwright pillow && .venv/bin/python -m playwright install chromium

# 1. Gestalte die App (theme.css / FRONTEND_STYLE.md), damit sie vor der Kamera performt.
# 2. Nachdem die App läuft und actions() im Rekorder ausgefüllt wurde:
.venv/bin/python ./record_demo_template.py --out demo_raw.webm
./edit_demo.sh --input demo_raw.webm --timeline example_timeline.json --output demo.mp4

Optional: Lege Geist (oder eine andere fette kursive Grotesk) unter ./fonts ab oder setze APP_DEMO_FONT und APP_DEMO_FONT_ITALIC.

Zweck

Erstelle ein dramatisches Demo-, Werbe- oder Launch-Video einer funktionierenden App aus einer echten Sitzung. Gestalte eine kamerataugliche Frontend-Oberfläche, nimm sie mit Playwright auf und füge mit ffmpeg eine reservierte Caption-Leiste, Punch-Ins sowie typografische Titel- und Endkarten zusammen. Eine Pipeline, ein Datensatz, ein Kostenmodell oder ein CLI wird zuerst als solche Frontend-Oberfläche aufgebaut.

Eingaben

Eine laufende App unter der Basis-URL des Rekorders (--base, Standard http://127.0.0.1:8765 in record_demo_template.py) oder eine kleine, für die Aufnahme erstellte Frontend-Oberfläche.
Echte Daten oder eine originalgetreue Wiedergabe eines zuvor gemessenen Laufs. Beschriftete Zahlen stammen vom Bildschirm oder aus den Metriken des Laufs oder sind als Annahmen gekennzeichnet.
actions() ausgefüllt in record_demo_template.py.
Ein Zeitplan-JSON im Format von example_timeline.json.
ffmpeg, Python 3, playwright und pillow. Optionale kursive Grotesk in ./fonts oder APP_DEMO_FONT und APP_DEMO_FONT_ITALIC.
theme.css, tailwind-theme.css wenn die App Tailwind v4 verwendet, und die Checkliste in FRONTEND_STYLE.md.

Ausgaben

Roh-Take von record_demo_template.py (.webm oder .mp4 mit --transcode).
Bearbeitete Datei von edit_demo.sh: 1920×1080 H.264, normalerweise 60–70 s, stumm AAC. Ein 1920×900 App-Bereich liegt über einer 180px Caption-Leiste, mit einer ~2 s Titelcard, harten Schnitten, ~0,4 s 1,3× Punch-Ins auf den App-Bereich und einer ~3 s Einschränkungen-Endkarte.

Nicht-Ziele

Videogenerierungsmodelle, Bildgenerierungsmodelle und TTS.
Stockmusik oder eine Stimme, es sei denn, der Auftrag verlangt nach Ton.
In-Seite-Caption-Overlays, Screenshot-Collagen und überblendete Prozessfolien als Hauptinhalt.
Erfundene Zahlen oder gerundete Zahlen, die nicht gekennzeichnet sind.
Verwenden eines Architektur- oder Funktionsweise-Decks anstelle der Sitzung.

Prüfungen

Die FRONTEND_STYLE.md-Checkliste vor der Aufnahme ist bestanden, einschließlich geladener Inter und JetBrains Mono und einem lesbaren 1920×900 Frame.
Die reservierte Leiste verdeckt niemals die UI. Punch-Ins bewegen nur den 1920×900 Bereich, sodass die Leiste volle Breite und unbeschnitten bleibt.
Jede beschriftete Zahl ist auf dem Bildschirm oder in den Lauf-Metriken vorhanden, oder sowohl der Untertitel als auch die Endkarte bezeichnen sie als Annahme oder Prognose.
Schnitte sind harte Schnitte, die Länge beträgt etwa 60–70 s, und die Tonspur ist bis auf den leisen AAC-Track, den der Editor einfügt, stumm.
bash -n edit_demo.sh und python3 -m py_compile auf edit_demo.py und record_demo_template.py sind beide erfolgreich.

Fehlermodi & Wiederherstellung

Verwende die Tabelle Fehlermodi oben. Wiederherstellung:

Was du siehst	Was zu tun ist
Untertitel bedecken Buttons oder Diagramme	Lösche das In-Seite-Overlay. Setze die Zeile in den Zeitplan und führe `./edit_demo.sh` erneut aus.
Der Hauptinhalt besteht aus Standbildern, einer Collage oder Überblendungen	Nimm die Sitzung mit `./record_demo_template.py` auf und schneide hart zwischen den Beats.
Ein Punch-In schneidet die Leiste ab	Behalte `zoom` auf dem Beat. `edit_demo.py` skaliert nur den App-Bereich.
Eine Untertitelzahl ist nicht auf dem Bildschirm	Kopiere die Ziffer vom Dashboard oder der Lauf-Metrik oder kennzeichne die Annahme auf der Kachel und der Endkarte.
Flache UI, Zahlen erscheinen plötzlich, oder kein Kostenbereich	Gestalte neu mit `theme.css` und `FRONTEND_STYLE.md`, nimm dann erneut auf.
Der Editor wird beendet, weil er keine Schriftart findet	Füge eine `.ttf` unter `./fonts` hinzu oder setze `APP_DEMO_FONT` und `APP_DEMO_FONT_ITALIC` und führe dann `./edit_demo.sh` erneut aus.
Die Quelle ist ein Notebook, CLI oder eine Tabellenkalkulation	Baue die kleine Frontend-Oberfläche aus `FRONTEND_STYLE.md` um die echten Daten herum und nimm sie dann auf.

App-Demo-Video

Was ist App-Demo-Video?

In Ihrer bevorzugten KI fragen

Dokumentation