Astryx：Metaのオープンソースデザインシステム、150以上のコンポーネント搭載、カスタマイズ可能かつAIエージェント対応

Metaは、ReactとStyleX上に構築された150以上のコンポーネントを備えたデザインシステムAstryxをオープンソース化しました。現在ベータ版ですが、Meta社内ではすでに13,000以上のアプリで使用されており、8年間にわたってエンジニア、デザイナー、プロダクトチームによって形作られてきました。

主な機能（ソースより）

• コンポーネント数：150以上のアクセシブルでテーマ対応のReactコンポーネント。組み込みのスペーシング、ダークモード、柔軟なスタイリングを備えています。
• CLI & MCPサポート：コマンドラインまたはModel Context Protocol（MCP）経由で、プロジェクトのスキャフォールディング、テンプレートの閲覧、テーマの生成、エージェント対応ドキュメントの取得が可能。
• カスタマイズ可能なテーマ：既製のテーマから始めて、ゼロから作り直すことなく適応できます。
• プロダクション対応テンプレート：よくあるページ用のテンプレートを用意。コンテンツを差し込むだけです。
• StyleXで構築：Meta独自のCSS-in-JSソリューションもオープンソース化されており、ランタイム不要のスタイリングを実現します。

サイトからわかる実用的な詳細

ランディングページでは、完全なeコマースUIがデモンストレーションされています。フィルター（カテゴリー、場所、タグ）付きの在庫管理、注文追跡と返品を処理するライブチャットエージェント、配送方法を備えたショッピングカート、収益ダッシュボードなどです。デザインシステムには、バッジ、チェックボックス、スイッチ、ボタン、カードなどのコンポーネントが含まれており、コンポーネントエクスプローラーですべて確認できます。

CLIを使用してテーマの生成やプロジェクトのスキャフォールディングが可能です。エージェント統合のために、AstryxはMCPサーバーをサポートしており、AIコーディングエージェントがコマンドラインから直接コンポーネントの閲覧、テーマの生成、ドキュメントの取得を行えます。

Astryxは寛容なライセンス（MITまたは類似、リポジトリを確認）のもとでオープンソース化されています。プロジェクトはastryx.atmeta.comで利用可能です。パッケージをインストールした後、CLIを実行して開始できます：

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

これらのコマンドはサイトの説明から推測したもので、実際の構文は異なる場合があります。

対象者

Reactアプリケーションを開発していて、迅速なプロトタイピングとプロダクション利用のために、実戦で検証されたAIエージェント統合デザインシステムを必要とする開発者向けです。