大廠內部用了8年的設計系統，終於開源了
整理版優先睇
Meta 內部用了8年的設計系統 Astryx 開源，主打完全可自訂、人機共用
「設計系統」呢個詞，大家都聽過，但係喺開源社區入面揀設計系統，成日會遇到一個問題：封裝太死。想改組件內部邏輯，就要 fork、wrap 或者提 issue 等作者心情好。呢篇文章介紹咗一個叫 Astryx 嘅開源項目，出自 Meta 手筆，係佢哋內部用咗 8 年嘅設計系統，最近終於放咗上 GitHub。作者整理咗呢個系統嘅幾個核心特點，包括組件拆到最底、樣式唔綁死、改主題唔使 fork，仲有一個好前衞嘅定位——人類同 AI 一齊用。對開發者嚟講，呢個係一個值得留意嘅設計系統，因為佢經歷過 Meta 13,000+ app 嘅實際考驗，而且係 MIT 授權，可以免費商用。
呢篇文章嘅角度似係產品介紹，重點喺點解 Astryx 同其他設計系統唔同。佢最吸引人之處就係「完全可自訂」，唔會俾人一種「組件唔係你嘅」嘅感覺。同時，佢嘅 API、文檔同 CLI 都係為咗人類同 AI 助手一齊設計，換句話講，將來用 AI 寫代碼或者開發界面，呢套系統會更加配合。上手門檻亦都好低，安裝兩個 npm 包，幾行 CSS 就得，支援 Next.js、Tailwind、Vite、CDN 等等。雖然而家仲係 Beta，但佢嘅成熟度嚟自 Meta 內部八年嘅實戰，唔係普通社區項目可以比擬。
整體嚟講，Astryx 嘅開源對設計系統生態係一個好消息，尤其係對於想深度自訂又唔想維護太多代碼嘅團隊。佢提供咗一個平衡點：保留官方嘅穩定性，同時開放源碼同工…
- Astryx 係 Meta 內部用咗 8 年、驅動 13,000+ app 嘅設計系統，最近開源，MIT 授權商用免費。
- 組件拆到最底：所有子組件直接 export，swizzle 命令一鍵 eject 完整源碼，從此嗰個組件就係你嘅。
- 樣式唔綁死：內部用 StyleX 但對外透明，可以用 Tailwind、CSS modules 或純 CSS 覆蓋；改主題只需改 CSS 自定義屬性。
- 核心定位係人機共用：API、文檔、CLI 同時為人類同 AI 助手設計，Claude Code / Cursor / Codex 用同一份文檔。
- 上手簡單：兩個 npm 包加幾行 CSS，支援 Next.js / Tailwind / Vite / CDN；架構分 Foundations、Components、Patterns 三層，有 Meta 八年經驗沉澱。
Astryx GitHub 項目
Meta 開源設計系統 Astryx 的官方 GitHub 儲存庫
好煩：設計系統成日「封裝太死」
「設計系統」呢個詞，大家都聽過啦？但係喺開源社區揾到嘅設計系統，成日都有一個通病：封裝太死，想改內部邏輯，要麼 fork、要麼 wrap、要麼提 issue 等作者心情好。
封裝太死
最近 Meta 開源咗一個叫 Astryx 嘅設計系統，係佢哋內部用咗 8 年、驅動住 13,000+ 個 app 嗰套。佢嘅定位係「完全可自訂，而且係為人類同 AI 一齊工作而設」。
Meta 內部用咗 8 年
呢套系統唔係玩具，佢經歷過每日數億用戶級產品嘅真實驗證。
每日數億用戶級產品
四個核心特點：點解咁唔同？
真正令 Astryx 突出嘅，係以下四件事。
- 組件拆到最底：每一個子組件都直接 export，swizzle 命令一鍵將完整源碼 eject 入你個項目，嗰個組件從此就係你嘅。
- 樣式唔綁死：內部用 StyleX，但對消費者完全透明。你想用 Tailwind、CSS modules 定純 CSS，直接傳 className 就得。
- 改主題唔使 fork：改一組 CSS 自定義屬性就搞掂，唔使改源碼、唔使包多層組件。
- 人類同 AI 一齊用：API、文檔、CLI 係為人和 AI 助手一齊設計，Claude Code / Cursor / Codex 用同一份文檔。
組件拆到最底
樣式唔綁死
改主題唔使 fork
包生態同快速上手
Astryx 有 150+ 組件、4 個 npm 包、7 套現成主題，由冷淡到甜酷都有。
150+ 組件
- @astryxdesign/core —— 組件、主題系統、工具集
- @astryxdesign/cli —— CLI：組件文檔、模板、scaffolding、主題、codemods
- @astryxdesign/build —— StyleX 構建插件
- @astryxdesign/theme-* —— 7 套現成主題
安裝好簡單，兩個 npm 包搞掂：
npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli幾行 CSS 引入 + ThemeProvider，冇 build plugin、冇 PostCSS、冇 Babel 配置。
冇 build plugin、冇 PostCSS、冇 Babel 配置
支援 Next.js / Tailwind / Vite / CDN，仲有 Storybook 在線 demo + Sandbox playground，唔使本地起環境都可以摸熟。
Storybook 在線 demo + Sandbox playground
三層架構：Meta 累積嘅經驗
Astryx 架構分三層：Foundations（字體 / 顏色 / 佈局 / 可訪問性）、Components（150+ 組件）、Patterns（表格頁 / 詳情頁 / 表單嚮導 / 導航模式 / 數據錄入流）。
Foundations、Components、Patterns
其中 Patterns 層就係 Meta 八年踩出嚟嘅坑，直接套用可以慳返好多時間。
Patterns 層
雖然 Astryx 仲係 Beta，但佢已經承擔咗 Meta 內部 13,000+ app 嘅一致性 8 年，有真實規模嘅考驗。MIT 協議，商用免費。
MIT 協議，商用免費
大廠內部用咗8年嘅設計系統，終於開源喇
「設計系統」呢個詞，聽過嚇嘛？
總之公司入面想統一 UI，第一反應就係去開源社區揾一圈——Material UI、Ant Design、Chakra UI、shadcn/ui，揀一個啱用嘅就直接用。
但係用嚇用嚇就會發現一個共通問題：封裝得太死。
想改組件嘅內部邏輯？唔好意思，一係 fork、一係 wrap、一係開 issue 等作者心情好。個組件唔係你嘅，你只係用嚇咋。
最近喺 GitHub 見到一個叫 Astryx 嘅開源項目，Meta 出品。
佢係 Meta 內部用咗 8 年嘅設計系統，驅動住 13,000+ 個 Meta 內部 app最近終於由 Meta 內部搬咗去 GitHub。
一個完全可自訂嘅開源設計系統，為咗我哋而家嘅開發方式而設：由人同埋喺側邊一齊做嘢嘅 agents 一齊用。
真正令佢同其他設計系統唔同嘅，係呢 4 件事。
第一，組件拆到最盡。 人哋畀你一個封裝好嘅 <Button>，Astryx 畀你嘅係 Button 入面所有積木——每一個子組件都直接 export 出嚟。如果想再深入啲，用 swizzle 指令一鍵將組件嘅完整源碼 eject 去你項目入面由呢一刻開始，嗰個組件就係你嘅，想點改就點改。
第二，樣式唔會被綁死。 Astryx 內部用 Meta 自研嘅 StyleX 寫樣式，但呢件事對使用者完全透明你想用 Tailwind、CSS modules 定純 CSS 覆蓋？直接傳 className 就行，唔會有 build plugin 強加畀你。
第三，改主題唔使 fork。 設計師想將 Astryx 染成自己品牌顏色？唔使改源碼，唔使包多一層組件。改一組 CSS 自訂屬性就搞掂。
第四，人類同 AI 一齊用。 呢個係 Astryx 嘅核心定位——API、文檔、CLI 係為咗人同 AI 助手一齊設計嘅同一份參考、同一套工具，Claude Code / Cursor / Codex 叫佢，同人類叫佢，用嘅係同一份文檔。
150+ 組件 / 4 個 npm 包 / 7 套現成主題——中性、butter、chocolate、matcha、stone、gothic、y2k，由冷淡到甜酷都有。
套件生態係咁樣：
• @astryxdesign/core—— 組件、主題系統、工具集• @astryxdesign/cli—— CLI：組件文檔、模板、scaffolding、主題、codemods• @astryxdesign/build—— StyleX 建置插件• @astryxdesign/theme-*—— 7 套現成主題
上手都好簡單。
npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli幾行 CSS 引入 + ThemeProvider，冇 build plugin、冇 PostCSS、冇 Babel 配置Next.js / Tailwind / Vite / CDN 全部支援。
Storybook 線上 demo + Sandbox playground + 完整文檔，掂一遍組件庫都唔使喺本地起環境。
架構分 3 層：Foundations（字體 / 顏色 / 佈局 / 可達性）→ Components（150+ 組件）→ Patterns（表格頁 / 詳情頁 / 表單精靈 / 導航模式 / 數據輸入流程）——人哋踩過嘅坑 Meta 都已經踩過，Patterns 嗰一層就係人哋 8 年踩出嚟嘅經驗。
Astryx 仲係 Beta 版，但佢已經承擔咗 Meta 內部 13,000+ app 嘅一致性 8 年即係話佢經受過每日數億用戶級產品嘅真實驗證，唔係社區玩具。
MIT 授權，商用免費。
GitHub 項目地址：https://github.com/facebook/astryx
今日嘅分享到呢度為止，多謝大家抽空閲讀，我哋下期再見，Respect！
大廠內部用了8年的設計系統，終於開源了
"設計系統"這詞，聽過吧？
但凡公司裏想統一 UI，第一反應就是去開源社區翻一圈——Material UI、Ant Design、Chakra UI、shadcn/ui，挑一個能用的直接上。
但用着用着就會發現一個共同的問題：封裝太死。
想改個組件的內部邏輯？不好意思，要麼 fork、要麼 wrap、要麼提 issue 等作者心情好。組件不是你的，你只是用一下。
最近在 GitHub 上看到一個叫 Astryx 的開源項目，Meta 出品。
它是 Meta 內部用了 8 年的設計系統，驅動着 13,000+ 個 Meta 內部 app。最近終於從 Meta 內部搬到了 GitHub 上。
An open source design system that's fully customizable and built for how we build now: by people and the agents working alongside them.
真正讓它跟其他設計系統不一樣的是這 4 件事。
第一，組件拆到底。 別人給你一個封裝好的 <Button>，Astryx 給你的是 Button 裏所有的積木——每一個子組件都直接 export 出來。要是想再深入，swizzle 命令一鍵把組件的完整源碼 eject 到你項目裏。從今往後那個組件就是你的，想怎麼改怎麼改。
第二，樣式不被綁死。 Astryx 內部用 Meta 自研的 StyleX 寫樣式，但這件事對消費者完全透明。你想用 Tailwind、CSS modules 還是純 CSS 覆蓋？直接傳 className 就行，不會有 build plugin 強加給你。
第三，改主題不用 fork。 設計師想給 Astryx 染成自家品牌色？不用改源碼不用包一層組件。改一組 CSS 自定義屬性就完事。
第四，人類和 AI 一起用。 這是 Astryx 的核心定位——API、文檔、CLI 是為人和 AI 助手一起設計的。同一個參考、同一套工具，Claude Code / Cursor / Codex 調它，跟人調它，用的是同一份文檔。
150+ 組件 / 4 個 npm 包 / 7 套現成主題——中性、butter、chocolate、matcha、stone、gothic、y2k，從冷淡到甜酷都有。
包生態長這樣：
• @astryxdesign/core—— 組件、主題系統、工具集• @astryxdesign/cli—— CLI：組件文檔、模板、scaffolding、主題、codemods• @astryxdesign/build—— StyleX 構建插件• @astryxdesign/theme-*—— 7 套現成主題
上手也簡單。
npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli幾行 CSS 引入 + ThemeProvider，沒有 build plugin、沒有 PostCSS、沒有 Babel 配置。Next.js / Tailwind / Vite / CDN 全支持。
Storybook 在線 demo + Sandbox playground + 完整文檔，摸一遍組件庫不用本地起環境。
架構 3 層：Foundations（字體 / 顏色 / 佈局 / 可訪問性）→ Components（150+ 組件）→ Patterns（表格頁 / 詳情頁 / 表單嚮導 / 導航模式 / 數據錄入流）——別人踩過的坑 Meta 都已經踩過，Patterns 那一層就是別人 8 年踩出來的經驗。
Astryx 還是 Beta 版，但它已經承擔了 Meta 內部 13,000+ app 的一致性 8 年。這意味着它經受過每天數億用戶級產品的真實驗證，不是社區玩具。
MIT 協議，商用免費。
GitHub 項目地址：https://github.com/facebook/astryx
今天的分享到此結束，感謝大家抽空閲讀，我們下期再見，Respect！