CommunityCodierung & Entwicklunggithub.com

Wallstreet-Explainer (华尔街式解读片)

Erstelle einen knackigen Finanz- oder Tech-Erklärfilm im Wall-Street-Stil (1–3 Minuten, 16:9, kein Moderator vor der Kamera) mit echten Menschen, echten Nachrichten und offiziellen Bildern als Belege. Der Film nutzt eine 2,5D-Grafikbühne mit Cut-outs von Protagonisten, riesigen Zahlen und Diagrammen, um Geldflüsse und Zusammenhänge szenisch darzustellen – jede Einstellung greift das Ende der vorherigen auf.

Was ist Wallstreet-Explainer (华尔街式解读片)?

Wallstreet-Explainer ist ein KI-Skill für Entwickler- und KI-Agentenplattformen wie Claude Code, Cursor und Codex. Es vermittelt eine systematische Methode zur Erstellung von Erklärfilmen über Finanz- und Tech-Themen im Stil der Wall Street. Der Fokus liegt auf Designprinzipien, Bewegungsmechanik (warum es nicht wie eine PowerPoint oder KI-generiert wirkt) und einer eigenen visuellen Sprache. Der Skill bietet keinen kopierbaren Vorlagen-Code, sondern einen vollständigen Workflow: von der Themenauswahl über das Drehbuch, die Regieanweisungen (Director's Table), die Materialbeschaffung (offizielle HD-Clips, Nachrichtenartikel, Originalton der Protagonisten), die temporäre Sprachausgabe und das Timing bis hin zur frame-genauen 2,5D-Render-Pipeline. Er enthält außerdem eine Suite von Tools (Python-Skripte und Node.js-Module) für Footage-Suche, Bildschirmaufnahmen von Nachrichtenartikeln, GPU-beschleunigtes Matting, temporäre Voice-Over-Erzeugung, frame-genauen Render, Kamera-Bewegungsprüfung und Audio-Mixing. Das Skill beschreibt detailliert das visuelle Vokabular (dicke Glasscheiben, riesige Zahlen, Diagramme auf weißem Grund, eine 2,5D-Welt mit Vorder- und Hintergrundebenen) und die Schnittgrammatik (jede Einstellung muss die vorherige aufgreifen und weitertreiben). Der gesamte Prozess ist in Stationen unterteilt, an denen der Benutzer Zwischenergebnisse prüft.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add HeyChengC/wallstreet-explainer

Installed? Explore more Codierung & Entwicklung skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

In Ihrer bevorzugten KI fragen

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

Dokumentation

Wallstreet-Erklärfilm (wallstreet-explainer)

Erzähle eine große Rechnung: echte Menschen, echte Nachrichten, echte Bilder als Belege – die Grafikbühne spielt die Zahlen und Zusammenhänge szenisch dar; jede Einstellung greift das Ende der vorherigen auf und führt es weiter, der Zuschauer weiß jederzeit, „was er gerade sieht und warum er es sieht“. In Bewegung ist die Kamera und die Welt, nicht die Elemente selbst, die sich aufführen: Die Kamera fährt, schwenkt, zoomt in der gestaffelten Bühne, um das zu suchen, worüber gerade gesprochen wird; die Dinge ändern ihren Zustand an Ort und Stelle. Jede Bewegung folgt der Bedeutung des Satzes.

Was dieses Skill ist

  • Es ist: Ein Satz von Design-Prinzipien (was in jede Einstellung gehört, warum, und was die nächste rechtfertigt), eine Reihe von Bewegungsprinzipien (aus drei Referenzfilmen Frame für Frame abgeleitet: warum es nicht wie eine PowerPoint oder KI aussieht, Liste der Techniken und quantitative Ziele), eine visuelle Sprache (konkrete Gestaltung von Bühne, Riesentext, Cut-out, Scheibe, Zahlen, Diagrammen, hervorgehobenen Originaltexten, zuzüglich einer Menüauswahl für den Einstieg) und ein Werkzeugsatz.

  • Keine Vorlage. Es gibt keine kopierbaren Szenenbausteine und keine feste Einstellungsreihenfolge. Die Bilder jedes Films müssen aus seinem eigenen Skript und Material heraus entwickelt werden. examples/ai-burn-money/ dokumentiert, wie ein Film entstanden ist und wo er gescheitert ist – übernehme nicht einfach seine Einstellungen.

  • Langsame Fahrten, Zahlenrollen, Text auf Realfilm – die Referenzfilme verwenden das alle. Billig sind nicht diese Techniken, sondern die Umsetzung. Entscheide mit drei Sätzen: Was hätte der Zuschauer weniger verstanden, wenn man es wegließe? Bewegt sich die Kamera oder das Objekt wechselt seinen Zustand? Ist diese Ebene echt und konkret?

Lies vor dem Loslegen references/thinking.md und references/motion.md, dann nach Bedarf die anderen.

Ablauf: An jeder Station dem Benutzer zeigen

Die Ästhetik entscheidet der Benutzer. Gib nicht den ganzen Film auf einmal aus; gib an jeder Station konkrete Ergebnisse und warte auf sein Okay, bevor du weitermachst.

StationWas tunWas dem Benutzer zeigen
0 ThemaDas Thema muss gleichzeitig „aktuell“ sein und „am Ende etwas zum Mitnehmen“ bietenZwei bis drei Themen, jedes mit einem Haken-Satz
1 SkriptUmgangssprache, erste Person, jeder Satz führt zum nächsten; wo O-Ton eingebaut wird, schreibe zuerst den Satz, der darauf vorbereitet (references/audio.md)Vollständiger Text. Vor dem Okay keine offizielle Vertonung
2 Regieanweisungen (Director's Table)Siehe Abschnitt „Regieanweisungen“ untenWichtig: Wie der Einstieg fesselt, wie jede Überleitung gemacht wird, ob Vorbereitungssätze nötig sind
3 MaterialOffizielle HD-Clips → Nachrichtenartikel-Original → O-Ton der Protagonisten → vollständige Realfilm-Sequenz für das Cut-out (ohne Schnitte, mit passender Aktion zum Text). Erst ein Kontaktblatt zusammenstellen und durchgehen, dann die In-Punkte festlegen, Frame für Frame Schnittstellen prüfen (references/sourcing.md)Schlüsselmaterial (optional)
4 Vertonung & Timingscripts/temp_voice.py: Zuerst mit einer temporären Sprachausgabe das Timing erstellen, das Bildmaterial hängt vollständig am Text—
5 EinstiegZuerst 3 mechanisch unterschiedliche Haken auswählen, jeweils einen 5–8 Sekunden groben Schnitt für den Benutzer (references/opening.md); vom ausgewählten einen Vorschnitt von 0 Sekunden bis zum ersten Themenwechsel machen (15–20 Sekunden, mit Ton)3 Haken grobe Schnitte → Vorschnitt des ausgewählten Einstiegs
6 Ganzer Film 720pNach der Regieanweisung ausrollen; nach jeweils 2-3 Einstellungen Standbilder prüfen, bei Schlüsselaktionen die Sequenz durchgehen (strip.py); vor Abgabe motion_check.py laufen lassenGanzer Film 720p, extrahierte Frames, dann 2-3 Stellen nennen, die er besonders ansehen soll
7 EndfertigstellungÄndern bis zufrieden; offizielle Vertonung einspielen; Ausgabe 1080p, nur einmal rendern1080p

Jede Abgabe muss:

  • Mit ffprobe geprüft werden, dass die Datei geöffnet werden kann.
  • Selbst die Standbilder und das Kontaktblatt Einstellung für Einstellung durchgegangen sein, bei Schlüsselaktionen die Sequenz.
  • In einem festen Prüf-Ordner mit Nummer und chinesischem Namen abgelegt sein, alte Versionen tragen den Präfix 旧_.
  • Genau sagen, was in dieser Version geändert wurde, was gemessen wurde und was der Benutzer selbst hören oder sehen muss.

Regieanweisungen (Director's Table)

Dies ist der einzige Plan für den gesamten Film. Der Benutzer prüft die Bilder damit, du arbeitest danach, bei der Durchsicht vergleichst du damit. Jede Einstellung bekommt diese Spalten:

EinstellungZeitSkript-TextWas auf dem Bildschirm ist, was passiert → Was bleibt, wenn es stopptWas der Zuschauer mehr verstanden hatTrägt beiVersteh-Moment + VerweildauerÜbernahme
  • Was der Zuschauer mehr verstanden hat: Ein konkreter Satz, anders als in der vorherigen Einstellung. Wenn du das nicht schreiben kannst, gehört diese Einstellung gestrichen oder neu überdacht.
  • Trägt bei: Wodurch wird das Verständnis erreicht. Person / Beleg (echtes Material, Originaltext) / Konstruktion (Scheibe, Diagramm) / Text (große Schrift, Fazit) / Gemischt.
  • Übernahme: Welches Element aus der vorherigen Einstellung wird aufgegriffen, und wie: Fortsetzung / Schnitt / Mitnahme / Heranfahren / Entfalten / Kapitelwechsel plus das Element. Bei der ersten Einstellung schreibe —.
  • In der Spalte „Was auf dem Bildschirm ist“ schreibe gleich mit wie sich die Kamera bewegt: Wer ist das Ziel jeder Bewegung (hinfahren zu wem, schwenken zu wem, wann zurück und das Ganze sehen), und welche Einstellungen verwenden das Cut-out des Protagonisten.
  • Der Skript-Text wird kein einziges Wort geändert; eine Einstellung kann mehrere Sätze abdecken; hänge immer am Wort („in dem Moment, wo er ‚siebentausend‘ sagt“).

Nach dem Schreiben einen „Lese-Check“ machen: Die Spalten „Skript-Text“ und „Mehr verstanden“ abdecken, nur die Spalte „Was auf dem Bildschirm“ lesen – ergibt es noch Sinn? Dann prüfen, ob es mehrere harte Schnitte hintereinander gibt, ob es Einstellungen mit zu kurzer Verweildauer gibt. Ein Beispiel findest du unter examples/ai-burn-money/director.md.

Welche Datei lesen

Was du machstLies
Was gehört in eine Einstellung, warum, was rechtfertigt die nächstereferences/thinking.md
Bewegung: Warum nicht wie PowerPoint/KI, Techniken-Liste, quantitative Ziele, Code-Gefühl für Kamera und Cut-outreferences/motion.md
Wie das Bild aussieht: Bühne, Riesentext, Cut-out, Scheibe, Zahlen, Diagramme, Filmtitel, Untertitel, Realfilm-Rahmenreferences/style.md
Wie zwei Einstellungen verbunden werden, Gefühl für Kamerafahrt und Aktionreferences/grammar.md
Einstiegreferences/opening.md
Filme finden, herunterladen, In-Punkte wählen, Personen freistellen, Nachrichten-Original, O-Tonreferences/sourcing.md
Skript, Vertonung, O-Ton-Schnittstellen, Soundeffekte, Mixreferences/audio.md
Selbstprüfung vor Abgabereferences/review.md
In der Praxis gemachte Fehlerreferences/lessons.md

Werkzeuge (scripts/)

SkriptFunktion
footage.pysearch Film suchen / get herunterladen (auch nur einen Ausschnitt, nur Audio) / sheet Kontaktblatt mit Timecodes / scenes Schnittstellen des Films / extract 30fps-Bildsequenz extrahieren / wave Lautstärke der O-Ton-Schnittstellen anzeigen
snap_news.mjsScreenshot von Nachrichten- und Bericht-Originalen: Werbung blocken, Overlays entfernen, warten bis Schrift geladen, dann den Rahmen des Schlüsselworts messen
matte.pyRealfilm Frame für Frame Person freistellen (ISNet auf GPU, ca. 0,25 s/Frame), versteckte Schnittstellen anzeigen, nur den Rahmen der Person speichern
matte_clean.pyNachbearbeitung des Cut-outs: dünne Linien und Reste entfernen, angeklebte Stuhllehnen in einer Spalte löschen, Mittelpunkt von Kopf und Schultern jedes Frames ausgeben (zum Verfolgen beim Platzieren)
stage25d.jsKleines Werkzeug, das auf der Seite verwendet wird: Ebenen-Kamera, Bewegungsunschärfe in Blickrichtung, Tiefenschärfe, Cut-out folgt der Person, Riesentext, Titelzeile, Realfilm in den Hintergrund ziehen, auf Milliarden runden. Nur Hilfsfunktionen, keine Einstellung
temp_voice.pyscript.json → temporäre Vertonung (edge-tts) und timeline.json (Zeitpunkt jedes Wortes, O-Ton-Einfügungen, Position des Filmtitels); bei offizieller Vertonung automatisch ersetzen, mit --asr neu ausrichten
render.mjsFrame-genaues Rendern: --stills Einzelbilder anzeigen, --video --range einen Abschnitt rendern, --h 1080 Endfilm ausgeben
strip.pySequenz von aufeinanderfolgenden Frames als Bild: 8 Bilder einer Aktion, um Fehler zu finden, die im Standbild nicht sichtbar sind; auch zum Zerlegen der Aktionen von Referenzfilmen
motion_check.pySelbstprüfung der Kamerabewegung: Zeit, in der sich das Bild überhaupt nicht bewegt, Anzahl der Stillstände, Zeit, in der sich die Kamera bewegt, Vorder- und Hintergrundebene, Zoom-Verhältnis – im Vergleich mit dem Intervall der Referenzfilme
mix.pyVertonung, O-Ton, Soundeffekte, Hintergrundmusik (Musik macht der Stimme Platz) → -14 LUFS; --check Lautstärke der einzelnen Abschnitte messen

Abhängigkeiten: ffmpeg, yt-dlp, Python (edge-tts, numpy, opencv-python, Pillow; optional faster-whisper; für Cut-out onnxruntime-gpu und heruntergeladenes Modell von rembg), Node und Playwright. Installationsanleitung siehe README.

Vertonung: Zuerst mit temporärer Sprachausgabe

  • Verwende zuerst temp_voice.py, um eine temporäre edge-tts-Vertonung zu erstellen, das Timing zu bestimmen und das Bildmaterial danach auszurichten.
  • Wenn Skript und Bildmaterial feststehen, ersetze durch die offizielle Vertonung (beliebiges TTS, geklonte Stimme oder echte Aufnahme): Jeder Satz als voice/<id>.final.wav speichern, dann temp_voice.py script.json --asr ausführen.
  • Vertonung immer: Stille am Anfang und Ende abschneiden, Originalgeschwindigkeit beibehalten, Pausen zwischen Sätzen nur durch gap bestimmt. Nicht nachträglich mit atempo beschleunigen – nach dem Abschneiden der Stille wirkt das gehetzt.

Wie ein Film aufgebaut wird (Gerüst, nicht zum Kopieren)

  • Ein Filmverzeichnis: index.html, film.css, film.js, timeline.json, assets/ (Realfilm-Frames in assets/clips/<name>/, Cut-out in assets/cut/<name>/). Wenn das Kamera-Werkzeug verwendet wird, scripts/stage25d.js in das Verzeichnis kopieren und vor film.js laden.
  • film.js stellt window.ready und window.seek(t) bereit. seek findet die Einstellung, die zu t gehört (shot(t0, t1, fn)), ruft fn(t) auf, um das HTML dieses Frames zurückzugeben, und wartet auf das Dekodieren der Bilder und das Laden der Schriftarten. Derselbe t-Wert liefert immer denselben Frame, ohne CSS-Animationen und Wiedergabeuhr.
  • Zeitangaben immer als cue(Satz-ID, 'Wort') schreiben, aus der Timeline holen, keine festen Sekunden. Wenn die Vertonung wechselt, verschiebt sich der ganze Film automatisch.
  • Realfilm in Frame-Sequenzen ausgeben, nach t den Frame holen, kein <video> verwenden. Die Anzahl der Frames muss registriert werden – fehlt ein Frame, erscheint ein schwarzer Bildschirm oder ein leerer Rahmen.
  • Eine Einstellung = eine Kamerafunktion + mehrere Bildebenen: Kamera mit camPath(t, Startposition, Bewegungstabelle), jede Ebene mit L(Kameraposition, Vorherige-Kamera-Position, z, html) umschließen, weiter entfernte Ebenen haben einen kleineren z-Wert, Bewegungsunschärfe wird automatisch berechnet.
  • Wenn eine Einstellung die vorherige übernehmen soll, nimm die Funktion der vorherigen Einstellung in ihrem letzten Frame als Eröffnung der nächsten (Kamera durch die Szene fahren, verkleinern und wegschieben, aufklappen, horizontal wegwischen). So sind der Endzustand der vorherigen und der Anfangszustand der nächsten von Natur aus identisch.
  • 720p für die Ansicht, 1080p nur einmal nach der finalen Festlegung rendern.

Verwandte Skills