Index des design systems – Liens externes
Index de navigation vers les design systems publics des entreprises/communautés, pour référencer les tokens, composants et normes de DS existants.
⚠️ Ce skill est une couche d'index de ressources : il ne contient que des liens et une brève description, sans développer de méthodologie. L'architecture des tokens, la hiérarchie de nommage et les méthodes de déploiement multiplateforme sont traitées dans le skill
design-systemlocal – les deux skills ont des rôles distincts, rien n'est dupliqué ici.
Comment l'utiliser (progressive disclosure)
Ce SKILL.md est une couche d'index d'ordonnancement : 5 catégories listent chacune 2-3 entrées les plus classiques, avec une explication « de quoi il s'agit / quand la lire ». Pour une liste plus longue, suivez les indications pour lire le fichier references/<category>.md correspondant (une seule profondeur, pas d'imbrication supplémentaire).
Identifiez d'abord la catégorie ci-dessous, puis lisez la référence correspondante si nécessaire, pour éviter de tout charger en une seule fois.
Source des données : klaufel/awesome-design-systems + jbranchaud/awesome-react-design-systems.
Exemple de déclenchement : Consultez les design systems des grandes entreprises / Trouvez une bibliothèque de composants React / Outils et normes pour les design tokens / Choisissez un outil de pattern library.
Aperçu des catégories (identifiez d'abord, puis approfondissez)
Si vous hésitez, consultez d'abord ce tableau, puis accédez au fichier correspondant pour éviter de lire les 5 sections en entier :
| Votre besoin | À lire |
|---|---|
| Référencer un DS mature d'une grande entreprise | references/major-company-systems.md |
| Choisir une chaîne d'outils de design tokens / alignement sur la norme W3C | references/design-tokens.md |
| Mettre en place un environnement de développement de composants, un site de documentation, une pattern library | references/pattern-libraries.md |
| Choisir une bibliothèque de composants adoptable pour un projet React Web | references/react-ds-libraries.md |
| Choisir un kit d'outils UI pour un projet React Native | references/react-native-ds-libraries.md |
Limite : Si vous vous demandez « comment concevoir une architecture de tokens », ce n'est pas dans cet index – allez voir le skill
design-systemlocal ; si vous voulez « comment écrire des composants avec React », allez voirreact-best-practices; cet index ne répond qu'à la question « quels DS/bibliothèques existants puis-je référencer ou adopter ? »
Exemple de routage (comment fonctionne le progressive disclosure)
Utilisateur : « Aidez-moi à choisir une bibliothèque de composants React pour un back-office d'entreprise »
- Identifiez la catégorie → c'est la catégorie « Bibliothèques de design systems React », pas tokens / pattern library.
- Lisez d'abord les sélections de cette catégorie ci-dessous (Ant Design / MUI / Blueprint), la plupart du temps cela suffit pour répondre.
- Si vous voulez plus de candidats → lisez
references/react-ds-libraries.md; si encore insuffisant → accédez au répertoire awesome d'origine.- Une fois choisi, les détails de mise en œuvre sont confiés à
react-best-practices/frontend-design, pas dans cet index.
Design systems des principales entreprises
De quoi s'agit-il : Design systems complets et publics des grandes entreprises (tokens + composants + normes + documentation). Quand le lire : Pour référencer le DS d'une entreprise, choisir un système mature dont on peut s'inspirer, ou faire une veille concurrentielle sur les langages de design.
Sélection (les plus classiques) :
- Google Material Design - Le design system de Google pour des produits intuitifs et esthétiques.
- Microsoft Fluent UI - Le design system open-source multiplateforme de Microsoft (web/Apple/Android).
- IBM Carbon - Le design system open-source d'IBM pour ses produits et expériences.
→ Liste complète dans references/major-company-systems.md (Polaris, Atlassian, Lightning, Primer, Pajamas, Photon, Atlaskit + ressources DS générales).
Ressources sur les design tokens
De quoi s'agit-il : Outils de spécification, génération, conversion et synchronisation multiplateforme des design tokens. Quand le lire : Pour choisir une chaîne d'outils de tokens, s'aligner sur la norme W3C, extraire des tokens de Figma, ou distribuer des tokens sur plusieurs plateformes.
Sélection :
- Design Tokens W3C Community Group - Groupe communautaire W3C définissant une spécification de format pour les design tokens.
- Style Dictionary - Système de build d'Amazon pour définir les styles une fois et les utiliser sur n'importe quelle plateforme.
- Theo - Abstraction de Salesforce pour transformer et formater les design tokens.
→ Liste complète dans references/design-tokens.md (DesignTokens.dev, Diez, Figmagic, Superposition, Validator, Awesome Design Tokens, Abstract Connect, export Zeplin, etc.).
Ressources sur les pattern libraries
De quoi s'agit-il : Environnements de développement isolés pour les composants et outils d'orchestration de bibliothèque de patterns (type Storybook). Quand le lire : Pour mettre en place un environnement de développement de composants / un site de documentation / un workflow de design atomique, ou choisir une plateforme de collaboration documentaire.
Sélection :
- Storybook - Construisez des composants UI en isolation pour React, Vue, Angular et plus.
- Pattern Lab - Construisez des UI basées sur les patterns en utilisant les principes du design atomique.
- React Styleguidist - Environnement de développement de composants React isolé avec un guide de style vivant.
→ Liste complète dans references/pattern-libraries.md (Styled System, Stencil, Zeroheight, Backlight, Storybook DS, liste d'addons, etc.).
Bibliothèques de design systems React
De quoi s'agit-il : Bibliothèques de composants React / design systems d'entreprise prêts à l'emploi. Quand le lire : Pour choisir une bibliothèque de composants React pour un SaaS / back-office / dashboard, ou évaluer une solution DS d'entreprise.
Sélection :
- Ant Design - Ant Financial - design system pour applications d'entreprise (Nature & Determinacy).
- Material UI - Composants React implémentant le Material Design de Google.
- Blueprint - Palantir - kit d'outils UI basé sur React pour le web.
→ Liste complète dans references/react-ds-libraries.md (Grommet, Garden, Backpack, Ring UI, Canvas, Atlaskit, cf-ui, Mineral UI, Spark, Swarm, Uniform, Lightning React, etc. – 20+).
Bibliothèques de design systems React Native
De quoi s'agit-il : Kits d'outils UI multiplateforme prêts à l'emploi pour React Native. Quand le lire : Pour choisir une bibliothèque de composants aboutie pour une app RN, éviter de construire l'UI de zéro.
Sélection :
- React Native Elements - Kit d'outils UI React Native multiplateforme.
- React Native Paper - Composants React Native conformes au Material Design.
- NativeBase - GeekyAnts - composants UI multiplateforme essentiels pour React Native & Vue Native.
→ Liste complète dans references/react-native-ds-libraries.md (Shoutem UI, Teaset, etc.).
Pointeur vers le répertoire awesome général
Pour un répertoire complet et plus général de ressources awesome liées au design, consultez sindresorhus/awesome. Ce skill s'appuie principalement sur les deux listes suivantes :
- klaufel/awesome-design-systems — Répertoire principal des DS d'entreprise / tokens / pattern libraries.
- jbranchaud/awesome-react-design-systems — Répertoire principal des bibliothèques DS React / RN.
Skills locaux associés
Cet index ne s'occupe que de « quels DS existants peuvent être référencés / adoptés » ; la méthodologie et les détails d'implémentation sont confiés aux skills locaux suivants :
design-system— Architecture des tokens, hiérarchie de nommage, méthodologie de déploiement multiplateforme (backend méthodologique de cet index).react-native-skills— Modèles de composants et de styles React Native.react-best-practices/frontend-design— Implémentation React et frontend, détails de design.design-assets-index— Index des ressources de design (icônes, polices, illustrations, etc.).