motion-designvon LottieFiles

Motion Design Skill.

Ein Skill für Claude Code und Codex für Motion und Video: wendet Motion-Design-Prinzipien an – Timing, Easing, Choreografie und Grundlagen der Animation.

Motion & Video

OpenDesign herunterladen Anleitung ansehen

LottieFiles/motion-design-skill · skills/motion-design/SKILL.mdSKILL.md

--- name: motion-design description: Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system. --- ## When to Apply ## Quick Reference: 8-Step Checklist ## Three Pillars (CRITICAL) ## Motion Personality ## Property Selection ## Duration Table

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 12.489 Zeichen insgesamt

01 Was es tut

Was der motion-design Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Eine rein prinzipienbasierte Referenz für Motion Design für Designer und Entwickler, die Interfaces animieren. Sie geht von drei Grundpfeilern aus — emotionaler Intention, visueller Erzählung und handwerklicher Bewegungsqualität — und verfeinert dann jede Entscheidung anhand einer von vier Motion-Persönlichkeiten (Playful, Premium, Corporate, Energetic), jede mit festen Dauerbereichen, Easing-Kurven und Overshoot-Prozentsätzen.

Durchdachte Rezepte behandeln Button-Press, Card-Entrance, Erfolgs- und Fehler-Shake, unterstützt durch Dauertabellen je Elementtyp, richtungsabhängige Easing-Regeln, Choreografie- und Stagger-Budgets, eine Emotion-zu-Motion-Zuordnung sowie Gewichtsklassen. Die Vorgaben sind als Zahlen, Standardwerte und Einschränkungen formuliert, die auf jedes bereits vorhandene Animationssystem anwendbar sind.

Was er erzeugt

Drei zu definierende Brand-Motion-Konstanten: signatures Easing, Dauer-Palette und Entrance-Muster
Fertige cubic-bezier-Spezifikationen, entlehnt aus Plattformstandards
Mehrstufige Muster-Rezepte mit Timings je Schritt, etwa der Button-Press-Follow-Through

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Klären Sie zuerst die drei Grundpfeiler
Bestimmen Sie die emotionale Intention, die visuelle Mikro-Story und das Handwerk, das die Bewegung glaubwürdig macht, bevor Sie Timing oder Kurve festlegen.
02
Legen Sie einen Persönlichkeitsarchetyp fest
Wählen Sie einen einzigen Archetyp — Playful, Premium, Corporate oder Energetic — und halten Sie ihn während des gesamten Projekts bei, da jeder seinen eigenen Dauerbereich, seine eigene Easing-Kurve und seinen eigenen Overshoot mitbringt.
03
Verwenden Sie so wenige Properties wie möglich, die funktionieren
Die Property-Tabellen ordnen jedem Effektziel eine primäre Property und optionale sekundäre zu; eine Property wirkt direkt, zwei wirken poliert, drei oder mehr riskieren, den Betrachter zu überfordern.
04
Skalieren Sie die Dauer nach Distanz
Beginnen Sie mit der Dauer für den Elementtyp und dehnen Sie sie dann nach Wegstrecke: 100px ist die Basis, 200px werden zu 1,3x, 400px werden zu 1,6x.
05
Easing nach Richtung
Entrances verzögern mit einer Ease-out-Kurvenfamilie, sodass die Bewegung schnell beginnt und sanft landet.

02 Finden Sie Ihren Favoriten

Wann Sie den motion-design Skill verwenden

Verwenden Sie den motion-design Skill in Claude Code oder Codex, wenn die Aufgabe Motion und Video dieser Art ist. Eignung und Grenzen unten sind der eigenen Datei des Skills entnommen.

Gut geeignet

UI-Animationen wie Buttons, Karten, Modals und Seitenübergänge
Mikro-Interaktionen und Feedback-Animationen
Lade-, Erfolgs- und Fehlerzustände
Scroll-getriggerte oder fortschrittsbasierte Animationen planen

Grenzen kennen

Bei Szenen mit drei oder mehr Elementen darf sich zu keinem Zeitpunkt mehr als ein Drittel davon aktiv in Bewegung befinden.
Bouncy Fehler-Feedback: Fehlerzustände erhalten kein Overshoot, da sich Fehler bestimmt anfühlen sollen.

Was Sie bereitstellen sollten

Das emotionale ZielLegen Sie zuerst fest, was der Betrachter empfinden soll: Freude, Ruhe, Dringlichkeit oder Eleganz.
Ein Motion-Persönlichkeits-ArchetypBenennen Sie die Persönlichkeit, damit Timing, Easing und Overshoot stimmig bleiben: Playful, Premium, Corporate oder Energetic.
Die primäre EigenschaftLegen Sie fest, was sich tatsächlich bewegt – Position, Skalierung, Rotation oder Opazität –, bevor Sie eine Animation schreiben.

03 Innerhalb des Skills

Regeln, die die motion-design Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Kein lineares Easing für räumliche Bewegung
Räumliche Bewegung muss Easing-Kurven verwenden; linear bleibt Spinnern und Fortschrittsbalken vorbehalten.
Niemals nur Opazität für Zustandswechsel
Wichtige Zustandswechsel müssen Opazität mit Position oder Skalierung kombinieren, statt nur an Ort und Stelle einzublenden.
Alle drei Motion-Ebenen beibehalten
Jede Animation trägt eine primäre Aktion, sekundäre Feinheiten und ambientes Hintergrundleben; einer flachen Animation fehlt eine Ebene.
Standardmäßig Corporate für UI
Wenn keine Persönlichkeit angegeben ist, verwenden Sie Corporate für UI-Arbeiten und Playful für Illustrationen.
Eingänge länger als Ausgänge gestalten
Eingänge dauern 30–50 % länger als Ausgänge, da Nutzer sich stärker für das interessieren, was erscheint.
Niemals ein Drittel des Bildschirms unangefochten überqueren
Keine Bewegung überschreitet mehr als 1/3 des Bildschirms ohne einen zwischenzeitlichen Keyframe-Wechsel.
Gesamt-Stagger begrenzen
Unabhängig vom verwendeten Stagger-Muster muss das gesamte Verzögerungsbudget unter 500 ms bleiben.
Disney-Prinzipien anwenden
Disney-Animationsprinzipien werden erwartet, insbesondere Anticipation und Follow-through.

04 In Betrieb nehmen

motion-design in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

motion-design zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/LottieFiles/motion-design-skill --skill motion-design

Allgemeine skills-CLI-Form für skills/motion-design/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Motion- und Video-Aufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Add a card entrance to [the pricing section] of my [React dashboard]. The cards should feel Premium: start 20px below target at opacity 0, take a slight curve in the path, and let the shadow arrive about 50ms after each card. Stagger the four cards at 60ms with the total under 400ms, and dim the surrounding content to 80%.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Arbeiten Sie die vollständige Qualitätscheckliste für die Bewertungskriterien durch.
Bestätigen Sie, dass jede Dauer anhand der Dauer-Tabellen zu ihrem Elementtyp passt.
Wirkt das Ergebnis billig oder flach, ergänzen Sie Schattenbewegung und Hintergrundleben als sekundäre und ambiente Ebenen.
Fehlt Persönlichkeit, wenden Sie durchgängig ein Archetyp an, statt überall generisches Easing zu verwenden.
Prüfen Sie Plattform-, Barrierefreiheits- und Performance-Anpassung, bevor Sie ausliefern.

In OpenDesign importieren Sie motion-design über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: LottieFiles
Repository: github.com/LottieFiles/motion-design-skill Branch main
Skill-Datei: skills/motion-design/SKILL.md Inhaltsprüfsumme bei Verifizierung erfasst; Commit f9a8a04
License: MIT Aus LICENSE; SKILL.md gibt „MIT" an.
Repository-Sterne: 1.626 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository LottieFiles/motion-design-skill. Keine Bewertung oder Nutzungszahl für motion-design.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann anwendenAuslöser für die Nutzung des Skills sowie ein Entscheidungsbaum mit vier Fragen zu Timing, Persönlichkeit, Disney-Prinzipien oder Stagger.
Drei Säulen (KRITISCH)Emotionale Absicht, visuelle Erzählung und Bewegungshandwerk, plus die drei Bewegungsebenen, die jede Animation braucht.
BewegungspersönlichkeitVier Archetypen mit Werten für Dauer, Easing und Overshoot, plus drei Marken-Bewegungskonstanten.
EigenschaftsauswahlOrdnet Effektziele primären und sekundären Eigenschaften zu, mit einem Einfachheitsschwellenwert.
Dauer-TabelleDauern pro Elementtyp, Distanzskalierung, Verhältnis von Entrance zu Exit und Timings für interaktives Feedback.
Easing-AuswahlRegeln für richtungsabhängiges Easing, branchenübliche Cubic-Bezier-Standards sowie materialbasierte Dauer- und Overshoot-Skalen.
Gängige MusterSchritt-für-Schritt-Rezepte für Button-Press, Card-Entrance, Erfolgszustand und Fehler-Shake.
Grundlagen der ChoreografieHero-Lead, räumliche Konsistenz, Gegenbewegung, die 1/3-Regeln und Stagger-Delay-Budgets.
Emotion-zu-Bewegung-KarteSieben Emotionen, zugeordnet zu Charakter, Pfad, Easing und Dauer, plus Bedeutungen von Pfad als Sprache.
GewichtsklassifizierungSchwere, mittlere und leichte Elemente mit Hinweisen zu Dauer, Overshoot und Dämpfung.
QualitätsregelnKRITISCHE Punkte, die niemals gebrochen werden dürfen, und HIGH-Empfehlungen zu Dauer, Easing und Konsistenz.
Kurzreferenz für FehlersucheFünf Animations-„Gerüche“ mit wahrscheinlichen Ursachen und Lösungen, von robotisch bis flach.

Die eigene Beschreibung des Skills

„Wendet Motion-Design-Prinzipien an, um emotional ansprechende, technisch fundierte Animationen und Übergänge zu erstellen. Bietet Timing, Easing, Choreografie und Disney-Animationsprinzipien, angepasst für UI. Verwenden Sie diesen Skill beim Erstellen von Animationen, Übergängen, Mikrointeraktionen, Ladezuständen, Seitenübergängen, scroll-ausgelösten Effekten oder jeglicher Motion-Arbeit. Funktioniert mit CSS, Framer Motion, GSAP, Lottie, Spring oder jedem anderen Animationssystem."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 12.489 Zeichen. Vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum motion-design-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Bindet mich das an eine einzige Animationsbibliothek?

Nein. Die Datei besagt, dass CSS, Framer Motion, GSAP, Lottie, Spring oder jedes andere Animationssystem unterstützt werden, sodass die Anleitung als Timing-, Easing- und Choreografie-Entscheidungen kommt und nicht als bibliotheksspezifischer Code.

Wie lange sollte ein Modal-Übergang dauern?

Die Dauer-Tabelle gibt Modals und Dialogen 300–400 ms, verstanden als Fokuswechsel. Im Gegensatz dazu liegen Tooltips und Mikro-Feedback bei 80–120 ms, da sie sich sofort anfühlen müssen.

Sollte ein elastisches Element stärker federn als eine Papier-Karte?

Ja. Die materialbasierte Easing-Tabelle skaliert Dauer und Overshoot nach implizitem Material: Elastic läuft mit einer 0,8x-Dauer-Skalierung und 15–25 % Overshoot, während Paper bei 1,0x mit 3–5 % Overshoot bleibt.

Motion Design

Führen Sie motion-design auf einer echten Motion- und Video-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie motion-design über dessen SKILL.md-Link, fügen Sie den Prompt oben ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen