106.9K+Download
Zur Nutzungsanleitung springen
Design Tokensvon julianoczkowski

Design Tokens Skill.

Übersetze eine gewählte Designrichtung in wiederverwendbare Theme-Werte.

  • Tokens
  • Tailwind
OpenDesign herunterladenNutzungsanleitung ansehen
Quellprüfung · design-tokensSKILL.md
Aufgabe Übersetze eine gewählte Designrichtung in wiederverwendbare Theme-Werte. Ergebnisse Eine Token-Datei oder Theme-Erweiterung im Projektformat. Vor dem Start Die Quelle weist den Agenten an, ein bestehendes System zu erweitern statt zu überschreiben.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-11-02 · kein generiertes Beispiel

01 Funktionen

Übersetze eine gewählte Designrichtung in wiederverwendbare Theme-Werte

Erzeuge oder erweitere CSS-, Tailwind- oder Theme-Tokens für Farbe, Abstände, Typografie, Layout und Bewegung anhand eines vorhandenen Designbriefings.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Design Tokens legt die Werte fest, auf die neue Komponenten verweisen. Zuerst prüft der Skill vorhandene CSS-Variablen, Theme-Provider, Token-Dateien und Framework-Abhängigkeiten und liest danach das Designbriefing der Funktion. Existiert bereits ein System, ergänzt er dessen Lücken, statt es zu ersetzen.

Die Ausgabe folgt dem Projekt-Stack: CSS Custom Properties, Tailwind-Konfiguration oder Theme-Modul. Zum dokumentierten Workflow gehören sowohl helle als auch dunkle Paletten sowie Werte für Abstände, Typografie, Layout, Bewegung und responsives Verhalten. Der Agent erläutert die gewählte visuelle Richtung und Entscheidungen, die davon abweichen.

Erwartete Ergebnisse

  • Eine Token-Datei oder Theme-Erweiterung im Projektformat.
  • Bewusst gestaltete helle und dunkle Paletten mit semantischen Rollen.
  • Eine kurze Erläuterung der Designrichtung und Implementierungsentscheidungen.
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Vorhandene Grundlagen prüfen

    Suche CSS-Variablen, Tailwind-Konfiguration, Theme-Provider und Token-Exporte. Erkenne vor der Generierung Lücken wie fehlenden Dunkelmodus oder Bewegungswerte.

  2. 02
    Briefing und Stack verbinden

    Lies das aktive Funktionsbriefing und seine ästhetische Richtung. Wähle das zur Anwendung passende Token-Format; ist der Stack unklar, verwende standardmäßig CSS Custom Properties.

  3. 03
    Zusammengehörige Skalen definieren

    Erstelle semantische Farben sowie konsistente Abstands-, Typografie- und Layoutwerte. Beziehe Bewegungs- und Breakpoint-Kategorien ein, auf die Komponenten zugreifen können.

  4. 04
    Beide Theme-Modi erstellen

    Gestalte dunkle Werte bewusst und unterstütze die Muster der Quelle für Systempräferenz und manuelle Theme-Auswahl. Erkläre, wie die neuen Werte das vorhandene System erweitern.

02 Einsatzbereiche

Wann einsetzen?

Die Quelle weist den Agenten an, ein bestehendes System zu erweitern statt zu überschreiben.

Gut geeignet

  • Vor dem KomponentenbauEine neue Funktion braucht konsistente Werte, bevor ihre visuellen Teile gebaut werden.
  • Unvollständige GrundlagenEinem vorhandenen Theme fehlen Kategorien oder bewusst gestaltete Dunkelmodus-Werte.

Zu prüfende Grenzen

  • Vorhandene Tokens erhaltenDie Quelle weist den Agenten an, ein bestehendes System zu erweitern statt zu überschreiben.
  • Designrichtung erforderlichFehlt ein Briefing, ist zunächst die beabsichtigte Richtung zu klären. Eine benannte ästhetische Philosophie bezieht ihre Parameter aus dem ergänzenden Skill frontend-design.
  • Werte müssen in der Anwendung geprüft werdenEine generierte Palette braucht weiterhin Kontrast- und Darstellungsprüfung in tatsächlichen Komponenten.

Diese Eingaben mitbringen

  • FunktionsbriefingStelle die akzeptierte visuelle Richtung und relevante Designentscheidungen bereit.
  • Theme-QuellenLiefere aktuelle Variablen, Konfigurationsdateien und Token-Exporte.
  • Anwendungs-StackBenenne die CSS-, Tailwind- oder Theme-Provider-Implementierung.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

  1. Semantische Wiederverwendung

    Komponenten können Rollen wie Text, Oberfläche und Fokus statt beliebiger Werte referenzieren.

  2. Bewusste Modi

    Der Dunkelmodus wird gemeinsam mit dem hellen Modus gestaltet.

  3. Passend zum Stack

    Tokens werden dort bereitgestellt, wo die aktuelle Anwendung sie nutzen kann.

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

Stelle die akzeptierte visuelle Richtung und relevante Designentscheidungen bereit.

Upstream-Quelldatei
https://github.com/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-tokens/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
Erweitere mit design-tokens das Theme für unsere neue Berichtsfunktion. Lies zuerst das freigegebene Designbriefing und prüfe vorhandene CSS-Variablen, Tailwind-Einstellungen und Theme-Provider. Erhalte aktuelle Token-Namen und fülle nur dokumentierte Lücken. Wir brauchen semantische Diagrammoberflächen, Statusfarben, Abstands- und Typografiewerte für hellen und dunklen Modus. Nutze das vorhandene Projektformat und erkläre das Zusammenspiel manueller Theme-Auswahl und Systempräferenz. Ordne neue Werte ihren vorgesehenen Rollen zu und kennzeichne Palettenkombinationen, deren Kontrast noch in der gerenderten Ansicht geprüft werden muss.

Ergebnis prüfen

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

  • Vorhandene Token-Definitionen bleiben erhalten, sofern eine Änderung nicht ausdrücklich begründet ist.
  • Beide Themes decken die vorgesehenen semantischen Rollen ab.
  • Neue Komponenten können die Ausgabe im tatsächlichen Styling-System des Projekts verwenden.

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
julianoczkowski
Repository
julianoczkowski/designer-skills
Skill-Datei
SKILL.md
Lizenz
Apache-2.0
Geprüfter Stand
2026-11-02 · c259656c76d9
Redaktionelle Quellenzusammenfassung
Übersetze eine gewählte Designrichtung in wiederverwendbare Theme-Werte.

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

Wird immer eine neue Datei tokens.css erstellt?

Nein. Die Quelle wählt abhängig vom Stack CSS-Variablen, Tailwind-Konfiguration oder ein Theme-Modul.

Wie sollte der Dunkelmodus abgeleitet werden?

Die Quelle verlangt bewusste Palettenentscheidungen statt einer einfachen Umkehr heller Farben.

Funktioniert der Skill mit einem vorhandenen System?

Ja. Er sucht zuerst bestehende Tokens und ergänzt ihre Lücken.

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/julianoczkowski/designer-skills/blob/c259656c76d9758d7ead46b0d2f125cbe84f8665/design-tokens/SKILL.md