Index externer Links zu Designsystemen
Navigationsindex mit externen Links zu öffentlichen Designsystemen von Unternehmen / Communities – als Referenz für Design Tokens, Komponenten und Spezifikationen vorhandener DS.
⚠️ Dieses Skill ist eine Ressourcen-Index-Schicht: Es enthält nur Links und eine kurze Beschreibung, keine Methodik. Token-Architektur, Benennungshierarchie und plattformübergreifende Umsetzung finden Sie im lokalen
design-systemSkill – beide Skills haben separate Aufgaben, hier gibt es keine Wiederholungen.
Nutzung (progressive Offenlegung)
Dieses SKILL.md ist die Dispatcher-Index-Schicht: 5 Kategorien mit je 2-3 klassischen Einträgen, versehen mit „Was ist das / Wann lesen“. Für eine umfangreichere Liste lesen Sie das entsprechende references/<category>.md (eine Ebene tief, keine weitere Verschachtelung).
Bestimmen Sie zunächst anhand der Kategorien unten, welche Sie benötigen, und lesen Sie dann die entsprechende Referenz – vermeiden Sie das gleichzeitige Laden aller Inhalte.
Datenquellen: klaufel/awesome-design-systems + jbranchaud/awesome-react-design-systems.
Beispielauslöser: Designsysteme großer Unternehmen referenzieren / React-Komponentenbibliothek auswählen / Design-Token-Tools und Spezifikationen / Pattern-Library-Tool auswählen.
Kategorien-Schnellübersicht (zuerst einordnen, dann vertiefen)
Wenn Sie unsicher sind, prüfen Sie diese Tabelle und vertiefen Sie sich dann in die entsprechende Datei, um das gleichzeitige Lesen aller 5 Teile zu vermeiden:
| Ihr Anliegen | Gehen Sie zu |
|---|---|
| Referenz eines etablierten Unternehmens-DS | references/major-company-systems.md |
| Auswahl der Design-Token-Toolchain / Ausrichtung an W3C-Spezifikation | references/design-tokens.md |
| Aufbau einer Komponentenentwicklungsumgebung, Dokumentationsseite, Pattern Library | references/pattern-libraries.md |
| Auswahl einer verwendbaren Komponentenbibliothek für React-Webprojekte | references/react-ds-libraries.md |
| Auswahl eines UI-Toolkits für React Native-Projekte | references/react-native-ds-libraries.md |
Abgrenzung: Für die Frage „Wie gestalte ich die Token-Architektur?“ – nicht in diesem Index – gehen Sie zum lokalen
design-systemSkill. Für „Wie schreibe ich React-Komponenten?“ gehen Sie zureact-best-practices. Dieser Index beantwortet nur „Welche bestehenden DS/Bibliotheken gibt es als Referenz oder zur Übernahme?“.
Routenbeispiel (Wie progressive Offenlegung funktioniert)
Benutzer: „Hilf mir, eine React-Komponentenbibliothek für ein Enterprise-Backend auszuwählen.“
- Kategorie zuordnen → das ist die Kategorie „React Designsystem-Bibliotheken“, nicht Tokens / Pattern Library.
- Zuerst die untenstehende Auswahl dieser Kategorie lesen (Ant Design / MUI / Blueprint) – in den meisten Fällen bereits ausreichend.
- Bei Bedarf nach weiteren Kandidaten →
references/react-ds-libraries.mdlesen; immer noch nicht genug → zum ursprünglichen awesome-Verzeichnis springen.- Nach der Auswahl wird die Implementierung an
react-best-practices/frontend-designübergeben – hier nicht weiter ausgeführt.
Designsysteme großer Unternehmen
Was ist das: Vollständige, öffentliche Designsysteme großer Unternehmen (Token + Komponenten + Spezifikation + Dokumentation). Wann lesen: Wenn Sie das DS eines Unternehmens referenzieren, ein etabliertes System zur Inspiration auswählen oder eine Design-Sprach-Wettbewerbsanalyse durchführen möchten.
Auswahl (Klassiker):
- Google Material Design – Googles Designsystem für intuitive, schöne Produkte.
- Microsoft Fluent UI – Microsofts quelloffenes, plattformübergreifendes Designsystem (Web/Apple/Android).
- IBM Carbon – IBMs quelloffenes Designsystem für Produkte und Erlebnisse.
→ Vollständige Liste in references/major-company-systems.md (Polaris, Atlassian, Lightning, Primer, Pajamas, Photon, Atlaskit + allgemeine DS-Ressourcen).
Design-Token-Ressourcen
Was ist das: Tools für Spezifikation, Generierung, Konvertierung und plattformübergreifende Synchronisation von Design Tokens. Wann lesen: Bei der Auswahl einer Token-Toolchain, der Ausrichtung an der W3C-Spezifikation, dem Extrahieren von Tokens aus Figma oder der plattformübergreifenden Token-Verteilung.
Auswahl:
- Design Tokens W3C Community Group – W3C-Community-Gruppe, die eine Spezifikation für das Format von Design Tokens definiert.
- Style Dictionary – Amazons Build-System, um Styles einmal zu definieren und auf jeder Plattform zu verwenden.
- Theo – Salesforces Abstraktion zur Transformation und Formatierung von Design Tokens.
→ Vollständige Liste in references/design-tokens.md (DesignTokens.dev, Diez, Figmagic, Superposition, Validator, Awesome Design Tokens, Abstract Connect, Zeplin-Export usw.).
Pattern-Library-Ressourcen
Was ist das: Tools zur isolierten Komponentenentwicklung und zum Aufbau von Pattern Libraries (Storybook-ähnlich). Wann lesen: Beim Aufbau einer Komponentenentwicklungsumgebung / Dokumentationsseite / eines Atomic-Design-Workflows oder der Auswahl einer Dokumentationskollaborationsplattform.
Auswahl:
- Storybook – Isolierte Entwicklung von UI-Komponenten für React, Vue, Angular und mehr.
- Pattern Lab – Erstellen von pattern-getriebenen UIs mit Atomic-Design-Prinzipien.
- React Styleguidist – Isolierte React-Komponentenentwicklungsumgebung mit einem lebenden Styleguide.
→ Vollständige Liste in references/pattern-libraries.md (Styled System, Stencil, Zeroheight, Backlight, Storybook DS, Addons-Liste usw.).
React-Designsystem-Bibliotheken
Was ist das: Direkt einsatzbereite React-Komponentenbibliotheken / Enterprise-Designsysteme. Wann lesen: Bei der Auswahl einer React-Komponentenbibliothek für SaaS / Backend / Dashboard oder der Bewertung von Enterprise-DS-Übernahmemöglichkeiten.
Auswahl:
- Ant Design – Ant Financial – Designsystem für Unternehmensanwendungen (Natur & Determiniertheit).
- Material UI – React-Komponenten, die Googles Material Design implementieren.
- Blueprint – Palantir – React-basiertes UI-Toolkit für das Web.
→ Vollständige Liste in references/react-ds-libraries.md (Grommet, Garden, Backpack, Ring UI, Canvas, Atlaskit, cf-ui, Mineral UI, Spark, Swarm, Uniform, Lightning React und 20+ weitere).
React Native-Designsystem-Bibliotheken
Was ist das: Plattformübergreifende, sofort einsatzbereite UI-Toolkits für React Native. Wann lesen: Bei der Auswahl einer fertigen Komponentenbibliothek für eine RN-App, um UI-Entwicklung von Grund auf zu vermeiden.
Auswahl:
- React Native Elements – Plattformübergreifendes React Native UI-Toolkit.
- React Native Paper – Material Design-konforme React Native-Komponenten.
- NativeBase – GeekyAnts – essenzielle plattformübergreifende UI-Komponenten für React Native & Vue Native.
→ Vollständige Liste in references/react-native-ds-libraries.md (Shoutem UI, Teaset usw.).
Awesome-Gesamtverzeichnis-Zeiger
Ein umfassenderes awesome-Design-Gesamtverzeichnis finden Sie unter sindresorhus/awesome. Dieses Skill wurde hauptsächlich aus den folgenden beiden Quellen destilliert:
- klaufel/awesome-design-systems – Mutterverzeichnis für Unternehmens-DS / Tokens / Pattern Library.
- jbranchaud/awesome-react-design-systems – Mutterverzeichnis für React / RN DS-Bibliotheken.
Verwandte lokale Skills
Dieser Index ist nur für die Frage „Welche bestehenden DS gibt es als Referenz / zur Übernahme?“ zuständig. Methodik und Implementierungsdetails finden Sie in den folgenden lokalen Skills:
design-system– Token-Architektur, Benennungshierarchie, plattformübergreifende Umsetzungsmethodik (der Methodik-Backend dieses Index).react-native-skills– React Native-Komponenten und Style-Muster.react-best-practices/frontend-design– React- und Frontend-Implementierung, Design-Umsetzungsdetails.design-assets-index– Index der Design-Ressourcen (Symbole, Schriftarten, Illustrationen usw.).