Zur Nutzungsanleitung springen
text-to-lottievon diffusionstudio

Text to Lottie Skill.

Lottie-Animationen an einem echten Player erstellen und reparieren, nicht nur als gültige JSON-Datei. Text to Lottie zielt auf die lokale Skia-Skottie-Vorschau des Repositorys und macht wichtige Werte über editierbare Regler zugänglich.

  • Lottie
  • Motion
  • Skottie
Quellprüfung · text-to-lottieSKILL.md
Aufgabe Lottie-Animations-JSON erstellen und bearbeiten. Ergebnisse • Die lottie.json einer Szene • Optionale editierbare Regler • Frame-Prüfung im lokalen Player Vor dem Start Das Upstream-Player-Projekt verwenden und benötigte Schriften oder Grafiken für die Szene bereitstellen.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-11-02 · keine gerenderte Demonstration

01 Funktionen

Eine Animation erstellen, die der Player tatsächlich rendern kann

Die Quelle verbindet die Animationserstellung mit dem offiziellen lokalen Skottie-Player. JSON-Validierung ist eine Prüfung, aber kein Beweis für eine visuell korrekte Szene.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Der Skill schreibt die lottie.json einer Szene und bei Bedarf eine controls.json im Player-Projekt. Er wählt ein primäres Vorgehen für die gewünschte Aufgabe und liest danach nur die zusätzlichen Referenzen, die für Schriften, SVG-Konvertierung, Animationsstruktur oder Regler nötig sind.

Die Bearbeitung beginnt mit der Bestimmung der Zielszene. Ein ausdrücklich angegebener Pfad hat Vorrang vor einer Browserroute oder gefundenem Kontext. Vor Änderungen an einer bestehenden Datei muss der Agent sie erneut lesen, weil im Player geänderte Werte in dieselbe JSON-Datei zurückgeschrieben werden können.

Erwartete Ergebnisse

  • Eine Lottie-JSON-Szene im gewählten Projekt- und Szenenverzeichnis
  • Optionale Regler für beschriftete, veränderbare Animationswerte
  • Eine Prüfung repräsentativer Frames im lokalen Skottie-Player
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Szene bestimmen

    Vor dem Schreiben ein konkretes Projekt und eine Szene wählen. Die Suche dient dazu, Kontext zu finden, nicht als Erlaubnis zum Überschreiben einer fremden Animation.

  2. 02
    Vorgehen und Assets wählen

    Die Animationsaufgabe bestimmen und SVG- oder Schriftdateien bereitstellen. Für Logos, Ladeanimationen und Overlays sieht die Quelle standardmäßig einen transparenten Hintergrund vor.

  3. 03
    Veränderbare Werte zugänglich machen

    Slots und Regler mit sinnvollen Beschriftungen und Wertebereichen für wichtige editierbare Werte verwenden. Ein vollflächiger Hintergrund braucht eine editierbare Hintergrundfarbe.

  4. 04
    Tatsächliche Frames prüfen

    JSON validieren, den lokalen Player öffnen und den ersten, mittleren und letzten sichtbaren Frame prüfen. Auf fehlende Assets, Beschnitt, Ebenenreihenfolge und Timing achten.

02 Einsatzbereiche

Wann einsetzen?

Dieser Workflow hängt vom lokalen Player-Projekt des Upstreams ab. Schriften und importierte Grafiken müssen dem Projekt zur Verfügung stehen; andere Lottie-Laufzeitumgebungen können sich anders verhalten.

Gut geeignet

  • Editierbare MarkenanimationGeeignet für eine Logo-Einblendung oder Ladeanimation, deren Farben und Timing nach der ersten Fassung geändert werden.
  • Bestehende Szenen reparierenNützlich, wenn eine JSON-Animation lädt, in Skottie aber Schriften fehlen, Grafiken beschnitten sind oder die Ebenenreihenfolge falsch ist.

Zu prüfende Grenzen

  • Keine Garantie für alle PlayerDie Anweisungen gelten für den offiziellen lokalen Skottie-Player. Eine andere Ziellaufzeit gesondert prüfen, bevor identisches Rendering derselben Datei zugesagt wird.
  • Assets sind nicht automatisch enthaltenText braucht nutzbare Schriftdateien und passende Schriftmetadaten. Importierte SVG-Grafiken müssen weiterhin normalisiert und visuell geprüft werden.

Diese Eingaben mitbringen

  • Eine ZielszeneProjekt- und Szenenpfad angeben und erklären, ob eine neue Szene erstellt oder eine bestehende bearbeitet wird.
  • Grafik- und SchriftdateienEin autorisiertes SVG oder Logo sowie benötigte Schriften bereitstellen. Angeben, welche Formen oder Texte editierbar bleiben müssen.
  • Ein AnimationsbriefingDauer, Canvas-Größe, Transparenz, Schleifenverhalten und die später veränderbaren Werte festlegen.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

  1. Eine gültige Datei kann trotzdem leer erscheinen

    Die Quelle verlangt neben JSON-Validierung eine Prüfung im echten Player. Erfolgreiches Parsen erkennt nicht jede fehlende Schrift oder unsichtbare Ebene.

  2. Der letzte sichtbare Frame liegt vor op

    Lotties Out-Punkt ist exklusiv. Die empfohlene Endframe-Prüfung verwendet op minus eins, statt den Out-Punkt als sichtbaren Inhalt zu behandeln.

  3. Regler verändern den Bearbeitungsablauf

    Da Player-Regler Änderungen in die Quelle zurückschreiben können, verhindert erneutes Lesen, dass der Agent aktuelle Nutzeränderungen durch veraltete Werte ersetzt.

04 Beispielbriefing

Ein konkretes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Player-Einrichtung prüfen

Upstream-Quelle und Repository-Einrichtung lesen. Die Referenz unten ist ein Quelllink, kein Installationsbefehl.

Upstream-Quelldatei
https://github.com/diffusionstudio/lottie/blob/3c72912fad543897f90045ed4d355813837927fc/skills/text-to-lottie/SKILL.md

Vor Änderungen an bestehenden Projektdateien eine separate Testszene verwenden.

Eine Animation beschreiben

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing
Verwende text-to-lottie, um eine vier Sekunden lange Schleifenanimation für mein bereitgestelltes SVG-Logo zu erstellen. Lege im angegebenen Testprojekt eine neue Szene namens logo-loop an; überschreibe keine andere Szene. Halte den Hintergrund transparent und bewahre die Proportionen des Logos. Mache die Akzentfarbe als beschrifteten Regler zugänglich. Nutze bewusstes Easing statt gleichförmiger linearer Bewegung. Validiere das JSON, öffne den offiziellen lokalen Skottie-Player und prüfe Frame null, einen mittleren Frame und den letzten sichtbaren Frame. Berichte über fehlende Assets, Beschnitt oder Unstetigkeiten der Schleife und unterscheide ausgeführte Prüfungen von noch ausstehenden.

Gerenderte Frames prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

  • Die korrekte neue Szene wird verwendet und vorhandene Änderungen bleiben erhalten.
  • Das Logo ist in den geprüften Frames ohne Beschnitt sichtbar, der Hintergrund ist transparent.
  • Der Akzentregler ändert die vorgesehenen Werte; die Schleife wird im tatsächlichen Player geprüft.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber
diffusionstudio
Skill-Datei
SKILL.md
Lizenz
MIT
Geprüfter Stand
2026-11-02 · 3c72912fad54
Redaktionelle Quellenzusammenfassung
Quellenbasierte redaktionelle Prüfung des Text-to-Lottie-Workflows: Szenenauswahl, Lottie-Erstellung, editierbare Regler und Verifikation im lokalen Skottie-Player. Für diesen Eintrag wurde keine Beispielanimation ausgeführt.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Garantiert gültiges Lottie JSON eine korrekte Darstellung?

Nein. Die Quelle verlangt die Prüfung tatsächlicher Frames im lokalen Player. Schriftladen, Ebenenreihenfolge und Clipping können weiterhin ein falsches Ergebnis erzeugen.

Kann ich die Datei in jedem Lottie-Player verwenden?

Die geprüften Anweisungen richten sich an den lokalen Skottie-Player. Teste die exportierte Animation in der vorgesehenen Laufzeit, bevor du gleichwertige Unterstützung annimmst.

Kann die Animation editierbare Farben haben?

Ja. Die Quelle weist den Agenten an, für wichtige veränderbare Werte Slots und Regler mit Beschriftungen und Wertebereichen zu verwenden. Die konkreten Regler hängen von der Szene ab.

OpenDesign

Animation und Briefing zusammenhalten.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

Upstream-Quelldatei
https://github.com/diffusionstudio/lottie/blob/3c72912fad543897f90045ed4d355813837927fc/skills/text-to-lottie/SKILL.md