Astryx von Meta bringt einen CLI- und MCP-Server in ein Open-Supply-React-Design-System, das Agenten lesen können

Meta veröffentlicht Astryx diese Woche. Es handelt sich um ein Open-Supply-Designsystem, das sich derzeit in der Betaphase befindet. Das Projekt wuchs innerhalb von Metas Monorepo über acht Jahre. Astryx basiert auf React und StyleX. StyleX ist Metas CSS-Engine zur Kompilierungszeit.

TL;DR

• Astryx ist Metas Open-Supply-Agenten-fähiges React-Designsystem, jetzt in der Beta-Part.
• Es kombiniert StyleX-Stil mit einer CSS-variablen Theme-Kaskade und zehn Themes.
• Ein CLI- und MCP-Server ermöglicht es KI-Agenten, Benutzeroberflächen zu erstellen und zu dokumentieren.
• Es ist innerhalb von Meta produktionserprobt, aber als öffentliches Projekt noch jung.

Was ist Astryx?

Astryx ist eine Komponentenbibliothek und ein System darum herum. Es bietet Grundlagen, Komponenten, Vorlagen und Themen. Die Grundlagen umfassen Typografie, Farbe, Format und Zugänglichkeit. Das offizielle Repository dokumentiert mehr als 90 React-Komponenten. Die Dokumentenseite von Meta umfasst über 150. Die Komponenten werden mit integriertem Abstand, Dunkelmodus und flexiblem Stil geliefert. Vorlagen bilden ganze Seiten wie Dashboards, Einstellungen und Formulare. Die Lizenz ist MIT. TypeScript macht etwa drei Viertel der Codebasis aus.

Es lohnt sich, die Styling-Ebene zu verstehen. StyleX kompiliert Stile zur Erstellungszeit in statisches, atomares CSS. Meta-Open-Supply-StyleX Ende 2023. Es unterstützt Fb, Instagram, WhatsApp und Threads. Auch externe Unternehmen wie Figma und Snowflake nutzen es.

Zwei Designoptionen stechen hervor. Zunächst sind die Innenteile offen. Alle Grundelemente werden exportiert und sind zusammensetzbar, nicht ausgeblendet. Sie können auf jedem Niveau komponieren. Zweitens erfolgt der Abstand automatisch. Astryx nennt dies kontextsensitive Abstandskompensation. Es eliminiert Probleme mit der doppelten Auffüllung ohne manuelle Korrekturen.

Der „Agent Prepared“-Teil

Dies ist der Hauptunterschied zu anderen Designsystemen. Astryx liefert Dokumente und Instruments, die KI-Agenten lesen können. Komponenten tragen JSDoc-Anmerkungen mit Kompositionshinweisen. Eine CLI stellt dieselbe API bereit, die ein Entwickler verwendet. Es gibt auch einen MCP-Server. MCP ist das Mannequin Context Protocol. Agenten nutzen es zum Gerüstbauen, Durchsuchen und Dokumentieren.

Der CLI wird über aufgerufen astryx oder die Kurzschrift xds. Eine Funktion ist für die Automatisierung wirklich wichtig. Die CLI gibt ein selbstbeschreibendes Manifest als JSON zurück. Es listet jeden Befehl, jedes Argument, jedes Flag und jeden Antworttyp auf. Vergleich mit einer OpenAPI-Spezifikation für die CLI. Ein Agent muss additionally nicht kratzen --help Textual content. Stattdessen wird eine strukturierte Nutzlast gelesen.

npx astryx part Button        # full docs for a part
npx astryx template dashboard      # emit full web page supply
npx astryx manifest --json         # machine-readable command spec

Themes und die CSS-Variablenkaskade

Astryx liefert zehn vorgefertigte Themes. Sie heißen „Default“, „Impartial“, „Day by day“, „Butter“, „Chocolate“, „Matcha“, „Stone“, „Gothic“, „Brutalist“ und „Y2K“. Alle sind vollständig anpassbar. Beim Theming wird eine Kaskade von CSS-Variablen verwendet. Sie ändern die Variablen und jede Komponente wird neu gestaltet. Der Komponentencode bleibt unberührt.

Die interaktive Demo unten zeigt dies direkt. Wählen Sie ein Thema und sehen Sie sich die Token-Aktualisierung dwell an.

import {Button} from '@astryxdesign/core/Button';
import {Badge} from '@astryxdesign/core/Badge';

export default perform Toolbar() {
  return (
    <div>
      <Button label="Save" variant="major" />
      <Badge>Beta</Badge>
    </div>
  );
}

# get the true part supply to edit in your repo
$ npx astryx swizzle Button

# then import your native copy as a substitute of the bundle
import {Button} from './elements/Button';

# set up core, a theme, and the CLI
npm set up @astryxdesign/core @astryxdesign/theme-neutral
npm set up -D @astryxdesign/cli

// suppliers.tsx — wrap your app as soon as
'use consumer';
import kind {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/constructed';

export perform Suppliers({kids}: {kids: ReactNode}) {
  return <Theme theme={neutralTheme}>{kids}</Theme>;
}

npm set up @astryxdesign/core @astryxdesign/theme-neutral
npm set up -D @astryxdesign/cli

Wrap your app within the Theme supplier.

'use consumer';
import kind {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/constructed';

export perform Suppliers({kids}: {kids: ReactNode}) {
  return <Theme theme={neutralTheme}>{kids}</Theme>;
}

import {Button} from '@astryxdesign/core/Button';

export default perform Web page() {
  return <Button label="Howdy XDS" variant="major" />;
}