Meta、社内1.3万アプリを支えるデザインシステム「Astryx」をオープンソース化

Astryxは、Metaがオープンソースとして公開したフロントエンドデザインシステムだ。社内で8年にわたり磨き上げられ、社内1万3000以上のアプリケーションを支えてきた実績を持つ。最大の特徴は、人間のエンジニアとAIコーディングエージェントが全く同じ作法でUIを構築できるように設計されている点だ。

ライセンスはMITで、現在はベータ版として提供されている。React 19以降とStyleXをベースに構築されており、150以上のアクセシブルなコンポーネント、7種類のプリセットテーマ、ダークモード、テンプレート、そして専用のCLIツールが一体となって提供される。

何ができるのか

従来のコンポーネントライブラリは、厳密すぎて柔軟性に欠けるか、特定のスタイリング手法を強制されることが多かった。Astryxはその両方を回避している。

内部的にはStyleXでスタイルが記述されているが、利用者はビルドプラグインや専用ローダーを意識する必要がない。ビルド済みCSSをインポートするだけで、TailwindやCSSモジュール、通常のCSSによるclassNameでの上書きがそのまま機能する。

コンポーネントをさらに深くカスタマイズしたい場合は、CLIのswizzleコマンドを利用できる。コンポーネントのソースコードを自身のプロジェクト内にそのまま展開し、自前で完全に管理することが可能だ。

テーマ設定はCSSカスタムプロパティで完結する。neutral、butter、chocolate、matchaなど7種類のテーマが用意されており、コンポーネントをフォークすることなく外観を切り替えられる。

導入方法とAIエージェントの活用

動作環境としてReact 19以上が必要で、開発にはNode 22以降とpnpm 11が推奨されている。

導入は、コアパッケージの@astryxdesign/coreとテーマパッケージ、StyleXのピア依存関係をインストールし、テーマプロバイダーで囲むだけで済む。ビルド設定の変更は不要だ。

AIエージェントとの親和性も高い。専用CLIである@astryxdesign/cliを導入することで、Claude CodeやCursorなどのAIエージェントがドキュメントやコンポーネント定義を直接参照し、正確にコードを生成できる。

すべてのコンポーネントが統一された命名規則とプロパティ設計に従っているため、AIにとっても人間にとっても振る舞いが予測しやすい設計になっている。

ただし現在はベータ段階であり、チャート関連のコンポーネントはcanaryタグでの配信にとどまり、実験的コンポーネントもnpmには未公開となっている。

なぜ重要か

React 19を採用する新規プロジェクトや、日常的にAIアシスタントを活用してコードを書く開発者にとって、Astryxは有力な選択肢になる。単なる見た目のUIキットではなく、Metaの大規模運用で実証された設計思想をそのまま活用できるのが強みだ。

shadcn/uiやMUIと比べても、高いアクセシビリティとAIフレンドリーな規約の統一感が際立っている。一方で、React 19が必須であるため既存アプリへの導入ハードルは高く、公開されたばかりでコミュニティ事例がまだ少ない点には留意したい。