[TOOLS] 3 分鐘閱讀OraCore 編輯部

Meta 開源 Astryx 設計系統

Meta 將內部使用 8 年、支援 13,000+ 應用的 Astryx 設計系統開源,主打 React、StyleX 與 AI agent 友善工作流。

分享 LinkedIn
Meta 開源 Astryx 設計系統

Meta 將內部使用 8 年、支援 13,000+ 應用的 Astryx 設計系統開源,主打 React、StyleX 與 AI agent 友善工作流。

Meta 釋出 Astryx,這套以 React 和 StyleX 打底的設計系統目前仍在 beta。它把元件、主題、CLI 和範本整合成單一工具包,目標同時服務工程師與 AI 助手。

官方說法是,Astryx 已在 Meta 內部跑了 8 年,累積支援 13,000+ 個 app。這次開源後,外部團隊可以直接看見它如何處理主題、可及性、模板化與自動化生成。

項目數值
內部支援 app13,000+
元件數150+
主題數7
GitHub stars1.6k
Forks88
最新版本v0.1.2

發生了什麼

訂閱 AI 趨勢週報

每週精選模型發布、工具應用與深度分析,直送信箱。不定期,不騷擾。

不會寄垃圾信,隨時可取消。

facebook/astryx 現在已公開,MIT 授權可直接取用。專案包含 150+ 個 typed React components、7 套主題、dark mode、模板,以及可用來 scaffold 元件和主題的 CLI。

Meta 開源 Astryx 設計系統

Meta 把 Astryx 定位成「fully customizable」與「agent ready」的系統。這代表文件、API 與 CLI 都朝同一套使用方式設計,讓人類開發者和 AI 工具能沿著同一條路徑產出 UI。

它也刻意避開樣式綁死。團隊可用 className、Tailwind、CSS modules 或純 CSS 覆寫樣式,主題則透過 CSS custom properties 調整,不必包一層或 fork 整個元件庫。

目前 repo 已有約 1.6k stars、88 forks,最新版是 2026 年 6 月 29 日釋出的 v0.1.2。對一個剛開源的內部設計系統來說,這個起點不小,但距離成熟生態還有一段路。

  • React + StyleX 為核心
  • 150+ accessible components
  • 7 套主題:neutral、butter、chocolate、matcha、stone、gothic、y2k
  • 基本使用不需要 build plugin

為什麼重要

對前端團隊來說,Astryx 提供的是一個可參考的「大規模設計系統」樣本。它把元件、文件、codemods、模板與建置工具放在一起,能降低導入成本,也比較容易維持設計與程式碼的一致性。

Meta 開源 Astryx 設計系統

和許多只強調視覺規範的系統相比,Astryx 更像是為生產線設計的工具箱。團隊如果已經用 React,能更快評估它是否適合做跨產品的 UI 標準,尤其是需要大量主題切換或品牌客製的場景。

它對 AI coding 工具也有實際意義。當文件、API、CLI 的結構一致時,助手更容易照著既有模式生成或修改介面,減少生成碼和人工碼之間的落差。

對產業來說,Meta 這次不是只丟出一個元件庫,而是把內部標準包成可外部檢驗的基礎設施。接下來要看的,不是它有多大,而是有多少團隊真的會拿它來做下一個產品介面。

問題很直接:Astryx 會成為 AI 輔助 UI 開發的參考框架,還是只是一套名字很大、但只有少數 React 團隊會真正採用的設計系統?