Communitygithub.com

createsomethingq3k/vibe-knowledge-film

Erstelle ein „Vibe-Wissensvideo“ (wie „Vibe知识大赏 / 比特新语“) ohne Voiceover, rein durch Code gezeichnet – Frame für Frame: dunkler Hintergrund mit leuchtenden geometrischen Formen, untertitelte Zeile, synchronisiert mit einem Beat – als 1920×1080 30fps MP4, etwa 2:40 lang, inklusive Faktencheck und Produktionslogbuch.

Was ist vibe-knowledge-film?

Dieses Skill ermöglicht es einem KI-Agenten (wie Claude Code), vollständig animierte Wissenskurzfilme im Stil der chinesischen „Vibe知识大赏“-Reihe zu produzieren – ohne gesprochene Erklärung, nur durch Code gezeichnet. Der Prozess ist streng geregelt: Themenauswahl → Faktenprüfung mit Quellenangabe → Erstellung eines Untertitel- und Storyboard-Drehbuchs → Entwicklung einer film.js (Canvas-basiert, Renderfunktion als reine Funktion von t) → Beat-Matching zum Musikstück → Einzelframe-Export mit Playwright → ffmpeg-Komposition → automatisierte Qualitätskontrolle (Untertitelgeschwindigkeit, Audio-Video-Synchronisation, Bewegungsminimierung, Lautstärke). Der Skill liefert ein MP4-Video in 1920×1080, 30fps, ca. 2:40 Minuten (oder anpassbar), zusammen mit einer Faktenliste und einem Produktionslogbuch. Er wird aktiviert, wenn der Benutzer sagt: „Mach ein Wissensvideo / Wie 比特新语 / Setz dieses Konzept als Animation um / Mit Code einen Film drehen / Ohne Voiceover Wissensvideo / Takte zum 开智小曲“ oder eine Wiederholung/Fortsetzung des Demofilms „Halbwertszeit“ wünscht. Nicht geeignet für erklärende Videos mit Voiceover, echten Sprechern oder Realschnitt (dafür sind Skills wie jia-kinetic-explainer und hyperframes gedacht).

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/createsomethingq3k/vibe-knowledge-film/tree/HEAD

In Ihrer bevorzugten KI fragen

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

Dokumentation

Vibe Wissensvideo (Code Frame für Frame)

Endformat: 1920×1080, 30fps, ca. 159 Sekunden (folgt dem Musikstück) oder anpassbar, keine menschliche Stimme, ein chinesischer Untertitel pro Bildschirm, alle Grafiken werden mit Canvas-Code gezeichnet. Der Demofilm "Halbwertszeit" (examples/halflife/) wurde vollständig aus Komponenten zusammengesetzt und besteht die Reproduktionsprüfung: pixelgenau mit dem Originalfilm (67 Frames) und samplegenau mit dem Original-Mix. examples/gallery/ zeigt eine Demonstration, wie das gleiche Komponentenset für neue Themen verwendet wird.

Diese Art von Film kommt beim Publikum an wegen dreier Dinge: echte Fakten (Jahreszahlen, Originaldaten, Paper), sich ständig bewegende Bilder und Enthüllungen, die mit der Musik synchronisiert sind. Jede Regel hier dient dazu, diese drei Elemente zu gewährleisten.

Grundregeln (jede hat einen Grund, warum sie existiert – es gab schon Vorfälle)

  • Jede Zahl, jeder Name, jedes Jahr, jedes Zitat auf dem Bildschirm muss eine Quelle haben, die in der Faktenliste notiert ist; kann die Quelle nicht gefunden werden, wird es nicht gezeigt, und eine illustrative Szene wird mit „(illustrativ)“ gekennzeichnet. KI neigt dazu, beim Schreiben von Zitaten etwas zu erfinden, das wie echt klingt – das berühmte Rutherford-Zitat im alten „Halbwertszeit“-Demo war erfunden.
  • Das Wasserzeichen trägt nur den Namen des Benutzers oder den Filmtitel. Wenn Sie sich an Referenz-Frames orientieren, neigt die KI dazu, den Namen des Referenzautors mit einzuzeichnen (im alten Demo stand oben links „比特新语“) – das ist eine Identitätsanmaßung.
  • Die Musik darf nur aus vom Benutzer bereitgestellten, lizenzierten Dateien stammen; keine Audiospuren aus fremden Videos extrahieren, keine Tracks von fragwürdigen Websites herunterladen, und das Skill enthält keine eigenen Musikstücke. Bei Veröffentlichung auf Bilibili wird die Musik im Bilibili-Upload-Prozess hinzugefügt.
  • Credits und Veröffentlichungstext enthalten einen KI-Erstellungsvermerk.
  • renderFrame(t) wird nur durch t bestimmt: Zufallszahlen verwenden VF.rng(Samen), keine Timer, kein Zustand zwischen Frames. Sonst zittert der Export und jedes Rendering sieht anders aus.

Vorbereitung

SK=~/.claude/skills/vibe-knowledge-film
$SK/engine/setup.sh          # Prüft node / ffmpeg(libx264) / numpy, installiert Playwright-Pakete, sucht lokalen Browser

Ablauf (drei Bestätigungspunkte, erst nach Bestätigung weiter)

① Themenauswahl & Route → Bestätigung 1

Mit AskUserQuestion erfragen (empfohlene Option zuerst):

  • Thema: Wenn der Benutzer nur eine Richtung angibt, 3 Vorschläge machen. Gute Themen = hartes Konzept × ein emotionaler Punkt, der „dich“ betrifft (Entropie → das Gefühl, dass das Leben einen überwältigt; Halbwertszeit → Ist Vergessen Verrat?), idealerweise mit einer kontraintuitiven Wendung. Siehe references/story.md.
  • Musik: bgm (Benutzer stellt lizenzierte Datei wie "开智小曲" zur Verfügung, Bild folgt dem Song, Filmlänge = Songlänge) oder synth (Code-generiert, Filmlänge selbst bestimmt).
  • Namensnennung (was im Wasserzeichen steht), Länge (Standard 159 Sekunden mit Musik).

② Faktenprüfung → Faktenliste

Jede auf dem Bildschirm gezeigte Tatsache: Aussage | Quelle | Vertrauenswürdigkeit (T1 Primärliteratur / T2 seriöse Sekundärquelle / T3 nur als „angeblich“) | In welchem Satz verwendet. Die Faktenprüfung kann die Geschichte oft umschreiben: Beim "Halbwertszeit"-Projekt wurde durch Recherche entdeckt, dass „Vergessen einer Potenzkurve folgt, je älter desto stabiler“ – das hat den ursprünglichen Untertitel umgeworfen und wurde stattdessen zur Wendung am Ende. Bei Konflikten anhalten und den Benutzer informieren.

③ Untertitel + Storyboard → Bestätigung 2

Nach dem Sechs-Akt-Schema schreiben (Hook → Filmtitel → Historischer Anker → Mechanismus-Demo → Kontraintuitive Wendung → Rückkehr zum Zuschauer → Widmung & Quellen), ein Satz pro Bildschirm, ≤ 6,5 Zeichen/Sekunde, Schlüsselwörter mit {} hervorheben, Sätze mit Quellenangabe mit einer Fußnote in kleiner Schrift. Für jede Szene im Storyboard notieren: Was das Bild zeigt (ein Satz Untertitel entspricht einer Aktion auf dem Bildschirm), was „tatsächlich berechnet“ wird (echte Daten, echte Formeln, feste Samen für Simulationen), Soundeffekte. Vorlage templates/事实表与字幕分镜.md. Dem Benutzer Faktenliste + Storyboard zeigen, erst nach Zustimmung coden.

④ Projekt anlegen, film.js schreiben

$SK/engine/new_film.sh <Film-Verzeichnis> <Filmtitel>                 # Sechs-Akt-Skelett
$SK/engine/new_film.sh <Film-Verzeichnis> <Filmtitel> --from halflife  # Ausgehend von „Halbwertszeit“ / zum Vergleich

Zunächst die passenden Komponenten für den Inhalt wählen: references/components.md enthält eine Tabelle „Was zeigen → Was verwenden“, examples/gallery/组件图鉴.png zeigt alle Komponenten. Das Skelett verwendet bereits Komponenten für die sechs Akte; nur Daten und Text austauschen; wenn Komponenten nicht ausreichen, in film.js lokale Funktionen schreiben (API siehe references/engine.md, komplettes Beispiel siehe examples/halflife/film.js). Regeln:

  • Die schwierigste Szene zuerst – einen Standframe rendern und prüfen, ob sie funktioniert, dann die anderen.
  • Untertitel, Szenen und Soundeffekte nach der „Storyboard-Zeit“ schreiben; das Beat-Matching (Warp) wird in Schritt ⑤ erledigt, nicht durch manuelles Anpassen der Zeitpunkte.
  • Alle 2–3 Sekunden eine neue Bewegung in der Szene; bei längeren Standbildern Mikrobewegungen einbauen (Lichtlauf, Wischlicht, sanfte Kamerafahrt). Die eingebaute Atmung der Engine ist zu subtil, um Stillstand zu vermeiden.
  • Neu auftauchende Zeichen (im Bild gezeichnet, aber nicht im Untertitel) in strings aufnehmen.

⑤ Musik & Beat-Matching

  • bgm: Musikdatei ins Filmverzeichnis legen, dann python3 $SK/engine/analyze_bgm.py <Musikdatei> --json out/bgm.json ausführen. Bei "开智小曲" zuerst den SHA256 mit data/kaizhi-xiaoqu.json vergleichen: Bei Übereinstimmung direkt das Taktgitter und die empfohlenen Ankerpunkte übernehmen; bei Abweichung (andere Quellen können 0,1–0,3 Sekunden insgesamt abweichen) das Gitter basierend auf den neu gemessenen Low-Frequency-Einbruchspunkten neu erstellen. Dann in meta.music.warp Ankerpunkte setzen: Filmtitel blinkt weiß → erster Drop, Frage/Stille → ruhiger Teil, Wendung enthüllt → zweiter Drop, Abschluss und Widmung → Phrasenbeginn. Details siehe references/music.md.
  • synth: In meta.music.synth pro Abschnitt die Pegel der einzelnen Stimmen und die Stille-Hüllkurve einstellen (dem SYNTH-Beispiel folgen).

⑥ Selbstprüfung (ohne den gesamten Film zu rendern)

node $SK/engine/export.mjs <Film-Verzeichnis> events          # Soundeffekt-Tabelle + Untertitel-Timing
node $SK/engine/export.mjs <Film-Verzeichnis> stills          # out/stills.png, 16-Bild-Übersicht; auch bestimmte Sekunden möglich 3,16.9,43.6
cd <Film-Verzeichnis> && python3 -m http.server 8765 --bind 127.0.0.1   # Browser öffnen, film.html öffnen, Zeitleiste ziehen, Musik hören

Frame für Frame prüfen: Gehen Zeichen über den Rand? Ist eine Hälfte des Bildes leer? Liegen Kurven an den Datenpunkten an? Schweben Objekte an der falschen Stelle? Passen Untertitel und Aktion zusammen? – Diese Dinge erzeugen keine Fehlermeldung, nur durch Hinsehen zu erkennen – beim "Halbwertszeit"-Projekt wurden so 5 Fehler gefunden.

⑦ Rendern + Qualitätskontrolle

$SK/engine/build.sh <Film-Verzeichnis>        # Soundeffekt-Tabelle → Musik → Einzelbild-Rendering → -14 LUFS-Komposition → qa.py (Hintergrund, ca. 5–12 Minuten)
$SK/engine/build.sh <Film-Verzeichnis> --skip-render   # Nur Ton geändert

Wenn qa.py ✗ meldet, muss es geändert werden; bei ! entweder ändern oder bei Lieferung erklären, dass es beabsichtigt ist. Auch Maschinen können Fehlalarme geben: Bei „Schwarzfeld“-Meldung zuerst die Frames prüfen – dunkle Hintergründe werden oft fälschlich erkannt. Lesart siehe references/qa.md.

⑧ Abgabe → Bestätigung 3

Dem Benutzer übergeben: Pfad des Films, Filmlänge, Qualitätsergebnisse, noch nicht perfekte Stellen. 制作日志.md ergänzen (jede Panne: Phänomen → Ursache → Lösung; diese Liste wird später für Tutorials zu den Szenen verwendet). Bei Bedarf an Veröffentlichungstext siehe references/publish.md.

Befehlsschnellübersicht

BefehlVerwendung
engine/setup.shUmgebungsprüfung und Installation
engine/new_film.sh <Verzeichnis> <Filmtitel> [--from halflife]Neuen Film anlegen (kopiert eine Engine-Snapshot hinein, spätere Engine-Updates beeinflussen alte Filme nicht)
node engine/export.mjs <Verzeichnis> events / stills [Sekunden,…] / render [Start Ende]Soundeffekt-Tabelle / Übersichtsbild / Video exportieren (mit Start/Ende nur Abschnitt rendern)
python3 engine/audio.py <Verzeichnis>Musik + Soundeffekte → out/mix.wav
python3 engine/analyze_bgm.py <Musikdatei> [--json Datei]BPM, Takte, Energie-Kurve, Low-Frequency-Einbruchspunkte
engine/build.sh <Verzeichnis> [--skip-render]Ein-Klick-Film + Qualitätskontrolle
python3 engine/qa.py <Verzeichnis> [Film]Nur Qualitätskontrolle

Referenzdateien (bei Bedarf lesen)

DateiWann lesen
references/story.mdThemenauswahl, Sechs-Akt-Schema, Untertitel-Regeln, Faktenklassifizierung
references/style.mdVisuelle Richtlinien: Farben, Schriftart, fünf Bildebenen, Layout-Koordinaten, Bewegungsdichte
references/components.mdVor dem Szenenschreiben: 21 Komponenten + 5 Datenfabriken, „Was zeigen → Was verwenden“, Parameter
references/engine.mdVF-Basis-API, Meta-Felder, Szenen-Schreibweise
references/music.mdZwei Musikmodi, Struktur von "开智小曲", Drop-Erkennung, Warp-Ankerpunkte, Soundeffekt-Tabelle
references/qa.mdBedeutung jedes Prüfpunkts, Schwellwerte, häufige Fehlalarme
references/pitfalls.mdVor dem Start einmal durchlesen: 30 Fallstricke aus dem "Halbwertszeit"-Projekt + ähnliche Projekte
references/publish.mdVeröffentlichungstext, KI-Erklärung, Umgang mit Musik und Quellenangaben
examples/halflife/Vollständiges Beispiel: film.js (Komponenten-Version), Faktenliste & Storyboard, Produktionslogbuch
examples/gallery/Komponenten-Übersicht: gleiches Komponentenset mit neuen Themen; 组件图鉴.png als Gesamtübersicht
data/kaizhi-xiaoqu.jsonGemessene Struktur und empfohlene Ankerpunkte von "开智小曲"

Verwandte Skills