Communitygithub.com

ultimate-claude-render

Erstellt Videos (Reels, Shorts, TikTok, YouTube, Anzeigen, Produktdemos) aus einer animierten HTML-Szene mit GSAP, die Frame für Frame gerendert wird, inklusive Voice-Over, Wort-für-Wort-Untertitel, eingefügten Fotos und Videos, echten App-Bildschirmen, Hintergrundmusik, Effekten, Abmischung auf -14 LUFS und automatischer Qualitätssicherung.

Was ist ultimate-claude-render?

Diese Fähigkeit (Skill) verwandelt eine animierte HTML-Seite (mit GSAP) in ein professionelles Video, das für Plattformen wie Reels, Shorts, TikTok und YouTube optimiert ist. Der gesamte Prozess ist deterministisch und reproduzierbar: Der Agent schreibt eine HTML-Szene, die ihren Zustand nur von der Zeit `t` ableitet, ein Headless-Chromium rendert jedes Frame, und ffmpeg fügt die Audiospur (Sprache, Musik, Effekte) hinzu. Die Besonderheit liegt in der Synchronisation: Die Animation wird an der Sprachausgabe ausgerichtet (jedes Wort hat einen exakten Zeitstempel), und Untertitel werden Wort für Wort eingeblendet. Der Workflow ist strikt: Zuerst wird ein Skript („Roteiro“) in `narracao.txt` geschrieben, dann das Aussehen durch Standbilder (`ucr stills`) bestätigt, dann ein Preview erstellt, und erst dann der finale Render gestartet. Der Skill umfasst eine vollständige Pipeline: Vorbereitung, Mediensuche, Spracherzeugung, Zeitsteuerung, Beat-Erkennung, Soundeffekte, Abmischung auf -14 LUFS (Lautheitsstandard für soziale Medien) und automatische Qualitätskontrolle. Er läuft auf Linux, macOS und Windows und unterstützt jede Marke über eine `marca.json`-Datei, die Farben, Schriftarten und Logos definiert. Typische Anwendungsfälle sind „Mach ein Video“, „Startvideo“, „Anzeige“, „Produktdemo“, „Reels“ oder wenn ein vorheriges Video als „statisch“, „ amateurhaft“, „desynchronisiert“ oder „markenlos“ empfunden wurde.

Funktioniert mit✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/PedroHenrique0713/ultimate-claude-render/tree/HEAD/skills/ultimate-claude-render

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

ultimate claude render

Ein Video ist eine HTML-Seite, deren Zustand eine Funktion der Zeit t ist. Claude schreibt die Szene; die Engine fordert jedes Frame an (window.__seek(t)), erstellt einen Screenshot im Chromium headless und ffmpeg fügt die Stimme, die Musik und die Effekte hinzu. Nichts wird „aufgenommen“: Alles ist deterministisch und wiederholbar.

Das Repository ist die Engine + die Audio-Skripte + dieser Skill. Die Videos jeder Person liegen in separaten Projektordnern außerhalb davon.

Bevor Sie eine Zeile schreiben

  1. Führen Sie ucr doctor aus. Wenn ffmpeg, Python mit numpy/scipy oder Chromium fehlt, wird der genaue Befehl angezeigt.
  2. Finden Sie das Repository. Der Skill wird mit ucr instalar-skill installiert und das Repository befindet sich dort, wo es geklont wurde (ucr im PATH oder node <repo>/bin/ucr.mjs). Wenn es nicht gefunden wird, fragen Sie, wo es geklont wurde; implementieren Sie die Engine nicht neu.
  3. Plan vor der Produktion (Video ist teuer neu zu machen): Vollständiges Drehbuch, Format, Marke, verfügbare Medien, Zahlen mit Quellenangabe, was in jedem Satz zu sehen ist. Der Benutzer genehmigt schrittweise: Drehbuch → Stilbilder (ucr stills) → Vorschau → finales Rendern. Rendern Sie nicht das gesamte Video ohne genehmigtes Drehbuch und Standbilder.
  4. Zuerst bestehende Marke verwenden. Lesen Sie das Brandbook, die Website oder die App des Benutzers und schreiben Sie die marca.json (Farben, Schriftart, Logo). Erfinden Sie niemals eine Identität und zeichnen Sie das Logo nicht neu. Kundenmaterial mit generischer Vorlagen-Optik wird abgelehnt: echte Fotos, Farben und Logos.

Ablauf

ucr novo meu-video --marca <marca-ordner|_modelo|exemplo> --formato vertical
# Bearbeiten Sie narracao.txt, projeto.json und cena.html
ucr tudo meu-video          # prep → midia → voz → tempos → batidas → sons → mix → render → QA

Einzelschritte: ucr prep|midia|voz|tempos|batidas|sons|mix|render|qa <ordner>. Günstige Überprüfung: ucr stills <ordner> 2,8.5,15 (PNG von jedem Zeitpunkt, ohne das Video zu rendern). Echtzeit-Vorschau: ucr preview <ordner> --audio.

Ordner eines Projekts:

DateiBeschreibung
projeto.jsonFormat, fps, Marke, Stimme, Atempausen, Mix, Render
narracao.txtDas gesprochene Drehbuch; wird Stimme, Untertitel und Zeit der Szene
cena.htmlDie Szene (was Sie schreiben)
marca/ oder marca in anderem Pfadmarca.json + Schriftarten + Logo
midia/Fotos, Videos, trilha.mp3, sfx/<typ>/
build/, .ucr/, saida/Generiert; nicht versionieren

Die Szene schreiben

Grundgerüst: siehe exemplos/modelo-cena.html des Repositorys. Die Reihenfolge der <script>-Tags ist wichtig (GSAP → marca → projeto → tema → tempos → midia → batidas → motor). Vollständige API in references/motor-api.md; Zusammenfassung:

  • M.fundo(), M.camera(), M.marca(), M.legendas(F, { chaves: [...] }), M.grande(texto, { t, fim })
  • M.celular(pai, {x,y,B}), M.janela(pai, {...}), M.terminal(pai, {linhas}), M.cursor/clicar/tocar
  • M.foto(pai, 'nome', {...}), M.video(pai, 'nome', { som: true }) (aus midia/, nach ucr midia)
  • M.T('palavras') = Zeitpunkt, zu dem diese Wörter gesagt werden. Verankern Sie alles an der Sprache, nicht an festen Sekunden: Das Ändern eines Satzes im Drehbuch verschiebt nicht den Rest der Szene.
  • M.som(t, 'tipo') markiert einen Effekt für den Mix; M.batida(t) zieht einen Schnitt zum Beat der Musik.

Goldene Regeln der Szene:

  1. Alles hängt nur von t ab. Tweens in der Timeline (M.tl), Zähler und Zeichnungen in M.ATUALIZAR.push(t => ...). Kein setInterval, Date.now(), <video> mit play() oder CSS-Animationen.
  2. Sicherer Bereich der Plattform: Die Qualitätssicherung erkennt Text außerhalb (vertikal: 14% oben und 25% unten).
  3. Ruhe führt zu Drift. Nichts länger als ~1,5 s stillstehen (die Qualitätssicherung misst es und der Zuschauer springt ab). M.camera() bewegt die Szene in 3D; eine dunkle Karte auf dunklem Hintergrund bewegt sich, ohne dass jemand es bemerkt, also geben Sie ihr einen Rand und Glanz.
  4. Jeder Satz ändert das Bild. Neuer Satz, neues Bild oder neue Bewegung.
  5. Vor dem Rendern: ucr stills an 3 oder 4 Zeitpunkten. Skriptfehler (doppelte Variable, Wort außerhalb der Erzählung) erscheinen sofort mit der Fehlermeldung der Seite.

Audio

  • Stimme: projeto.json → voz.provedor: edge (kostenlos, ohne Schlüssel; gut zum Testen, nicht für kommerzielle Nutzung), elevenlabs, fal, oder arquivo (Sie haben aufgenommen; Zeiten über Deepgram nova-3). Text auf dem Bildschirm = der aus narracao.txt, die Zeiten kommen von der Stimme.
  • Atempausen: "respiros": {"2": 1.2} = 1,2 s Stille nach Satz Nummer 2 (das Bild braucht Zeit zum Einblenden).
  • Hintergrundmusik: midia/trilha.mp3 (kommerzielle Lizenz!) oder "sintetica" (original, ohne Lizenz). Wird automatisch unter der Stimme abgesenkt (Ducking).
  • Effekte: synthetisiert (Whoosh, Impact, Klick, Glanz, Aufstieg, Verschluss, Pop, Taste, Bass, Papier) oder Dateien in midia/sfx/<typ>/.
  • Master: −14 LUFS und −1,5 dBTP (Reels/TikTok/Shorts), gemessen in der endgültigen Datei.

Details und Fallstricke: references/audio.md.

Qualitätssicherung und Auslieferung

Der Render führt die Qualitätssicherung automatisch durch (saida/<name> - QA.txt): Größe, Farbe (BT.709 markiert), Standbild, schwarzer Bereich, Lautstärke, Spitze und Text außerhalb des sicheren Bereichs. Grüne Qualitätssicherung ist keine Freigabe: Öffnen Sie das MP4, sehen Sie sich die Frames an, hören Sie zu. Melden Sie, was die Qualitätssicherung beanstandet hat und was Sie gesehen haben; erklären Sie es nicht als „fertig“, ohne es angesehen zu haben.

Ausgaben: saida/<name>.mp4 (Auslieferung, 22 Mb/s) und saida/<name> - leve.mp4 (30 fps, zum Verschicken per Nachricht).

Wenn etwas schiefgeht

  • Szene wird nicht fertig (A cena não ficou pronta): Skriptfehler (die Nachricht bringt den Seitenfehler sofort) oder, ohne jeden Fehler, falscher <script>/Medienpfad (dann wird das Zeitlimit von 90 s abgewartet).
  • Langsames Rendern: siehe references/armadilhas.md (Filter-Blar, Backdrop-Filter, Vollbild-Blend, <video> auf der Seite).
  • Nur einen Teil neu rendern: ucr render <ordner> --de 30 --ate 38 (verwendet die Teile des vorherigen Renderings wieder, wenn die Parameter gleich sind).
  • Vor langem Rendern: df -h (≈ 250 MB an Teilen und ≈ 145 MB Auslieferung pro 45 s bei 1080×1920).

Referenzen (bei Bedarf lesen)

  • references/motor-api.md: gesamte API von M.* mit Beispielen
  • references/marca.md: marca.json Feld für Feld, Formate und Zonen
  • references/audio.md: Stimme, Atempausen, Musik, Effekte, Mix, Lizenzen
  • references/receitas.md: Foto, Video in der Mitte, echter Bildschirm, Terminal, horizontal, Varianten, Palettenwechsel
  • references/armadilhas.md: Was schon kaputt gegangen ist (gemessen), nach Themen

Verwandte Skills