Site-to-Reel

Site to Reel

Erstelle einen kurzen vertikalen Film über eine Website, indem du die Website selbst verwendest: echte Seiten, echte Klicks, echte Zustände. Jeder Frame wird von einem Canvas-Renderer als reine Funktion der Zeit gezeichnet, dann offline aufgenommen und codiert. Dieses Skill ist der Haus-Workflow, der aus dem Dawas-Shlef-Reel destilliert wurde. examples/dawas-shlef/ enthält die Zeitpläne, Sprachaufnahmen, Aufzeichnungsskripte und Überprüfungsnotizen dieses Projekts als ausgearbeitete Referenz. Behandle es nur als Referenz. Kopiere keine Szenenliste auf ein anderes Produkt.

Zusammen laden mit:

• video-director für die handwerklichen Prinzipien und dessen scripts/check_timeline.py und scripts/qa_video.py.
• playwright-cli für jeden Browserschritt.

Wenn eines dieser Skills fehlt, sage es. Improvisiere nicht darum herum.

Unverhandelbar

Diese Regeln stammen aus dem Lastenheft, das dieses Skill geprägt hat, und gelten für jedes Projekt:

1. Nur echte UI. Nimm die live laufende lokale Seite auf. Zeige eine Zustandsänderung, indem du das echte Steuerelement anklickst und das echte Ergebnis aufzeichnest – zeichne es niemals. Erfinde keine Bildschirme, Zähler oder Toasts.
2. Hinterlasse die Welt des Benutzers so, wie du sie vorgefunden hast.
   • Gestalte, verändere, veröffentliche oder verbreite die Seite nicht neu.
   • Starte keine Kampagnen und sende keine Formulare ab.
   • Erstelle nur Demodaten, z. B. ein Lesezeichen, und entferne sie anschließend. Zeichne den Speicher vorher und nachher auf.
   • Lösche niemals vorhandene Benutzerdaten.
   • Stoppe die Server und Browsersitzungen, die du gestartet hast. Lasse den eigenen Server des Benutzers laufen, es sei denn, er stimmt dem Stoppen zu.
3. Öffentliche URL auf dem Bildschirm, niemals localhost. Die URL erscheint früh (nach 3 s) und auf der Endkarte.
4. Behauptungen bleiben in brand.json → claims. Worte sind nie stärker als die Quelle. Ein Kritiker sollte alles andere beanstanden, z. B. „kein Konto erforderlich“, wenn das Lastenheft dies nicht sagt.
5. Stimmen.
   • Klone niemals die Stimme einer Person.
   • Gib niemals vor, dass eine generierte Stimme eine echte Aufnahme ist.
   • Ein TTS-Erzähler spricht nur in der dritten Person über den Ersteller, also „erstellt von X“, niemals „Ich bin X“. Text in der ersten Person auf dem Bildschirm wird entsprechend angepasst.
   • Sage dem Benutzer, dass er KI-Audio beim Posten kennzeichnen soll.
6. Bezeichne einen unfertigen Schnitt nicht als final. Stumme Schnitte sind „Animatics“. Dateien heißen nur dann *-final, wenn Ton vorhanden ist und die Qualitätssicherung bestanden hat.
7. Behaupte nicht, was du nicht gemessen hast. Du kannst die Ausgabe weder sehen noch hören. Berichte über die Prüfungen, die du durchgeführt hast, und die Standbilder, die du dir angesehen hast, und sage deutlich, was niemand gesehen oder gehört hat, z. B. die Aussprache von TTS oder das Echtzeitgefühl.
8. Veröffentliche oder poste niemals für den Benutzer. Du kannst auf sein GitHub hochladen, wenn er darum bittet, aber das Posten auf Instagram und anderen sozialen Netzwerken ist immer seine Sache.

Workflow (drei Freigabetore)

Stufe	Du erstellst	Tor
0. Aufnahme	Eine Fragerunde (unten). Lies das Lastenheft, die Assets und die Website. Fülle brand.json aus.
1. Konzept und Look	TREATMENT.md mit der Ein-Satz-Idee, dem Haken, der Beat-Tabelle mit Lesungen, dem Heldenmoment und den Behauptungen. Eine schreibgeschützte Website-Umfrage. 2–4 Styleframes aus dem echten Renderer. Eine erste timeline.json.	Der Benutzer stimmt zu.
2. Stille Animatik	Aufnahmen, die vollständige Zeitleiste, gerenderte und codierte Frames als *-animatic-silent.mp4. Qualitätssicherung. Kontakt-, Übergangs- und Detailblätter plus ein Storyboard, alles aus dem codierten MP4. Kritikerüberprüfung mit einer Fehlerbehebungsrunde. Überprüfungsnotizen.	Der Benutzer stimmt Tempo und Bildausschnitt zu.
3. Finale	Erzählung (aufgenommen oder TTS, falls der Benutzer dies wählt), angepasst an das freigegebene Bild. Musikuntermalung und Soundeffekte. Ein Mix bei −16 LUFS und ≤ −1 dBTP. Untertitel. *-final.mp4. Qualitätssicherung. Kritiker mit einer Fehlerbehebungsrunde. Cover. Aktualisierte Notizen.	Der Benutzer hört zu und stimmt zu.

Verwende den Ask-First-Modus, wenn der Benutzer anwesend ist. Frage einmal, dann triff alle weiteren Entscheidungen selbst und protokolliere sie als ENTSCHEIDUNG: … weil … in den Überprüfungsnotizen, damit jede mit einer Antwort rückgängig gemacht werden kann.

Aufnahmefragen (eine Runde, empfohlene Option zuerst)

Frage nur, was das Lastenheft und die Website nicht bereits beantworten.

1. Was und für wen: die eine Sache, die der Film sagen muss, die Zielgruppe, und die Sprache und der Dialekt der Untertitel.
2. Plattform und Länge: Instagram Reels 9:16 bei 1080×1920 (Standard), ein 45 s Hauptschnitt plus ein separat geschnittener 15 s Schnitt, und ob 16:9 benötigt wird (Standard nein).
3. Fakten: die erlaubten Behauptungen und die exakte Schreibweise der Marke, der Name des Erstellers und die öffentliche URL.
4. Assets: Markenfarben und -schriften, Logo oder Wortmarke, und welche Website-Zustände und Funktionen gezeigt werden sollen.
5. Ton: Der Benutzer nimmt den Voiceover auf (bevorzugt), oder TTS mit Offenlegung, oder nur Musik und Untertitel. Frage nach Musikrechten.
6. Grenzen: was nicht berührt werden darf (der Website-Server, vorhandene Benutzerdaten, Formulare).

Bei „Video jetzt erstellen“ ohne verfügbare Aufnahme frage, wie der Ton kommen soll. Die Optionen sind: Musik + Untertitel ohne Stimme, der Benutzer nimmt auf, oder ein generierter Erzähler. Wenn der Benutzer TTS wählt, überprüfe vor der Installation, was installiert ist. Die Installation von edge-tts sendet den Skripttext an den Online-Dienst von Microsoft – hole daher zuerst das Ja des Benutzers ein und lass ihn die Stimme wählen.

Projektstruktur

Kopiere templates/project/ in einen neuen Projektordner und bearbeite ihn dann:

brand.json            Name, Wortmarke, Ersteller, öffentliche URL, Paletten-Tokens, Schriften, Behauptungen, neverSay, Stimme, Sicherheitszone
reel.html, reel.js    der Renderer (markenneutral; liest alles aus der Zeitleiste)
vo-lines.json         VO-Zeilen: [frühester Start s, Text, spätestes Ende s]
assets/fonts, assets/icons, assets/previews
capture3x/            Aufnahmen + boxes.json (geschrieben aus der Ausgabe von tools/capture.js)
tools/
  survey.js           schreibgeschützte Seitenumfrage (Überschriften, Links, y-Positionen, Speicherschlüssel)
  capture.js          Aufnahmen + Callout-Boxen, Demodaten erstellt und wiederhergestellt
  cli3x.config.json / cli4x.config.json / render.config.json   Playwright-CLI-Konfigurationen
  build_timelines.py  timeline.json + timeline-ad15.json aus brand.json (+ vo/*.json)
  styleframes.js, stills.js, render-frames.js, shot-storyboard.js   Run-Code-Skripte
  make_vo.py, make_audio.py, make_srt.py                            Stimme, Ton, Untertitel
  review_frames.py, storyboard.py                                   Blätter aus dem codierten MP4

Befehle

CLI steht für node "<argo>/node_modules/playwright/cli.js" cli oder einfach playwright-cli, wenn es installiert ist. Jedes run-code-Skript ist ein einzelnes async page => {}. Parameter werden in der Seiten-URL als Query übergeben, und --raw gibt nur den zurückgegebenen Wert aus.

# Aufnahme (lokale Seite läuft bereits; saubere In-Memory-Sitzung)
CLI -s=cap open --config=tools/cli3x.config.json "about:blank"
CLI -s=cap --raw run-code --filename=tools/survey.js
CLI -s=cap --raw run-code --filename=tools/capture.js      # speichert {"caps": ...} in capture3x/boxes.json
CLI -s=cap close

# Zeitleiste + Tor
python -X utf8 tools/build_timelines.py
python -X utf8 ~/.claude/skills/video-director/scripts/check_timeline.py timeline.json

# Rendern (temporärer statischer Server, wird danach gestoppt)
python -m http.server 4380 --bind 127.0.0.1
CLI -s=render open --config=tools/render.config.json "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<abs frames dir>&times=1.2,24.5"
CLI -s=render --raw run-code --filename=tools/styleframes.js
CLI -s=render goto "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<abs frames dir>&from=0&to=1349"
CLI -s=render --raw run-code --filename=tools/render-frames.js   # lange Filme: im Hintergrund oder in Blöcken ausführen

# Codieren (stille Animatik; für Finale -i out/audio/<film>-mix.wav -map 0:v -map 1:a -c:a aac -b:a 192k -ar 48000 -t <dur> hinzufügen)
ffmpeg -framerate 30 -start_number 0 -i <frames>/frame_%04d.png -frames:v 1350 -c:v libx264 -preset slow -crf 16 -pix_fmt yuv420p -r 30 -vf setsar=1 -movflags +faststart out/reel-animatic-silent.mp4

# Messen und überprüfen (immer aus dem codierten MP4)
python -X utf8 ~/.claude/skills/video-director/scripts/qa_video.py out/reel-final.mp4 --beats timeline.json --lufs -16 --tp -1 --out out/qa-reel
python -X utf8 tools/review_frames.py out/reel-final.mp4 timeline.json reel
python -X utf8 tools/storyboard.py out/reel-final.mp4 timeline.json reel
CLI -s=render goto "http://127.0.0.1:4380/out/storyboard-reel.html?shot=<abs>/out/storyboard-explained.png"
CLI -s=render --raw run-code --filename=tools/shot-storyboard.js

# Stufe 3
python -X utf8 tools/make_vo.py && python -X utf8 tools/build_timelines.py && python -X utf8 tools/make_audio.py && python -X utf8 tools/make_srt.py

Unter Windows führe Python als python -X utf8 mit PYTHONIOENCODING=utf-8 aus, sonst brechen arabische Ausgaben.

Überprüfungsschleife

• Kritiker. Gib nach Stufe 2 und erneut nach Stufe 3 einem Unter-Agenten mit frischem Kontext die MP4s, Zeitleisten, Blätter und QA-Berichte. Bitte um eine Rangliste: muss behoben, sollte behoben, Kleinigkeiten, jeweils mit einem Zeitstempel und einer konkreten Lösung. Schreibgeschützt, unter 500 Wörtern, keine erfundenen Probleme.
• Eine Fehlerbehebungsrunde. Führe eine Runde Fehlerbehebungen durch und überprüfe dann erneut ab dem codierten MP4.
• Eingegrenzte Fehlerbehebungen. Sichere für eine auf einige Frames begrenzte Fehlerbehebung diese Frames, rendere nur diesen Bereich neu und vergleiche dann mit der Sicherungskopie. Frames außerhalb der Änderung müssen byte-identisch sein, bevor du neu codierst.
• Der Bericht des Kritikers ist Modellausgabe. Er zählt niemals als Zustimmung des Benutzers.

Liefergegenstände

• out/<film>-animatic-silent.mp4 (Stufe 2) und out/<film>-final.mp4 (Stufe 3).
• out/storyboard-explained.png, out/contact-sheet-<film>.jpg, out/review/, out/qa-*/.
• timeline*.json, vo-lines.json, vo/, out/audio/ (Mix plus Stems), out/subtitles-*.srt.
• out/cover/reel-cover.jpg und seine 3:4-Gittervorschau.
• voiceover-script-*.txt, gekennzeichnet entweder als vertont (Engine, Stimme, Offenlegung) oder als nicht aufgezeichnet.
• review-notes.md: ffprobe-Metadaten, Struktur, jede Prüfung mit ihrer Nummer, die Kritikertabelle und ihre Fehlerbehebungen, ENTSCHEIDUNGEN, klar angegebene Einschränkungen, exakte Befehle und dem Benutzer überlassene Entscheidungen. Die Vorlage ist references/report-template.md.

Referenzen (lies sie, wenn du diese Stufe erreichst)

• references/motion.md: Kameramodell, Übergänge, Text-Timing, Callouts, Untertitel, Endkarte, Halte.
• references/capture.md: Umfrage, Aufnahme, echte Zustandswechsel, Boxen, Wiederherstellen von Demodaten.
• references/sound-and-voice.md: Aufnahme vs. TTS, Anpassen des VO an das Bild, Helden-Stille, Musikuntermalung, Mix, Untertitel.
• references/instagram-reels.md: Format, Sicherheitszonen, Haken, CTA-Formulierung, Cover, KI-Kennzeichnung.
• references/gotchas.md: Jeder gefundene Fehler und seine Lösung.
• references/report-template.md: Vorlage für Überprüfungsnotizen und endgültige Nachricht.
• examples/dawas-shlef/: das vollständige ausgearbeitete Beispiel (keine Aufnahmen oder Schriften, also neu aufnehmen).