エージェント対応のデザインシステム Astryx（Meta）を Claude Code / Codex に入れる手順と、読めているかの確認質問
部品のpropsを推測させず、CLIとMCPで本物のドキュメントを読ませる。最後に「答えられるか」の質問で設定を確かめる。
どんな問題を解決するか / いつ使うか
React 19 以上のプロジェクトで、エージェントに「AIっぽくない」一貫したUIを作らせたいとき。Astryx は Meta が公開したオープンソースのデザインシステム（React 19＋StyleX、150以上のアクセシブルな部品、ダークモード、7つのテーマ、Storybook・サンドボックス付き、MITライセンス、ベータ）。AI向けのCLIとMCPサーバーを持つのが特徴。
関連: デザインシステムMCPは「目隠しエージェント」で監査する：推測させず、作らせて、型チェックする、ガイド：AIエージェントに守らせるデザインシステム・DESIGN.md
手順（紹介投稿の流れを要約）
- プロジェクトのフォルダで Claude Code を開く。
- 「
@astryxdesign/cliをインストールしてastryx init --features agentsを実行し、生成されたファイルを読んで」と頼む。 - CLAUDE.md に、部品の索引・CLIの使い方・禁止事項（生のdivを使わない、インラインスタイル禁止、マジックナンバー禁止）が書き込まれる。
- ページ作成はいつも同じ順番：
astryx build "<作りたいもの>"でテンプレートを選ぶ →astryx templateで骨組み →astryx componentでpropsを読む。 - ドキュメントをその場で引かせたいなら、MCPサーバーを
.mcp.jsonに追加する。 - Codex など他のエージェントは、同じMCPをリモートMCPとして登録するか、
--agent codex付きで init して汎用の AGENTS.md を書かせる。 - 確認質問：「Buttonのimportパスは？ Dialogを閉じられないようにするには？」と聞き、答えられなければ設定が読み込まれていない。
注意点
- ベータ版。コマンド名・オプションは紹介投稿の時点のもので、導入時は公式リポジトリで最新を確認する。
- 部品があっても、配色・トンマナをそのまま採用すると「Astryxっぽい画面」になる。テーマとトークンは自分の製品に合わせる。
- 手順7の「答えられるか確認」は、他のデザインシステムやMCPでも使える汎用の確かめ方。