Astryx - Metaが公開したオープンソースデザインシステム

• ReactとStyleX ベースで、完全なカスタマイズとエージェント対応が特徴
• アクセシビリティとブランドテーマ適用に対応した 160以上のReactコンポーネントを備え、ダークモード、すぐにデプロイ可能なテンプレート、CLIを1つの統合システムとして提供
• Meta内部で過去 8年間 成長し、最も多く使われ、最大規模となったデザインシステムで、13,000以上のアプリを動かし、エンジニア／デザイナー／プロダクトチームによって磨き込まれてきた
• 色／間隔／radius／タイポグラフィなど、すべてのデザイントークンをCSSカスタムプロパティとして提供する複数テーマをサポート
• コマンドラインまたは MCP を通じて、プロジェクトのスキャフォールディング、テンプレート探索、テーマ生成、エージェント向けドキュメント取得が可能で、AIコーディングツールと連携
  • AIコーディングツールに初期インストール指示文を貼り付けると、npx astryx init の実行によりエージェント用ドキュメントを自動設定
• 開かれた内部構造（Open internals）: コンポーネントは閉じた最上位APIに閉じ込められず、どのレベルでも組み合わせ可能で、必要なビルディングブロックを直接export
  • swizzle 機能により、コンポーネントの全ソースをプロジェクトに抽出して自分で所有可能
• スタイリングの依存（ロックイン）なし: 内部的にはStyleXでスタイルを記述するが、ユーザーには表に出ず、className を通じてTailwind/CSS modules/plain CSSでオーバーライド可能
• 強制ではなく能力を提供する ガイダンス優先（Guidance over enforcement） の原則 - 値を渡すとコンポーネントはそのままレンダリングし、デザイン上の見解はドキュメントと例に含まれる
  • すべてのコンポーネントが同じ命名／prop／組み合わせルールに従い文書化されているため、人間とAIのどちらも未知のコンポーネントの動作を予測可能
• CLI がコンポーネント／トークン／テンプレート／ドキュメント参照の役割を担う
  • npx astryx component（コンポーネント一覧）、npx astryx docs（ドキュメントトピック）、npx astryx template --list（ページテンプレート）、npx astryx docs tokens（間隔／色／radius参照）
• アーキテクチャ: 3階層構成
  • Foundations: タイポグラフィ、色、レイアウト、アクセシビリティなど、視覚的一貫性のためのビルディングブロック
  • Components: 完全なTypeScriptサポートを備えた150以上の再利用可能なUIビルディングブロック
  • Patterns: テーブルページ、詳細ページレイアウト、フォームウィザード、ナビゲーション、データ入力フローなど、検証済みの設計ソリューション
• コンテンツを入れるだけでよいプロダクション対応テンプレートと、ルーティング／テーマ／コンポーネントが連携した完全なサンプルアプリを提供
• MITライセンス