102.3K+Download
Zur Nutzungsanleitung springen
Design Tokenvon Owl-Listener

Design Token Skill.

Visuellen Entscheidungen Namen und Beziehungen geben, die Komponenten wiederverwenden können.

  • Designsysteme
  • Spezifikationen
OpenDesign herunterladenNutzungsanleitung ansehen
Quellenprüfung · Design TokenSKILL.md
Aufgabe Designsysteme Ergebnis • Ein Schema für Token-Kategorien und Benennung • Beziehungen zwischen globalen Tokens, Alias-Tokens und Komponenten-Tokens • Hinweise zu Verwendung und Versionierung Bevor Sie beginnen Stellen Sie vorhandene visuelle Werte, Komponentenbeispiele und Namensvorgaben bereit. Der Skill definiert Token-Namen und ihre Beziehungen; Export-Tooling und Framework-Integration erfordern eine separate Einrichtung.
Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Design Token: Ein semantisches Fundament definieren

Kategorien von Design-Tokens, dreistufige Beziehungen, Benennung, Verwendung und Hinweise zur Versionierung.

Quellenbasierter WorkflowKein Benchmark der Ausführung

Die Arbeitsweise

Design Token definiert das Fundament eines Designsystems. Der Skill umfasst Farbe, Abstände, Typografie, Elevation, Rahmen und Bewegung, mit Benennungs- und Verwendungsregeln, die Rohwerte mit semantischer Bedeutung verbinden.

Die dreistufige Struktur trennt globale Werte, semantische Aliase und komponentenspezifische Tokens. Diese Trennung hilft einem Team, einen Wert zu ändern, ohne den Grund seiner Verwendung zu verlieren. Die Prüfung der bestehenden Nutzung und das Mapping für mehrere Marken sind ausdrücklich eigene Aufgaben.

Erwartete Ergebnisse

  • Ein Schema für Token-Kategorien und Benennung
  • Beziehungen zwischen globalen Tokens, Alias-Tokens und Komponenten-Tokens
  • Hinweise zu Verwendung und Versionierung
Beispiel-Brief ansehen

Vom Brief zur Prüfung

  1. 01
    Grundlagen erfassen

    Listen Sie die Werte auf, die das Produkt für Farbe, Layout, Schrift, Elevation und Bewegung benötigt.

  2. 02
    Ebenen definieren

    Trennen Sie Rohskalen von semantischen Rollen und ergänzen Sie komponentenspezifische Namen nur dort, wo sie sinnvoll sind.

  3. 03
    Verwendung dokumentieren

    Erklären Sie, wo Aliase gelten und wie Komponenten sich auf sie beziehen sollen, statt fest codierte Werte zu verwenden.

02 Einsatzbereiche

Wann der Skill passt

Stellen Sie vorhandene visuelle Werte, Komponentenbeispiele und Namensvorgaben bereit. Der Skill definiert Token-Namen und ihre Beziehungen; Export-Tooling und Framework-Integration erfordern eine separate Einrichtung.

Gut geeignet

  • Eine neue Token-EbeneNutzen Sie den Skill, wenn visuelle Werte vorhanden sind, es aber keine gemeinsamen Namen und Rollen dafür gibt.
  • Uneinheitliche GrundlagenGeben Sie wiederkehrenden Entscheidungen zu Abständen oder Farben ein gemeinsames Vokabular.

Grenzen, die Sie prüfen sollten

  • Kein automatisiertes AuditDie Quelle verweist für die Prüfung der bestehenden Nutzung auf einen anderen Skill.
  • Keine Build-PipelineDer Skill beschreibt die Token-Architektur, nicht einen garantierten Export oder eine Framework-Integration.

Diese Eingaben mitbringen

  • Aktuelle WerteLiefern Sie Entscheidungen zu Palette, Schrift, Abständen und Elevation.
  • Anforderungen der KomponentenZeigen Sie repräsentative Verwendungen und Zustände.
  • NamensvorgabenNennen Sie Plattformkonventionen und Erwartungen an die Versionierung.

03 Wichtige Entscheidungen

Entscheidungen, auf die es ankommt

  1. Namen bewahren die Absicht

    Semantische Aliase bewahren die Absicht, wenn sich Rohwerte ändern.

  2. Ebenen verhindern Verwechslungen

    Eine globale Farbe und eine Farbe für einen Button-Zustand sollten nicht als austauschbare Namen behandelt werden.

04 Beispielbriefing

Einen fokussierten Brief ausprobieren

Der folgende Beispiel-Brief wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn verwenden.

Einrichtung prüfen

Laden Sie die SKILL.md dieser Aufgabe aus dem designer-skills-Repository an dem Speicherort, den Ihr Agent für Skills unterstützt. Die Einstiegsdatei legt keinen universellen Installationsbefehl fest.

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

Stellen Sie vorhandene visuelle Werte, Komponentenbeispiele und Namensvorgaben bereit. Der Skill definiert Token-Namen und ihre Beziehungen; Export-Tooling und Framework-Integration erfordern eine separate Einrichtung.

Mit einem Ergebnis beginnen

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

Beispiel-Brief
Nutze design-token, um eine Token-Ebene für dieses kleine Produktsystem zu definieren. Trenne Rohskalen, semantische Aliase und notwendige Komponenten-Tokens. Ordne die bereitgestellten Button- und Card-Beispiele zu, dokumentiere Benennungsregeln und behaupte keine Export-Pipeline, die wir nicht umgesetzt haben.

Ergebnis prüfen

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

  • Aliase lösen sich zu definierten Werten auf.
  • Namen drücken die Verwendung aus, nicht zufälliges Aussehen.
  • Komponenten verweisen auf die vorgesehene Token-Ebene.

OpenDesign bietet Coding-Agenten einen lokalen Design-Arbeitsbereich. Dieser Eintrag bedeutet nicht, dass der Skill gebündelt ist oder dass externe Tools, Zugangsdaten und Softwareabhängigkeiten enthalten sind.

OpenDesign herunterladenQuickstart 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.

Quellen-Inhaber
Owl-Listener
Repository
Owl-Listener/designer-skills
Skill-Datei
design-systems/skills/design-token/SKILL.md
Lizenz
MIT
Geprüfter Stand
2026-10-07 · 9a6930cf84a8
Redaktionelle Quellenzusammenfassung
Kategorien von Design-Tokens, dreistufige Beziehungen, Benennung, Verwendung und Hinweise zur Versionierung.

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

Sind Tokens nur Farben?

Nein. Die Quelle umfasst Abstände, Typografie, Elevation, Rahmen und Bewegung.

Sollte jede Komponente Rohwerte verwenden?

Die Quelle rät zu semantischen Referenzen statt direkter Rohwerte.

Unterstützt das mehrere Marken?

Der Eintrag unterscheidet die grundlegende Token-Architektur von einer separaten theming-system-Aufgabe.

OpenDesign

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

Halten Sie Brief, 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
Quelldatei im Upstream
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/design-token/SKILL.md