Metaが公開：AIと組み合わせて使えるデザイン部品集

MetaがオープンソースのデザインシステムAstryxをGitHubで公開しました。TypeScript製で、現時点で4,400以上のスターを集めています。

一般的なデザインシステム（UI部品集）との違いは、リポジトリの説明にある「agent ready」という一言に凝縮されています。従来のデザインシステムは「人間が部品を選んで組み合わせる」ことを前提に設計されていました。AstryxはAIエージェントがUIを自律的に組み立てることを前提に、部品の構造・命名・インターフェースが整理されています。

注目したいのは、この設計思想が今のバイブコーディングの流れと直結している点です。CursorやClaude Codeでコードを生成するとき、AIが「どんな部品が使えるか」を正確に把握できるかどうかが、生成物の質を左右します。AIが読みやすいように設計された部品集を渡すことで、「LP一式作って」「管理画面の雛形を出して」といった大きな指示に対しても、AIがより的確なコードを返しやすくなります。

バイブコーディングでよくある壁は、AIが生成するコードの「見た目のバラつき」です。ボタンのサイズ、余白の基準、カラーの使い方がセクションごとにズレていく。これはAIが毎回その場でスタイルを「考えて」しまうことが原因のひとつです。

デザインシステムを先に渡しておくことで、この問題を減らせます。「このコンポーネント群を使って、以下の要件のLPを作って」と指示すれば、AIはゼロからスタイルを考えるのではなく、決まったルールの中で組み合わせを選ぶだけになります。結果として、デザインの一貫性が保ちやすくなります。

Astryxがこの用途で有効かどうかは、実際にCursorやClaudeのコンテキストに読み込ませて試す必要がありますが、「agent ready」を明示的に設計方針に掲げているデザインシステムはまだ少なく、この点での先行事例として注目する価値があります。Metaという発信元のブランド力も、今後の対応ツール・エコシステムの広がりを考える上で無視できません。

なお、チームでClaude Codeを使うなら、ゲートウェイを立てるで触れたように、AIコーディングをチームで使う場面が増えるほど「共通の入力（コンテキスト）をどう揃えるか」が問題になってきます。デザインシステムの共有もその一環として位置づけられます。