6月27日、MarkTechPostが「Meta's Astryx Brings a CLI and MCP Server to an Open-Source React Design System Agents Can Read」と題した記事を公開した。MetaがReactベースのオープンソースデザインシステム「Astryx」をBeta版としてMITライセンスで公開し、AIエージェントが直接操作できるCLIとMCPサーバーを同梱した点が注目を集めている。
デザインシステムのOSS化は珍しくないが、Astryxが他と一線を画すのは「AIエージェントを使う開発者」ではなく「AIエージェントそのもの」を主体として設計されている点だ。GitHub CopilotやCursorといったAIコーディングアシスタントが急速に普及する中、UIコンポーネントの組み立てをエージェントに委ねる開発スタイルが現実的になりつつある。Metaはそのニーズに対し、社内で8年間運用してきた資産をそのままOSS化するという形で応えた。
AIエージェントがUIを組める設計思想
Astryxの最大の特徴は、AIエージェントを「一人前の開発者」として扱っている点だ。
一般的なデザインシステムのCLIは、人間が --help を読むことを前提に設計されている。Astryxは違う。CLIに astryx manifest --json を実行すると、全コマンド・引数・フラグ・レスポンス型を網羅した自己記述型のJSONマニフェストが返ってくる。元記事はこれを「CLIのためのOpenAPIスペック」と表現している。エージェントはヘルプテキストをスクレイピングする必要がなく、構造化されたペイロードを一度読むだけでよい。
npx astryx component Button # コンポーネントの完全なドキュメント取得
npx astryx template dashboard # フルページのソースを出力
npx astryx manifest --json # エージェント向け機械可読コマンドスペック
加えて、MCPサーバー（Model Context Protocol）も同梱する。MCPはAnthropicが策定したAIエージェントとツールの通信プロトコルで、エージェントがAstryxのコンポーネントをスキャフォールド・閲覧・ドキュメント化する際の構造化されたワークフローを提供する。「あとはエージェントがよしなに」ではなく、APIとして明示的に定義されているのが肝だ。
各コンポーネントにはJSDocアノテーションとコンポジションのヒントが付与されており、エージェントが「どのコンポーネントをどう組み合わせるか」を判断しやすい構造になっている。
8年間Metaのモノレポで育ったコンポーネント群
AstryxはMetaの社内モノレポで8年間開発されてきたプロジェクトだ。現在は1万3000以上のアプリに使われており、今週Beta版としてMITライセンスでOSS化された。
構成要素は以下の通りだ：
- Foundations：タイポグラフィ、カラー、レイアウト、アクセシビリティ
- Components：GitHubリポジトリには90以上、公式ドキュメントサイトには150以上が掲載
- Templates：ダッシュボード、設定画面、フォームなどのフルページ構成
- Themes：default、neutral、butter、chocolate、matcha、brutalist、y2kなど10種類
スタイリングエンジンにはStyleXを採用する。StyleXはMetaが2023年末にOSS化したコンパイル時CSSエンジンで、Facebook・Instagram・WhatsApp・Threadsを動かしている。FigmaやSnowflakeも外部ユーザーとして挙げられている。
コードベースの約4分の3がTypeScriptで書かれており、プリビルドされたCSSが同梱されているためビルドプラグインは不要だ。
テーマ切り替えとスペーシングの設計
テーマはCSSカスタムプロパティ（変数）のカスケードで実装されている。変数を差し替えるだけで全コンポーネントが一括でリスタイルされ、コンポーネント本体のコードには触れない。
もう一つ面白い設計が「コンテキストアウェアスペーシング補償（Context-Aware Spacing Compensation）」だ。パディングを持つボックスを別のパディングを持つボックスにネストすると、通常は余白が二重に積み重なる問題が起きる。Astryxはこれを自動で補正し、手動での修正が不要になる。
セットアップとコンポーネントの使い方
Next.js + Tailwindが推奨構成だ。
npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli
'use client';
import type { ReactNode } from 'react';
import { Theme } from '@astryxdesign/core/theme';
import { neutralTheme } from '@astryxdesign/theme-neutral/built';
export function Providers({ children }: { children: ReactNode }) {
return <Theme theme={neutralTheme}>{children}</Theme>;
}
import { Button } from '@astryxdesign/core/Button';
export default function Page() {
return <Button label="Hello XDS" variant="primary" />;
}
Tailwindブリッジにより、bg-surface のようなユーティリティクラスがシステムトークンに解決される。var(--...) を直接書く冗長さを避けられる。
コンポーネントを手元で編集したい場合は npx astryx swizzle Button でソースをイジェクトできる。shadcn/uiのコピーペースト方式に近い考え方だ。
他システムとの比較
元記事が掲載している比較表を整理する。
| 観点 | Astryx（Meta） | shadcn/ui | MUI |
|---|---|---|---|
| スタイリング | StyleX（コンパイル時アトミックCSS） | Tailwind + Radix | Emotionランタイム |
| テーマ | CSS変数カスケード、10テーマ | CSS変数を直接編集 | Themeオブジェクト |
| エージェント対応 | CLI + MCPサーバー + JSONマニフェスト | コンポーネント追加CLIのみ | なし |
| 成熟度 | Beta公開（社内8年） | 広く採用済み | 成熟・広く採用済み |
最も近い比較対象はshadcn/uiだ。コンポジション優先とCLIスキャフォールドの思想は共通するが、AstryxはStyleXエンジンとMCP対応で差別化している。
現時点の制約
- Beta版のため、APIやバージョンは変更される可能性がある
- CLIは現時点でv0.0.14と初期段階
- StyleXはTailwindより学習コストが高い
- Meta外での採用実績はまだない
リポジトリはGitHub、公式サイトはastryx.atmeta.comで公開されている。
詳細はMeta's Astryx Brings a CLI and MCP Server to an Open-Source React Design System Agents Can Readを参照していただきたい。
