Communitygithub.com

Talking Explainer

Verwandle ein Thema in ein animiertes Erklärvideo mit einem sprechenden Cartoon-Moderator, Lippensynchronisation und Ihrem eigenen Markendesign.

Was ist Talking Explainer?

Dieses Skill erstellt vollständige Erklärvideos im 16:9-Format (1920x1080, 60fps) mit einem sprechenden Cartoon-Moderator, der echte Lippensynchronisation (sechs Mundformen, gesteuert durch die Sprachaufnahme) bietet. Der Moderator kann voreingestellte Posen auf Schlüsselwörter ausführen und blinzeln. Der gesamte Stil ist an Apples Produktseiten-Ästhetik angelehnt: helle Lichtgestaltung, Geist-Schriftart, Glas-Karten, kritisch gedämpfte Federn (kein `backdrop-filter` im 3D-Rig), Solar-Icons und ein blauer Linsen-Rücken. Der Film trägt die Marke des Benutzers (Logo-Intro, Ecklogo, Endcard mit Call-to-Action). Jede Szene enthält einen Kameraeinzoom und einen Betonungs-Beat. Der Workflow umfasst: Haken-basierte Skripterstellung im Sprachstil des Benutzers, Aufnahme des Voice-Overs (als MP3, vom Benutzer selbst oder über ElevenLabs API), Storyboard mit Zeiten in globalen Sekunden, parallele Bearbeitung der Szenen durch 6 Sonnet-Worker, finale Montage und Qualitätsprüfung (Nähte, Synchronität, Lauflicht-Fehler). Der Skill unterstützt auch: Erstellung eigener Charaktere aus 3 Bild-Prompts, Austausch der Sprachspur oder Übersetzung nach der Fertigstellung (Neuzeitsteuerung, kein Neuaufbau), Hochformat-Zuschnitt (9:16) für TikTok/Reels/Shorts, und Anleitungsvideos mit echten Apps und Logos. Er läuft auf dem `explainer-kit` und `spatial-film` Skill-Set.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/brewed-ops/talking-explainer/tree/main/skills/talking-explainer

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht Talking Explainer?

Die Stimme ist der Taktgeber, der Moderator SPRICHT (Lippensynchronisation), jede Idee ist zuerst ein alltägliches Bild, jede Szene hat einen Zoom und einen Betonungsmoment, der Look ist Apple, und der Film trägt die Marke des Benutzers. Arbeitsbeispiel: „REA – Reverse Engineer Anything“ (129,0 s, 12 Szenen) - references/example/ (SCRIPT, STORYBOARD, RETIME).

Verwendete Pfade unten:

  • <skill> = Ordner dieses Skills. <kit> = <skill>/../explainer-kit. <engine> = <skill>/../spatial-film.
  • <home> = TALKING_EXPLAINER_HOME oder ~/.talking-explainer; Profil = <home>/profile/ (geteilt mit explainer-kit).
  • <py> = der in <home>/config.json gespeicherte python-Befehl von setup-check (py -3.12 unter Windows, python3 unter macOS).

Führen Sie jedes Filmskript aus dem Projektverzeichnis des Films aus. Skripte sind bewährter Code – führen Sie sie aus, generieren Sie sie niemals neu. Bewerten Sie Szenen anhand von Kontaktblättern, niemals durch Lesen des Szenen-HTMLs in der Hauptsitzung. Worker erhalten DateiPFADE.

Einrichtung (nur beim ersten Durchlauf)

Kein <home>/profile/brand.json vorhanden = führen Sie die Phase S des explainer-kit aus (setup-check, Markeninterview + profile.mjs init, voice.md, Musik). Das Markeninterview legt den Namen des Moderators fest (--presenter). Zwei weitere Dinge für diesen Skill, die im selben Interview abgefragt werden:

  • Die Eröffnungs- und Schlusszeilen in voice.md, Wort für Wort, mit dem Vornamen des Benutzers (die Haken-Eröffnung ist „? Ist das wahr? hier, von ... lassen Sie es uns aufschlüsseln.“).
  • Der Moderator: die gebündelte Demo (ein ausdrucksloser Cartoon-Typ mit Brille) oder ein eigener Charakter – siehe „Eigener sprechender Charakter“ unten.

Standardeinstellungen (nicht erneut fragen)

  • Erzählung in der Sprache des Profils, im Stil des Benutzers aus voice.md. Auf dem Bildschirm = kurzes, einfaches Englisch (~6 Wörter pro Kopfzeile). Die Länge ist frei, solange die Botschaft ankommt (~150-160 Wörter pro Minute bei einer natürlichen Aufnahme).
  • Der Benutzer zeichnet die Aufnahme auf vom Skript (sein ElevenLabs-Stimmklon oder sein eigenes Mikrofon). Phase 1 übergibt das Skript als einfügebereite Absätze und WARTET auf eine MP3-Datei. Die Generierung über die API stattdessen (<engine>/scripts/el-tts.py, Schlüssel in der Umgebungsvariablen EL, niemals auf der Platte) nur auf Anfrage.
  • Eröffnung = Haken zuerst: Öffnen Sie mit der überraschendsten Behauptung des Themas als Frage, dann die Eröffnungszeile aus voice.md. Der NAME des Themas kommt in Absatz 2. Schluss = die Schlusszeile aus voice.md + der cta des Profils.
  • Konzept-Themen erhalten EINE alltägliche Analogie, die wörtlich erzählt wird (REA: das geheime Latte-Rezept eines Cafés). „Wie es funktioniert“-Themen über das eigene Werkzeug oder System des Benutzers erhalten stattdessen einen Rundgang durch das echte Ding - references/real-apps.md. Das gilt auch für Drittanbieter-Tools und Plattformen: Nennen Sie die echten Produkte, gehen Sie den echten Anfragefluss durch und verwenden Sie die eigenen Texte, Einstellungen und Zahlen der Plattformen, die von deren Live-Seiten abgelesen wurden. Standardmäßig den Rundgang für jedes Technik-Thema verwenden.
  • Kurzer Schnitt (<= 30 s): ~2,6 Wörter/s, 4 Absätze = 4 Frames (Haken + Identifikation / Name / das eine Bild / Schluss), ein einzeiliger Schlusssatz, 2 Worker x 2 Szenen.
  • Themen zu aktuellen Ereignissen / Nachrichten: Recherchieren Sie zuerst die aktuelle Berichterstattung (lokale Quellen + ein tiefergehender Artikel), schreiben Sie dann ausgewogen: jede Behauptung erhält ihren Urheber in der Stimme („laut der Agentur...“, „Kritiker sagen...“), die Angst erhält ihr reales Ausmaß, dann eine nummerierte Auflistung der Grauzonen, in denen offizielle Stellungnahmen sich widersprechen oder ein wichtiges Detail nicht öffentlich ist, ein fairer positiver Absatz und ein Fazit mit zu stellenden Fragen – niemals ein Urteil. Alles, was nur eine Zusammenfassung der Suche sagte (die Seite selbst konnte nicht geladen werden), bleibt im Faktenblock von SCRIPT.md mit dem Vermerk „Unbestätigt, NICHT gesprochen“. 16 Frames / ~700 Wörter sind dafür in Ordnung.
  • Skript aus einem eingefügten Transkript: Behalten Sie die Fakten der Quelle und ihre Reihenfolge der Ideen bei, schreiben Sie jede Zeile in der Stimme des Erzählers um (übersetzen Sie sie niemals Zeile für Zeile) und schneiden Sie die eigenen Teile des Quellmoderators heraus („Ich habe gebaut...“, Code-Demos, deren Namen). Lange Einfügungen (~50k Zeichen) werden gekürzt: Nennen Sie, wo der Schnitt in SCRIPT.md erfolgte, füllen Sie dann den fehlenden Teil über den Standardmechanismus, überprüft wie jede andere Behauptung. Speichern Sie die Einfügung am ersten Tag als references/source-transcript.txt und behalten Sie die genannten Personen und Meilensteine der Quelle.
  • Echte Personen = Personenkarten, niemals Namensschilder: Porträt (Duoton-Foto oder illustrierte Ähnlichkeit) + Name + einzeilige Rolle + Jahr. Listen Sie jede genannte Person mit ihrer Szene in SCRIPT.md unter „Personen auf dem Bildschirm“ auf.
  • Look = Apple: weißes Licht (#F5F5F7-Hintergrund), Geist mit größenabhängigem Tracking, vorgetäuschtes Glas (.ap-glass - niemals backdrop-filter innerhalb des 3D-Rigs), .ap-window / .ap-dark-Fenster, kritisch gedämpfte sp()-Federn (back.* verboten), Zurückhaltung (eine Idee pro Frame, Pulse <= 1,1), ein blauer LINSEN-Rücken. Farbe = Bedeutung, für jeden Film neu geschrieben. Das Grundgerüst setzt alles.
  • Icons = Solar (480 Design, https://solar-icons.vercel.app) – fett-duoton für Helden-Icons, linear für UI-Chrome, aus references/icons-solar.html. Niemals Lucide oder Phosphor. Die Grafiken sind CC BY 4.0: jede Auslieferung gibt dem Benutzer die Zeile „Icons: Solar by 480 Design (CC BY 4.0)“ für die Videobeschreibung.
  • Motion: Überschriften, die auf ihren Wörtern erscheinen (Aufstieg + Unschärfe -> 0, Feder), UI-Animation für jedes Werkzeug, Erklärungsdiagramme, PLUS ein Kamera-Einzoom (ZOOM) und ein Betonungs-Beat (EMPH: Puls, Markierungsstrich, Unterstreichungszeichnung, Fokus-Pull, Zahlen-Einschlag) in jeder Szene. 60fps-Glätte-Gesetz.
  • 1920x1080, 60fps. Markenlogo im Haken, Ecklogo in der Mitte, Endkarte = Logo + cta.

Phasen

#PhaseMachenTor
1Skript + AufnahmeRecherchiere das Thema (echte Fakten, mit Quellen). Lade <kit>/references/voice-script.md + <home>/profile/voice.md. Haken-zuerst-Eröffnung + Schluss oben, kein „!", EINE Analogie (oder der Rundgang), 12 Absätze = 12 Frames (Form: references/example/SCRIPT.md). Buchstabiere Namen, die als Buchstaben gesagt werden („R-E-A“). Behauptungen darüber, was KI „nicht kann“, müssen für heutige Modelle wahr sein. Keine Fachjargon-Zahlen (Seiten, nicht Tokens; gerundete Zählungen). Schreibe <film>/SCRIPT.md, übergib dem Benutzer die Absätze als KLARTEXT (kein Code-Block, nichts nach dem letzten Absatz – sie fügen die gesamte Nachricht in ElevenLabs ein; Aufnahme-Tipps in einer Nachricht davor), WARTE auf die MP3; ffprobe ihre Längedie Aufnahme in der Hand, Länge notiert
2Grundgerüst + Zeitsteuerungnode <skill>/scripts/new-talking-explainer.mjs <film> --name <slug> --mp3 <take.mp3>; <py> <kit>/scripts/transcribe.py assets/audio/vo.mp3 src/timing --lang <code> --prompt "<Namen, Fachjargon>"; <py> <kit>/scripts/words.py src/timing/vo-words.json (das Stichwortblatt)Transkript stimmt mit Skript überein
3StoryboardSchreibe STORYBOARD.src.md in GLOBALEN Zeiten (unten) in der Form von references/example/STORYBOARD.md: ein Frame pro Absatz, Schnitte in Satzpausen (Summe = Stimmenende + 2,8s), Überschriften ein Feld pro Zeile (- start: / - duration: / - src:), jeder Block markiert seine ZOOM- und EMPH-Schläge auf Stichworten, Farbe = Bedeutung, echte Fakten + fiktive Extras, eine BÜHNENPOSITION- Naht, wo zwei Szenen ein Heldenobjekt teilen. <py> src/storyboard-local.py -> STORYBOARD.md. Zeige dem Benutzer die Frameliste (eine Zeile pro Frame)sein „Go“
4Kontrakt + Moderator + AudioBearbeite + führe src/set-film.py aus (Szenen + Stimmenlänge). Bearbeite + führe src/set-presenter.py aus (Posen ~0,1 s vor ihren Stichworten; Denken/Gehen haben keine Münder – niemals während die Stimme spricht). Bett: <py> <engine>/scripts/bgm-cut.py assets/audio/bed.mp3 assets/audio/bgm-edit.wav --len <gesamt> --a 0 <gesamt+3> --fade-out 2.6 (ein Film länger als das Bett wiederholt den Körper: --a 0 <len> --b <takt> <len> --b ... --xfade 0.3) -> <py> <kit>/scripts/master-audio.py --len <gesamt> -> <py> <engine>/scripts/build-presenter.py (gibt „Lippensynchronisation: N Posen“ aus) -> <py> <kit>/scripts/build-brand.py (gibt das Ecklogo-Fenster aus). Schreibe jeden [FILM]-Teil von frame.md mit einem <engine>/scripts/patch_exact.py-Skript um. Bearbeite + führe src/set-cues.py aus. <py> <engine>/scripts/make-harness.py; <py> <skill>/scripts/make-packets.py; node <engine>/scripts/test-scene.mjs m-presenter "<5 mal>"Präsentationsblatt: Münder öffnen sich beim Sprechen, Posen auf Stichwort
5Szenenreferences/workers.md: 6 Sonnet-Worker x 2 Szenen, max. 4 gleichzeitig (eine Korrekturrunde zählt), deren Prompt-Vorlage (Zonen-Gesetz inkl. Push-Spitzen, die 0,12-Klemme, nur Solar, der Apple-Balken, niemals Zahlen erfinden). Überprüfe die Mitten selbst; Korrekturrunden an den GLEICHEN Workerjedes Blatt entspricht seinem Block, lesbar im Blatt-Maßstab
6Ausliefern<py> <engine>/scripts/fromto-scan.py compositions/s*.html (0) -> <py> <engine>/scripts/assemble.py -> npx hyperframes@<film.json hyperframes> lint . + check . -> <py> <engine>/scripts/seam-check.py + node <kit>/scripts/seam-diff-all.mjs -> node <engine>/scripts/render-final.mjs <slug>-1080p60 (Hintergrund; endet mit einem Blitz-Scan) -> transkribiere den RENDER in .hyperframes/work/sync + <py> <kit>/scripts/sync-check.py src/timing/vo-words.json .hyperframes/work/sync/vo-words.json -> <py> <skill>/scripts/frames.py renders/<slug>-1080p60.mp4 frames.jpg --at <eines pro Szene> und --zone --at <jeder ZOOM-Spitze> -> node <engine>/scripts/encode-web.mjs renders/<slug>-1080p60.mp4 renders/web --name <slug> --poster <t> -> Übergabe der Pfade + der Solar-Credit-Zeilelint/check 0 Fehler, Nähte 0.00% außerhalb der Präsentationsbox, 0 Blitze, Sync-Median ~0.000s, nichts links der roten Linie an keiner Spitze

Zeiten EINMAL schreiben, in globalen Sekunden

Das manuelle Umrechnen von 20 Szenen Wortzeiten in szenenlokale Zeiten ist eine Fehlerquelle. Gib in STORYBOARD.src.md jedem Frame - start: <global> und markiere Stichworte als "wort"@g<global>; ZOOM-Bereiche und „Ausgang bis“-Zeiten können einfache globale Zahlen sein. <py> src/storyboard-local.py schreibt STORYBOARD.md mit jeder Zeit lokal, überprüft, ob die Starts verketten und jeder Stichwort in seine Szene passt, und gibt die Szenenliste für set-film.py aus. SFX (src/set-cues.py) und der Moderator (src/set-presenter.py) werden ebenfalls in globalen Sekunden geschrieben.

Aufnahme / Sprache / Eröffnungswechsel nach dem Bau (Neuzeitsteuerung, niemals Neubau)

Neue Aufnahme -> sichere compositions/, film.json, STORYBOARD.md, src/ nach .hyperframes/work/<alt>/, verschiebe den alten Render nach renders/<alt>/ -> kopiere die Aufnahme nach assets/audio/vo.mp3 -> transkribiere -> neue Schnitte in set-film.py -> Moderatorposen, Bett, Master, build-presenter, build-brand, set-cues, make-harness -> schreibe RETIME.md (pro Szene: jeder Beat -> sein neues Stichwort @ lokaler Zeit; Szenen mit NEUEM Inhalt erhalten einen vollständigen Block; Form references/example/RETIME.md; „diese Datei gewinnt über STORYBOARD.md-Zeiten“) -> patche frame.md Dauer / Logo-Fenster / Nähte -> sende jedem GLEICHEN Worker seinen RETIME-Abschnitt per SendMessage (4 auf einmal). Szenen werden bei einer schnelleren Aufnahme KÜRZER: sage den Workern, sie sollen Federn verkürzen, bevor sie einen Beat fallen lassen.

Hochformat / TikTok / Reels / Shorts-Schnitt (Port, niemals Neubau)

  1. <py> <skill>/scripts/port-portrait.py <film> <film>-9x16 - ein NEUER Ordner (der 16:9-Film bleibt unberührt): kopiert Quelle + Audio, verschiebt die ausgelieferten Szenen nach references/src-16x9/ (die Spezifikation der Worker), schreibt den Hochformat-Kontrakt (frame.md-Zonen für TikToks UI, Worker-Anweisung, 1080x1920-Start, set-film-Größe), verschiebt den Moderator nach unten links (Skalierung x0.9, Füße y 1640).
  2. Vom neuen Stammverzeichnis: <py> src/set-film.py -> build-presenter.py -> build-brand.py (vertikales Logo = oben zentriert bei y 150, unter den Plattform-Tabs) -> make-harness.py -> test-scene.mjs m-presenter (Moderator x ~26-556, y ~1074-1640).
  3. Worker: gleiche Paare, Prompt = „PORT“ (beginnen von der 16:9-Quelle, behalte Kopie/Beats/Stichworte/Farben/Icons/Nahtposen bei, schreibe nur Layout + Kamera neu) + das Hochformat-Zonen-Gesetz: Kopfzeile y 260-500, Bühne x 60-1020 / y 520-1060 (Text x <= 920 unterhalb y 680), rechts unten x 580-920 / y 1080-1520, Moderator x 20-560 / y 1060-1660, nichts oberhalb y 250 oder unterhalb y 1540. Paare, die ein Objekt eines anderen Paares kopieren, kommen zuletzt dran.
  4. Auslieferung wie Phase 6 mit render-final.mjs <slug>-1080x1920p60; frames.py --zone erkennt Hochformat und zeichnet die Moderatorenbox + die Plattform-UI-Linien. Der 1080p60-Master wird so bei TikTok hochgeladen. Erste Durchgangsfehler: Heldenobjekte in den unteren rechten Bereich gequetscht (mache den Beat zu einem Helden auf der Bühne, verkleinere stattdessen den Anzeigetyp); eine 2-zeilige Kopfzeile, die mit einem Stapel kollidiert, der in einem Push aufsteigt (>= 40px Abstand an der Spitze); eine sekundäre Karte, die durch einen Push über y 1540 gezogen wird (entferne/verdunkle sie während dieses Pushes).

Echte Apps + echte Logos

Ein Film über die eigene Einrichtung des Benutzers zeigt die ECHTEN Apps: Logos aus der Quelle, App-Farben aus dem eigenen CSS der App (scripts/app-tokens.py), die echten Ordnernamen und Nummern des Benutzers, eine Datenschutzliste bevor ein Worker startet. Rezept: references/real-apps.md. frame.md hebt das „Kein Drittanbieter-Logo oder -Produkt, das nicht in references/real-apps.md aufgeführt ist, darf auf dem Bildschirm erscheinen“-Gesetz auf: Verwende Dateinamen aus dem Quell-Repository des Benutzers (references/source-folders.md), echte Screenshots, die der Benutzer bereitstellt, als assets/real-screenshots/screenshot-N.png mit Beschriftung in real-apps.md. Für Drittanbieter: verwende das offizielle Logo aus dem Brand-Buch oder der Presse-Seite, den genauen Produktnamen, zum ersten Mal mit dem Hersteller in Klammern („Slack (Salesforce)“), und falls verfügbar eine Live-Demo-Seite mit echten Daten.

Eigener sprechender Charakter

Die gebündelte Demo ist ein toter Cartoon-Typ (Designer-Brille, Denim-Hemd, Apple-Standard-Mann). Füge 3 Bilder des gewünschten Charakters (vor der Einrichtung) zu <home>/profile/character-prompts/ hinzu:

  • 1-front.png (fronte Ganzkörper-Porträt, Arme an den Seiten)
  • 2-side.png (Seitenansicht, Arme an den Seiten)
  • 3-portrait.png (nah an den Schultern, leichter Ausdruck, Augen offen)

Führe node <skill>/scripts/train-character.mjs <home>/profile/character-prompts/ <home>/profile/character/ aus. Dies erzeugt ein Modell: ein Mesh mit 6 Mundformen (A, E, I, O, U, geschlossen), 2 Augenformen (offen, zu), 4 Armformen (unten, gestikulierend links, gestikulierend rechts, Die-Handflächen-offen), 4 Körper-Posen (gerade, lehnt sich zurück, beugt sich vor, Schulterzucken). Die Worker rendern diesen Charakter über <engine>/scripts/character-render.mjs.

Letzter Schritt: setze --presenter "<Name des Charakters>" im set-presenter-Befehl.

Lizenzhinweise

Jeder Film enthält im Abspann:

  • „Erstellt mit Talking Explainer (brewed-ops/skills)“
  • „Icons: Solar by 480 Design (CC BY 4.0)“

Fehlerbehebung

  • Lippen sind asynchron: stelle sicher, dass src/set-presenter.py läuft, nachdem die Aufnahme verarbeitet wurde.
  • Lauflicht-Fehler: erhöhe die Puffergröße in engine/scripts/render-final.mjs.
  • Worker bricht ab: überprüfe compositions/ auf fehlerhafte HTML-Tags (nicht geschlossene Divs, falsche Zeichen).
  • Kontaktblatt leer: stelle sicher, dass frames.py --at gültige Zeitstempel im Format HH:MM:SS.ms verwendet.
  • Zoom zu stark: passe die ZOOM-Quadratwurzel-Skalierung in STORYBOARD.src.md an (Vorgabe 1.15 für Nahaufnahmen).

Referenzen

  • references/example/ – vollständiges Beispiel (REA – Reverse Engineer Anything): Skript, Storyboard, Neuzeitsteuerung.
  • references/icons-solar.html – Solar-Icon-Referenz (fett-duoton, linear).
  • references/workers.md – Worker-Anweisungen und Prompt-Vorlage.
  • references/real-apps.md – Wie echte Apps und Logos eingebunden werden.
  • references/source-folders.md.template – Vorlage für Quellordner des Benutzers.

Individual skills in this repo

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

Verwandte Skills