Theming Systemvon Owl-Listener

Theming System Skill.

Eine Komponentenbibliothek soll ihr Erscheinungsbild ändern können, ohne ihre Struktur zu duplizieren.

Designsysteme
Theming

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Theming SystemSKILL.md

Aufgabe Designsysteme Liefert • Eine dreischichtige Token-Architektur mit Überschreibungsregeln. • Eine Theme-Matrix für die erforderlichen Farb-, Marken- oder Dichtemodi. • Hinweise zur Komponentenabdeckung und dazu, welche Tokens fest und welche themefähig sind. Vor dem Start Die Umsetzung nutzt das Token-System des Projekts oder Plattformäquivalente; das Umschalten zur Laufzeit muss gebaut und getestet werden.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Mehrere Themes über Tokens unterstützen

Eine geschichtete Theming-Architektur für gemeinsam genutzte Komponenten über Marken, Farbmodi und Dichtevarianten hinweg.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Der Arbeitsansatz

Theming System legt Theme-Unterschiede in eine geschichtete Token-Architektur. Rohe Palettenwerte speisen semantische Rollen, die wiederum komponentenbezogene Tokens speisen. Theme-Überschreibungen ändern vor allem die semantische Ebene, sodass dieselben Komponenten unterschiedliche Marken oder Farbmodi bedienen können.

Die Quelle unterscheidet Themes vom bloßen Invertieren von Farben. Dunkle Flächen, Elevation, Sättigung und Bildvarianten erfordern gezielte Behandlung. Außerdem nennt sie Dichte als Theme-Dimension, wodurch die Spezifikation über Farbe hinaus relevant ist.

Erwartete Ergebnisse

Eine dreischichtige Token-Architektur mit Überschreibungsregeln.
Eine Theme-Matrix für die erforderlichen Farb-, Marken- oder Dichtemodi.
Hinweise zur Komponentenabdeckung und dazu, welche Tokens fest und welche themefähig sind.

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Token-Ebenen trennen
Raw-Primitive, zweckbasierte Aliase und Referenzen auf Komponentenebene identifizieren.
02
Theme-Überschreibungen zuordnen
Semantische Rollen für jedes gewünschte Theme ändern und dabei den Komponentenvertrag beibehalten.
03
Die gesamte Bibliothek prüfen
Jede Komponente in jedem unterstützten Theme prüfen, einschließlich Bildmaterial und Verhalten bei OS-Einstellungen.

02 Einsatzbereiche

Wann man es einsetzt

Die Umsetzung nutzt das Token-System des Projekts oder Plattformäquivalente; das Umschalten zur Laufzeit muss gebaut und getestet werden.

Gut geeignet

Multi-Brand-ProdukteNützlich, wenn White-Label- oder Sub-Brand-Oberflächen eine Komponentenbibliothek teilen müssen.
Mehr als Hell und DunkelBietet auch eine Struktur für High-Contrast- oder Dichtevarianten.

Grenzen, die zu prüfen sind

Keine reine PalettenübungDie Wahl eines Farbsatzes schafft noch keine wartbare Theming-Architektur.
Keine automatische KontrastzertifizierungJede tatsächliche Kombination aus Text, Fläche und Zustand muss weiterhin getestet werden.

Diese Eingaben mitbringen

Unterstützte ThemesMarken, Farbmodi, Kontrastmodi und Dichteanforderungen auflisten.
Vorhandene TokensPalette, semantische Aliase und Komponentenreferenzen bereitstellen.
Feste MarkenelementeAssets oder Werte benennen, die sich zwischen Themes nicht ändern dürfen.

03 Wichtige Entscheidungen

Entscheidende Punkte

Auf der richtigen Ebene überschreiben
Semantische Aliase verhindern, dass markenspezifische Farben über die Komponentenimplementierungen verstreut werden.
Assets gehören zum Theme
Bilder und Illustrationen benötigen eventuell Varianten; allein das Ändern von CSS-Variablen macht den Dark Mode möglicherweise nicht stimmig.

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 bei. Dieser Eintrag beschreibt eine fokussierte Designmethode und keine ausführbare Anwendung.

Upstream-Quelldatei

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/theming-system/SKILL.md

Die Umsetzung nutzt das Token-System des Projekts oder Plattformäquivalente; das Umschalten zur Laufzeit muss gebaut und getestet werden.

Mit einem Ergebnis beginnen

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

Beispiel-Briefing

Verwende theming-system für eine Komponentenbibliothek, die von zwei Marken im Light- und Dark-Modus gemeinsam genutzt wird. Definiere Primitive-, semantische und Komponentenebenen, benenne feste Tokens und zeige, wie Theme-Überschreibungen funktionieren. Berücksichtige Bildvarianten und eine QA-Matrix je Komponente und Theme, ohne anzunehmen, dass Farbinvertierung ausreicht.

Ergebnis prüfen

Prüfe das tatsächliche Ergebnis anhand dieser beobachtbaren Kriterien.

Komponenten-Tokens werden über dokumentierte semantische Rollen aufgelöst.
Themefähige und feste Werte werden unterschieden.
Die Testmatrix umfasst jedes unterstützte Theme.

OpenDesign bietet einen lokalen Design-Workspace für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Softwareabhängigkeiten enthalten sind.

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, fixierte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quelleninhaber: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill-Datei: design-systems/skills/theming-system/SKILL.md
Lizenz: MIT
Geprüfter Snapshot: 2026-10-07 · 9a6930cf84a8

Redaktionelle Quellenzusammenfassung

Eine geschichtete Theming-Architektur für gemeinsam genutzte Komponenten über Marken, Farbmodi und Dichtevarianten hinweg.

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

Wo sollten Themes Tokens überschreiben?

Die Quelle legt die wichtigsten Überschreibungen auf die semantische Ebene zwischen Rohwerten und komponentenspezifischen Tokens.

Kann Dichte ein Theme sein?

Ja. Die Quelle nennt komfortable, kompakte und großzügige Dichte neben Farb- und Markenmodi.

Schreibt es ein bestimmtes Implementierungswerkzeug vor?

Sie nennt CSS-Custom-Properties, Token-Dateien, Figma-Variablenmodi und Umschalten zur Laufzeit, schreibt aber keinen bestimmten Stack vor.

OpenDesign

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

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

OpenDesign herunterladen Design-Skills durchsuchen