Meta、AIが使えるデザイン公開

Metaは今週、Astryxをリリースしました。これは現在ベータ版のオープンソースのデザインシステムです。このプロジェクトはMetaのmonorepo内で8年かけて成長しました。AstryxはReactとStyleXを基盤として構築されています。StyleXはMetaのコンパイル時CSSエンジンです。TL;DR AstryxはMetaのオープンソースで、エージェント対応のReactデザインシステムであり、現在ベータ版です。StyleXのスタイリングとCSS変数によるテーマカスケード、そして10種類のテーマを組み合わせています。CLIとMCPサーバーにより、AIエージェントがUIをscaffold（骨組みを生成）し、document（文書化）できます。Meta社内では本番環境でテストされていますが、公開プロジェクトとしてはまだ新しいです。 どのようなAstryx Astryxはコンポーネントライブラリであり、その周辺システムです。基盤、コンポーネント、テンプレート、テーマを提供します。基盤には、typography（タイポグラフィ）、color（色）、layout（レイアウト）、accessibility（アクセシビリティ）が含まれます。公式リポジトリには90以上のReactコンポーネントが文書化されています。Metaのドキュメントサイトでは150以上とされています。コンポーネントには、組み込みのspacing（間隔）、dark mode（ダークモード）、柔軟なstyling（スタイリング）が付属しています。テンプレートは、ダッシュボード、設定、フォームのような完全なページを構成します。ライセンスはMITです。コードベースの約4分の3はTypeScriptで構成されています。 スタイリング層は理解する価値があります。StyleXはビルド時にスタイルを静的でatomicなCSSにコンパイルします。Metaは2023年末にStyleXをオープンソース化しました。これはFacebook、Instagram、WhatsApp、Threadsを支えています。FigmaやSnowflakeのような外部企業もこれを使用しています。2つのデザイン選択が際立っています。第一に、内部がオープンであること。すべてのprimitive（プリミティブ）はエクスポート可能で構成可能であり、隠されていません。あらゆるレベルで構成できます。第二に、spacing（間隔）が自動であること。Astryxはこれをcontext-aware spacing compensation（コンテキスト認識型間隔補正）と呼んでいます。これにより、手動での修正なしに「二重パディング」の問題を解消します。 「エージェント対応」の部分 これが他のデザインシステムとの主な違いです。AstryxはAIエージェントが読み取れるドキュメントとツールを提供します。コンポーネントには、composition（構成）のヒントを含むJSDocアノテーションが付与されています。CLIは開発者が使用するのと同じAPIを公開しています。また、MCPサーバーもあります。MCPはModel Context Protocolの略です。エージェントはこれを使用して、scaffold（骨組みを生成）、browse（閲覧）、document（文書化）を行います。CLIはastryxまたはsを介して呼び出されます。