design-system-patterns

Überblick

Was ist design-system-patterns?

design-system-patterns ist eine praxisorientierte Fähigkeit zum Aufbau skalierbarer und konsistenter Designsysteme. Es bietet Leitfäden und Muster zur Erstellung von Design Tokens, Theming-Infrastruktur und Komponentenarchitektur, hauptsächlich für UI-Design und React-basierte Projekte.

Für wen ist diese Fähigkeit geeignet?

• UI-Designer und Frontend-Entwickler, die ein wartbares Designsystem etablieren möchten
• Teams, die Komponentenbibliotheken oder Multi-Brand-Theming aufbauen
• Entwickler, die Theme-Wechsel oder semantische Token-Hierarchien implementieren

Gelöste Probleme

• Zentralisierung von Designentscheidungen mit Tokens für Farbe, Typografie, Abstände und mehr
• Ermöglicht robusten Theme-Wechsel (Hell/Dunkel, Marken-Themes)
• Unterstützt skalierbare Komponenten-APIs und Compound-Component-Muster
• Verbindet Design-zu-Code-Workflows, inklusive Figma-Token-Integration

Verwendung

Installationsschritte

1. Installieren Sie design-system-patterns über Agent Skills Finder:

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

2. Überprüfen Sie die Hauptdateien:
   • SKILL.md für Übersicht und Nutzung
   • references/design-tokens.md für Token-Struktur und Benennung
   • references/theming-architecture.md für CSS-Custom-Properties und Theme-Wechsel
   • references/component-architecture.md für React-Komponentenmuster

Design Tokens: Erste Schritte

• Organisieren Sie Tokens in primitive, semantische und Komponenten-Kategorien
• Verwenden Sie JSON oder CSS-Custom-Properties für plattformübergreifende Token-Generierung
• Beispiel für eine Farb-Token-Struktur:

  {
    "color": {
      "primitive": { "gray": { "100": { "value": "#f5f5f5" } } } }
  }
  

Theming-Infrastruktur

• Implementieren Sie Theme-Wechsel mit CSS-Custom-Properties und [data-theme]-Selektoren
• Nutzen Sie React-Context-Provider für dynamisches Theme-Management
• Unterstützen Sie Systemeinstellungen (z. B. prefers-color-scheme)

Komponentenarchitektur-Muster

• Erstellen Sie Compound Components mit React Context für geteilten Zustand
• Wenden Sie polymorphe Muster (as Prop) für flexible Darstellung an
• Definieren Sie Varianten und Größen für skalierbare APIs

Anpassungshinweise

• Verwenden Sie die bereitgestellten Referenzen als Vorlagen, nicht als direkte Kopien
• Integrieren Sie Muster in Ihr eigenes Repository und passen Sie sie an Ihre Tech-Stack und Ihr Branding an

FAQ

Wo finde ich detaillierte Beispiele?

Im Ordner references/ finden Sie ausführliche Informationen zu Design Tokens, Theming und Komponentenarchitektur.

Ist design-system-patterns nur für React?

Viele Muster nutzen React Context, aber die Token- und Theming-Anleitungen sind plattformunabhängig und können auf andere Frameworks übertragen werden.

Wie kann ich die Struktur der Fähigkeit ansehen?

Öffnen Sie den Reiter "Files", um alle Dateien, einschließlich verschachtelter Referenzen und Hilfsskripte, zu inspizieren.

Wann ist design-system-patterns nicht geeignet?

Wenn Ihr Projekt keine skalierbaren Themes, Komponentenbibliotheken oder Design Token-Verwaltung benötigt, reichen einfachere UI-Lösungen möglicherweise aus.

Kann ich diese Fähigkeit für mobile Apps verwenden?

Ja, Design Tokens und Theming-Muster lassen sich für iOS- und Android-Plattformen anpassen.