Astryx: Metas Open-Source-Designsystem mit über 150 Komponenten, anpassbar und KI-Agenten-tauglich

Meta hat das Designsystem Astryx als Open Source veröffentlicht, das auf React und StyleX basiert und über 150 Komponenten umfasst. Derzeit in der Beta-Phase, wird es bereits von mehr als 13.000 Apps intern bei Meta genutzt und wurde über acht Jahre von Entwicklern, Designern und Produktteams geformt.

Wichtige Funktionen aus der Quelle

• Komponentenanzahl: 150+ barrierefreie, thematisierbare React-Komponenten mit integrierten Abständen, Dark Mode und flexiblem Styling.
• CLI- und MCP-Unterstützung: Projekte erstellen, Vorlagen durchsuchen, Themes generieren und agentenfertige Dokumentation über die Kommandozeile oder das Model Context Protocol (MCP) abrufen.
• Anpassbares Theming: Mit gebrauchsfertigen Themes starten und ohne großen Aufwand anpassen.
• Produktionsreife Vorlagen: Vorlagen für gängige Seiten – einfach die eigenen Inhalte einfügen.
• Erstellt mit StyleX: Metas eigener CSS-in-JS-Ansatz, der jetzt ebenfalls Open Source ist und Laufzeit-freies Styling bietet.

Praktische Details von der Website

Die Landingpage zeigt eine vollständige E-Commerce-Benutzeroberfläche: Bestandsverwaltung mit Filtern (Kategorien, Standorte, Tags), einen Live-Chat-Agenten für Bestellverfolgung und Retouren, einen Warenkorb mit Versandarten sowie ein Umsatz-Dashboard. Das Designsystem umfasst Komponenten wie Badge, Checkbox, Switch, Buttons, Cards und mehr, die alle im Komponenten-Explorer einsehbar sind.

Mit der CLI lassen sich Themes generieren und Projekte erstellen. Für die Agentenintegration bietet Astryx MCP-Server-Unterstützung: KI-Coding-Agenten können Komponenten durchsuchen, Themes generieren und Dokumentation direkt von der Kommandozeile abrufen.

Astryx ist unter einer freizügigen Lizenz (MIT oder ähnlich, siehe Repository) als Open Source verfügbar. Das Projekt ist unter astryx.atmeta.com erreichbar. Nach der Installation des Pakets kann die CLI gestartet werden:

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

Diese Befehle sind aus der Website-Beschreibung abgeleitet; die genaue Syntax kann variieren.

Für wen es geeignet ist

Entwickler, die React-Anwendungen erstellen und ein kampferprobtes Designsystem mit KI-Agenten-Integration für schnelles Prototyping und den Produktionseinsatz benötigen.