meta/astryx — 人とAIエージェントの協働を想定したReact向けデザインシステム
meta/astryx
★ 20,450 ・ TypeScript ・ MIT
概要
Astryxは、Meta社内で過去8年間にわたって開発・運用され、13,000以上のアプリケーションで利用されてきたデザインシステムをオープンソース化したプロジェクトです。エンジニア、デザイナー、プロダクトチームによる実運用の知見が反映されており、150種類以上のアクセシブルなUIコンポーネント、ブランド単位のテーマ機能、ダークモード、テンプレート群、専用のCLIツールが一体となって提供されています。
本プロジェクトの大きな焦点は、人間だけでなくAIコーディングエージェントが一緒に開発を行う現代の開発スタイルへの適応です。事前にビルドされたCSSのインポートと型安全なReactコンポーネントを通じて利用でき、特定のビルドプラグインの導入を強制されない設計が採用されています。大規模な実環境で培われた設計規範を取り入れつつ、柔軟にカスタマイズ可能な基盤を構築したいWebアプリケーション開発者に向いています。
主な特徴
- オープンな内部構造とswizzle対応: コンポーネントは多層的に構成されており、上位レベルのAPIだけに縛られず内部要素を直接利用できます。さらに深くカスタマイズしたい場合は、swizzle機能によってコンポーネントの完全なソースコードを自身のプロジェクト内に展開して管理できます。
- スタイリングのロックインを回避: 内部の実装にはMetaが開発するStyleXが使用されていますが、利用側への影響は隠蔽されています。Tailwind CSS、CSS Modules、プレーンなCSSなど、プロジェクトが既存で採用している手法の
classNameを使った上書きに対応しています。 - ラッパー不要のテーマカスタマイズ: テーマ設定はCSSカスタムプロパティのオーバーライドとして定義されているため、コンポーネントのソースコードをフォークしたりラッパーコンポーネントを作成したりすることなく外観を調整できます。
- 人間とAIエージェントの双方に対応した設計: API設計、ドキュメント、CLIツールが一貫したルールのもとで整備されており、開発者とAIアシスタントが同一の参照情報とツール群を用いて実装を進められるよう配慮されています。
- 豊富なテーマプリセットと150以上のコンポーネント: 基本構成として150以上のコンポーネントに加え、neutral、butter、chocolate、matcha、stone、gothic、y2kといった7種類の定義済みテーマが用意されています。
使い方
動作要件とインストール
AstryxはReact 19以降を必須要件としています（reactおよびreact-domは@astryxdesign/coreのpeer dependenciesです）。
コアパッケージ、テーマパッケージ、StyleXをインストールし、開発用依存関係としてCLIを追加します。パッケージマネージャーに応じたコマンドは以下のとおりです。
# npm の場合
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli
# pnpm の場合
pnpm add @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
pnpm add -D @astryxdesign/cli
# yarn の場合
yarn add @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
yarn add -D @astryxdesign/cliまた、CLIツールはマシン全体でグローバルにインストールすることも推奨されています。これにより、任意のディレクトリでエージェントがコマンドを実行できるようになります（プロジェクト内ではローカルのバージョンが優先されます）。
npm i -g @astryxdesign/cliプロジェクトへの組み込みとスクリプト設定
最もシンプルなセットアップでは、PostCSSやBabelなどのビルドプラグイン設定を行わずに、事前ビルドされたCSSのインポートとテーマプロバイダーの配置のみで導入が可能です。詳細な手順（Next.js、Tailwind、Vite、CDNなどの構成）は@astryxdesign/coreのREADMEで案内されています。
人間とAIアシスタントの双方がCLIを安全に呼び出せるよう、package.jsonのscriptsにコマンドを登録しておく方法が推奨されています。
"scripts": {
"astryx": "node node_modules/@astryxdesign/cli/clients/cli/bin/astryx.mjs"
}登録後は、以下のように実行してコンポーネントの一覧表示などを行えます。
npm run astryx -- component --listパスの直接指定をラップすることで、実行環境によるパス解決エラーを防ぐことができます。
技術的なポイント
パッケージ構成とレイヤー設計
Astryxはモノレポ構造で管理されており、公開パッケージは責務ごとに分離されています。
@astryxdesign/core: コンポーネント本体、テーマシステム、ユーティリティを含む中核パッケージ。@astryxdesign/cli: ドキュメント参照、テンプレート展開、スキャフォールディング、コードモッドなどのCLIツール。@astryxdesign/build: StyleXのソースコードビルドを行うためのビルドプラグイン群。@astryxdesign/theme-*: プリセットテーマ群。
実験的コンポーネントを扱う@astryxdesign/labは内部用（Storybookやサンドボックス向け）のためnpmには非公開です。また、チャート関連パッケージ（@astryxdesign/vega、@astryxdesign/charts）は現時点では@canaryディストリビューションタグのみで配信されています。
アーキテクチャの3階層
リポジトリ内では、UIの構成要素を3つの段階に分類しています。
- Foundations（基礎）: タイポグラフィ、カラー、レイアウト、アクセシビリティといった視覚的統一感と利用しやすさの土台。
- Components（コンポーネント）: TypeScriptを完全サポートした150以上の再利用可能なUIパーツ。
- Patterns（パターン）: テーブル表示画面、詳細ページレイアウト、フォームウィザード、ナビゲーション、データ入力フローなど、実環境で検証された典型的な画面構成パターン。
実装方針と設計原則
READMEに示されている原則として「強制よりもガイダンス（Guidance over enforcement）」が掲げられています。コンポーネント側で厳格な制限を課すのではなく、ドキュメントや規約によって正しい利用を促す思想です。すべてのコンポーネントで命名規則、propsの渡し方、合成（コンポジション）のルールが共通化されており、未知のコンポーネントであっても人間とAI双方が挙動を推測しやすい設計になっています。
注意点
- 開発ステータス: 本プロジェクトは現在「Beta（ベータ版）」として提供されています。APIや仕様に変更が入る可能性があります。
- React 19+ の要求: 利用にはReact 19以降が必要です。既存のReact 18以前の環境にそのまま導入することはできません。
- チャートパッケージの安定性: Vega/Vega-Liteラッパーおよびチャートコンポーネントはcanary版のみの公開であり、安定版（stable release）は未リリースです。
- コントリビューション時の要件: 本リポジトリの開発環境はNode 22以降（active LTSライン）およびpnpm 11が指定されています。
- ライセンス: MITライセンスのもとで公開されています。
まとめ
Astryxは、Meta社内の13,000を超えるアプリで培われた実績を背景に持つ、React 19ベースのオープンソースデザインシステムです。150以上のコンポーネントと柔軟なテーマ機構を備え、特定のスタイリング手法に依存せず導入できる柔軟性を確保しています。コーディングエージェントとの協働を見据えたCLIと一貫した規約が整備されており、次世代の開発ワークフローに適したUI基盤を検討する際の有力な選択肢となります。
