Zur Nutzungsanleitung springen
Motion Systemvon Owl-Listener

Motion System Skill.

Animationsentscheidungen über Komponenten und Teams hinweg wiederverwendbar machen.

  • Designsysteme
  • Motion
Quellenprüfung · Motion SystemSKILL.md
Aufgabe Designsysteme Ergebnis • Benannte Duration- und Easing-Tokens mit vorgesehenen Einsatzzwecken. • Choreografie-Regeln für Gruppen, Staffelung und Richtung. • Reduced-Motion-Overrides und Dokumentationsanforderungen. Vor dem Start Erfordert eine Token-Implementierung oder ein plattformspezifisches Äquivalent; die Quelle schreibt kein Animations-Framework vor.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Ein gemeinsames Bewegungsvokabular schaffen

Definiere gemeinsame Motion-Tokens, Koordinationsregeln und Reduced-Motion-Alternativen für das gesamte Produkt.

Workflow auf Basis der QuelleKein Ausführungs-Benchmark

Die Arbeitsweise

Motion System behandelt Bewegung als eigene Design-Token-Ebene statt als Reihe unzusammenhängender Komponentenentscheidungen. Es definiert eine kleine Dauerskala, semantische Easing-Rollen und Koordinationsregeln für Elemente, die erscheinen, verschwinden oder sich gemeinsam bewegen.

Die Quelle verankert den Umgang mit reduzierter Bewegung zudem auf Systemebene. Das ist ein bedeutsamer Unterschied zur nachträglichen Anpassung einer einzelnen Animation: Token-Overrides und Ersatzverhalten können im gesamten Produkt einheitlich gelten. Die Beispielzeiten sind ein Ausgangsvokabular, kein Beleg dafür, dass jede Oberfläche dieselben Werte verwenden sollte.

Erwartete Ergebnisse

  • Benannte Duration- und Easing-Tokens mit vorgesehenen Einsatzzwecken.
  • Choreografie-Regeln für Gruppen, Staffelung und Richtung.
  • Reduced-Motion-Overrides und Dokumentationsanforderungen.
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Bewegungsrollen erfassen

    Ermittle unmittelbare Zustandswechsel, Einblendungen, Ausblendungen und größere Übergänge. Lege nur so viele Tokens an, wie für unterschiedliche Bedürfnisse nötig sind.

  2. 02
    Koordination definieren

    Lege gemeinsame Zeitvorgaben innerhalb semantischer Gruppen, Grenzen für die Staffelung und einheitliche Bewegungsrichtungen fest.

  3. 03
    Barrierefreie Variante bauen

    Dokumentiere, welche Bewegung entfällt, was sie ersetzt und wie wesentliche Zustandsinformationen sichtbar bleiben.

02 Einsatzbereiche

Wann es sich eignet

Erfordert eine Token-Implementierung oder ein plattformspezifisches Äquivalent; die Quelle schreibt kein Animations-Framework vor.

Gut geeignet

  • Uneinheitliche KomponentenbewegungNützlich, wenn verschiedene Teams unvereinbare Animationszeiten angesammelt haben.
  • Erweiterung des Token-SystemsFügt Bewegung derselben gemeinsamen Pipeline hinzu, die bereits Farbe und Abstände verwaltet.

Grenzen prüfen

  • Keine fertige AnimationEinzelne Interaktionen müssen weiterhin gestaltet und umgesetzt werden.
  • Beispiele müssen getestet werdenDie Dauern und Kurven der Quelle müssen am Produkt, an Geräten und an Barrierefreiheitsanforderungen validiert werden.

Diese Eingaben mitbringen

  • KomponenteninventarListe die vorhandenen Animationen auf und was jede davon vermittelt.
  • BewegungsprinzipienBeschreibe den gewünschten Produktcharakter und Interaktionen, die nicht animiert werden sollen.
  • Plattform und BarrierefreiheitNenne die Zielplattformen der Umsetzung und die Erwartungen an reduzierte Bewegung.

03 Wichtige Entscheidungen

Entscheidende Weichenstellungen

  1. Kleines Vokabular

    Weniger semantische Optionen machen eine unnötige Ausnahme leichter erkennbar als ein großer Katalog willkürlicher Zeiten.

  2. Globale Barrierefreiheit

    Overrides auf Systemebene verringern das Risiko, dass eine Komponente die Bewegungspräferenz vergisst.

04 Beispielbriefing

Ein fokussiertes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfe die Einrichtung des Skills, bevor du es verwendest.

Einrichtung prüfen

Nutze den dokumentierten Installationsweg des Repositorys und behalte alle referenzierten Begleitdateien. Dieser Eintrag beschreibt eine fokussierte Designmethode, keine ausführbare Anwendung.

Quelldatei im Upstream
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md

Erfordert eine Token-Implementierung oder ein plattformspezifisches Äquivalent; die Quelle schreibt kein Animations-Framework vor.

Mit einem Ergebnis beginnen

Passe Umfang, Quellmaterial und Rahmenbedingungen dieses Briefings an, bevor du den Skill ausführst.

Beispiel-Briefing
Nutze motion-system, um unsere Tooltips, Drawer, Dialoge und Seitenübergänge zu vereinheitlichen. Schlage eine kleine Token-Skala und Easing-Rollen für Ein- und Ausblendung vor, definiere Grenzen für die Staffelung und beschreibe Reduced-Motion-Verhalten, das Statusinformationen erhält. Berücksichtige Fälle, die nicht animiert werden sollen, und kennzeichne Zeiten als Vorschläge für Gerätetests.

Ergebnis prüfen

Vergleiche das tatsächliche Ergebnis mit diesen beobachtbaren Kriterien.

  • Jedes Token hat eine eigene Rolle und einen konkreten Wert.
  • Gruppierte Elemente folgen denselben dokumentierten Choreografie-Regeln.
  • Das Verhalten bei reduzierter Bewegung ist auf Systemebene festgelegt.

OpenDesign bietet einen lokalen Designarbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass externe Tools, Zugangsdaten und Softwareabhä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
Owl-Listener
Lizenz
MIT
Geprüfter Stand
2026-10-07 · 9a6930cf84a8
Redaktionelle Quellenzusammenfassung
Definiere gemeinsame Motion-Tokens, Koordinationsregeln und Reduced-Motion-Alternativen für das gesamte Produkt.

Eigene Zusammenfassung von OpenDesign auf Basis 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

Wie viele Duration-Tokens sollte es geben?

Die Quelle empfiehlt einen kleinen Satz, typischerweise vier bis sechs, und neue Werte nur für wirklich unterschiedliche Fälle.

Entfernt reduzierte Bewegung jedes Feedback?

Nein. Wesentliche Zustandsinformationen sollen erhalten bleiben; Bewegung wird deaktiviert oder gegebenenfalls ersetzt.

Auf welche Implementierung zielt es ab?

Es beschreibt CSS Custom Properties oder gleichwertige Plattform-Tokens sowie die Aufnahme in eine bestehende Token-Export-Pipeline.

OpenDesign

Schaffe Raum für die nächste Design-Iteration.

Halte Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfe die Einrichtung des Skills, bevor du ihn in deinen Workflow aufnimmst.

Quelldatei im Upstream
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md