Astryx : le système de design open source de Meta avec plus de 150 composants, personnalisable et prêt pour l'IA

Meta a open-sourcé Astryx, un système de design basé sur React et StyleX avec plus de 150 composants. Actuellement en version bêta, il alimente déjà plus de 13 000 applications en interne chez Meta, façonné pendant huit ans par des ingénieurs, designers et équipes produit.

Principales fonctionnalités de la source

• Nombre de composants : 150+ composants React accessibles et personnalisables avec espacement intégré, mode sombre et style flexible.
• Support CLI et MCP : Scaffoldez des projets, parcourez des templates, générez des thèmes et obtenez une documentation prête pour les agents depuis la ligne de commande ou via le Model Context Protocol (MCP).
• Personnalisation des thèmes : Commencez avec des thèmes prêts à l'emploi et adaptez-les sans repartir de zéro.
• Templates prêts pour la production : Des templates pour les pages courantes — il suffit d'ajouter votre contenu.
• Construit avec StyleX : La propre solution CSS-in-JS de Meta, désormais open source également, offrant un style sans exécution.

Détails pratiques du site

La page d'accueil présente une interface e-commerce complète : gestion d'inventaire avec filtres (catégories, emplacements, tags), un agent de chat en direct qui gère le suivi des commandes et les retours, un panier avec méthodes d'expédition, et un tableau de bord des revenus. Le système de design inclut des composants comme Badge, Checkbox, Switch, Buttons, Cards, et plus encore, tous visibles dans l'explorateur de composants.

Le CLI peut être utilisé pour générer des thèmes et scaffolder des projets. Pour l'intégration d'agents, Astryx supporte le serveur MCP, permettant aux agents de codage IA de parcourir les composants, générer des thèmes et récupérer la documentation directement depuis la ligne de commande.

Astryx est open source sous une licence permissive (MIT ou similaire, vérifiez le dépôt). Le projet est disponible sur astryx.atmeta.com. Vous pouvez commencer par exécuter le CLI après avoir installé le package :

npm install astryx
npx astryx init --template default
npx astryx theme generate --brand-color #3355FF
npx astryx agent setup --mcp

Ces commandes sont déduites de la description du site ; la syntaxe exacte peut varier.

À qui cela s'adresse

Aux développeurs construisant des applications React qui ont besoin d'un système de design éprouvé avec intégration d'agents IA pour le prototypage rapide et l'utilisation en production.