Astryxは、Meta(旧Facebook)がオープンソース化したデザインシステムで、現在ベータ版です。社内で8年間にわたって開発・使用され、13,000以上のアプリケーションで採用されたMeta最大のデザインシステムです。ReactとStyleXをベースに、150以上のアクセシブルなコンポーネント(公式サイトでは160以上)、ブランドレベルでのテーマ設定、ダークモード、すぐに使えるテンプレート、CLIを一つのパッケージとして提供します。ビルドプラグインやスタイリングライブラリの追加導入は不要で、プリビルドCSSと型付きReactコンポーネントをインポートするだけで利用開始できます。
Astryxの設計思想は、動作と外観の分離にあります。多くのデザインシステムでは、大企業のシステムを採用するとアプリの見た目が他社製品と似てしまうか、コピペ可能なコンポーネントを使うとプロジェクトごとに断片化し、アクセシビリティやメンテナンス性が問題になります。Astryxは、動作・アクセシビリティ・品質をシステム側で制御し、外観はCSSカスタムプロパティ(トークン)によるテーマでカスタマイズすることでこのトレードオフを解消します。デザイナーはコンポーネントのソースを編集することなく、トークンレベルで色、タイポグラフィ、角丸、動きなどを変更できます。
アーキテクチャは3層で構成されています。基礎(Foundations)はタイポグラフィ、色、レイアウト、アクセシビリティのプリミティブ。コンポーネント(Components)は150以上の再利用可能なブロックで、すべてTypeScriptに対応。パターン(Patterns)はテーブルページ、詳細レイアウト、フォームウィザードなど実戦で鍛えられたワークフローソリューションです。特筆すべき設計上の特徴として、コンポーネントは任意のレベルで合成可能であり、必要に応じて「swizzle」機能でコンポーネントの完全なソースをプロジェクトに取り込めます。スタイリングはStyleXで作成されていますが、コンシューマーからは隠蔽されており、classNameを使ってTailwindやCSS Modules、プレーンCSSでオーバーライド可能です。
MetaはAstryxをエージェント(AIエージェント)向けに設計したと強調しています。コード生成がAIによって行われる時代に合わせて、API、規約、ドキュメント、CLIは人間とAIの両方が同じように使えるよう一貫性を持って設計されています。CLI(@astryxdesign/cli)はテンプレートの一覧表示・スキャフォールディング、コンポーネントドキュメントの出力、テーマの生成とビルド、バージョン移行のコードモッド、MCP経由での機械可読ドキュメント提供をコマンドラインから行えます。
導入にはReact 19.0.0以上とStyleXが必要です。プリビルドCSSを同梱しているため、PostCSSやBabelの設定は不要。Next.js(TailwindまたはStyleX)、Vite、およびCDN(unpkg/jsDelivr)によるビルド不要のパスをサポートします。現在ベータ版ですが、MITライセンスで公開されており、GitHubから入手できます。