106.9K+Download
Zur Nutzungsanleitung springen
Color Motionvon iart-ai

Color Motion Skill.

Gestalten Sie bewegte Paletten, wahrnehmungsbasierte Farbübergänge und konsistente Exporte.

  • Farbsysteme
  • Motion-Konzept
OpenDesign herunterladenNutzungsanleitung ansehen
Quellprüfung · color-motionSKILL.md
Aufgabe Gestalten Sie bewegte Paletten, wahrnehmungsbasierte Farbübergänge und konsistente Exporte. Ergebnisse Eine Palette mit expliziten Farbwerten und Rollenzuweisungen. Vor dem Start Die Wiedergabe- und Exportempfehlungen der Quelle müssen weiterhin in der installierten Software und im tatsächlichen Zielbrowser geprüft werden.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-11-02 · kein generiertes Beispiel

01 Funktionen

Gestalten Sie bewegte Paletten, wahrnehmungsbasierte Farbübergänge und konsistente Exporte

Erkunden Sie OKLCH- und Lab-Interpolation, animierte Verläufe, Grading-Reihenfolgen und Prüfungen für Farbunterschiede zwischen Vorschau und Export.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

color-motion behandelt Farbentscheidungen in bewegten Arbeiten: Palettenaufbau, Verlaufsübergänge, stimmungsbezogenes Grading und konsistente Renderings. Der Skill schlägt eine zurückhaltende Palette mit expliziten Werten vor und nutzt wahrnehmungsbezogene Farbräume wie OKLCH oder Lab zur Interpolation.

Für Webarbeiten beschreibt die Quelle eine eigenständige HTML-Datei mit einer einzigen Animationssteuerung und der Prüfung eingefrorener Frames. Für Videos verweist sie auf die Diagnose des Farbmanagements. Ein ausgewaschener Export sollte zunächst anhand von Arbeitsfarbraum, eingebetteten Tags und Wiedergabeinterpretation untersucht werden, bevor die Gestaltung neu eingefärbt wird.

Erwartete Ergebnisse

  • Eine Palette mit expliziten Farbwerten und Rollenzuweisungen.
  • Verlaufs- oder Übergangscode in einem im Browser sichtbaren Beispiel.
  • Eine Grading- oder Farbmanagement-Checkliste für den gewählten Video-Workflow.
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Farbrollen festlegen

    Wählen Sie eine Primärfarbe, einen Akzent und neutrale Farben passend zum Briefing. Trennen Sie Hierarchie- und Kontrastanforderungen von dekorativen Variationen.

  2. 02
    Den Übergangspfad gestalten

    Entwerfen Sie die Interpolation in einem wahrnehmungsbezogenen Farbraum und wählen Sie eine Animationssteuerung. Prüfen Sie neben beiden Endfarben auch den Mittelpunkt.

  3. 03
    Das ausgelieferte Erscheinungsbild prüfen

    Frieren Sie repräsentative Webframes ein oder vergleichen Sie Tags und Erscheinungsbild des gerenderten Videos in der Zielwiedergabe. Untersuchen Sie Banding und Helligkeitsverschiebungen vor der Auslieferung.

02 Einsatzbereiche

Wann einsetzen?

Die Wiedergabe- und Exportempfehlungen der Quelle müssen weiterhin in der installierten Software und im tatsächlichen Zielbrowser geprüft werden.

Gut geeignet

  • Ein Verlauf wird in der Mitte trübDer Skill betrachtet den Weg zwischen Farben, nicht nur die Farbfelder an den Endpunkten.
  • Ein Export unterscheidet sich von der VorschauNutzen Sie die Diagnose, um die Farbpipeline und Annahmen des Players zu untersuchen.

Zu prüfende Grenzen

  • Farbverhalten ist umgebungsabhängigDie Wiedergabe- und Exportempfehlungen der Quelle müssen weiterhin in der installierten Software und im tatsächlichen Zielbrowser geprüft werden.
  • Eine Palette belegt keine BarrierefreiheitText und Bedienelemente müssen in ihren gerenderten Zuständen geprüft werden, auch auf animierten Hintergründen.

Diese Eingaben mitbringen

  • MarkenfarbenStellen Sie freigegebene Werte und Palettenvorgaben bereit.
  • AnimationszielBeschreiben Sie Verlauf, Zustandswechsel oder Video-Grading samt Dauer.
  • AuslieferungsumgebungNennen Sie Browser oder Videoplayer, Exporteinstellungen und bei einer Fehlersuche den beobachteten Unterschied.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

  1. Explizite Interpolation

    Ein benannter Farbraum macht auch die Farbe in der Mitte zu einer bewussten Entscheidung.

  2. Prüfbare Bewegung

    Aufnahmen von Anfang, Mitte und Ende zeigen Banding oder unlesbare Kombinationen.

  3. Getrennte Diagnose

    Tag- und Wiedergabeprüfungen helfen, ein Problem der Renderpipeline von einer Designentscheidung zu unterscheiden.

04 Beispielbriefing

Ein konkretes Briefing ausprobieren

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

Quelle und Einrichtung prüfen

Stellen Sie freigegebene Werte und Palettenvorgaben bereit.

Upstream-Quelldatei
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/color-motion/SKILL.md

Der folgende Verweis öffnet die Originalanleitung. Prüfe vor der Nutzung die Einrichtung des Repositorys; dies ist kein Installationsbefehl.

Mit einem Ergebnis beginnen

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

Beispiel-Briefing
Verwende color-motion, um aus unseren bereitgestellten Markenfarben Marineblau und Bernstein einen zurückhaltenden animierten Hintergrund zu erstellen. Liefere ein eigenständiges HTML-Beispiel mit lesbarem Text in neutraler Farbe und einem langsamen Verlaufszyklus. Definiere die Palette in hex und OKLCH, prüfe den Übergangsmittelpunkt auf stumpfe oder trübe Farben und füge einen statischen Zustand für reduzierte Bewegung hinzu. Erfasse nach jeder Anpassung dieselben Zeitpunkte am Anfang, in der Mitte und am Ende. Füge keine zweite Animationssteuerung hinzu. Weicht das Browserverhalten von der vorgesehenen Interpolation ab, beschreibe die Einschränkung und halte den Text in jedem geprüften Zustand lesbar.

Ergebnis prüfen

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

  • Prüfen Sie End- und Mittelfarben, Banding und Textkontrast.
  • Prüfen Sie, dass eine Uhr die Animation steuert und eingefrorene Frames reproduzierbar sind.
  • Testen Sie die statische Darstellung bei reduzierter Bewegung und die tatsächliche Auslieferungsumgebung.

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.

OpenDesign herunterladenSchnellstart lesen

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
iart-ai
Repository
iart-ai/motion-design-skills
Skill-Datei
SKILL.md
Lizenz
MIT
Geprüfter Stand
2026-11-02 · 3c129f769d90
Redaktionelle Quellenzusammenfassung
Gestalten Sie bewegte Paletten, wahrnehmungsbasierte Farbübergänge und konsistente Exporte.

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

Warum ist der Mittelpunkt wichtig?

Zwei attraktive Endfarben können einen unerwünschten stumpfen Bereich durchlaufen. Der Skill macht Interpolationsfarbraum und Zwischenframes zum Teil des Designs.

Gilt das nur für Webverläufe?

Nein. Die Quelle behandelt auch Grading-Reihenfolge und Farbmanagement-Diagnose für Videos mit eigenen Referenzen.

Sollte ich einen ausgewaschenen Export sofort neu einfärben?

Die Quelle empfiehlt zuerst Arbeitsfarbraum, eingebettete Farb-Tags und Wiedergabepfad zu prüfen. Eine unpassende Pipeline kann die Darstellung verändern, ohne dass die Gestaltung fehlerhaft ist.

OpenDesign

Briefing und Designarbeit an einem Ort.

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.

OpenDesign herunterladenDesign-Skills durchsuchen
Upstream-Quelldatei
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/color-motion/SKILL.md