Anmerkung des Autors: Um einen Coding-Agent Videos erstellen zu lassen, gibt es derzeit vor allem zwei Wege: Ein MP4 wird per Code Bild für Bild gerendert, oder eine Webpräsentation wird erstellt und per Bildschirmaufnahme aufgezeichnet. Dieser Artikel vergleicht die Funktionsweise, Ergebnisse und Einsatzgebiete beider Wege und zeigt, wie du in 5 Schritten den passenden auswählst.
Viele Entwickler nutzen Claude Code, Cursor oder Codex bereits ganz selbstverständlich, um Seiten und Skripte zu schreiben. Doch beim Gedanken, einen Coding-Agent direkt Videos erstellen zu lassen, zögern viele noch. Eine häufige Frage lautet: Wenn der Agent nur Code schreibt, wie soll daraus ein Video mit Rhythmus und Ton entstehen, das sich direkt veröffentlichen lässt? Dieser Artikel stellt zwei Wege vor: das codebasierte Rendering Bild für Bild und die Bildschirmaufnahme einer Webpräsentation. So kannst du entscheiden, welcher Weg zu deinem Vorhaben passt.
Das ist keine weitere Einführung nach dem Motto „KI erstellt Videos mit einem Klick“. Beide Wege basieren auf konkreten Skills aus der Open-Source-Sammlung garden-skills: motion-showreel übernimmt das codebasierte Rendering Bild für Bild, web-video-presentation die Bildschirmaufnahme einer Webpräsentation. Für beide sind Workflows, Kontrollpunkte und Ergebnisse klar festgelegt.
Das nimmst du mit: Nach der Lektüre kennst du die Funktionsweise und Grenzen beider Wege, kannst dich in 5 Schritten für einen davon entscheiden und weißt, wie du für deinen Coding-Agent ein passendes Großes Sprachmodell konfigurierst.
Videos mit einem Programmier-Agenten: Die zwei wichtigsten Ansätze
Die Tabelle zeigt die grundlegenden Unterschiede. Kurz gesagt: Beim frameweisen Rendern übernimmt der Agent die Rolle des Animationsregisseurs und der Renderfarm. Bei der Aufnahme einer Webpräsentation baut er die Präsentation – und ein Mensch drückt auf Aufnahme.
| Aspekt | Frameweises Rendern per Code (motion-showreel) | Aufnahme einer Webpräsentation (web-video-presentation) |
|---|---|---|
| Grundprinzip | Deterministische render(t)-Seite, die anhand der Zeit Bild für Bild aufgenommen wird |
Webseite mit Vite + React + TypeScript, die per Klick oder Tastatur weitergeschaltet und dabei aufgenommen wird |
| Ergebnis | Fertiges MP4-Video + editierbarer Quellcode | Aufnehmbares Webpräsentationsprojekt im 16:9-Format |
| Typische Dauer | Kurzvideos von 5–60 Sekunden, längere Videos mit Kapiteln bis etwa 20 Minuten | Abhängig vom Vortragsskript; Fortschritt nach Kapiteln und Schritten |
| Ton | Bild, Musik, Soundeffekte und Sprechertext teilen sich eine Zeitleiste | Optionale Synthese von Sprechertext; jedem Bildschritt entspricht ein Abschnitt des Sprechertexts |
| Am besten geeignet für | Produktvideos, Logo-Intros, animierte Typografie, Animationsschleifen | Kurserklärungen, Umwandlung von Artikeln in Videos, Produktdemos, technische Vorträge |
Codebasierter Frame-für-Frame-Renderpfad im Detail
Der Schlüssel zu motion-showreel ist die „Deterministik“. Die vom Agenten erstellte Seite stellt eine Funktion render(t) bereit, die für einen gegebenen Zeitpunkt t genau ein bestimmtes Einzelbild zeichnet. Der Renderer ruft sie entsprechend der Bildrate für jedes Frame auf und erfasst das Ergebnis. Da dieselbe Seite Standbilder, Kontaktbögen, Stilboards mit drei Varianten, eine Proxy-Version und einen Master erzeugen kann, bleibt die Quelle vom Entwurf bis zum fertigen Film dieselbe. So sieht das Endergebnis genauso aus wie die Vorschau. Bewegungsunschärfe, Supersampling und Filmkorn lassen sich einfach über Renderparameter ein- oder ausschalten.
Beim Ton liegen Schnittpunkte, betonte Beats und Soundeffekte auf derselben Zeitachse und nutzen dieselben Zeitwerte. Die Musik kann entweder mit dem eingebauten Synthesizer ohne zusätzliche Abhängigkeiten oder mit dem gesampelten Klavier von Tone.js erzeugt werden. Alternativ lässt sich die eigene Tonspur des Nutzers einbinden und auf Beats und Drops analysieren. Die Sprecherstimme liest nur das vom Nutzer bereitgestellte Skript vor. Die Bilder richten sich nach den tatsächlichen Zeitstempeln der Sprache, nicht umgekehrt.
Aufnahme einer Webpräsentation im Detail
web-video-presentation verfolgt einen anderen Ansatz: Das Video wird als „bewegte Präsentation“ behandelt. Dafür legt es eine Bühne mit 1920×1080 fest und skaliert sie entsprechend dem Viewport, damit das Bild bei der Bildschirmaufnahme stabil bleibt. Die Präsentation wird über einen (chapter, step)-Cursor gesteuert. Jeder Klick oder Tastendruck führt zum nächsten visuellen Schritt, der jeweils einem Satz des Sprechertexts entspricht.
Dieser Weg ähnelt dem klassischen Ablauf „Skript schreiben → Folien erstellen → aufnehmen“. Der Skill formuliert zunächst den ursprünglichen Artikel zu einem Sprechertext um und übersetzt dessen einzelne Abschnitte in Vollbildszenen. Bei Skript, Thema, Gliederung, Implementierungsmodus und optionalem Audio pausiert er jeweils, damit Sie den Stand bestätigen können. Während der Aufnahme erscheinen die Fortschrittssteuerungen nur, wenn sich der Mauszeiger darüber befindet. So bleibt die Bühne aufgeräumt.
Zwei Workflows im Vergleich: Wie sich Videos mit Coding-Agents erstellen lassen
Am Ende steht bei beiden Wegen eine Videodatei. Im Workflow unterscheiden sie sich jedoch deutlich – und damit auch die Anforderungen an Mensch und Modell. Die folgende Tabelle vergleicht acht Aspekte.
| Aspekt | Frameweises Rendering per Code | Bildschirmaufnahme einer Webpräsentation |
|---|---|---|
| Manuelle Kontrollpunkte | 2: Anforderungen und Stil-Frame bestätigen | 5: Skript, Thema, Gliederung, Implementierungsmodus und optionales Audio |
| Stilvorlagen | Bibliothek mit 43 Stilen, darunter Schweizer Editorial, Tuschemalerei, Synthwave, Soft 3D, Filmvorspann und Guochao | 23 integrierte Themen, darunter Editorial, Terminal, technische Blaupause und Schweizer Internationalismus |
| Umfang der Stildefinition | Erscheinungsbild, Bewegung, Kamerasprache und Klangpalette | Design-Tokens für Farben, Schriftarten und Layout |
| Sprachlösung | Gemini / MiniMax TTS liest ausschließlich das Skript des Nutzers; echte Aufnahmen sind ebenfalls möglich | Austauschbares TTS mit integriertem MiniMax mmx-cli und OpenAI TTS sowie Integrationsbeispielen für ElevenLabs, edge-tts, Azure, Google Cloud und macOS say |
| Musik und Soundeffekte | Aus separaten Quellen; die Lautstärke wird automatisch zugunsten der Sprache abgesenkt | Schwerpunkt auf dem Sprechertext, Musik spielt eine untergeordnete Rolle |
| Qualitätsprüfung | Abmessungen, Bildrate, Dauer, Framezahl, schwarze Frames, Lautheit, True Peak, Loop-Übergang und Determinismus müssen alle PASS erreichen | Abhängig von der manuellen Vorschau vor der Bildschirmaufnahme |
| Ist eine manuelle Aufnahme nötig? | Nein, MP4 wird direkt gerendert | Ja, die Webseite muss mit einem Bildschirmaufnahme-Tool aufgezeichnet werden |
| Aktuelle Version | v0.1.0 | v1.2.2 |
Ein leicht zu übersehender Designaspekt: motion-showreel trennt „technische Abnahme“ und „ästhetische Bewertung“ konsequent. Die technische Abnahme umfasst harte, maschinell prüfbare Kriterien, die alle erfüllt sein müssen. Die ästhetische Bewertung liegt dagegen beim Nutzer, der letztlich entscheidet. So kann der Agent schwarze Frames oder zu hohe Lautheit nicht einfach übergehen, nur weil das Video „gut aussieht“.
Bei der Bildschirmaufnahme einer Webpräsentation liegt mehr Kontrolle beim Menschen. Die fünf Kontrollpunkte wirken zwar aufwendig, sind aber für Erklärvideos sinnvoll: Formulierungen im Skript und die Kapitelaufteilung sind entscheidend für die Qualität des Inhalts und sollten am besten vom Autor selbst bestätigt werden.
Schnelleinstieg: Videos mit Programmier-Agenten erstellen
Schritt 1: Skills installieren
Beide Skills folgen der SKILL.md-Spezifikation und lassen sich unter anderem in Claude Code, Claude.ai, Cursor, Codex CLI, Gemini CLI und OpenCode installieren. Die folgende Tabelle zeigt gängige Installationswege. Die Befehle können Sie direkt im Terminal oder im Dialogfenster des Agenten eingeben.
| Installationsweg | Vorgehen | Geeignet für |
|---|---|---|
| skills CLI | npx skills add ConardLi/garden-skills -s motion-showreel ausführen oder den Wert nach -s durch web-video-presentation ersetzen; mit -a claude-code lässt sich der Agent festlegen |
Nutzer beliebiger Agenten, Installation mit einer Zeile |
| Claude Code Plugin-Marktplatz | Zuerst /plugin marketplace add ConardLi/garden-skills ausführen, dann motion-showreel-skills@garden-skills oder presentation-skills@garden-skills installieren |
Claude Code-Nutzer |
| ZIP einer festen Release-Version | ZIP der gewünschten Version herunterladen, SHA-256 prüfen und nach .claude/skills/, .agents/skills/ oder .codex/skills/ entpacken |
CI, Offline-Umgebungen und Teams, die reproduzierbare Installationen benötigen |
| Manuell kopieren | Repository klonen und das Skill-Verzeichnis in das Skill-Verzeichnis des Projekts kopieren | Entwickler, die den Skill selbst anpassen möchten |
Zweiter Schritt: Das Modell für den Agent vorbereiten
Ein Programmier-Agent erledigt bei der Videoproduktion vor allem drei Aufgaben: Code schreiben, Anforderungen verstehen und Bilder prüfen. Entscheidend sind daher die Programmierfähigkeiten des Modells und sein Umgang mit langen Kontexten. Wenn dein Agent eine eigene Schnittstelle unterstützt, musst du nur zwei Parameter konfigurieren: API Key und base_url. Für das OpenAI-kompatible Format kannst du als base_url https://api.apiyi.com/v1 eintragen. Die Adresse und konkreten Parameter für das Anthropic-Format findest du im Dokumentationszentrum von APIYI unter docs.apiyi.com.
Dritter Schritt: Mit einer klaren Anforderung starten
Nennst du gleich zu Beginn alle wichtigen Informationen, sind weniger Rückfragen nötig. Beim Rendern einzelner Frames per Code fragt der Skill nach Thema, Dauer, Quer- oder Hochformat, Quellen für Musik und Soundeffekte sowie der Art der Vertonung. Für eine Bildschirmaufnahme einer Webpräsentation braucht er dagegen den Originalartikel oder das Skript und eine grobe Kapiteleinteilung.
- Beispielanforderung für das Rendern einzelner Frames per Code: Erstelle ein 30-sekündiges Produktvideo im Querformat für ein Entwicklertool, im Synthwave-Stil, mit Musik aus dem integrierten Synthesizer und ohne Sprechertext.
- Beispielanforderung für eine Bildschirmaufnahme einer Webpräsentation: Mach aus einem technischen Artikel ein achtminütiges Erklärvideo im Stil einer technischen Konstruktionszeichnung, mit chinesischem Sprechertext.
🚀 Schnellstart: Falls du für deinen Agent noch keine Modellschnittstelle eingerichtet hast, kannst du dich zunächst bei APIYI auf apiyi.com registrieren und Testguthaben erhalten. Die Plattform unterstützt sowohl das OpenAI- als auch das Anthropic-Schnittstellenformat. Agents wie Claude Code und selbst entwickelte Skripte lassen sich direkt anbinden. So kannst du erst einen kurzen Beispielfilm erstellen und dich danach für einen Ansatz entscheiden.
Schritt 4: An den Kontrollpunkten bewusst entscheiden
Beim Frame-für-Frame-Rendering per Code werden in der Stilbildphase drei deutlich unterschiedliche Richtungen vorgeschlagen, sofern kein Stil vorgegeben wurde. Das ist der günstigste Zeitpunkt, um den Charakter des fertigen Videos festzulegen. Bei der Bildschirmaufnahme einer Web-Demo beginnt die Umsetzung erst nach der Freigabe der Gliederung. Zu diesem Zeitpunkt lassen sich Kapitel noch mit minimalem Aufwand ändern. Bei beiden Wegen empfiehlt es sich, das wichtigste Feedback an den Kontrollpunkten zu geben, statt das fertige Video nachträglich zu überarbeiten.
Schritt 5: Abnahme und Übergabe
Beim Frame-für-Frame-Rendering per Code erhalten Sie eine MP4-Datei und den bearbeitbaren Quellcode. Bewahren Sie den Quellcode auf: Wenn Sie später Texte oder Farben ändern möchten, müssen Sie das Video nur erneut rendern. Bei der Bildschirmaufnahme einer Web-Demo erhalten Sie das Projekt. Nehmen Sie die einzelnen Kapitel mit einem Bildschirmaufnahme-Tool auf und synchronisieren Sie bei Bedarf das optional per TTS erzeugte Audio in einer Videoschnittsoftware mit der Aufnahme.
Das passende Modell für einen Coding-Agent zur Videoproduktion wählen
Die beiden Skills sind nicht an ein bestimmtes Modell gebunden. Wie gut sie funktionieren, hängt aber stark vom Großen Sprachmodell ab, das den Agent antreibt. Die folgende Tabelle zeigt passende Modelle, die über APIYI aufgerufen werden können. Alle Preise stammen von der APIYI-Preisseite docs.apiyi.com/models; Abrechnungseinheiten und -grundlagen finden Sie ebenfalls dort.
| Modell | Rolle in diesem Anwendungsfall | APIYI-Preis (Eingabe / Ausgabe / Cache) | Verfügbare Plattform |
|---|---|---|---|
| claude-opus-5-5 | Komplexe Bewegungsabläufe, Kapitelplanung für längere Videos, anspruchsvolle Programmierung | $4 / $20 / $0.2 | APIYI apiyi.com |
| claude-sonnet-5-5 | Hauptmodell für die tägliche Programmierung mit ausgewogenem Preis-Leistungs-Verhältnis | $2 / $10 / $0.1 | APIYI apiyi.com |
| kimi-k3.1-pro | Lange Texte in Sprecherskripte umarbeiten, chinesische Inhalte aufbereiten | $2 / $10 / $0.2 | APIYI apiyi.com |
| deepseek-v4.1-flash | Leichte Aufgaben wie kleine Änderungen im Batch und das Aufbereiten von Untertiteln | $0.3 / $1.2 / $0.006 | APIYI apiyi.com |
| gpt-image-2.6-flare / gpt-image-2.6-sunburst | Titelbilder, stilistische Referenzbilder und Bildmaterial für Videos erzeugen | Texteingabe $5 / Bildeingabe $8, Ausgabe $30 | APIYI apiyi.com |
Zur Sprachsynthese ein wichtiger Hinweis: In motion-showreel sind Gemini und MiniMax TTS integriert, in web-video-presentation MiniMax mmx-cli und OpenAI TTS. Falls diese TTS-Modelle nicht auf der APIYI-Preisseite aufgeführt sind, bietet APIYI sie derzeit noch nicht an. Wir werden sie schnellstmöglich verfügbar machen. Nutzen Sie bis dahin den jeweiligen Anbieter direkt, wie in der Skill-Dokumentation beschrieben, oder wechseln Sie zu einer anderen TTS-Lösung, die der Skill unterstützt. Auch die Wenxin-ERNIE-Reihe ist derzeit nicht über APIYI verfügbar. Falls Ihr Workflow davon abhängt, müssen Sie sie separat anbinden.
💰 Kostentipp: Bei der Videoproduktion liest der Agent dasselbe Briefing, dieselben Stilvorgaben und denselben Projektcode wiederholt ein. Die Cache-Trefferquote ist daher meist hoch. Modelle mit Cache-Preisen können die Kosten über mehrere Iterationen deutlich senken. Vergleichen Sie die einzelnen Modelle auf der APIYI-Preisseite docs.apiyi.com/models.
Entscheidung in 5 Schritten: Welchen Weg sollte ein Coding-Agent für Videos wählen?
Nachdem wir die Grundlagen und Werkzeuge behandelt haben, lässt sich die Entscheidung auf fünf Fragen reduzieren. Beantworten Sie sie der Reihe nach, um zur passenden Lösung zu gelangen.
- Soll der Inhalt vor allem „erklären“ oder „beeindrucken“? Steht die Informationsvermittlung im Vordergrund, wählen Sie die Bildschirmaufnahme einer Webpräsentation. Geht es vor allem um visuelle Wirkung, setzen Sie auf codebasiertes Frame-für-Frame-Rendering.
- Wie lang soll das Video sein? Für Clips bis 60 Sekunden eignet sich Frame-für-Frame-Rendering besonders gut. Bei Kurserklärungen ab etwa zehn Minuten ist eine aufgezeichnete Webpräsentation leichter zu pflegen.
- Ist eine präzise Synchronisierung von Bild und Ton nötig? Schnitt auf den Takt, punktgenaue Soundeffekte und nahtlose Loops lassen sich zuverlässig nur mit Frame-für-Frame-Rendering auf einer gemeinsamen Zeitleiste umsetzen.
- Ist eine manuelle Bildschirmaufnahme akzeptabel? Soll das Video vollautomatisch entstehen und sich in CI wiederholt rendern lassen, wählen Sie Frame-für-Frame-Rendering. Wenn Sie selbst im passenden Tempo erklären oder aufnehmen möchten, ist die Bildschirmaufnahme einer Webpräsentation flexibler.
- Sind später häufige Änderungen zu erwarten? Bei beiden Wegen bleibt der Quellcode erhalten. Änderungen an einer Seite der Webpräsentation sind jedoch sofort sichtbar, während beim Frame-für-Frame-Rendering das Video neu gerendert werden muss.
| Typisches Szenario | Empfohlener Weg | Grund |
|---|---|---|
| 30-sekündiger Werbeclip zur Produkteinführung | Codebasiertes Frame-für-Frame-Rendering | Umfangreiche Stilbibliothek, gemeinsame Zeitleiste für Bild und Ton, direkter MP4-Export |
| Logo-Intro / Titelsequenz | Codebasiertes Frame-für-Frame-Rendering | Deterministisches Rendering garantiert bei jedem Durchlauf dasselbe Ergebnis |
| Technischen Artikel in ein Erklärvideo umwandeln | Bildschirmaufnahme einer Webpräsentation | Automatische Umarbeitung zum Sprechertext, ein Schritt pro Abschnitt |
| Kapitel eines Onlinekurses | Bildschirmaufnahme einer Webpräsentation | Einheitliches Design, klare Kapitelstruktur, einfach pro Lektion zu pflegen |
| Kurzer Jahresrückblick mit Sprechertext | Codebasiertes Frame-für-Frame-Rendering | Bilder folgen den tatsächlichen Zeitstempeln der Sprache; auch längere Videos mit Kapiteln sind möglich |
| Produktfunktionsdemo | Bildschirmaufnahme einer Webpräsentation | Klickgesteuert, mit kontrollierbarem Demonstrationstempo |
💡 Entscheidungshilfe: Wenn Sie unsicher sind, lassen Sie den Agenten aus denselben Anforderungen zunächst einen 15-sekündigen Beispielclip und eine Präsentationsseite erstellen. Vergleichen Sie anschließend die Ergebnisqualität und den Aufwand für Änderungen. Über APIYI apiyi.com können Sie mit demselben API-Schlüssel zwischen Modellen wie Claude, Kimi und DeepSeek wechseln und nebenbei vergleichen, wie sich die verschiedenen Modelle in Ihrem Projekt schlagen.
Häufige Fragen (FAQ)
Q1: Was bedeutet es, einen Programmier-Agenten Videos erstellen zu lassen?
Dabei erstellen Programmier-Agenten wie Claude Code, Cursor oder Codex Videos, indem sie Code schreiben. Statt direkt ein Videogenerierungsmodell aufzurufen, organisieren sie Bild und Ton mithilfe von Webseiten, Animationen und Rendering-Skripten. Das Ergebnis lässt sich bearbeiten und reproduzieren.
Q2: Was ist der Unterschied zwischen bildweisem Rendering per Code und der Bildschirmaufnahme einer Webpräsentation?
Das bildweise Rendering per Code bietet mehr Möglichkeiten bei der visuellen Gestaltung und der Synchronisierung von Bild und Ton. Es erzeugt direkt eine MP4-Datei, eignet sich aber eher für kürzere Videos. Die Bildschirmaufnahme einer Webpräsentation hat Vorteile bei der Strukturierung der Inhalte und der späteren Pflege, muss jedoch manuell aufgenommen werden. Ersteres ähnelt einem Motion-Design-Studio, Letzteres einem Projekt für Präsentationsfolien.
Q3: Welche Versionen haben die beiden Skills aktuell und welche Agenten unterstützen sie?
Laut dem Repository garden-skills liegt motion-showreel in Version v0.1.0 und web-video-presentation in Version v1.2.2 vor. Beide folgen der SKILL.md-Spezifikation und wurden laut offizieller Angabe mit Claude Code, Claude.ai, Cursor, Codex CLI, Gemini CLI und OpenCode getestet.
Q4: Für welche Anwendungsfälle eignet sich dieser Ansatz am besten?
– **Produktmarketing**: kurze Teaser für Produktvorstellungen und Animationen zu den wichtigsten Funktionen.
– **Markenauftritt**: Logoanimationen, Intros und Outros sowie animierte Typografie-Poster.
– **Wissensvermittlung**: technische Artikel als Erklärvideos, Kurskapitel und interne Schulungen.
– **Inhalte für Entwickler**: Architekturerklärungen, Tool-Demos und Vorstellungen von Open-Source-Projekten.
Q5: Wie konfiguriere ich eine Modellschnittstelle für einen Programmier-Agenten?
Registriere dich bei APIYI unter apiyi.com und erstelle einen API-Schlüssel. Trage anschließend den Schlüssel und die base_url im Agenten oder Skript ein. APIYI unterstützt sowohl das OpenAI- als auch das Anthropic-Schnittstellenformat. Die konkreten Adressen und Parameter findest du im Dokumentationszentrum unter docs.apiyi.com, die Modellpreise unter docs.apiyi.com/models.
Q6: Kann der Agent den Sprechertext selbst schreiben?
Die beiden Skills verfolgen unterschiedliche Ansätze. Die TTS-Funktion von motion-showreel liest nur Skripte vor, die Nutzer bereitstellen. So wird verhindert, dass der Agent eigenmächtig Texte verfasst. web-video-presentation formuliert dagegen den ursprünglichen Artikel zu einem Sprechertext um, den du aber am Skript-Prüfpunkt bestätigen musst. Du kannst mit kimi-k3.1-pro oder claude-sonnet-5-5 auf APIYI zunächst einen Entwurf erstellen und ihn anschließend selbst prüfen und freigeben.
Q7: Welche Einschränkungen sind bei den beiden Ansätzen bekannt?
Das bildweise Rendering per Code hängt davon ab, dass ein Browser jedes einzelne Bild aufnimmt. Bei längeren Videos dauert das Rendering entsprechend lange; komplexe 3D- oder Partikeleffekte verlängern die Renderzeit deutlich. Bei der Bildschirmaufnahme einer Webpräsentation hängt die endgültige Qualität vom Aufnahmeprogramm und der Person ab, die es bedient. Eine vollständige Automatisierung ist daher schwierig. Einige integrierte TTS-Dienste müssen zudem separat freigeschaltet werden. Wenn ein Modell auf der Preisseite von APIYI nicht aufgeführt ist, steht es dort derzeit noch nicht zur Verfügung.
Q8: Lassen sich die beiden Ansätze kombinieren?
Ja, das ist gut möglich und sogar recht üblich. Zum Beispiel lassen sich ein zehnsekündiges Intro und Kapitelübergänge per Code Bild für Bild rendern, während der Hauptteil als Bildschirmaufnahme einer Web-Präsentation entsteht. Anschließend werden beide Teile in einem Schnittprogramm zusammengesetzt. Da beide auf Webtechnologien basieren, können sie dieselben Designvorgaben für Farben und Schriften nutzen.
Videos mit Programmier-Agenten: Die wichtigsten Punkte
- Die beiden Ansätze unterscheiden sich grundlegend: Frameweises Rendern erzeugt direkt eine MP4-Datei, eine Web-Präsentation muss manuell aufgezeichnet werden.
- Frameweises Rendern setzt auf Determinismus: Dieselbe
render(t)-Seite erzeugt Vorschau und Masterdatei – mit reproduzierbaren Ergebnissen. - Web-Präsentationen setzen auf Struktur: Ein visueller Schritt entspricht einem Satz im Sprechertext. Das eignet sich für längere Erklärungen.
- Prüfpunkte bestimmen die Qualität: Zwei Prüfpunkte stehen für einen visuellen Schwerpunkt, fünf für einen inhaltlichen.
- Technische Abnahme und Ästhetik getrennt betrachten: Harte Kriterien wie Schwarzbilder, Lautheit und Frame-Anzahl müssen allesamt PASS erfüllen.
- Die Modellwahl beeinflusst die Kosten: Die verwendeten Modelle lassen sich über APIYI einheitlich anbinden. Die aktuellen Preise stehen auf docs.apiyi.com/models.
Zusammenfassung
Wenn ein Coding-Agent Videos erstellen soll, geht es weniger um die Frage, ob das möglich ist, sondern darum, den richtigen Weg zu wählen:
- Bildweises Rendering per Code: Geeignet für Kurzfilme, Intros und visuelle Werke mit starkem Rhythmus. Bild und Ton sind synchron, das fertige Video wird direkt ausgegeben.
- Bildschirmaufnahme einer Webpräsentation: Geeignet für Erklärvideos, Kurse und die Umwandlung von Artikeln in Videos. Die Struktur ist übersichtlich und leicht zu pflegen.
- Entscheidung in 5 Schritten: Entscheidend sind das inhaltliche Ziel, die Länge, die Synchronisierung von Bild und Ton, die Akzeptanz einer Bildschirmaufnahme und die Häufigkeit von Änderungen.
Am besten testen Sie den gesamten Ablauf zunächst mit einem 15-sekündigen Beispielvideo, bevor Sie ihn auf ein richtiges Projekt ausweiten. Für die zugrunde liegenden Modelle empfiehlt sich APIYI unter apiyi.com: Dort lassen sich Claude, Kimi, DeepSeek und Modelle der GPT-Image-Serie über eine einheitliche Schnittstelle aufrufen. Diese ist mit den Formaten von OpenAI und Anthropic kompatibel. Für die Preise gelten die aktuellen Angaben auf der Preisseite.
📚 Quellen
- GitHub – garden-skills: Repository für die Skills motion-showreel und web-video-presentation
- Link:
github.com/ConardLi/garden-skills -
Beschreibung: Enthält die README-Dateien, SKILL.md und Installationsanleitungen für beide Skills
-
Agent-Skills-Spezifikation: Beschreibung des SKILL.md-Formats
- Link:
agentskills.io -
Beschreibung: Erklärt die Struktur der Skill-Verzeichnisse und wie Agenten Skills bei Bedarf laden
-
APIYI-Dokumentationszentrum: Anleitung zur Schnittstellenanbindung
- Link:
docs.apiyi.com -
Beschreibung: Parameter für die Anbindung über OpenAI- und Anthropic-kompatible Formate
-
APIYI-Modellpreisseite: Aktuelle Abrechnung für die einzelnen Modelle
- Link:
docs.apiyi.com/models - Beschreibung: Für alle Preisangaben in diesem Artikel gelten die Angaben auf dieser Seite
Autor: APIYI-Technikteam
Technischer Austausch: Kontaktieren Sie uns gerne über die Startseite von APIYI. Weitere Informationen zur Anbindung finden Sie im Dokumentationszentrum unter docs.apiyi.com.
