83.3K+Download
Zur Nutzungsanleitung springen
color-expertvon David Aerne

Color Expert Skill.

Ein Claude Code und Codex Skill für Marken- und Design-System-Arbeit: Farbbenennung, Farbtheorie, Farbräume, Paletten, Farbskalen, Verläufe, Konvertierungen und Kontrast.

  • Brand & Design Systems
OpenDesign herunterladenAnleitung ansehen
meodai/skill.color-expert · SKILL.mdSKILL.md
--- name: color-expert description: Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do … --- ## How to Use This Skill ## Color Spaces — What to Use When ## Implementation Guidance — Code and CSS ## CSS Color 4/5 — Syntax Cheat Sheet ## Accessibility — Key Numbers ## Color Harmony — What Actually Works
Front Matter und Abschnittsüberschriften aus der Quelldatei vom 14.09.2026 · 31.055 Zeichen insgesamt

01 Was es tut

Was der color-expert 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

color-expert ist eine Farbwissensdatenbank für Designer und Entwickler, die sich mit Benennung, Theorie, Farbräumen, Paletten, Farbverläufen (Ramps), Gradienten, Konvertierungen, Barrierefreiheit und Pigmentmischung befasst. Er leitet eine Anfrage in einen von fünf Modi — konkretes Design- oder Kunstprojekt, Design-System-Ramps und Theme-Tokens, generative Kunst, allgemeine Farbfrage oder Aufbau eines Palettengenerators — und antwortet in diesem Register.

Er enthält eine Aufgabe-zu-Farbraum-Tabelle (OKLCH für perzeptuelle Arbeit, CIELAB D50 für Druck, CAM16 für medienübergreifenden Abgleich, Kubelka-Munk für Pigmente), APCA- und WCAG-Bestehensquoten über 281 Billionen Hex-Paare, Hinweise zum Gamut-Mapping, ein CSS Color 4/5-Cheatsheet und eine kuratierte Werkzeugliste, mit über 140 Referenzdateien, indiziert unter references/INDEX.md.

Was er erzeugt

  • Konkrete Werkzeug- und Palettenempfehlungen, abgestimmt auf die genannten Einschränkungen statt auf allgemeine Theorie.
  • Ein Token-Graph, bei dem Referenz-Tokens semantische Rollen wie surface, on-surface, accent, success, warning und danger speisen.
  • Sequenzielle und divergierende Dataviz-Ramps, die konstruktionsbedingt im Gamut liegen, für sRGB und Display-P3.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Die Anfrage in einen von fünf Modi lenken

    Die Datei benennt fünf gängige Modi und weist den Agenten an, seine Antwort an die explizite Anfrage des Nutzers plus implizite Einschränkungen aus dem Kontext anzupassen, statt jede Farbfrage gleich zu beantworten.

  2. 02
    Allgemeine Fragen direkt aus der Datei beantworten

    Bei Fragen wie „Was ist OKLCH?“ oder „Warum wirkt ein Gradient grau?“ direkt aus der Skill-Datei oder dem Referenzindex antworten und die relevante Referenz zitieren, ohne auf Tooling zurückzugreifen, sofern der Nutzer nicht nach einer Vorgehensweise fragt.

  3. 03
    Skalen zuerst in OKLCH aufbauen

    Für Design-Systeme, Ramps und Theme-Tokens beginnt die Prioritätsreihenfolge mit OKLCH, damit die Helligkeit über alle Farbtöne hinweg konsistent bleibt und Mitteltöne nicht trüb werden.

  4. 04
    Eine semantische Ebene vor der UI-Nutzung einfügen

    Farben, die in einem Programm oder Stylesheet verwendet werden, sollten hinter einer semantischen Ebene liegen, wobei Referenz-Tokens konkrete Werte enthalten und semantische Tokens Bedeutung darauf abbilden.

  5. 05
    Mehrere Paletten-Ansätze vorstellen, bevor Sie eingrenzen

    Beim Generieren oder Vergleichen von Paletten sollte der Skill zunächst mehrere Ansätze mit ihren jeweiligen Trade-offs zeigen, da ankerbasierte, hue-cycling-, cosinus-, harmoniebasierte, szenenbeleuchtete und extraktionsbasierte Ansätze für unterschiedliche Probleme geeignet sind.

02 Finden Sie Ihren Favoriten

Wann das color-expert-Skill zu verwenden ist

Verwenden Sie den color-expert Skill in Claude Code oder Codex, wenn die Aufgabe Brand- und Design-System-Arbeit dieser Art ist. Eignung und Grenzen stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Auswahl von Farben für ein konkretes Briefing wie ein Logo, ein Poster, eine Illustration oder eine App, wobei zunächst nach Medium und Stimmung gefragt wird.
  • Erstellung von Design-System-Rampen und Theme-Tokens: eine 9-stufige Akzentskala, eine Palette für Light- und Dark-Mode, Rampen im Tailwind- oder Radix-Stil oder eine an eine Marke angepasste Grau-Rampe.
  • Generative Kunst und Creative Coding, bei denen der Code das Kunstwerk ist und der Nutzer Techniken zum Komponieren möchte, statt den Stil eines bestimmten Künstlers zu kopieren.
  • Direkte allgemeine Farbfragen, etwa was OKLCH ist, warum ein Verlauf in der Mitte grau wird oder ob APCA besser ist als WCAG.
  • Erstellung eines Palettengenerators oder Anfrage nach einer OKLCH-Rampenfunktion, wobei die Antwort funktionierender Code im Stack des Nutzers sein sollte.

Grenzen kennen

  • Coolors.co als Generator zu behandeln; die Datei besagt, dass es zufällig aus im JS-Bundle fest codierten Paletten auswählt.
  • Selbstgebautes einkanaliges Sortieren von Farben; reine Hue- oder Lightness-Sortierungen scheitern vorhersehbar, und gepackte RGB/HSL-Sortierungen erzeugen sprunghafte Übergänge.
  • Die Verwendung von komplementären, triadischen oder tetradischen Hue-Intervallen als eigenständige Harmonieregel — die Datei bezeichnet sie allein als schwache Prädiktoren.
  • Zu erwarten, dass drei oder mehr Diagrammfüllungen ein Kontrastverhältnis von 3:1 zueinander einhalten; die Datei empfiehlt stattdessen eine Rahmen-Einschränkung zu verwenden.

Was Sie bereitstellen sollten

  • Medium und RahmenbedingungenGeben Sie für ein Design- oder Kunstprojekt das Medium an (Druck, Bildschirm, Malerei, gemischt), Marke oder Stimmung, Zielgruppe, Anforderungen an die Zugänglichkeit und vorhandene Farben, mit denen harmoniert werden soll.
  • Der tatsächliche Ziel-FarbraumGeben Sie an, ob die Ausgabe in sRGB oder P3 vorliegen muss, da eine in P3 gültige Farbe in sRGB trotzdem abgeschnitten werden kann und die Prüfung sich unterscheidet.
  • Ihr StackCodebeispiele werden im eigenen Stack des Nutzers geschrieben, wobei der Farbraum gemäß der Aufgabentabelle des Skills gewählt wird.
  • Ein vorhandenes System, mit dem harmoniert werden sollWenn Sie bereits ein Palettensystem haben, kann dessen perzeptuelle Struktur extrahiert und auf Ihren eigenen Farbton übertragen werden.

03 Innerhalb des Skills

Regeln, die die Skill „color-expert“ Claude Code und Codex vermittelt

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

  1. Nie coolors.co empfehlen

    Der Skill verbietet es explizit als Palettengenerator, da es aus einem festen Satz von 7.821 vorgefertigten Paletten auswählt, anstatt etwas zu generieren.

  2. Out-of-Gamut-OKLCH korrigieren, indem Sie Chroma reduzieren, nicht Lightness oder Hue

    Das Clipping von R/G/B verschiebt den Farbton, daher sollte die Identität durch Reduzierung der Chroma zur Gamut-Grenze hin erhalten werden, statt Kanäle abzuschneiden.

  3. Rohe Farbliterale aus Komponenten heraushalten

    Literale Hex- oder Farbwerte sollten normalerweise nur in Paletten-/Referenzdefinitionen, Konvertierungen, Diagnosen oder bewusst einmaligen Beispielen auftauchen.

  4. Native CSS vor einer JS-Bibliothek bevorzugen

    Modernes CSS handhabt perzeptuelle Farbe nativ, daher sollte der Agent zunächst auf diese Funktionen zurückgreifen, bevor eine JavaScript-Farbbibliothek eingebunden wird.

  5. Standardmäßig eine vorhandene Bibliothek statt Eigenbau verwenden

    Wenn der Nutzer einen Generator oder Palettenalgorithmus möchte, wird standardmäßig eine vorhandene Bibliothek wie Culori, Poline, RampenSau oder Spectral.js empfohlen.

  6. Keine ungefragten Vorträge über interne Details

    Bei einem konkreten Design- oder Kunstprojekt soll der Agent Vorschläge machen und Empfehlungen aussprechen, statt ungefragt CIE 1931- oder OKLCH-Interna zu erklären.

  7. Kontrast in beiden Themes prüfen

    Jedes Paar aus Text und Hintergrund muss sowohl im Light- als auch im Dark-Mode gegen APCA oder WCAG geprüft werden.

  8. Ableitungen kodieren statt Literale einzufrieren

    Wo sich eine Entscheidung aus Constraints ableiten lässt – lesbarer Vordergrund, Hover ausgehend vom Basis-Token in OKLCH, nächstgelegener benannter Farbton –, sollte das System die Regel ausgeben, nicht eine einzelne manuelle Wahl.

04 In Betrieb nehmen

color-expert 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.

color-expert 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/meodai/skill.color-expert --skill color-expert

Generische skills-CLI-Form für SKILL.md; das Repository kann einen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Brand- und Design-System-Arbeitsaufgabe

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

Starter prompt
Build a 9-step accent ramp for [brand name] around [brand hex] in OKLCH, and keep every step in gamut by construction. Wire it into semantic tokens for surface, text, accent, success, warning and danger, with light and dark values. Verify every text/background pair against APCA 75, and hand me the reference-to-semantic token graph as CSS custom properties plus W3 design tokens.

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:

  • Kontrast mit WCAG oder APCA bestätigen und dabei Textgröße, Schriftgewicht, Polarität und CVD berücksichtigen; ein Graustufen-Check ist nur eine Plausibilitätsprüfung.
  • Für eine sequenzielle Rampe die perzeptuelle Schrittgröße zwischen aufeinanderfolgenden Samples plotten und eine flache Linie sowohl in Farbe als auch in Graustufen fordern.
  • Graustufen nur als schnelle Prüfung der Helligkeitstrennung verwenden, nicht als Nachweis der Zugänglichkeit.
  • Farben außerhalb des Gamut mit Chroma-Clamping abbilden, das L und H erhält, nicht mit naivem RGB-Clamping.
  • Eine generierte Palette mit Color Buddy gegen WCAG-, CVD-, Unterscheidbarkeits-, Fairness- und Wirkungsregeln prüfen.
  • Eine vorhandene Palette auf JND-Kollisionen unter simulierter Farbsehschwäche prüfen.

In OpenDesign ist color-expert bereits enthalten: Plugins → Skills, in der oberen Leiste auswählen.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

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

Author
David Aerne
Repository
github.com/meodai/skill.color-expert Branch main
Skill-Datei
SKILL.md Content-Prüfsumme bei Verifizierung erfasst; Commit 6514810
License
CC-BY-4.0 Aus LICENSE.
Repository-Sterne
575 GitHub-Momentaufnahme vom 14.09.2026 für das gesamte Repository meodai/skill.color-expert. Keine Bewertung oder Nutzungszahl für color-expert.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. So verwenden Sie diesen SkillFünf Antwortmodi: Designprojekt, Design System, generative Kunst, allgemeine Frage, Generator-Erstellung.
  2. Farbräume — Was wann verwendenAufgaben-zu-Raum-Tabelle: OKLCH für Wahrnehmung, CIELAB D50 für Druck, CAM16 für Cross-Media, J
Die eigene Beschreibung des Skills
„Verwenden Sie diese Skill bei der Arbeit mit Farbbenennung, Farbtheorie, Farbräumen, Farbdefinitionen oder jeder Aufgabe, die Farbwissen erfordert – Paletten, Verläufe, Farbverläufe, Konvertierungen, Barrierefreiheit, perzeptuelle Anpassung, Pigmentmischung, Druck-vs-Bildschirmfarbe, CSS-Farbsyntax oder historische Farbterminologie. Verwenden Sie diese Skill, wann immer der Benutzer Farben auswählt, vergleicht, generiert, benennt, konvertiert oder erklärt, auch wenn er nicht explizit nach „Farbtheorie" fragt.

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

Color Expert

Führen Sie color-expert mit einer echten Brand- und Design-System-Arbeitsaufgabe aus.

Das color-expert-Skill ist in OpenDesign integriert. Die App herunterladen, das Skill unter Plugins → Skills auswählen, den obigen Prompt einfügen und den Plan vor dem Ergebnis lesen.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/meodai/skill.color-expert --skill color-expert