Astryx - le système de design open source publié par Meta

• Basé sur React et StyleX, il se distingue par une personnalisation complète et une compatibilité avec les agents
• Il propose plus de 160 composants React compatibles avec l’accessibilité et l’application de thèmes de marque, ainsi qu’un système unifié regroupant mode sombre, modèles prêts à déployer immédiatement et CLI
• Développé en interne chez Meta au cours des 8 dernières années, il est devenu le système de design le plus utilisé et le plus vaste de l’entreprise, alimentant plus de 130 applications et affiné par les équipes d’ingénierie, de design et produit
• Prise en charge de nombreux thèmes, avec tous les design tokens — couleurs, espacements, radius, typographie, etc. — fournis sous forme de propriétés personnalisées CSS
• Via la ligne de commande ou MCP, il permet de générer le squelette d’un projet, d’explorer des modèles, de créer des thèmes et d’obtenir la documentation destinée aux agents, pour une intégration avec les outils de codage IA
  • En collant l’instruction d’installation initiale dans un outil de codage IA, l’exécution de npx astryx init configure automatiquement la documentation pour agent
• Open internals : les composants ne sont pas enfermés dans une API de haut niveau fermée et peuvent être composés à n’importe quel niveau, avec export direct des blocs de construction nécessaires
  • La fonctionnalité swizzle permet d’extraire tout le code source d’un composant dans le projet afin d’en prendre directement possession
• Aucun verrouillage de style : le style est écrit en interne avec StyleX mais cela n’est pas exposé à l’utilisateur, et des surcharges sont possibles via className avec Tailwind, CSS Modules ou du CSS classique
• Principe de guidage plutôt que contrainte : le composant restitue tel quel la valeur transmise, tandis que les choix de design sont inclus dans la documentation et les exemples
  • Tous les composants suivent les mêmes conventions de nommage, de props et de composition, et sont documentés, ce qui permet aussi bien aux humains qu’à l’IA de prévoir le comportement d’un composant inconnu
• La CLI sert de référence pour les composants, les tokens, les modèles et la documentation
  • npx astryx component (liste des composants), npx astryx docs (sujets de documentation), npx astryx template --list (modèles de pages), npx astryx docs tokens (référence des espacements/couleurs/radius)
• Architecture : organisation en 3 couches
  • Foundations : blocs de construction de la cohérence visuelle, comme la typographie, la couleur, la mise en page et l’accessibilité
  • Components : plus de 150 blocs UI réutilisables avec prise en charge complète de TypeScript
  • Patterns : solutions de conception éprouvées pour les pages de tableaux, les mises en page de pages de détail, les assistants de formulaires, la navigation et les flux de saisie de données
• Des modèles prêts pour la production dans lesquels il suffit d’ajouter le contenu, ainsi que des applications d’exemple complètes avec routage, thèmes et composants déjà connectés
• Licence MIT