Meta 發佈開源 React 設計系統 Astryx，提供 CLI 和 MCP 服務器，AI Agent 可直接使用

Meta 本週正式發佈了 Astryx，這是一個全新的開源設計系統，目前處於 Beta 階段。該項目在 Meta 內部已經發展了八年，如今以 MIT 許可證公開。Astryx 基於 React 和 StyleX——Meta 自家的編譯時 CSS 引擎構建，旨在為開發者提供一套全面且易於擴展的 UI 組件庫。

Astryx 不僅僅是一個組件庫，它涵蓋了從基礎設計元素到完整頁面模板的方方面面。系統提供了排版、色彩、佈局和無障礙訪問等基礎規範，以及超過 90 個 React 組件（官方文檔站點列出超過 150 個）。所有組件都內置了間距、暗黑模式支持和靈活的樣式定製能力。此外，Astryx 還提供了儀表盤、設置頁、表單等完整頁面模板，方便開發者快速搭建應用。

Astryx 最大的亮點是其對 AI Agent 的原生支持。它配備了一個命令行界面（CLI）和一個 MCP 服務器。CLI 可以通過 astryx 或 xds 調用，支持組件文檔查詢、模板生成等功能。更重要的是，CLI 能夠返回一個自描述的 JSON 清單，列出所有命令、參數、標誌和響應類型——這類似於 OpenAPI 規範，使得 AI Agent 無需解析幫助文本即可直接使用。MCP 服務器則進一步讓 Agent 能夠以結構化方式瀏覽、搭建和編寫文檔。

主題系統是 Astryx 的另一大特色。它提供了 10 種預置主題，包括默認、中性、日常、黃油、巧克力、抹茶、石頭、哥特、粗野主義和 Y2K。所有主題都基於 CSS 變量級聯實現——只需更改變量，所有組件就能自動重新樣式化，無需修改組件代碼。這種機制讓多品牌場景下的主題切換變得極其簡單。

在架構上，Astryx 強調開放和可組合。所有基礎元素都被導出，開發者可以在任意層級進行組合。當內置組件無法滿足需求時，可以通過 CLI 的 'swizzle' 命令將組件源碼導出到項目中直接編輯。此外，Astryx 提供了自動間距補償功能，解決了多層嵌套容器導致的“雙重內邊距”問題。

Astryx 的安裝和上手非常簡單。推薦在 Next.js 項目中使用 Tailwind CSS，Astryx 提供預構建的 CSS 文件，無需額外配置構建插件。安裝核心包和主題包後，通過 Theme Provider 包裹應用即可使用所有組件。Astryx 還提供了 Tailwind 橋接，將設計標記映射為 Tailwind 工具類，避免冗長的 var() 語法。

Astryx 的主要使用場景包括內部儀表盤、Agent 構建的 UI 以及多品牌產品。在內部儀表盤場景中，開發者可以快速搭建評估或監控視圖；Agent 可以通過 CLI 和 MCP 服務器結構化地搭建設置頁面；多品牌產品則可以藉助主題級聯輕鬆切換品牌風格。

與 shadcn/ui 和 MUI 等流行設計系統相比，Astryx 的獨特優勢在於：StyleX 編譯時 CSS 引擎帶來的高性能、Agent 就緒的工具鏈、自動間距補償以及開放的架構。但作為 Beta 項目，Astryx 的 API 可能還會變化，CLI 版本目前僅 0.0.14，StyleX 的學習曲線也比 Tailwind 更陡峭。此外，組件數量在倉庫和文檔站點之間存在不一致，且外部採用情況尚待驗證。

總體而言，Astryx 代表了 Meta 在開源設計系統領域的最新嘗試，特別適合需要 AI Agent 協助開發、多主題或多品牌的應用場景。開發者可以訪問 GitHub 倉庫或項目官網獲取更多信息。