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 倉庫或專案官網獲取更多資訊。