design-system-patternsvon Seth Hobson

Design System Patterns Skill.

Ein Claude Code- und Codex-Skill für Marken- und Design-System-Arbeit: skalierbare Design-Systeme: Tokens, Theming-Infrastruktur, Komponentenarchitektur.

Brand & Design Systems
Design-System

OpenDesign herunterladen Anleitung ansehen

wshobson/agents · plugins/ui-design/skills/design-system-patterns/SKILL.mdSKILL.md

--- name: design-system-patterns description: Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations. --- ## When to Use This Skill ## Core Capabilities ## Quick Start ## Detailed patterns and worked examples ## Best Practices

Vorspann und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 4.003 Zeichen insgesamt

01 Was es tut

Was die design-system-patterns 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

Diese Skill baut skalierbare Design-Systeme mit Design-Tokens, Theming-Infrastruktur und Komponenten-Architekturmustern auf. Sie erstellt dreistufige Token-Hierarchien – primitive Tokens für Rohwerte, semantische Tokens für kontextuelle Bedeutung und Komponenten-Tokens für spezifische Verwendung – und implementiert dann Theme-Wechsel mit CSS Custom Properties und React-Context-Providern.

Die Skill übernimmt die plattformübergreifende Token-Generierung für CSS, iOS und Android, richtet Figma-zu-Code-Workflows mit Style Dictionary ein und entwirft Komponentenbibliotheken mit Compound Components, polymorphen Komponenten, Varianten, Slots und Headless-UI-Mustern. Sie erkennt Systemeinstellungen wie prefers-color-scheme und Modi für reduzierte Bewegung.

Was er erzeugt

Plattformübergreifende Token-Dateien, generiert für CSS, iOS und Android
Komponentenbibliotheken mit Varianten- und Größensystemen
Design-System-Dokumentation und Richtlinien

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Primitive Tokens definieren
Erstellen Sie Rohwert-Tokens für Farben, Größen und Schriften, die als Fundamentschicht dienen. Dies sind literale Werte wie Hex-Codes und Pixelmaße.
02
Semantische Token-Ebene aufbauen
Verweisen Sie auf primitive Tokens, um kontextuelle Tokens wie text-primary, surface-elevated und border-default zu erstellen, die Bedeutung statt visuelle Beschreibung tragen.
03
Komponentenspezifische Tokens erstellen
Definieren Sie Tokens für die spezifische Verwendung von Komponenten wie button-bg und card-border, die auf semantische Tokens verweisen.

02 Finden Sie Ihren Favoriten

Wann der design-system-patterns Skill zu verwenden ist

Verwenden Sie den design-system-patterns Skill in Claude Code oder Codex, wenn die Aufgabe Marken- und Designsystem-Arbeit dieser Art ist. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Erstellen von Design-Tokens für Farben, Typografie, Abstände und Schatten
Implementierung von Hell/Dunkel-Theme-Umschaltung mit CSS Custom Properties
Aufbau von Multi-Brand-Theming-Systemen
Architektur von Komponentenbibliotheken mit konsistenten APIs
Design-zu-Code-Workflows mit Figma-Tokens einrichten

Grenzen kennen

Plattformlücken, bei denen Token für Web, aber nicht für Mobile existieren – oder umgekehrt

03 Innerhalb des Skills

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

1 konkrete Anweisungen, Vorgaben und Grenzen, die SKILL.md dem Agent setzt — der Teil der Datei, der das Ergebnis verändert.

Token mit Semver versionieren
Behandeln Sie Token-Änderungen wie API-Änderungen und verwenden Sie semantische Versionierung. Token-Änderungen wirken sich auf konsumierende Anwendungen genauso aus wie API-Änderungen.

04 In Betrieb nehmen

Installieren Sie design-system-patterns in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

Fügen Sie design-system-patterns zu Claude Code, Codex oder Ihrem Agent hinzu

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/wshobson/agents --skill design-system-patterns

Generische skills-CLI-Form für plugins/ui-design/skills/design-system-patterns/SKILL.md; das Repository dokumentiert möglicherweise einen eigenen Pfad.

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 design token system for [our SaaS dashboard] with light and dark themes. Create the three-tier token hierarchy (primitive, semantic, component) for colors, typography, and spacing. Implement CSS custom properties and a React theme context provider with system preference detection and persistent storage. Generate tokens for both web and React Native using Style Dictionary, and set up the compound component pattern for our Button and Card components with size and variant props.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Prüfen Sie vor Annahme der Ausgabe Folgendes im Transkript und in den Dateien:

Das Ergebnis wird als Design system ausgeliefert, wie der Katalog für dieses Skill auflistet.
Der Agent nennt das design-system-patterns-Skill in seinem Plan oder Transkript, bevor er das Ergebnis liefert.
Ihre eigenen Inhalte, Namen und Zahlen erscheinen unverändert in der Ausgabe.

In OpenDesign importieren Sie design-system-patterns über seinen 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: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill-Datei: plugins/ui-design/skills/design-system-patterns/SKILL.md Inhalts-Checksum bei Verifizierung aufgezeichnet; Commit 4236bb9
License: MIT Aus LICENSE.
Repository-Sterne: 39.635 GitHub-Snapshot vom 14.09.2026 für das gesamte wshobson/agents-Repository, das 18 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für design-system-patterns.
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

Wann diese Skill verwendenListet Szenarien für Design-Token, Theming, Multi-Brand-Systeme, Komponentenbibliotheken und Figma-Workflows
KernfunktionenBeschreibt Design-Token, Theming-Infrastruktur, Komponentenarchitektur und Token-Pipeline-Funktionen im Detail
Design-TokenDefiniert primitive, semantische und komponentenbezogene Token-Ebenen mit Namenskonventionen und plattformübergreifender Generierung
Theming-InfrastrukturBehandelt CSS Custom Properties, React Context, dynamisches Umschalten, Systemeinstellungen und Accessibility-Modi
KomponentenarchitekturBeschreibt Compound Components, polymorphe Muster, Varianten, Slots, Headless UI und Style Props
Token-PipelineErläutert Figma-Synchronisierung, Style-Dictionary-Konfiguration, Transformationen und CI/CD-Integration
SchnellstartLiefert ein TypeScript-Beispiel für die primitive und semantische Token-Struktur mit CSS Custom Properties
Best PracticesListet sieben Regeln auf: semantische Benennung, Hierarchie, Dokumentation, Versionierung, Testing, Automatisierung, Migration
Häufige ProblemeWarnt vor Token-Wildwuchs, uneinheitlicher Benennung, fehlendem Dark Mode, hartkodierten Werten, zirkulären Referenzen und Plattformlücken

Die eigene Beschreibung des Skills

„Erstellen Sie skalierbare Designsysteme mit Design-Tokens, Theming-Infrastruktur und Komponentenarchitektur-Mustern. Verwenden Sie dies beim Erstellen von Design-Tokens, der Implementierung von Theme-Wechseln, dem Aufbau von Komponentenbibliotheken oder der Etablierung von Designsystem-Grundlagen."

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

Design System Patterns

Führen Sie design-system-patterns für eine echte Marken- und Designsystem-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie design-system-patterns über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen