ui-design-systemvon Alireza Rezvani

UI Design System Skill.

Ein Claude Code- und Codex-Skill für Marken- und Designsystem-Arbeit: Design-Tokens, Komponenten-Dokumentation, responsive Berechnungen und Developer-Handoff.

Brand & Design Systems
Design-System

OpenDesign herunterladen Anleitung ansehen

alirezarezvani/claude-skills · product-team/skills/ui-design-system/SKILL.mdSKILL.md

--- name: ui-design-system description: UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff. --- ## Trigger Terms ## Workflows ## Quick Reference Tables ## Knowledge Base ## Validation Checklist

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 10.759 Zeichen insgesamt

01 Was es tut

Was der ui-design-system 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

Ein Design-System-Toolkit, das aus einer Markenfarbe einen vollständigen Token-Satz erstellt. design_token_generator.py nimmt einen Hex-Farbwert plus ein Preset (modern, classic oder playful) entgegen und liefert Farben, Typografie, 8pt-Abstände, Größen, Rahmen, Schatten, Animationen, Breakpoints und z-index-Ebenen als json, css, scss oder Zusammenfassung.

Vier Workflows decken anschließend die Komponentenarchitektur von Atomen bis Templates ab, responsive Breakpoints mit fließender Typografie via clamp(), WCAG-Kontrastprüfung sowie die Entwickler-Übergabe in React-CSS-Variablen, Tailwind-Konfiguration oder styled-components, ergänzt durch Figma-Synchronisierung via Tokens Studio. Er richtet sich an Senior UI-Designer, die Tokens und Komponenten für ein Build-Team dokumentieren müssen.

Was er erzeugt

Komponenten-API-Dokumentation zu Props, Variantenoptionen, Zuständen und Barrierefreiheitsanforderungen.
Integrations-Snippets für React mit CSS-Variablen, eine Tailwind-Theme-Konfiguration und styled-components.
Semantische Farb-Tokens, die ihre eigenen Kontrastfarben mitführen.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Die Markenfarbe festlegen
Der Workflow beginnt mit der Bestimmung der primären Markenfarbe, die die Datei im Hex-Format benötigt, da jede generierte Kategorie davon abgeleitet wird.
02
Den Token-Generator ausführen
Ein Skript-Aufruf erzeugt das gesamte System: Farbe, Style-Preset und Ausgabeformat sind die drei Argumente, die er entgegennimmt.
03
Tokens auf eine Komponenten-Hierarchie abbilden
Komponenten sind als Atome, Molekülе, Organismen und Templates organisiert, und jede wird an die Token-Gruppen gebunden, die sie verwendet.
04
Breakpoints und fluides Type-System festlegen
Sechs Breakpoints reichen von xs bis 2xl, und fluide Typografie wird mit einer Clamp-Formel zwischen einer Minimal- und Maximalgröße ausgedrückt.
05
Tokens in die Codebase einbinden
Der Handoff-Workflow zeigt die direkt importierte Token-Datei, ein aus dem JSON erstelltes Tailwind-Theme und ein styled-components-Theme, das Token-Keys ausliest.
06
Figma synchronisieren und abschließen
Tokens gelangen über das Tokens-Studio-Plugin nach Figma, und die Handoff-Checkliste bestätigt, dass Pipeline, Komponentenbibliothek und Dokumentation fertig sind.

02 Finden Sie Ihren Favoriten

Wann die ui-design-system Skill verwendet werden sollte

Verwenden Sie den Skill ui-design-system in Claude Code oder Codex, wenn es sich um Brand- und Designsystem-Aufgaben dieser Art handelt. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Sie haben eine einzelne Markenfarbe und benötigen ein vollständiges Token-System, das daraus abgeleitet ist.
Sie strukturieren eine Komponentenbibliothek und möchten Tokens auf Atome, Moleküle, Organismen und Templates abbilden.
Sie benötigen Breakpoints, fluide Typografie-Skalen oder responsive Spacing-Werte, die für Sie berechnet werden.
Sie bereiten sich darauf vor, einen fertigen Token-Satz an das Entwicklungsteam zu übergeben.

Grenzen kennen

Die Style-Presets sind kein tiefgreifendes Re-Skinning: Die Theme-Wahl verändert vor allem Font-Stacks, Standard-Radius und Schatten-Charakter, zum Beispiel 8px abgerundete Ecken bei modern gegenüber 4px bei classic.

Was Sie bereitstellen sollten

Ein Style-PresetWählen Sie eine von drei Richtungen, modern, classic oder playful, denn das Preset verändert Schriftfamilien, Eckenradius und Schattenbehandlung im gesamten generierten Satz.
Das AusgabeformatGeben Sie an, welches Format das empfangende Projekt verarbeitet: json, css, scss oder die Summary-Ansicht, denn das entscheidet, was der Handoff erzeugt.

03 Innerhalb des Skills

Regeln, die das ui-design-system Skill Claude Code und Codex vorgibt

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

Standard-Markenfarbe
Wird keine Farbe übergeben, greift der Generator als primäre Markenfarbe auf #0066CC zurück, sodass die Ausgabe auch ohne Hex-Argument gerendert wird.
Spacing folgt einem 8pt-Raster
Spacing-Tokens folgen einer 8pt-Raster-basierten Skala von 0 bis 64, mit semantischen Aliasen, die über den numerischen Stufen liegen.
Keine hartcodierten Werte
Komponenten-Implementierungen dürfen ausschließlich auf Design-Tokens verweisen; literale Pixel- oder Hex-Werte in Komponenten gelten als fehlgeschlagene Prüfung.
Jede Variante wird ausgeliefert
Von den Komponenten wird erwartet, dass sie das vollständige Varianten-Set implementieren – Primary, Secondary und Ghost – statt nur eine Teilmenge.
Größenvarianten haben feste Abmessungen
Die kleine Größe ist definiert als 32px Höhe, 12px horizontales Padding und 14px Schriftgröße, wobei md und lg davon ausgehend skalieren.
Kontrast muss WCAG AA erfüllen
Generierte Farben werden mit 4,5:1 für normalen Text und 3:1 für großen Text geprüft, wobei semantische Farben Kontrastwerte definieren müssen.
Touch-Ziele bleiben groß genug
Interaktive Elemente müssen laut Accessibility-Checkliste ein Mindest-Touch-Ziel von 44 mal 44 Pixeln erreichen.

04 In Betrieb nehmen

ui-design-system 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.

ui-design-system 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/alirezarezvani/claude-skills --skill ui-design-system

Generische skills-CLI-Form für product-team/skills/ui-design-system/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

We have settled on [#0066CC] as the brand primary and I need a complete token set for our SCSS codebase, exported as variables we can import. Please generate the tokens in the classic style, document the Button, Input and Card component APIs with their variants and states, and check that the semantic colors clear WCAG AA before we hand off to the developers.

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:

Bestätigen Sie, dass jede Token-Kategorie generiert wurde und nicht nur ein Teilsatz.
Überprüfen Sie, dass Hover-, Active-, Focus- und Disabled-Zustände tatsächlich bei jeder Komponente funktionieren.
Prüfen Sie, ob Fokusindikatoren sichtbar sind und semantische HTML-Elemente verwendet werden.
Stellen Sie sicher, dass das Design-Tool synchronisiert wurde, bevor die Übergabe als abgeschlossen gilt.
Bestätigen Sie, dass eine Build-Pipeline konfiguriert ist, damit die exportierten Tokens den Code erreichen.

In OpenDesign importieren Sie ui-design-system über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

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

Author: Alireza Rezvani
Repository: github.com/alirezarezvani/claude-skills Branch main
Skill-Datei: product-team/skills/ui-design-system/SKILL.md Inhalts-Prüfsumme bei Verifizierung erfasst; Commit 19392f7
License: MIT Aus LICENSE.
Repository-Sterne: 25.934 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository alirezarezvani/claude-skills, das 5 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für ui-design-system.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Trigger-BegriffeZitierte Formulierungen wie generate design tokens, die eine Anfrage an diesen Skill weiterleiten sollen.
WorkflowsVier durchnummerierte Workflows: Token-Generierung, Komponentensystem, responsives Design, Developer-Handoff.
Tool-ReferenzArgumente, Standardwerte und Ausgabekategorien für design_token_generator.py, mit Beispielaufrufen.
KurzreferenztabellenFarbskalenstufen, 1,25-Typografieskala, WCAG-Stufen und Unterschiede zwischen Style-Presets.
WissensdatenbankVier Referenzleitfäden: token-generation, component-architecture, responsive-calculations, developer-handoff.
Validierungs-ChecklisteChecklisten für Token-Generierung, Komponentensystem, Barrierefreiheit und Developer-Handoff.

Die eigene Beschreibung des Skills

„UI-Design-System-Toolkit für Senior UI Designer, einschließlich Design-Token-Generierung, Komponenten-Dokumentation, responsiver Design-Berechnungen und Übergabe-Tools für Entwickler. Verwenden Sie diesen Skill beim Erstellen von Design-Systemen, Generieren von Design-Tokens, Aufrechterhalten visueller Konsistenz oder zur Erleichterung der Zusammenarbeit zwischen Design und Entwicklung und der Übergabe an Entwickler."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 10.759 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum ui-design-system Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Was benötige ich, um den Generator auszuführen?

Eine Hex-Markenfarbe und eine Stilwahl, direkt über die Kommandozeile zusammen mit dem Ausgabeformat übergeben. Die Datei zeigt Aufrufe wie eine klassische Palette mit CSS-Ausgabe, sodass vorher nichts anderes konfiguriert werden muss.

Welche Ausgabeformate kann ich erhalten?

JSON ist die Standardausgabe, und dasselbe Skript schreibt CSS Custom Properties, SCSS-Variablen oder eine Zusammenfassungsansicht. Die Beispiele leiten die SCSS-Ausgabe in eine Partial-Datei um, damit sie direkt importiert werden kann.

Wie funktioniert die Figma-Synchronisierung?

Sie installieren das Tokens-Studio-Plugin und importieren das generierte JSON, wonach die Token automatisch mit Figma-Styles synchronisiert werden. Derselbe Übergabe-Workflow deckt auch die Integration mit React, Tailwind und styled-components ab.

Welchen Kontrastgrad erfüllt die Arbeit?

Die Referenztabelle definiert sowohl AA als auch AAA: AAA benötigt 7:1 für normalen Text und 4,5:1 für großen Text, während AA das leichtere Ziel von 4,5:1 und 3:1 ist. Großer Text bedeutet mindestens 18pt normal oder 14pt fett.

UI Design System

Führen Sie ui-design-system mit einer echten Marke und einer design-system-Arbeitsaufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie ui-design-system über den SKILL.md-Link, fügen Sie die obige Eingabeaufforderung ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen