Communitygithub.com

zhengshuyuan2023uk/cartoon-audio-short

Erstelle einen vertikalen animierten Zeichentrick-Kurzfilm. Bietet 10 Ideen, schreibt das Drehbuch und verwandelt die Sprachaufnahme des Benutzers in ein fertiges MP4-Video mit Musik und Soundeffekten bei halber Lautstärke der Stimme.

Was ist cartoon-audio-short?

Dieses Skill ermöglicht es, aus einer Idee oder einer Sprachaufnahme einen vollständig produzierten, vertikalen animierten Kurzfilm im Cartoon-Stil zu erstellen. Es ist für KI-Agenten wie Claude Code, Cursor oder Codex konzipiert und automatisiert den gesamten kreativen Prozess: Von der Generierung von 10 einzigartigen Videokonzepten über das Schreiben eines Erzählskripts bis hin zur Erstellung des fertigen Videos als MP4-Datei mit synchronisierter Sprachausgabe, Hintergrundmusik und Soundeffekten. Das Skill verwendet eine spezielle Code-Basis im Kit-Ordner, die eine 3D-Engine (basierend auf drei.js) und Python-Tools für Timing-Analyse und Audio-Mixing enthält. Es unterstützt Plattformen, die Bash, Node.js, Python und FFmpeg ausführen können. Der Benutzer reicht lediglich eine Sprachaufnahme ein oder durchläuft die Ideenfindungs- und Skriptphase. Das Skill erstellt dann automatisch ein Storyboard, generiert die 3D-Welten und Zeichentrickkarten, synchronisiert die Animation mit der Sprachaufnahme, mischt die Audiospuren (wobei Musik und Soundeffekte auf 50 % der Sprachlautstärke gesetzt werden) und rendert das endgültige Video in 1080x1920 bei 30 fps.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/zhengshuyuan2023uk/muskill/tree/HEAD/cartoon-audio-short

In Ihrer bevorzugten KI fragen

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

Dokumentation

Cartoon-Kurzfilm: Idee → Skript → Sprachaufnahme → fertiges MP4

Der Look: flache 2D-Bohnenkopf-Cartoon-Figuren (leinengezeichnete "Karten" mit Pflaumenkonturen) in einer bunten 3D-Welt mit schwarzen Tintenkonturen, bemalten Texturen, Tiefenschärfe und gleitenden Kameras. Die Ausgabe ist 1080x1920, 30 fps, genau so lang wie die Sprachaufnahme. Die Stimme des Benutzers bleibt unverändert. Die Musikuntermalung und Soundeffekte werden synthetisiert und liegen bei 50 % der Sprachlautstärke. Bewährt bei "Der Soldat, der nie ging" (19,7 s, 8 Einstellungen).

Regeln

  • Geschichten, Figuren und Einstellungen sind immer originell. Erstelle niemals das Video eines anderen Urhebers Einstellung für Einstellung nach. Biete stattdessen eine originelle Interpretation derselben Idee an.
  • Keine echten, namentlich genannten lebenden Personen als Figuren und keine Markenmaskottchen oder -logos.
  • Keine Untertitel, es sei denn, der Benutzer wünscht sie. Diegetischer Text (eine eingravierte Nachricht, ein Schild) ist in Ordnung und muss korrekt lesbar sein (nicht gespiegelt).
  • Die Stimme niemals bearbeiten oder neu timen. Das Bild ist darauf abgestimmt, und jede visuelle Reaktion erfolgt 0-3 Bilder vor ihrem Wort.
  • Audio-Pegel: Die Musikuntermalung liegt bei 50 % des Sprachpegels (−6 dB, gated RMS). Soundeffekte liegen bei 50 % oder etwas weniger, mit Spitzen, die so begrenzt sind, dass kein Treffer über die Erzählung hinausragt. Mische immer mit mix.py, niemals von Hand. Verwende kein Ducking oder Kompression, das dieses Verhältnis verändern würde; nur eine lineare Verstärkung plus ein Peak-Limiter werden auf den gesamten Mix angewendet.
  • Halte den Benutzer mit einer Aufgabenliste auf dem Laufenden. Sende ein Kontaktblatt mit Standbildern vor dem langen Rendervorgang.

Stufe 1: Aufnahme (immer zuerst)

Wenn bereits eine Audiodatei angehängt ist, springe zu Stufe 4. Wenn auch ein Skript angegeben wurde, verwende es für das Timing. Andernfalls stelle eine AskUserQuestion (oder einfachen Text, wenn dieses Tool fehlt): "Wo beginnst du?"

  • Sprachaufnahme fertig: Bitte den Benutzer, sie hochzuladen, zusammen mit dem Skripttext, falls vorhanden (das Skript macht das Timing exakt). Gehe zu Stufe 4, wenn sie eintrifft.
  • Ich habe ein Skript, brauche die Sprachaufnahme: Straffe das Skript ggf. gemäß Stufe 3, gib es mit Aufnahmetipps zurück, bitte um den Upload und gehe dann zu Stufe 4.
  • Benötige Video-Ideen und ein Skript: Gehe zu Stufe 2. Frage auch nach der Ziellänge, falls der Benutzer sie nicht genannt hat. Der Standardwert liegt bei 20-30 s; 45-60 s sind erlaubt.

Stufe 2: 10 Video-Ideen

Gib genau 10 Ideen in einer Antwort, nummeriert, und bitte den Benutzer, mit einer Nummer zu antworten (oder "mehr"). Jede Idee erhält:

  • Titel (5-8 Wörter, neugierig machend, z. B. "Der Soldat, der nie ging").
  • Aufmacher: der erste gesprochene Satz, ein Paradoxon, das als Tatsache dargestellt wird ("Ein Mann verkaufte den Eiffelturm. Zweimal.").
  • Die Wendung in einem Satz (die ironische Pointe, die das Video beendet).
  • Warum es sich gut animieren lässt: die 2-3 großen visuellen Momente (ein Einsturz, eine Enthüllung, eine Verfolgungsjagd).
  • Wahr oder Legende: Sage klar, ob es sich um eine dokumentierte Geschichte, einen umstrittenen Bericht oder eine Volkssage handelt.

Was eine Idee "perfekt" für dieses Format macht:

  • Eine überraschende Geschichte mit einer physischen Ursache und Wirkung, die man zeigen kann.
  • Eine klare Jedermann-Figur, Eskalation der Einsätze und eine Wendung in der letzten Zeile.
  • Ein Schauplatz, der aus einfachen 3D-Formen plus Cartoon-Karten gebaut werden kann (Städte, Brücken, Schiffe, Burgen, Wüsten, Labore, Paläste).
  • Mische die 10 Ideen über Epochen und Themen hinweg: Antike, Mittelalter, 1800er, Moderne, Wissenschaft, Tiere, Erfindungen, Katastrophen, seltsame Gesetze, glückliche Zufälle.
  • Überprüfe bei als wahr dargestellten Inhalten die wichtigsten Fakten mit einer Websuche, bevor du sie anbietest. Präsentiere keine virale Legende als Tatsache. Wenn der Benutzer sie trotzdem möchte, rahme sie als "der Legende nach" ein.
  • Keine echten lebenden Personen als Zielscheibe eines Witzes, nichts Anstößiges und nichts Politisches.

Stufe 3: Skript (nachdem der Benutzer gewählt hat)

Schreibe nur die Erzählung (keine Regieanweisungen im gesprochenen Text), mit etwa 3,7 Wörtern/s: 20 s ≈ 75 Wörter, 30 s ≈ 110, 60 s ≈ 220. Formel:

  1. Aufmacher (Satz 1, keine Einleitung): die absurde Tatsache.
  2. Schauplatz in 1-2 Zeilen: wann, wo, wer, ein konkretes Detail.
  3. Steigerung, 2-4 Schläge, jeder größer. Andere zweifeln oder verspotten. Verwende einen Übertreibungswitz.
  4. Geheimnis oder Wendepunkt: "Aber als..." / "Siehst du," führt den eigentlichen Mechanismus ein, oft mit einer alltäglichen Analogie.
  5. Wendung / Pointe: kurz, ironisch und die letzten Worte des Videos. Verwende einfaches gesprochenes Deutsch, Zusammenziehungen, Sätze mit etwa 8-15 Wörtern, und schreibe Zahlen als Wörter aus. Beschreibe niemals, was der Zuschauer bereits sieht.

Antworte dann mit:

  • Dem Skript in einem kopierbaren Block, mit der Wortzahl und der geschätzten Länge.
  • Einem einleitenden Absatz mit dem visuellen Plan (die Einstellungen, die du animieren wirst).
  • Aufnahmetipps: eine gleichmäßige, warme Erzählerstimme; ElevenLabs funktioniert gut (eine tiefe Erzählerstimme, Geschwindigkeit etwa 1,05-1,1, Stabilität etwa 45-55 %). Mp3 oder wav ist in Ordnung. Lasse natürliche Pausen am Satzende. Exportiere ohne Musik.
  • Der Aufforderung: "Lade die Sprachaufnahme hoch, wenn sie fertig ist, und ich erstelle das vollständige Video." Behalte den endgültigen Skripttext. Er steuert das Timing in Stufe 4, sodass keine Spracherkennung erforderlich ist. Wenn der Benutzer eine geänderte Version aufgenommen hat, bitte um den endgültigen Text.

Stufe 4: Das Video erstellen (nachdem die Sprachaufnahme hochgeladen wurde)

Erledige alles von hier an ohne Unterbrechung. Frage nur, wenn das Timing nicht aufgelöst werden kann.

4.0 Das Kit holen

Das Code-Kit befindet sich innerhalb dieses Skill-Ordners unter kit/ (Engine, Tools, funktionierendes Beispiel, sowie integriertes three.js r160 und die toon.ts Pen-Bibliothek von github.com/mromidev/claude-animated-shorts, beide MIT). Finde den Ordner mit find / -name SKILL.md -path "*cartoon-audio-short*" 2>/dev/null und behandle sein kit/ als schreibgeschützt.

Führe dann bash <skill>/kit/tools/setup.sh ~/shorts/<slug> aus. Es kopiert die Engine und die Tools in das Projekt, installiert das integrierte three.js, entfernt die Typen aus toon.ts mit Node 22 module.stripTypeScriptTypes und verknüpft Playwright. Es wird keine Netzwerkverbindung benötigt. Wenn die integrierten Dateien fehlen, greift es auf npm oder einen Git-Clone zurück.

  • Anforderungen: Node 22.6+, Python 3 mit numpy + Pillow, ffmpeg und Playwright mit Chromium (npm i -g playwright && npx playwright install chromium falls nicht vorhanden).
  • Wenn Paketregister blockiert sind, funktioniert Git über GitHub normalerweise. Deaktiviere niemals TLS oder umgehe den Proxy.
  • Chromium: Verwende den vorinstallierten Playwright-Browser mit --use-angle=swiftshader --enable-unsafe-swiftshader --ignore-gpu-blocklist. Das ergibt CPU-WebGL mit etwa 3-10 s pro Bild.

4.1 Timing

Führe python3 timing.py voice.mp3 script.txt --out work aus.

  • Mit installiertem whisper oder faster-whisper werden Wortzeitstempel verwendet.
  • Andernfalls werden Skriptphrasen (geteilt an Satzzeichen) mit durch Stille erkannten Sprachsegmenten abgeglichen, mit einem DP, das Silben auf die Dauer abstimmt und Satzenden innerhalb eines Segments sowie lange Lücken innerhalb einer Phrase bestraft.
  • Ohne ASR und ohne Skript frage nach dem Skript. Claude kann kein Audio hören.
  • Überprüfe work/phrases.json: Pausen sollten an Satzenden fallen. Gesamtbilder = round(dauer × 30).

4.2 Einstellungsplan (work/PLAN.md vor dem Code)

Erstelle eine Zeile pro Einstellung: Bilder, Wörter, Schauplatz, Licht, Kamerabewegung, Figuren/Posen/Gesichtsausdrücke, Effekte und SFX-Hinweis.

  • Bild 0 ist bereits das Aufmacher-Bild.
  • Normalerweise eine Einstellung pro Phrase. Füge winzige Phrasen in die nächste Einstellung ein.
  • Illustriere jeden Satz wörtlich. Requisiten tragen die Witze.
  • Variiere die Einstellungsgrößen: Aufmacher Nahaufnahme → Totale Enthüllung → Amerikanische → Detailaufnahme des Schlüsselobjekts → Reaktions-Nahaufnahme → Umgebungsbewegung für die Pointe.
  • Verwende Licht für Schläge: Tag für normal, Gold für Niedergang oder Drama, Nachtblau für Erklärung. Ein Zeitsprung erhält einen 6-Bilder-Weißblitz.
  • Die Wendungszeile erhält einen Sting (Musik stoppt, tiefer Ton, Reinfahrt mit Rolle). Die letzte Einstellung des physischen Höhepunkts trifft auf das letzte Wort.

4.3 Welt (web/main.js)

Behalte die Engine-Abschnitte: Toon-Materialien, Tintenkontrakt, add/tbox, Himmel, Lichter, Karten, Renderziele/Nachbearbeitung, applyLight, drawActors, swapForNd, renderFrame. Ersetze die Beispielwelt zwischen // ---------- world ---------- und // ---------- cards ----------, sowie die geschichtlichen Teile von worldState().

  • Baue aus Primitiven mit bemalten Canvas-Texturen (paint.js: Bretter, Balken, morsches Holz, Stein, Moos/Efeu, Gras, Erde, Gips, Dachziegel, Marmor, Banner, eingravierter Text). Schreibe neue Maler im gleichen flachen Stil mit dunklen Nähten.
  • Verwende tbox für konstante Texel-Dichte, einen 2-Stufen-Toon-Gradienten und Nebel = Horizontfarbe.
  • Hintergrund: Hügel (halb vergrabene Kugeln), Berge (Kegel + Schneekappen), Zypressen/Kiefern, entfernte Häuser, bemalte Wolken-Plakatwände.
  • Versatzstücke (Einstürze, Stürze, Türen) sind pivotierte Gruppen, die durch 0..1 Fortschritt von worldAt(f) gesteuert werden, mit abgemilderten und gestaffelten Teilen.
  • Gebogener diegetischer Text verwendet planare UVs. Überprüfe, ob er nicht gespiegelt ist.

4.4 Besetzung (web/roman.js → web/toon.js)

  • romanFront(p, outfitKey, opts) zeichnet auf einer 600x1000 Design-Leinwand mit Sohlen bei y=975. Die Karte ist 2,25 m hoch, also 1 Einheit = 0,00225 m.
  • Füge Outfits zu OUTFITS hinzu (Tunika/Umhang/Rüstung/Helm/Haar/Kappe/Bart/Schürze/Kleid/Toga) und neue Kopfbedeckungen und Requisiten im gleichen Stil.
  • Armhaltungen: hängen, Speer, zeigen, hoch, winken, Hüfte, Bauch, Schläfe (+Wirbel), heben, greifen (+heben), Wange, Schild, Arme verschränken, Daumen.
  • Gesichtsausdrücke: das FACE-Set von toon.ts plus schnarchen, stur, blinzeln. Erweitere FACE für weitere.
  • Neu erstellen nach Änderungen mit cat web/toonbase.js web/roman.js > web/toon.js. Rendere ein Figurentest-Blatt, bevor du neue Designs verwendest.
  • Plakatwände drehen sich nur um die Hochachse, erhalten einen Kontakt-Blob und einen Alpha-getesteten Schatten und werden niemals vom Weltdurchgang umrandet.
  • Baue Kartenschlüssel aus q()-gerundeten Werten (damit die Leinwand nur bei sichtbaren Änderungen neu zeichnet).
  • Ein losgelöstes Teil (z. B. ein angehobener Helm) ist eine eigene Karte, ausgerichtet mit headCenter(seed): y = DECK + (partY − hc) × 0,00225.

4.5 Bewegung: geschmeidig und lebendig (web/motion.js)

  • Kameras: camFromKeys(keys, f, {kicks}). Verwende geglättete Übergänge (18-45 B), easeOut für Enthüllungen und Peitschen, und path über Punkte (Catmull-Rom) für geschwungene Bewegungen. Jede Halteposition schleicht und nichts ist statisch für 4+ Bilder. Verwende 3-5° Rollen bei Drama und 7-Bild-Wackler bei Einschlägen.
  • Kontinuität: Bevorzuge kontinuierliche Bewegungen (Zurückziehen aus einer Nahaufnahme in die Totale, Schärfeverlagerung, Kranfahrt durch das Deck, Einfahren in ein Objekt). Harte Schnitte nur bei Orts- oder Zeitsprüngen, mit einem Blitz.
  • Figuren frieren niemals ein: Wende idle(f, seed) auf jede Karte an, blinkAt blinzelt, und Kopfnicken auf betonten Wörtern.
  • Aktionen: Antizipation → back Überschwingen → spring Beruhigung. Ein Stampfen ist ein 2-Bild-Dip + Staubwolke + Tritt. Lachen ist ein abwechselndes Neigen + Wippen.
  • Sekundäre Bewegung: Bannertuchwellen, Blätter/Staub/Tropfen/Zzz-Effektkarten, fließendes Wasser. Etwas bewegt sich immer.
  • Gehen: walk() gibt Distanz + Schrittphase. Füße aufgesetzt, Wippen 3-7 %.
  • Objektiv: Tiefenschärfe bei Nah- und Halbnahaufnahmen (cInf 8-14 px), Fokus auf den Augen. Totale sind scharf. Schärfeverlagerungen dauern etwa 14 B.

4.6 Look-Check (vor dem vollständigen Rendern)

Rendere Standbilder in der Mitte jeder Einstellung sowie die Übergänge und Schlüsselaktionen: node render.mjs stills/a "5,40,..." dann python3 sheet.py stills/a stills/sheet_a.jpg. Betrachte das Blatt und behebe diese Fallstricke:

  • Schmales vertikales Bild: horizontale halbe Breite = d·tan(hfov/2), mit hfov = 2·atan(tan(vfov/2)·0,5625). Bei 4 m und fov 40 sind das ±0,8 m, also Figuren in der Tiefe staffeln.
  • Geländer oder Pfosten über Gesichtern (Kamera innerhalb des Geländers oder ~2,5 m hoch). Der Kamerapfad durch Häuser, Dächer oder Büsche. Vordergrund-Requisiten unter ~2 m Entfernung. Der Held hinter einer Säule versteckt.
  • Gespiegelter Text. Eine Karte eines losgelösten Teils um den falschen Weg versetzt.
  • Extrudieren von Materialgruppen: 0 = Kappen, 1 = Seiten+oben.
  • Fehlende Tinte: Debugge die kantenspezifische Ausgabe. Tintenradius ~2,5 px bei 1080. Der Himmel zählt als entfernte Tiefe, nicht als Karte. Sende das Blatt an den Benutzer mit einer einzeiligen Einstellungszusammenfassung und starte dann das vollständige Rendern.

4.7 Sound (audio.py → Stems → mix.py)

Schreibe die Hinweistabelle für die Geschichte um; die Synthesizer bleiben. audio.py schreibt nur Stems (music.wav, sfx.wav).

  • Musik: eine kurze, marschartige Schleife (Kick/Snare, gezupfter Bass, Blechbläser-Pad). Sie stoppt an der Wendungszeile, dann läuft ein tiefer Dauerton weiter.
  • SFX zu Ereignissen (in Bildern/30): Schwirren bei großen Bewegungen, Bumm auf Stempel, Rumpeln+Krach bei Einstürzen, Kratzen auf Metall, Klingeln bei Enthüllungen, Stich bei der Wendung, Knarren, Schnappen, Platschen, Schnarchen, Blätter, Wasser-Ambiente.
  • Mische mit python3 mix.py voice.mp3 music.wav sfx.wav. Es setzt Musik auf genau 50 % des gegateten RMS der Stimme (−6 dB) und SFX auf 50 % mit Spitzen, die auf das 0,7-fache der Stimmspitze begrenzt sind. Es gibt die gemessenen Pegel aus: Bestätige, dass Musik −6,0 dB gegenüber der Stimme anzeigt und SFX bei oder darunter liegt.
  • Sperre das Bild-Timing, bevor du Sound erstellst. Jede Timing-Änderung bedeutet ein erneutes Ausführen von audio.py und mix.py.

4.8 Rendern + Abschluss

  • Führe node render.mjs frames "0-<N-1>" mit Bash run_in_background aus, überwacht durch eine Monitor-Schleife, die Fortschritt meldet und Fehler oder Prozessbeendigung abfängt. RESUME=1 setzt nach einer Unterbrechung fort. Führe auf kleinen Maschinen nicht gleichzeitig schwere Python-Prozesse aus.
  • Führe bash finish.sh "Title" aus. Es wendet eine lineare Verstärkung auf etwa −14 LUFS plus einen −1 dBFS Peak-Limiter an, codiert H.264 CRF 17 + AAC, führt Freeze/Black- und Loudness-QA durch und schreibt out/qa_sheet.jpg. Betrachte das Blatt. Eingefrorene Abschnitte ≥0,4 s oder schwarze Bilder müssen behoben werden.
  • Liefere das MP4 mit SendUserFile und ein paar Zeilen darüber, was jede Einstellung zeigt. Biete Untertitel, Nachbesserungen oder die nächste Idee aus der Liste an.

Engine-Fallstricke (im Kit behalten; behalte sie beim Neuerstellen)

  • #include <fog_vertex> / <fog_fragment> kommen in eigene Zeilen.
  • Der letzte Durchgang schreibt linearToOutputTexel(...) (Renderziele sind linear HalfFloat).
  • Der Normalen+Tiefen-Durchgang tauscht Materialien pro Mesh aus: Welt → Normalen/Tiefe, Karten → Alpha-getestete Maske (rgb 0, a = Tiefe), Blobs/Wolken/Himmel ausgeblendet, Wasser → flache Normale. Nebel und Schatten sind währenddessen ausgeschaltet.
  • Tinte wird nur auf der nahen Seite von Tiefensprüngen gesetzt. Falten stammen aus dem Normalen-Punktprodukt. Karten-Nachbarn werden übersprungen. Tinte verblasst bei ~140-520 m.
  • Tiefenschärfe: 48 Abtastungen mit einem pro-Abtastung CoC-Test (kein Vordergrund-Bluten).
  • Die Sonne kommt von az/el pro Licht-Voreinstellung. Die Schattenkamera ist auf die Aktion jeder Einstellung zentriert.

Architektur (Referenz zum Bearbeiten des Kits)

  • web/index.html lädt main.js (ES-Modul) über einen lokalen HTTP-Server
  • ... [für die Übersetzung abgeschnitten]

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Verwandte Skills