Communitygithub.com

coder-xieshijie/filmsmith

Erstellt kurze technische Filme, die vollständig in Code gezeichnet und vertont werden (HyperFrames), aus einer Modusvorlage. Zehn Modi mit Farbpaletten, Formvarianten, Szenenregistrierung und rendervorlage – Länge folgt Inhalt, Tempo ist flott, jeder Render wird gemessen.

Was ist filmsmith?

Filmsmith ist eine vielseitige AI-Agenten-Fähigkeit zur Erstellung kurzer, technischer Filme – wie Technologie-Demos, Produktlaunches, Erklärvideos oder Data Stories – die vollständig durch Code generiert werden. Es basiert auf dem HyperFrames-Framework und bietet zehn unterschiedliche visuelle Modi (Thread, Ink, Plakat, Blueprint, Phosphor, Tally, Trace, Morph, Halftone, Pulse), jeder mit eigenen Farbpaletten-Presets, Formvarianten und einer Szenenvorlage. Der gesamte Film – von jedem Bild bis zum Soundtrack – wird programmatisch erzeugt, sodass der Agent nur Shell-Befehle ausführen können muss. Die Arbeitsweise folgt einem strukturierten Workflow: Klärung des Inhalts und Modus, Einrichtung der Filmstruktur mit einem Template, Erstellung eines Beat-Plans (einschließlich Timing-Validierung via `npm run fit`), Befüllen und Vorschau mit Snapshots, Rendern des finalen Films, Qualitätsprüfung mit `check-film` und abschließende Übergabe an den Benutzer. Strenge Prinzipien und eine eingebaute Theorie des guten Geschmacks (verankert in Referenzmaterialien) stellen sicher, dass Filme flott, direkt und sauber bleiben – mit maßvollen Änderungen, lesbarem Text und einem eigensinnigen, aber konsistenten Stil. Unterstützt wird jedes Coding-Agenten-Tool, das Node 22, ffmpeg und ffprobe ausführen kann. Abhängigkeiten werden lokal in das Filmverzeichnis geladen, sodass keine externe CDN-Erreichbarkeit während des Renderns benötigt wird. Der Fokus liegt auf englischem Text, aber der Workflow zwingt den Benutzer nicht zu einer bestimmten Plattform – solange der Agent die technischen Voraussetzungen erfüllt. Zusammenfassend ist Filmsmith ein hochspezialisiertes Werkzeug für Agenten, die visuell ansprechende, technisch präzise Erklärungen oder Produktvorführungen generieren müssen. Es automatisiert den gesamten kreativen Prozess des Filmemachens, von der Konzeption bis zur Qualitätssicherung, und eignet sich daher ideal für Launch-, Promo-, Teaser-, Showreel-, Data Story- oder Erklärvideo-Szenarien.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add coder-xieshijie/filmsmith

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht filmsmith?

Zehn Arten, deinen Code zu filmen. Erstellt einen kurzen Technik-Film – eine Technologie-Demo, einen technischen Bericht oder Erklärfilm, einen technischen Produktlaunch – aus einem Briefing, dessen Länge aus dem Inhalt berechnet wird, ohne Person im Bild: Wähle einen Modus, kopiere seine Vorlage, fülle content.js, rendere. Jedes Bild wird in Code gezeichnet und jeder Ton wird in Code synthetisiert (ein generierter Musiktrack kann die Hintergrundmusik ersetzen), sodass ein Film nur einen Coding-Agenten braucht, der Shell-Befehle ausführen kann. Die Fähigkeit steht auf einer Theorie des Geschmacks (Grundlagen), zehn Kernprinzipien, die daraus und aus den Urteilen des Besitzers abgeleitet sind, einem gemeinsamen System von Farben, Schrift, Raum und Bewegung, und zehn Modi, die diese jeweils auf eine visuelle Sprache anwenden.

Der Hausstil für jeden Modus: flott, direkt und sauber – etwas ändert sich etwa auf jeden Beat, jede Änderung bringt eine neue Sache, und der Zuschauer wartet nie auf den Film – und sauber ist nicht schlicht: wenige Elemente, jedes bewegt sich flüssig genug, um das Auge zu fesseln (Prinzipien 4–6).

Anforderungen

  • Jeder Coding-Agent, der Shell-Befehle ausführen kann. SKILL_ROOT unten ist der Ordner, der diese SKILL.md enthält.
  • Node 22 oder neuer, ffmpeg und ffprobe im PATH. new-film prüft sie und stoppt mit einer Meldung, wenn eine fehlt.
  • Netzwerk während der Einrichtung und des Renderns eines Films: Schriftarten aus einem festen google/fonts-Commit und der feste GSAP-Build aus der npm-Registry (beide im Filmordner gespeichert), der erste Lauf von npx [email protected] (der auch seinen Headless Chrome abruft) und zur Renderzeit kann der HyperFrames-Compiler Schriftarten von Google Fonts abrufen. Offline-Rendering ist nicht verifiziert. Behalte die von den Vorlagen festgelegte HyperFrames-Version bei; aktualisiere sie nicht innerhalb eines Films.
  • Bildschirmtext ist in dieser Version Englisch; wenn der Benutzer nach Chinesisch oder einer anderen Schrift fragt, sage, dass die Vorlagen dies noch nicht einstellen.

Modi

Modus中文Sieht aus wieFormvarianteWähle ihn für
thread一线Eine Linie, die alles wird, ohne Schnittethread: gleichmäßige Regel oder geschwungene LinieShowreels einer Video-, Bewegungs- oder Rendering-Toolchain
ink落墨Schwere Schrift, die auf jeden Beat knallt, ein Tintenpunkt, der zu Farbe aufblühttypeWidth: komprimierte oder erweiterte SchriftNamenseinblendungen, Launch-Stings, einzeilige Behauptungen
plakat招贴Bewegende internationale Plakate, eine Signalfarbeform: quadratische oder diagonale FelderEine Behauptung plus Schritte und die Person, die entscheidet
blueprint蓝图Eine technische Zeichnung, Blatt für Blatt gezeichnet, bernsteinfarbene Stempellinework: Tinte oder BleistiftSysteme und Arbeitsabläufe mit Teilen und Abzeichnungen
phosphor荧屏Nacht-Terminal, ein Phosphor-Akzent, Launch-HUDscreen: CRT-Raster oder flachCLI- und Entwicklertools
tally算筹Ein Quadrat pro Element, Neugruppierung von Diagramm zu Diagrammmark: Quadrat, Punkt oder Isotype-GlypheZählungen, Anteile, Datensatzgeschichten
trace演算Dunkles Live-Diagramm des Zustands eines Algorithmusstroke: Vektor oder SkizzeWie ein Mechanismus oder Algorithmus funktioniert
morph一笔Eine Tintenform, die Punkt → Linie → Fläche → Volumen → Schnittstelle → Markierung erklimmt, ohne Schnittecorners: rund oder geschnittenEntwicklertools und Schnittstellenprodukte: Eine Quelle wird jede Oberfläche
halftone网点Zwei-Tinten-Druck: Ein Teil der Markierung bleibt still, während jede Welt um sie herum gedruckt wird, dann zieht sie zurück zur gesamten Markierungdot: runder, quadratischer oder LinienrasterModell- und Produktlaunches: ein paar Funktionen, eine Zahl, der Name
pulse节拍Eine Frage, die als Abfrage nachgespielt wird: ein Wort ein Beat, Grundierungen wechseln entlang eines Farbtons, eine Weißblende für die Antwortaperture: geschnitten oder rundVersionsveröffentlichungen und Benchmark-Antworten: eine gemessene Schlussfolgerung

Jeder Modus hat Farbvoreinstellungen (auf seiner Karte) und eine Formvariante, beide in content.js eingestellt; die Standardeinstellung rendert wie zuvor. Jede Karte listet ihre Anwendungsfälle mit einem ausgearbeiteten Beispiel und markiert die beste Passung. Die Namen vor dem 19.10.2026 (thread-reel, ink-beat, swiss-poster, blueprint-drafting, terminal-launch, unit-data, diagram-explainer) funktionieren noch in new-film.

Auswahlregeln und das Format der Moduskarte: references/modes/README.md. Modi werden nicht gemischt. Themen (Erzählskelette und Regeln nach Filmart): tech-product-launch für thread, ink, plakat, blueprint, phosphor, morph, halftone und pulse, tech-explainer für tally und trace.

Arbeitsablauf

1. Klären

Überspringe, was der Benutzer bereits gegeben hat; frage den Rest, zuerst den Modus. Frage in normaler Konversation, höchstens drei Fragen auf einmal; wenn eine Lücke den Start nicht blockiert, nimm an und teile dies mit. Jeder Film ist 16:9, 1920×1080, für die Wiedergabe im Querformat im Vollbildmodus; wenn nach einem Hoch- oder Quadratformat gefragt wird, sage, dass die Fähigkeit keinen solchen Film erstellt.

#FrageWarum
1Was ist der Inhalt: ein Werkzeug, eine Behauptung mit Schritten, ein System, ein Name, eine Rolle, Zahlen, ein Mechanismus?Entscheidet den Modus (Auswahltabelle); schlage einen vor und sage warum
2Woher kommen die Fakten (Repo, Dokument, Datensatz, Algorithmus)?Jede Tatsache auf dem Bildschirm stammt daraus; jede Zahl wird berechnet
3Plattform und ggf. Ziellänge?Die Länge wird aus dem Inhalt berechnet (Prinzip 5); ein Ziel verschiebt das Tempo innerhalb des Bereichs des Modus, dann werden Szenen geschnitten oder hinzugefügt
4Welche Palette-Voreinstellung?Nur Voreinstellungen, auf der Moduskarte aufgelistet; keine benutzerdefinierten Hex-Werte
5Harte Einschränkungen (muss gezeigt werden, darf nicht gezeigt werden, URL, Name)?Vermeidet Nacharbeit
6Musik: Kann dieser Agent eine Musik-Erstellungs-API aufrufen?Wenn ja, ersetzt ein generierter Hintergrundtrack im Tempo des Films den synthetisierten (System); wenn nicht, wird der synthetisierte Track verwendet und die Übergabe sagt dies

Abgeschlossen, wenn der Modus, die Quelle und die Voreinstellung benannt sind, die Musikquelle bekannt ist und die Ziellänge, falls vorhanden.

2. Gerüst bauen

node <SKILL_ROOT>/scripts/new-film.mjs <modus> <film-verzeichnis> --palette <id>

Dies prüft Node und FFmpeg, kopiert die Vorlage, fügt die gemeinsame Laufzeit als lib/ hinzu (mit lib/VERSION gestempelt), schreibt das PLAN.md-Skelett, lädt die in der fonts.json der Vorlage aufgeführten Schriftarten aus einem festen google/fonts-Commit und den festen GSAP-Build in lib/vendor/ herunter; es stoppt, wenn einer davon fehlschlägt, sodass ein Film nie in einem Fallback-Schriftbild gerendert wird oder von einem CDN abhängt. Eine Vorlage, die die Achsen einer variablen Schrift benötigt, deklariert diese in fonts.json (weight- und stretch-Bereiche, siehe CONTRACT.md). Lies dann die Moduskarte und die TEMPLATE.md des Ordners vollständig: Die Szenenregistrierung, das Zeichenlimit jedes Slots und die festgelegte Choreographie leben dort. Abgeschlossen, wenn du jeden Szenentyp benennen kannst, den der Modus bietet.

3. Konzept und Beat-Plan

new-film hat ein PLAN.md-Skelett in den Filmordner geschrieben. Fülle es, bevor du content.js anfasst; ein Film ohne Plan wird nicht gerendert (Prinzip 10):

  1. Konzeptsatz in der Form „In diesem Film wird [etwas, das nur dieses Produkt hat] zum [Signaturgerät des Modus]“ und der Rivalitätstest: Mit dem engsten Konkurrenten im Satz muss er nicht mehr halten. Dann der rote Faden (das Objekt oder der Rahmen, der das Auge vom ersten bis zum letzten Bild trägt).
  2. Verbotsliste: Beginne mit den Factory-Standards der Moduskarte und ai-tells.md; füge alles hinzu, was zu nah am nächsten Referenzfilm ist.
  3. Nächste Referenz und Motivtabelle: Nenne den nächsten Referenzfilm und liste die Motive auf, die der Film mit ihm teilt; in einem Modus mit einer bekannten Referenz fallen mehr als die Hälfte der geteilten Motive durch P1.
  4. Beat-Plan: Eine Zeile pro Szene – Szenentyp, On-Screen-Kopie und welche davon Primär- oder Blickfangtext ist, die Quelle der Tatsache, was diese Szene in der nächsten wird, und wo die Musik zum Lesen unterbrochen oder für den Schlüsselmoment geduckt wird. Längen werden nicht gewählt: Schreibe die Szenen in content.js und führe npm run fit aus, das den Start jedes Szene, Beats, Lesebedarf, den Abstand vor einer Wende und ihren Anteil an der Phrasenrundung sowie die Filmlänge ausgibt, renders/timing.json schreibt und die Tabelle zwischen ihren fit-Markierungen in PLAN.md kopiert. npm run fit stoppt, während PLAN.md fehlt, und warnt, solange es noch ungefüllte <!-- fill -->-Teile hat.

Lies vor dem Schreiben von Text die Längentabelle in der TEMPLATE.md des Modus: Sie sagt, welche Slots jeder Szene als Primärtext zählen und wie sie eintreten, sodass jeder Zustand budgetiert statt entdeckt werden kann. Abgeschlossen, wenn jeder Szenentyp in der Registrierung ist, jeder String sein Zeichenlimit einhält, jede Zahl den Code nennt, der sie berechnet, und npm run fit keine Fehler meldet. Zeichenlimits sind nur ein erster Filter: Die Breite eines Slots kann von seinen Nachbarn abhängen, daher ist die Pixelprüfung das rote Banner in Schritt 4. Bei einer Vorlage, deren Regeln die Timing-API 3 deklarieren, bedeutet ein Fehler, dass der Film eine der vier Änderungsstufen verletzt (Prinzip 5): mehr als fünf Wörter Primärtext, die gleichzeitig eintreten (acht für eine Behauptung, gelesen in einer markierten Pause), ein Stillstand nach einer Landung über zwei Beats, eine Komposition über 6 s, eine Lücke von mehr als vier Beats ohne Änderung oder die falsche Anzahl oder Platzierung von expressiven Übergängen und Höhepunkten. Teile zuerst lange Zeilen in Phrasen auf, die nacheinander eintreten, mache dann wiederholte Labels zu Blickfangtext, teile dann die Szene; verkleinere niemals die Schrift oder beschleunige über die Leseschwelle hinaus. Unter der Timing-Tabelle druckt npm run fit die Stufenmaße; eine Vorlage, die noch auf API 2 ist, behält ihre Seitenlimits (zwölf Primärwörter, ein Schritt stillstand einen Takt und den letzten anderthalb, eine Seite vier Takte) und zeigt die Stufen als INFO-Hinweis.

4. Füllen und erstes Einrahmen

Bearbeite zuerst content.js (und data/ oder run.js, wo der Modus sie verwendet); tippe niemals duration oder scene bars, um eine Länge zu erreichen. Rendere dann Standbilder der Schlüsselbilder und betrachte sie vor dem Animieren (das Skript führt zuerst fit aus, sodass die Standbilder die aktuelle Länge verwenden):

npm run snapshot -- --at <t1>,<t2>,<t3>

Ein rotes Banner auf einem Standbild benennt einen Slot, dessen Text breiter als seine Box ist: Kürze diesen Text. Korrigiere jedes Bild, das ein Kernprinzip oder ein Modusprinzip verletzt: Informationstext unter 25 px, unlesbarer Text, mehr als drei Schriftgrade, zwei Protagonisten, ein zweiter Akzent, abgeschnittener oder überlaufender Text, alles aus ai-tells.md. Abgeschlossen, wenn jedes Schlüsselbild die P0-Prüfungen der Moduskarte besteht.

5. Rendern

npm run film        # fit → audio → check → render, schreibt renders/film.mp4

npm run check muss 0 Fehler melden. Seine Warnungen werden anhand der Checkliste beurteilt: Eine Kontrastwarnung ist nur bei Text akzeptabel, der noch eintritt (Tippen, Einblenden) und einmal gelesen wird gelandet ist; jede andere Warnung wird behoben oder unter „Bekannte Probleme“ aufgeführt. Der Ton folgt content.js auf demselben Beat-Raster; um stattdessen generierte Musik zu verwenden, rendere sie mit dem angepassten Tempo und der Länge des Films (renders/timing.json), speichere sie unter assets/audio/ und setze content.bed = { file, offset } (siehe TEMPLATE.md des Modus).

6. Messen und überprüfen

node <SKILL_ROOT>/scripts/check-film.mjs renders/film.mp4 --film-dir .
sh <SKILL_ROOT>/scripts/contact-sheet.sh renders/film.mp4 renders/contact-sheet.jpg 20

check-film liest renders/timing.json und misst den Render dagegen: Format und Länge, Lautstärke mit kurzfristigen und momentanen Sprüngen, schwarze Bilder, Blitze nach Fläche, Schlüsselereignisse auf dem Beat (innerhalb von 2 Bildern) mit einem Bildereignis und einem Toneinsatz (≥ 3 dB innerhalb von 1 Bild), Standbild-Strecken pro Szene innerhalb der Inhaltsmaske gegen eine körnungsbewusste Rauschuntergrenze, das Tempo (keine lange Folge von nahezu stillen Beats, nicht mehr als die Hälfte des Films nahezu still), Einpendeln von Stillständen, Übergaben, Läufe von gleich langen Szenen und die vier Änderungsstufen bei den deklarierten Ereignissen (T0-Lücken, T1-Kompositionslängen, T2-expressive Übergänge, T3-Höhepunkte, Stillstandslängen), die nur bei Vorlagen mit Timing-API 3 FEHL schlagen; Bildeinsätze, großflächige Änderungen und der lauteste Moment sind Pixel- oder Signalschätzungen daneben. Kleinster Text, Textkontrast, Schriftgrade, Akzentfläche, Oktavbalance, Vier-Takt-Wiederholung und Begrenzung sind Pixel- oder Signalschätzungen, die als INFO gemeldet werden. Ein Element, das nichts zu messen hat, meldet N/A, nicht PASS; --json gibt jedes Ergebnis mit dem Checklistenpunkt, den es bedient.

Gehe dann durch references/checklist.md und die Prüfungen der Moduskarte: P0 von der Basis der Pyramide aufwärts, dann beurteile von oben nach unten (Passung, Frische, Textur). Messe, bevor du etwas änderst; behebe die Ursache, dann messe erneut. Abgeschlossen, wenn jedes P0 besteht und jeder P1/P2-Fehler behoben oder unter „Bekannte Probleme“ im README des Films aufgeführt ist.

7. Übergeben

Gib den MP4-Pfad, das Kontaktblatt und eine README mit dem Plan, dem Modus und der Voreinstellung, der Musikquelle (synthetisiert oder generiert), Befehlen, dem check-film-Bericht und bekannten Problemen; sage „noch nicht vom Gehör bestätigt“, es sei denn, jemand hat zugehört. Frage nach dem Urteil des Benutzers und zitiere es wörtlich mit Datum zurück; wenn der Benutzer nicht verfügbar ist, schreibe „Urteil ausstehend“ und stoppe.

Betreuer: Vom Urteil zur Regel

Nur für den, der diese Fähigkeit verwaltet; ein Filmersteller stoppt bei Schritt 7. Ein Urteil bearbeitet keine Moduskarte oder die Prinzipien direkt. Platziere es zuerst auf einer Ebene der Pyramide und prüfe es gegen foundations.md: Auf den Ebenen 1–2 entscheidet der Standard, auf 3–4 der Domänenkonsens, es sei denn, eine Abweichung wird mit ihrem Grund niedergeschrieben, auf 5–6 wählt der Eigentümer zwischen Kandidaten, die die Theorie als gleich gut beurteilt. Eine Tendenz wird nach zwei konsistenten Urteilen zur Regel; nach dem ersten bleibt sie ein Datenpunkt.

Referenzen

  • Grundlagen – die Theorie des Geschmacks, die die Prinzipien und das System untermauert
  • Prinzipien – zehn Kernprinzipien, die sich aus den Grundlagen ergeben
  • System – gemeinsames System von Farben, Schrift, Raum und Bewegung
  • Modi – detaillierte Beschreibungen jedes Modus, einschließlich Farbvoreinstellungen, Formvarianten und Szenenregistrierung
  • Themen – narrative Skelette und Regeln nach Filmart
  • ai-tells.md – häufige Fallen beim KI-generierten Filmemachen
  • Checkliste – Qualitätssicherungs-Checkliste für übergebene Filme
  • Vorlagenvertrag – technischer Vertrag zwischen Vorlagen und Skripten

Verwandte Skills