Demo-Video
Du brauchst ein fertiges, gestaltetes Video einer App. Dieses Skill ist die getestete, rundum einsatzbereite Pipeline. Es baut auf HyperFrames (HTML→Video) auf, fügt aber die Teile hinzu, die mühsam wiederzuentdecken sind: wie man die App selbst aufnimmt, die ffmpeg-Workarounds dieser Maschine, die genauen Schnittrezepte, das markenspezifische Designsystem und die Fallen, die Stunden verschwenden.
Hier ist nichts markengebunden. Das Design ist eins mit austauschbaren Tokens; in wessen Marke ein Video ist, ist ein Schritt, keine Annahme – siehe Phase 0B.
🚦 Die Phasen sind nach Themen gruppiert, nicht nach Arbeitsreihenfolge
Lies dies, bevor du etwas in der folgenden Reihenfolge ausführst. Die Aufnahmemechaniken werden zuerst dokumentiert, weil sie zusammengehören, aber die Aufnahme ist nicht der erste Schritt:
Das Konzept kommt zuerst: Wozu dient das? → die Dramaturgie → PLAN.md (+ SCRIPT.md) → GENEHMIGT
(das ist das `video-plan`-Skill, nicht dieses hier) │
│
↓ erst jetzt existiert Filmmaterial ─────────────────────────────────────────────────────────────┘
Phase 0 Umgebung → 0B Marke → 1A Aufnahme / 1B Erfassung → 3 Vorbereitung → 4 Komposition
→ 5 Überprüfung → 6 Rendering
Zuerst zu filmen erscheint schneller, ist es aber nicht: Die Dramaturgie ändert sich unter der Überprüfung, und jeder Beat, der gegen eine nicht abgestimmte Dramaturgie aufgenommen wurde, muss neu aufgenommen werden. Phase 0 und 0B sind die beiden Dinge, die du früh ausführen kannst – sie installieren Werkzeuge und legen die Farbpalette fest. Alles in Phase 1 wartet auf einen genehmigten Plan.
🚀 Ausprobieren – der schnelle Weg
🚨 Der Anrufer wählt diesen Modus. Du niemals. Du kannst ihn ANBIETEN, in einer Frage. Du darfst ihn nicht aus den Umständen ableiten, und insbesondere die folgenden sind keine Zustimmung:
- sie haben das Skill-Paket angehängt oder entpackt – das ist, wie jemand ein Werkzeug installiert, keine Aussage darüber, was damit erstellt werden soll;
- die Anfrage klingt erkundend oder kam ohne Briefing;
- es ist das Erste, worum sie gebeten haben;
- du würdest den schnellen Weg bequemer finden.
Jemand, der sagt „Mach mir ein Video von example.com“, hat nach einem Video von example.com gefragt. Für ihn zu entscheiden, dass er wirklich einen Wegwerfclip wollte, liefert ihm einen stillen, unmarkierten 1080p-Entwurf, wenn er ein fertiges Stück erwartet hat – und die Teile, die du übersprungen hast (die Dramaturgie, die Worte, die Marke), sind genau die, die nicht nachträglich eingefügt werden können.
Wenn es unklar ist, frage. „Ist das ein schneller Smoke-Test oder ein Video, das du tatsächlich jemandem zeigen wirst?“ Ein Satz, und es klärt, in welchem der beiden Modi du dich befindest.
Die unten stehenden Freigabetore existieren, weil ein Video, das jemand sehen wird, teuer ist, wenn es falsch gemacht wird. Ein Wegwerfclip ist das nicht, und einen Prüfer durch eine Konzeptrunde zu schicken, um herauszufinden, ob die Aufnahme funktioniert, ist der Grund, warum ein gutes Werkzeug in den ersten zehn Minuten aufgegeben wird. Beide Fehler sind real; nur der Anrufer weiß, welcher zutrifft.
Der schnelle Weg, sobald der Anrufer ihn gewählt hat:
- Wiederhole es – ein Satz: „Ich nehme das als Smoke-Test, also überspringe ich die Freigaberunden und die Marke; sag das Wort für den vollständigen Prozess.“ Bestätigen ist besser als Ankündigen: Es gibt einem Anrufer, der im anderen Modus ist, eine letzte günstige Gelegenheit, dich zu korrigieren.
- Eine zweizeilige
PLAN.md– die Dramaturgie als Satz, drei oder vier Beats. KeinSCRIPT.md, keine Unterschriftsrunde. - Die neutrale Palette. Keine Markenextraktion, keine Vorschau zur Freigabe.
- Still. Keine Erzählung, kein ElevenLabs-Schlüssel, keine Transkriptprüfung.
- Nur 1080p. Kein 4K, kein Veröffentlichungsschritt.
- Nur intern – es wird keinem Kunden gezeigt und geht nirgendwo hin, was öffentlich ist. Wenn sich herausstellt, dass es jemand zeigen möchte, ist das ein anderes Video: Führe es ordentlich aus, anstatt eine Freigabe nachträglich auf einen Entwurf zu setzen.
Alles andere in dieser Datei gilt weiterhin – der Aufnahmepfad, die Überprüfung, der Abbruch bei mehrdeutiger Zustimmung. Das ist keine Zeremonie; es verhindert, dass ein kaputtes Video gut aussieht.
🛑 Das Konzepttor
Dieses Skill beginnt nicht mit einer Anfrage. Es beginnt mit einer genehmigten PLAN.md (plus einem wörtlichen SCRIPT.md für alles, was kundenorientiert ist). Der schnelle Weg oben ist die einzige Ausnahme, und sie ist nur verfügbar, wenn niemand außerhalb des Raums das Ergebnis sehen wird.
Wenn es keine gibt, ist das die Aufgabe des video-plan-Skills, und es benötigt einen Durchlauf: Wozu dient das Video, Demo vs. Anleitung, die Sprache, die Dramaturgie, die Beat-Liste, der Text. Mach das zuerst und komm zurück. Die App zu lesen, um den Plan zu schreiben, ist in Ordnung – sie aufzunehmen nicht.
Zwei Dinge schuldest du unabhängig davon, wer den Plan geschrieben hat, und beide sind Fragen, keine Ankündigungen:
Frage, ob zuerst analysiert werden soll. „Soll ich mir die Anwendung ansehen und vorschlagen, was gezeigt werden soll, oder weißt du es bereits?“ Ein Produkt richtig zu lesen kostet echte Zeit, und der Anrufer hat möglicherweise einen anderen Startbildschirm oder eine fertige Idee. Verbringe nicht seine Minuten mit deiner Annahme.
Lass die Beat-Liste vor dem Filmen abnicken. Nicht die gesamte PLAN.md erneut genehmigen – der Plan ist bereits genehmigt – aber die konkrete Einstellungsliste, die du aufnehmen wirst: diese vier Beats, in dieser Reihenfolge, mit diesen Spotlight-Effekten. Es braucht eine Nachricht und es ist der letzte günstige Moment. Nach der Aufnahme bedeutet eine Änderung der Reihenfolge erneutes Filmen, weil ein Beat, der gegen eine andere Dramaturgie geschnitten wurde, nicht in einen bestehenden Schnitt passt.
Bestätige die Aufnahmequelle im Chat. Welche Umgebung aufgenommen wird und damit welche Version des Produkts, ist die Entscheidung des Benutzers und das Ziel bewegt sich.
🚦 Erste Entscheidung: Woher kommt das Filmmaterial?
Wenn das Motiv eine Webseite ist, die du erreichen kannst → NIMM SIE SELBST AUF. Frage nicht nach einem Screencast.
Erreichbare URL? ── ja ──┬── es ist DEINE (oder die deines Kunden, mit einem Briefing)
│ │ └─▶ Phase 1A · Aufnahme (references/playwright-capture.md)
│ │
│ └── es ist die Webseite von JEMAND ANDEREM
│ └─▶ Phase 1A · Aufnahme, plus references/foreign-sites.md
│ (Genehmigungstor, Zustimmungswände, sticky Header,
│ Lazy-Load-Rect-Drift – LIES ES ZUERST, die
│ Aufnahmeprimitiven sind nicht sicher im DOM eines Fremden)
nein (Desktop-App, Figma, natives Tool, mobil,
oder der Benutzer hat dir bereits eine .mov gegeben)
▼
Phase 1B · Screencast erfassen
Eigene App und Drittanbieter-Website sind dieselbe Pipeline mit einem anderen Aufnahmedurchlauf. Die Komposition, das Designsystem, die Überprüfungsebene und die Sprachausgabe ändern sich nicht; die Markenextraktion liest bereits jede Live-Website. Was sich ändert, ist, dass du standardmäßig nur öffentlich bist, keinen Zustand setzen kannst, nichts schreiben darfst und ein DOM misst, das sich unter dir bewegt. (Eine authentifizierte Drittanbieter-Aufnahme ist möglich und wird abgeraten: Sie benötigt eine explizite domänenbezogene Genehmigung, die Browser-Sandbox muss eingeschaltet sein, und die Sitzungsdatei muss am Ende vernichtet werden – references/foreign-sites.md §0.)
Dies ist keine Stilpräferenz – der Aufnahmepfad liefert besseres Filmmaterial und etwa die Hälfte der Arbeit. Ein manueller Screencast zwingt dich, die Zeitleiste aus Pixeln rückzuentwickeln, die Wiederholungen des Autors zu jagen und zu schneiden, jeden Spotlight von Hand zu messen, den Browser-Chrome zuzuschneiden und auf Datenschutz zu prüfen. Eine skriptgesteuerte Aufnahme hat keines dieser Probleme von Natur aus, ist chrome-frei, lässt dich die Textgröße wählen und kann bei UI-Änderungen erneut ausgeführt werden. Gemessen am gleichen Ablauf: 71s Screencast mit dichtem Frame-Scanning vs. eine 28s Aufnahme mit jeder Quellzeit und jedem Element-Rechteck in beats.json – und 1,5-facher Textgröße im fertigen Frame.
Selbst wenn der Benutzer bereits etwas aufgenommen hat, sieh es dir vor der Aufnahme an. Es kodiert sein Modell seines eigenen Produkts – welche Funktion in welcher Reihenfolge gezeigt werden soll und worauf es ankommt. Dieses redaktionelle Urteil ist das Eine, was der Aufnahmepfad dir nicht umsonst gibt.
Lies die Referenzen bei Bedarf – lade sie nicht vor:
| Bedarf | Lies |
|---|---|
| In wessen Marke ist dieses Video? (Tokens, Logo, Schrift – eine Website reicht) | references/brand-style.md |
| Fahre die App selbst und nimm sie auf; 2x; Cursor; Auth; beats.json | references/playwright-capture.md |
| Das Ziel ist eine Webseite, die dir NICHT gehört (Genehmigungstor, Zustimmungswände, sticky Header, Lazy-Load-Rect-Drift, Live-Medien) | references/foreign-sites.md – VOR der Aufnahme lesen |
| Kopflos in einem Container oder CI ausführen (fehlende CJK/Emoji-Schriftarten, Chromium stirbt beim ersten Capture, „Executable doesn't exist“ direkt nach der Installation) | references/container-capture.md |
Nach Änderungen an capture-lib.js | node <skill>/scripts/test-foreign-sites.mjs – lokale Fixtures, kein Netzwerk; jeder Fall ist ein Fehler, der ausgeliefert wurde |
| Der Spotlight hat die falschen Pixel eingefasst, aber die Koordinaten stimmten | references/foreign-sites.md §4 – messe mit stableRect, nicht boundingBox |
| Erneute Aufnahme in einer anderen Sprache; Neuschnitt eines vorhandenen Cuts ohne Wiederaufbau der Zeitleiste | references/playwright-capture.md §9-10 |
| Eine .mov voller Wiederholungen erhalten – wähle und schneide die sauberen Takes | references/multiple-takes.md |
| ffmpeg/CLI läuft nicht, „0 GB frei“, bunx, Berechtigungen | references/pitfalls.md §6 + führe scripts/setup-render-env.sh aus |
| **Exakte Schnitt-/Zuschneide-/Geschwindigkeits-/Standbild-/Excise-Frames-Befehle | references/ffmpeg-recipes.md |
| Das Aussehen: Fenster, Spotlight, Karten, Überblendungen, Freeze-Frames ** | references/design-system.md (+ assets/template.html) |
| Erstellen eines zweiteiligen Feature-Guides (Konzept-Panels, Aktionsbeats, Choreografie) | references/guide-track-build.md |
| Sprachausgabe / ElevenLabs-Voiceover, Kontingent + Fallstricke bei Stimmen | references/voiceover.md |
| Sagt die Stimme tatsächlich das SKRIPT? (Markennamen, Akronyme) | scripts/verify-narration.mjs – Exit 1 = beheben |
| Die App rendert leer, 500 oder „offline“, BEVOR du aufnimmst | references/pitfalls.md §17 |
| Der TIMELINE.md-Vertrag; auf „0:12 zieht“-Feedback reagieren | references/timeline-and-review.md |
| Wo platziere ich den Spotlight? (niemals nach Augenmaß) | references/design-system.md → „NIEMALS Koordinaten nach Augenmaß“ |
| Eine Spotlight-Kante schneidet ständig etwas an, egal welchen Rand du verwendest | scripts/measure-spots.mjs – messe stattdessen den Weißraum des Layouts |
| Das Steuerelement kann wirklich nicht eingerahmt werden (kein 6px-Band an einer Kante) | references/design-system.md → „Manchmal gibt es keine Box“ |
| Der Chrome der App sitzt dort, wo die Caption-Karte hingeht | references/design-system.md → per-Beat-Kartenplatzierung + Aufteilen einer Karte am Schnitt |
| Das Standbild zeigt den Zustand NACH dem Klick (Spotlight auf leerem Raum) | references/playwright-capture.md §16 – friere auf der _hover-Markierung ein |
| Eine skriptgesteuerte Chat-Nachricht ist verschwunden; der Agent ist „fertig“, war es aber nicht | references/playwright-capture.md §17-18 |
| „Warum ist mein Filmmaterial eingefroren / falsch ausgerichtet / fehlerhaft?“ | references/pitfalls.md |
| Vereinzelte schwarze Ringe bei Klicks; eine Reparatur, die stillschweigend nichts getan hat | references/pitfalls.md §11-13 |
| Eine Prüfung hat BESTANDEN gesagt, aber etwas stimmt nicht | references/pitfalls.md §15 |
| Vor jedem Rendering (mechanische Prüfung, Exit 1 = beheben) | scripts/audit-composition.mjs |
| Ist das Motiv tatsächlich sichtbar? (Spot-Clearance + Kartenverdeckung; Exit 1 = beheben, Exit 2 = konnte nicht prüfen) | scripts/verify-material.mjs |
| Nach Snapshots: gezoomter Zuschnitt pro Spotlight (Vollbild-Lesevorgang übersieht abgeschnittenen Text) | scripts/crop-spots.mjs |
| Zeigt der Frame, worüber die Stimme SPRICHT? (erzählte Anleitungen, pro Thema) | scripts/verify-topics.mjs |
| Die App zeichnet auf, was du tust – Snapshot vorher, Wiederherstellung nachher | scripts/app-state.mjs |
| Eigenständige Schulungsunterlagen neben dem Video (nur auf Anfrage) | references/companion-docs.md |
Arbeite die Schleife über Snapshots, nicht über Renderings. snapshot --at t1,t2,… kostet Sekunden; ein Rendering kostet Minuten. Mach Bildausschnitt, Spotlight-Koordinaten, Text und Datenschutz an Standbildern richtig, rendere dann einmal und überprüfe die Bewegung.
Phase 0 – Umgebung (einmal pro Maschine/Sitzung)
Ein Befehl behandelt alle Fälle – macOS oder Linux, eine gesunde Maschine, ein fehlendes oder abgespecktes ffmpeg, ein fehlendes HyperFrames oder der falsche „0 GB frei“-statfs-Fehler. Diagnostiziere nicht manuell:
render_env="$(bash <skill>/scripts/setup-render-env.sh)" && eval "$render_env"
Nicht source <(…). Bash meldet den Status von source, nicht den der Prozesssubstitution, die es füttert, sodass ein Bootstrap, der auf halbem Weg stirbt – kein Netzwerk, eine fehlgeschlagene Installation – Erfolg meldet und dich mit der Hälfte seiner Exporte zurücklässt. Das Erfassen zeigt den Fehler zuerst und wendet nichts an, wenn es fehlschlägt.
Es installiert hyperframes (festgepinnt), falls nicht vorhanden, löst ein vollständiges ffmpeg auf, patcht die Plattenprüfung nur, wenn dieses Betriebssystem tatsächlich den Fehler hat, und exportiert HYPERFRAMES_FFMPEG_PATH, HYPERFRAMES_FFPROBE_PATH, PRODUCER_BROWSER_GPU_MODE und HYPERFRAMES_CLI.
Es sucht nach Filtern, nicht nach einer Binärdatei namens ffmpeg. Die Pipeline benötigt fps/pad (Phase 3 Frame-Pinning), crop (Phase 1B Chrome-Entfernung) und freezedetect (audit-composition.mjs + der Phase-6-Totluft-Durchlauf). Zwei abgespeckte Builds sind üblicherweise bereits auf PATH und bestehen eine naive Prüfung, bevor sie mitten in der Pipeline fehlschlagen: Playwrights gebündeltes ffmpeg und Remotions Compositor Bundle. Auflösungsreihenfolge: ein vollständiges System-ffmpeg → brew (macOS) → die ffmpeg-static/ffprobe-static-Pakete in ~/.hyperframes-cli (alle Plattformen, kein sudo – der normale Weg unter Linux) → ein gewrapptes Remotion Compositor Bundle als letzte Option, das warnt, weil es kein freezedetect hat, sodass diese beiden Freeze-Prüfungen stillschweigend bestehen und du sie manuell überprüfen musst (Pitfalls #1, #16).
[dies ist eine Übersetzung des bereitgestellten Ausschnitts; der vollständige SKILL.md-Text wäre hier fortgesetzt worden]