106.9K+Télécharger
Aller au guide d’utilisation
text-to-lottiepar diffusionstudio

Text to Lottie Skill.

Créez et réparez des animations Lottie dans un vrai lecteur, pas seulement un fichier JSON valide. Text to Lottie cible l’aperçu local Skia Skottie du dépôt et expose les valeurs importantes sous forme de contrôles modifiables.

  • Lottie
  • Animation
  • Skottie
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · text-to-lottieSKILL.md
Tâche Créer et modifier du JSON d’animation Lottie. Résultats • Le lottie.json d’une scène • Des contrôles modifiables optionnels • Un examen image par image dans le lecteur local Avant de commencer Utilisez le projet du lecteur d’origine et fournissez les polices ou illustrations nécessaires.
Résumé éditorial · source examinée le 2026-11-02 · pas une démonstration rendue

01 Fonctionnement

Construire une animation que le lecteur peut réellement afficher

La source relie la création d’animation au lecteur Skottie local officiel. Valider le JSON est un contrôle, pas une preuve de justesse visuelle.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

Le skill écrit le lottie.json d’une scène et, si nécessaire, controls.json dans le projet du lecteur. Il choisit une procédure principale pour la tâche, puis lit seulement les références supplémentaires nécessaires aux polices, à la conversion SVG, à la structure d’animation ou aux contrôles.

L’édition commence par identifier la scène cible. Un chemin fourni explicitement prime sur une route navigateur ou un contexte découvert. Avant de modifier un fichier existant, l’agent doit le relire, car les valeurs modifiées dans le lecteur peuvent être enregistrées dans ce même JSON.

Livrables attendus

  • Une scène JSON Lottie dans le projet et le répertoire de scène choisis
  • Des contrôles optionnels pour les valeurs d’animation ajustables et libellées
  • Un examen d’images représentatives dans le lecteur Skottie local
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Identifier la scène

    Choisissez explicitement projet et scène avant d’écrire. Utilisez la découverte pour trouver le contexte, pas comme autorisation d’écraser une autre animation.

  2. 02
    Choisir la procédure et les ressources

    Identifiez la tâche et fournissez les SVG ou polices nécessaires. Pour logos, chargements et superpositions, la source utilise par défaut un fond transparent.

  3. 03
    Exposer les valeurs à modifier

    Utilisez slots et contrôles pour les valeurs éditables importantes, avec libellés et plages utiles. Un fond plein cadre nécessite une couleur de fond modifiable.

  4. 04
    Inspecter les images réelles

    Validez le JSON, ouvrez le lecteur local et inspectez première, intermédiaire et dernière image visible. Vérifiez ressources manquantes, recadrage, ordre des couches et timing.

02 Cas d’usage

Quand l’utiliser

Ce processus dépend du projet de lecteur local d’origine. Polices et illustrations importées doivent lui être accessibles ; d’autres environnements Lottie peuvent se comporter autrement.

Un bon choix

  • Animation de marque modifiableAdapté à une apparition de logo ou un chargement dont couleurs et timing évolueront après la première version.
  • Réparation d’une scène existanteUtile lorsqu’une animation JSON se charge mais présente polices absentes, illustrations recadrées ou mauvais ordre des couches dans Skottie.

Limites à vérifier

  • Pas de garantie pour tous les lecteursLes instructions ciblent le lecteur Skottie local officiel. Inspectez tout autre environnement cible avant de promettre un rendu identique.
  • Les ressources ne sont pas incluses automatiquementLe texte nécessite des fichiers de police utilisables et des métadonnées correspondantes. Les SVG importés demandent encore normalisation et inspection visuelle.

Éléments à fournir

  • Scène cibleDonnez les chemins du projet et de la scène, et précisez création ou modification.
  • Illustrations et policesFournissez un SVG ou logo autorisé et les polices requises. Précisez quelles formes ou quels textes doivent rester modifiables.
  • Brief d’animationPrécisez durée, dimensions du canvas, transparence, boucle et valeurs à ajuster plus tard.

03 Décisions importantes

Les décisions importantes

  1. Un fichier valide peut produire une scène vide

    La source exige une inspection réelle en plus de la validation JSON. Un parsing réussi ne détecte pas toutes les polices manquantes ou couches invisibles.

  2. La dernière image visible précède op

    Le point de sortie Lottie est exclusif. Le contrôle final suggéré utilise op moins un au lieu de traiter le point de sortie comme visible.

  3. Les contrôles changent le processus d’édition

    Le lecteur pouvant réécrire les sources, relire le fichier évite de remplacer les dernières modifications de l’utilisateur par des valeurs périmées.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examiner la configuration du lecteur

Lisez la source et la configuration du dépôt d’origine. La référence ci-dessous est un lien source, pas une commande d’installation.

Fichier source amont
https://github.com/diffusionstudio/lottie/blob/3c72912fad543897f90045ed4d355813837927fc/skills/text-to-lottie/SKILL.md

Utilisez une scène de test distincte avant de modifier les fichiers existants.

Décrire une animation

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise text-to-lottie pour créer une boucle de quatre secondes avec mon logo SVG. Crée une nouvelle scène logo-loop dans le projet de test indiqué, sans écraser une autre scène. Garde un fond transparent et les proportions du logo. Expose la couleur d’accent dans un contrôle libellé. Utilise une courbe de mouvement délibérée plutôt qu’un déplacement linéaire uniforme. Valide le JSON, ouvre le lecteur Skottie local officiel et inspecte l’image zéro, une image intermédiaire et la dernière visible. Signale ressources manquantes, recadrages ou discontinuités de boucle, en distinguant les contrôles effectués de ceux restant à examiner.

Examiner les images rendues

Comparez le résultat réel à ces critères observables.

  • La bonne nouvelle scène est utilisée et les modifications existantes restent intactes.
  • Le logo est visible sans recadrage aux images examinées, sur fond transparent.
  • Le contrôle d’accent modifie les valeurs prévues et la boucle est vérifiée dans le vrai lecteur.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
diffusionstudio
Dépôt
diffusionstudio/lottie
Fichier du skill
SKILL.md
Licence
MIT
Version examinée
2026-11-02 · 3c72912fad54
Résumé éditorial de la source
Examen éditorial fondé sur la source du processus Text to Lottie : ciblage de scène, création Lottie, contrôles modifiables et vérification dans Skottie local. Aucune animation d’exemple n’a été exécutée pour cette fiche.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Un JSON Lottie valide garantit-il un rendu correct ?

Non. La source demande d’inspecter les images réelles dans le lecteur local. Chargement des polices, ordre des couches et découpe peuvent encore produire un résultat incorrect.

Puis-je utiliser le fichier dans tout lecteur Lottie ?

Les instructions examinées ciblent Skottie local. Testez l’animation exportée dans votre environnement avant de supposer un support équivalent.

L’animation peut-elle avoir des couleurs modifiables ?

Oui. La source demande des slots et contrôles pour les valeurs ajustables importantes, avec libellés et plages. Les contrôles exacts dépendent de la scène.

OpenDesign

Gardez l’animation et son brief ensemble.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/diffusionstudio/lottie/blob/3c72912fad543897f90045ed4d355813837927fc/skills/text-to-lottie/SKILL.md