Astryx、エージェント対応のオープンソースデザインシステム

493文字
2分
編集
#React#Astryx

Meta のデザインシステム Astryx は、GitHub 上で MIT ライセンスのオープンソースとして公開されており、npm から @astryxdesign/core ほかのパッケージが初めて配布された。社内モノレポで8年間運用し、Meta 内の1万3000超アプリで使われてきた基盤・コンポーネント・テンプレート・テーマを、React と StyleX 上で外部からも組み立てられる。人間と AI エージェントが同じ CLI と MCP サーバー経由で参照できる点を前面に出している。現時点はベータである。

#構成と差別化

Astryx の公開パッケージは次のとおりである。

  • @astryxdesign/core: コンポーネント、テーマシステム、ユーティリティ
  • @astryxdesign/cli: コンポーネント文書、テンプレート、スキャフォールド、テーマ生成、codemod
  • @astryxdesign/build: StyleX ソースビルド向けプラグイン
  • @astryxdesign/theme-*: default、neutral、daily、butter など10種のテーマ

実験用の @astryxdesign/lab と Storybook 向けの @astryxdesign/vega は npm 未公開で、内部利用に留まる。

プリミティブは隠さずエクスポートし、任意の粒度で合成できる。コンテキストに応じた余白補正で二重 padding を抑え、CSS 変数カスケードによるテーマ切替に対応する。90超の React コンポーネントは TypeScript 対応で、ダークモードと組み込み spacing を持つ。表ページ、詳細ページ、フォームウィザードなどのパターンと、本番向けページテンプレートも同梱される。

#エージェント向けツール

JSDoc に合成ヒントを載せ、CLI と MCP サーバーからコンポーネント文書の参照、テンプレート閲覧、テーマ生成、プロジェクトのスキャフォールドができる。CLI は npm run xds -- component --list のように package.json の scripts 経由で呼ぶと、パス解決の失敗を避けやすい。

最小構成の導入例は次のとおりである。

bash
pnpm add @astryxdesign/core @astryxdesign/theme-neutral
pnpm add -D @astryxdesign/cli

Next.js と Tailwind では、Astryx が配布する CSS を @layer 順に import し、Theme プロバイダと LinkProvider をアプリルートに置く。StyleX 利用時は pre-built CSS を import するだけで、追加のビルドプラグインは不要である。

#成熟度

リポジトリは pnpm 10 と Corepack で開発し、Storybook とドキュサイト（apps/）を同梱する。旧称 XDS から Astryx へリネームされ、facebookexperimental/xds から facebook/astryx へ移った。npm では @astryxdesign/core 0.1.0 が初の安定版タグとして公開されている。

#参考文献