Astryx : le design system de Meta, pensé pour l'IA

Un design system utilisé en interne chez Meta pendant huit ans vient d'être ouvert à tout le monde. Il s'appelle Astryx, il est sous licence MIT, et le dépôt compte déjà 17 391 stars sur GitHub, dont environ 6 125 gagnées sur les 7 derniers jours. Derrière le buzz, une question simple pour une entreprise : comment construire des interfaces propres, cohérentes et accessibles sans repartir de zéro à chaque projet ?

Un design system, c'est une boîte à outils commune : des boutons, des formulaires, des tableaux, des couleurs et des règles, déjà dessinés et déjà codés. Ton équipe assemble au lieu de réinventer. Astryx est l'une de ces boîtes, avec un angle précis : elle est pensée pour que les personnes et les assistants IA de code travaillent avec la même référence.

Pourquoi c'est utile

• Gain de temps sur l'écran standard. Selon le README, Astryx fournit plus de 150 composants accessibles, du mode sombre et des modèles de pages prêts à l'emploi.
• Une identité visuelle maîtrisée. Un thème se règle avec des variables CSS : un designer peut habiller le système à vos couleurs sans toucher au code des composants.
• Pas d'enfermement technique. Tu peux surcharger les styles avec Tailwind, des modules CSS ou du CSS classique, selon ce que ton projet utilise déjà.
• Compatible avec les assistants IA de code. Le projet fournit un outil en ligne de commande qui donne aux assistants la documentation des composants, pour qu'ils construisent comme un développeur de l'équipe.
• Licence libre. MIT : usage commercial autorisé, pas d'abonnement à payer pour la bibliothèque elle-même.

Ce que contient Astryx

Le README décrit trois étages. Les fondations posent la typographie, la couleur, la mise en page et l'accessibilité. Les composants sont les briques réutilisables, écrites en TypeScript. Les patterns sont des solutions toutes faites pour les situations courantes : page de tableau, fiche détail, formulaire en plusieurs étapes, navigation.

Ce n'est pas un projet de week-end. Le README indique qu'Astryx a grandi chez Meta pendant huit ans et qu'il y alimente plus de 13 000 applications. Ce chiffre vient du projet lui-même, nous ne l'avons pas vérifié de façon indépendante. Il dit surtout que l'outil a été éprouvé sur des cas très variés avant d'être publié.

Sept thèmes prêts à l'emploi sont livrés, avec des noms comme neutral, butter, chocolate, matcha, stone, gothic ou y2k. C'est un bon point de départ pour tester un rendu avant de payer un designer pour un thème sur mesure.

Comment ça marche

Côté équipe technique, la mise en route est courte. Astryx demande React 19 ou plus. On installe le paquet principal, un thème et une dépendance de style, puis on ajoute quelques imports CSS et un fournisseur de thème. Le README précise qu'il n'y a pas de plugin de build à configurer. Des guides existent pour Next.js, Vite, Tailwind et un usage par CDN.

L'outil en ligne de commande sert aussi de documentation vivante. Il liste les composants, fournit des modèles et peut générer des squelettes. Le README recommande de l'installer aussi sur la machine, pour que les assistants de code de chaque développeur connaissent Astryx dans n'importe quel dossier.

Autre idée intéressante : la commande « swizzle ». Quand un composant ne suffit plus, elle copie son code source dans ton projet. Tu en deviens propriétaire et tu le modifies librement. C'est une sortie de secours utile quand une demande métier sort du cadre.

Ce que ça change pour une équipe ou une PME

Prends une PME qui développe un portail client, un back-office et une application interne. Sans système commun, chaque écran est dessiné et codé à part : les boutons diffèrent, l'accessibilité est inégale, et chaque évolution coûte du temps. Avec Astryx, les trois outils partagent les mêmes briques et le même thème. Un changement de couleur ou de logo se règle à un seul endroit.

Pour une équipe qui utilise déjà un assistant IA pour coder, l'intérêt est encore plus net. L'assistant dispose d'une documentation structurée et de conventions homogènes. Le README le résume ainsi : chaque amélioration pensée pour l'IA a aussi servi les humains. À toi de vérifier sur ton propre cas si le gain est réel.

Attention à ne pas confondre : Astryx ne remplace ni un designer, ni un développeur. Il enlève le travail répétitif, pas la réflexion sur ce que ton produit doit faire.

À savoir avant de te lancer

Le projet est honnête sur son état : il est affiché comme en version bêta. Les règles peuvent bouger d'une version à l'autre, ce qui compte si tu comptes bâtir un produit critique dessus.

Autres limites relevées dans le README :

• React 19 minimum. Si ton application est bâtie sur une technologie différente, ou sur une ancienne version de React, Astryx n'est pas pour toi sans migration.
• Graphiques pas encore stables. Les paquets de graphiques ne sont publiés que sous une étiquette de test (« canary »), sans version stable.
• Composants expérimentaux non publiés. Le paquet « lab » reste interne et n'est pas distribué.
• Il faut des développeurs. Ce n'est pas un outil sans code. Un dirigeant seul ne l'installera pas, il faut une équipe technique ou un prestataire de confiance côté développement.
• Des chiffres à relativiser. Les stars montrent l'intérêt du moment, pas la solidité en production. Teste sur un petit projet avant de généraliser.

Pour qui c'est

• Les équipes produit et les développeurs qui bâtissent plusieurs interfaces en React et veulent un socle commun plutôt que des composants disparates.
• Les PME avec un portail client ou un outil interne, qui veulent un rendu professionnel et accessible sans équipe design dédiée.
• Les équipes qui codent avec un assistant IA et cherchent des conventions claires pour obtenir un résultat cohérent.
• Les designers, qui peuvent personnaliser l'apparence par thème sans dépendre d'un fork du code.

Bottom line

Astryx apporte à toutes les équipes React une boîte à outils éprouvée dans une très grande entreprise, avec une licence libre et une vraie attention portée aux assistants IA. Le revers est tout aussi clair : c'est une bêta, elle demande React 19 et elle s'adresse à des équipes techniques. Le bon réflexe consiste à l'essayer sur un écran ou un outil interne, puis à décider. Le repo est ici : github.com/meta/astryx, avec la documentation, le Storybook et un bac à sable en ligne pour tester sans rien installer.