adminosinthub-bit/Claude-Video-Skill

HTML → Video: Mehrere Varianten, Auswahl der Besten, Finale Zusammenstellung

Claude ist am stärksten im Design mit HTML/CSS. Daher machen wir Videos so: Wir schreiben eine Animation in HTML, rendern sie in ein Video, betrachten das Ergebnis mit eigenen Augen (Einzelbilder), vergleichen Varianten und verbessern.

Voraussetzungen

• node + playwright (mit Chromium), ffmpeg. Überprüfung: bash scripts/check-env.sh.

Schnellstart

cp references/template-scenes.html work/<Name>/v1.html     # Vorlage auf Szenen-Engine
node scripts/render.mjs work/<Name>/v1.html --preset vertical-preview --duration 20 --out work/<Name>/v1.mp4

• references/engine.js — Szenen-Engine: Hintergrund, Untertitel mit Hervorhebung (*Wort*), Fortschritt, Übergänge, Easing (E.pop, E.type, E.set).
• references/parts.js — Details: Maskottchen P.bot, Symbole P.icon, macOS-Fenster P.win, Chat-Bläschen.
• references/design-notes.md — Was ein Video „lebendig“ macht (Geschichte, Aufhänger, Rhythmus, Untertitel). Lies dies, bevor du Varianten schreibst.
• Beispiele fertiger Videos: examples/ (claude-ad — 16:9; chatgpt-ad — 9:16, 25 s; duolingo-ad — 9:16, 40 s, 60 fps mit Geschichte und Demonstrationen; claude-self-ad — 9:16, 39 s, 60 fps, Werbung für Claude selbst mit Meta-Wendung).
• Dateigröße: Ein 40 s / 60 fps Video ≈ 10 MB; falls ein kleineres Limit benötigt wird — --fps 30 oder transcodiere mit ffmpeg -i in.mp4 -crf 24 out.mp4.

Wichtigste Qualitätsprinzipien

1. Zeigen, nicht erzählen. Jede Behauptung im Video ist eine Beweisszene, keine Überschrift.

   Behauptung	Was gezeigt wird
   „Schreibt Code“	Eine Anfrage wird getippt, dann erscheint zeilenweise der Code
   „Erklärt verständlich“	Ein echter Fehler (she drink), Hervorhebung und die Regel „+s“, eine Eule mit Erklärung
   „Lehrt in der Praxis“	Ein Finger tippt auf Wörter, der Satz wird zusammengesetzt, grünes Panel „Richtig!“
   „Serie von 346 Tagen“	Zähler 1→346 mit Feuer, Kalender füllt sich wellenförmig, Benachrichtigung, Glückwunsch mit Konfetti
   „Spiel“	Ligatabelle, in der die Zeile des Helden auf Platz 1 steigt, und +XP

2. Beschreibe, was passiert. In jeder Szene gibt es zwei Textebenen: eine kleine Überschrift oben (<div class="kick">: „Lektion“, „Liga“) und einen Untertitel unten mit hervorgehobenem Schlüsselwort (cap: 'Erklärt *Fehler* verständlich'). Vollständige Sätze sind besser als Ein-Wort-Slogans.

3. Flüssigkeit. Das Finale wird mit 60 fps gerendert. Alles lebt kontinuierlich: Federnde Erscheinungen (E.spring, E.pop), langsames Heranzoomen der Kamera (cam: [1, 1.05]), Wippen des Maskottchens, Blinzeln (P.blink), Fingertipps mit Wellen (P.touch), Zähler (E.count), Übergänge circle/wipe/left. Lasse keine statischen Bilder länger als ~0,5 s stehen.

4. Handlungsbogen: Aufhänger (Schmerz/Humor) → Demonstrationen → „Beste Eigenschaften“ → Höhepunkt (Belohnung/Ergebnis) → Aufruf zum Handeln. 30–45 s für Werbung.

5. Drei Varianten – drei unterschiedliche Ideen, nicht drei Farbvarianten (z. B.: „Serienzähler“, „Live-Lektion“, „Dialog mit Maskottchen“). Das Finale wird dann aus den besten Szenen aller Varianten zusammengesetzt.

Ablauf

1. Briefing

Kläre (oder wähle sinnvolle Standardwerte): Thema/Text, Zielgruppe, Dauer (Werbung 20–30 s, Geschichte bis 60 s), Format (Standard vertikal 1080×1920 für Reels/Shorts/TikTok; 1920×1080 und 1080×1080 auf Anfrage), fps (30), Stil, Farben/Schriftarten. Erstelle ein kurzes Storyboard: Aufhänger → Problem → Lösung → Demo → Aufruf. Verwende für Markenwerbung keine offiziellen Logos – zeichne dein eigenes Maskottchen.

2. Drei oder mehr UNTERSCHIEDLICHE Varianten

Erstelle einen Arbeitsordner work/<Name>/ und darin v1.html, v2.html, v3.html (mehr möglich). Die Varianten müssen sich konzeptionell unterscheiden, nicht nur in Details. Zum Beispiel: (a) Geschichte mit Maskottchen, (b) Produktdemo mit Karten, (c) schnelle Schnitte mit großer Typografie. Unterschiedliche Komposition, Palette, Rhythmus. Jede Datei ist ein eigenständiges HTML (keine externen Ladevorgänge, Schriftarten systemeigen oder eingebettet). Animationsregeln: references/animation-contract.md; Startvorlage: references/template.html.

3. Rendern jeder Variante

Varianten in Vorschauauflösung (schnell), Finale in voller Auflösung:

node scripts/render.mjs work/<Name>/v1.html --out work/<Name>/v1.mp4 --preset vertical-preview --duration 21
node scripts/render.mjs work/<Name>/final.html --out work/<Name>/final.mp4 --preset vertical --fps 60 --duration 40 [--audio music.mp3]

Das Rendern ist deterministisch und parallel (Anzahl der Kerne): Die Zeit wird manuell für jedes Bild gesetzt, es gibt keine Ruckler oder Auslassungen. --from 5 --to 9 rendert nur einen Ausschnitt. Ein einzelnes Bild ohne Video: node scripts/frame.mjs v1.html 3.5,7 work/<Name>/frames --width 540 --height 960.

4. Analyse – unbedingt ansehen

bash scripts/contact-sheet.sh work/<Name>/v1.mp4 work/<Name>/v1-sheet.png 12

Öffne *-sheet.png und einzelne Bilder über Read (Bilder werden visuell gelesen). Bewerte nach references/rubric.md (Summe aus 8 Kriterien mit je 5 Punkten): Lesbarkeit, Hierarchie, Rhythmus, Flüssigkeit, Balance, Geschlossenheit, Briefing-Konformität. Notiere für jede Variante: Punktzahl pro Kriterium, was am besten gelungen ist, was am schwächsten ist. Bewerte nicht den Code – nur das, was auf den Bildern zu sehen ist. Falls etwas unklar ist, erstelle dichtere Bilder oder zu bestimmten Zeitpunkten: bash scripts/contact-sheet.sh <mp4> <png> 12 <start_s> <end_s>.

5. Auswahl des Führenden und Synthese

• Wähle die beste Variante nach Gesamtpunktzahl aus.
• Erstelle eine Liste der „Übernahmen“: konkrete gelungene Lösungen aus den anderen Varianten (z. B. „Typografie aus v2“, „Erscheinungsanimation aus v3“, „Palette aus v1“).
• Erstelle final.html basierend auf dem Führenden und nimm diese Änderungen vor. Behebe die Schwachstellen des Führenden.

6. Iteration und Prüfung des Finales

Rendere final.mp4, erstelle erneut ein Contact Sheet, vergleiche mit dem Führenden. Falls das Finale nicht besser ist als der Führende laut Rubrik – korrigiere und wiederhole (maximal 3 Iterationen). Zeige dem Benutzer dann das Ergebnis: Pfad zu final.mp4, kurze Bewertungstabelle der Varianten und die Liste der Übernahmen.

7. Ton (optional)

ffmpeg -i final.mp4 -i music.mp3 -shortest -c:v copy -c:a aac final-audio.mp4

Regeln

• Kopiere keine markenrechtlich geschützten Maskottchen und Logos: Zeichne deinen eigenen Charakter, Markennamen nur als Text.
• Überspringe Schritt 4 nicht: Die Entscheidung wird anhand der gesehenen Bilder getroffen, nicht aufgrund von Annahmen.
• Lege alle Artefakte in work/ ab (in .gitignore), committe ins Repository nur das Skill und Beispiele.
• Falls Chromium/ffmpeg nicht verfügbar sind – sage dies direkt, imitiere kein Ergebnis.