Zur Nutzungsanleitung springen
Color Systemvon Owl-Listener

Color System Skill.

Machen Sie aus einer Markenfarbe ein nutzbares Set von Oberflächenrollen und Kombinationen aus Vorder- und Hintergrundfarben.

  • Farbdesign
  • Design-Leitfaden
Quellenprüfung · Color SystemSKILL.md
Aufgabe UX Ergebnis • Tonwertskalen für Marke und Neutralfarben • Semantische Rollen für Vordergrund, Hintergrund, Rahmen und Icons • Eine Kontrast- und Nutzungsmatrix Vor dem Start Liefern Sie Markenfarben, Oberflächenrollen und Zugänglichkeitsziele. Verwenden Sie echte Komponentenzustände und ein Kontrastprüfwerkzeug, um die vorgeschlagenen Farbkombinationen zu bewerten.
Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Color System: Semantische Produktfarben aufbauen

Ebenen einer Produktpalette, Tonwertskalen, semantische Farbzuordnung und kontrastorientierte Nutzungshinweise.

Workflow auf QuellenbasisKein Benchmark der Ausführung

Die Arbeitsweise

Color System dient dazu, eine Produktpalette aufzubauen oder neu aufzubauen. Der Skill trennt Markenskalen, Neutralfarben, semantische Statusfarben und erweiterte Verwendungen. Das Ergebnis ist mehr als eine Handvoll ansprechender Farbmuster: Jede Farbe braucht eine Rolle und nutzbare Beziehungen zu benachbarten Flächen.

Die Quelle verbindet Tonwertskalen mit Kontrastprüfungen und warnt davor, Informationen allein über Farbe zu vermitteln. Außerdem verlangt sie, Dark-Mode-Zuordnungen früh einzuplanen. Eine generierte Palette bleibt ein Gestaltungsvorschlag, bis ihre tatsächlichen Texte, Komponenten und Zustandskombinationen geprüft wurden.

Erwartete Ergebnisse

  • Tonwertskalen für Marke und Neutralfarben
  • Semantische Rollen für Vordergrund, Hintergrund, Rahmen und Icons
  • Eine Kontrast- und Nutzungsmatrix
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Palettenebenen definieren

    Gehen Sie von der Markenrichtung aus und leiten Sie die Neutralfarben und Statusrollen ab, die das Produkt tatsächlich verwendet.

  2. 02
    Reale Kombinationen zuordnen

    Weisen Sie Farben Texten, Flächen, Rahmen und Zuständen zu, statt sie als unbeschriftete Farbmuster stehen zu lassen.

  3. 03
    Zugänglichkeit prüfen

    Testen Sie die vorgesehenen Kombinationen und ergänzen Sie nicht farbbasierte Signale, wo der Status verständlich sein muss.

02 Einsatzbereiche

Einsatzzeitpunkt

Liefern Sie Markenfarben, Oberflächenrollen und Zugänglichkeitsziele. Verwenden Sie echte Komponentenzustände und ein Kontrastprüfwerkzeug, um die vorgeschlagenen Farbkombinationen zu bewerten.

Gut geeignet

  • Eine neue ProduktpaletteSchaffen Sie eine Grundlage, wenn es noch keine rollenbasierten Farben gibt.
  • Uneinheitliche StatusfarbenLösen Sie konkurrierende Darstellungen für Erfolg, Warnung und Fehler in verschiedenen Komponenten auf.

Grenzen, die Sie prüfen sollten

  • Nicht nur für die Dark-Mode-AnpassungDie dunkle Übersetzung einer bestehenden hellen Palette ist eine eigene Dark-Mode-Aufgabe.
  • Keine automatische KonformitätTatsächliche Kombinationen aus Komponenten und Texten müssen weiterhin gemessen und geprüft werden.

Diese Eingaben mitbringen

  • MarkenrichtungLiefern Sie vorhandene Markenfarben und Einschränkungen.
  • OberflächenrollenListen Sie Flächen, Textebenen, Aktionen und Status auf.
  • ZugänglichkeitszielNennen Sie relevante Kontrastanforderungen und Anforderungen an Kommunikation ohne Farbe.

03 Wichtige Entscheidungen

Entscheidungen von Bedeutung

  1. Rollen statt Farbmuster

    Die semantische Zuordnung macht die Palette über Komponenten hinweg nutzbar.

  2. Paare sind die Testeinheit

    Eine Farbe hat ohne Hintergrund und Verwendung kein aussagekräftiges Textkontrastergebnis.

04 Beispielbriefing

Fokussiertes Briefing ausprobieren

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

Einrichtung prüfen

Laden Sie das SKILL.md dieser Aufgabe aus dem Repository designer-skills an den von Ihrem Agenten unterstützten Skill-Speicherort. Die Eintragsdatei legt keinen universellen Installationsbefehl fest.

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

Liefern Sie Markenfarben, Oberflächenrollen und Zugänglichkeitsziele. Verwenden Sie echte Komponentenzustände und ein Kontrastprüfwerkzeug, um die vorgeschlagenen Farbkombinationen zu bewerten.

Mit einem Ergebnis beginnen

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

Beispiel-Briefing
Verwenden Sie color-system, um für dieses Terminplanungsprodukt eine Palette aus dem vorgegebenen Markenblau zu erstellen. Definieren Sie Ton- und Neutralskalen, semantische Erfolg/Warnung/Fehler-Rollen und eine Matrix tatsächlicher Kombinationen aus Text auf Fläche. Kennzeichnen Sie nicht verifizierte Kontrastwerte, statt Konformität zu behaupten.

Ergebnis prüfen

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

  • Jede vorgeschlagene Rolle hat Nutzungshinweise.
  • Für wichtige Kombinationen wurde der Kontrast gemessen.
  • Der Status wird nicht allein durch den Farbton vermittelt.

OpenDesign stellt einen lokalen Design-Arbeitsbereich für Coding-Agenten bereit. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass externe Werkzeuge, 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.

Quelleninhaber
Owl-Listener
Lizenz
MIT
Geprüfter Stand
2026-10-07 · 9a6930cf84a8
Redaktionelle Zusammenfassung der Quelle
Ebenen einer Produktpalette, Tonwertskalen, semantische Farbzuordnung und kontrastorientierte Nutzungshinweise.

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

Ist das nur eine Markenpalette?

Nein. Sie umfasst Neutralfarben, semantische Zustände und Nutzungsbeziehungen.

Sollte der Dark Mode jetzt schon berücksichtigt werden?

Die Quelle empfiehlt, Zuordnungen früh zu planen; die detaillierte Anpassung wird separat behandelt.

Löst eine farbenblindheitsfreundliche Palette alles?

Nein. Die Quelle verlangt zusätzlich Beschriftungen, Formen oder andere Hinweise, wo Bedeutung wichtig ist.

OpenDesign

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

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.

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