Day 315 · 2026-11-10

Meta 開源自家的設計系統 Astryx

Meta 今年 6 月 18 日把內部用了八年的 design system（設計系統）開源了，名字叫 Astryx。Meta 內部有一萬三千多個 app 在用它，到今天 GitHub 上已經有兩萬兩千顆星左右。

它的 GitHub 說明頁第一句就寫，它是做給「人，以及跟人一起工作的 agent」（也就是 AI 助手）用的。對想用 AI 開發產品、但不是設計師出身的人來說，這代表以後不用再花那麼多力氣，跟 AI 一句一句描述介面該長什麼樣子。

這篇分享：design system 是什麼、為什麼它對用 AI 做產品的人特別重要。

沒有 design system，同一個產品看起來像兩家公司做的

你可以把它想成一盒樂高零件，再加一本說明書。

零件就是網站或 app 上一再出現的東西：按鈕、輸入框、下拉選單、對話框、表格。說明書則規定這些零件怎麼用——主色是哪個顏色、字要多大、零件之間要留多少間距、按鈕什麼時候用實心、什麼時候用外框。

沒有這套東西的團隊，常見的狀況是這樣：A 工程師做了一個藍色圓角按鈕，B 工程師在另一頁又做了一個顏色差一點點、圓角大一點點的按鈕。單看都沒問題，放在一起就像兩家公司做的產品。等到要換品牌色，就得一頁一頁找出來改。

所以 design system 主要有三個好處：整個產品看起來一致、常用的零件（也叫元件）做一次大家共用、要改顏色或字體時改一處就全部跟著變。Google 的 Material Design、Apple 的 Human Interface Guidelines，都是大家比較熟悉的例子。

現在請 AI 做一個網頁或 app 已經不難，難的是讓它做出你心裡想的那個樣子。

跟 AI 說「做一個好看的設定頁」，每次出來的結果都不太一樣。想要調整，就只能一句一句講：按鈕小一點、標題再粗一點、這兩區中間空多一點、顏色跟首頁那個一樣。做到第五頁，前面幾頁的樣子可能又跑掉了。

問題出在 AI 手上沒有說明書。它只能照自己「印象中」的寫法來做，所以每次都在猜。

Astryx 做的事，是把那本說明書也寫成 AI 讀得懂的樣子。它會在你的專案裡放一份寫給 AI 看的文件，裡面列好有哪些元件、每個怎麼用、有哪些規矩，例如每一頁都從現成的版型開始、顏色和間距一律用 design system 定義好的值。AI 開工前先讀這份，再去查它需要的元件用法。

這樣一來，你可以把心力放在「這一頁要讓使用者做什麼」，介面要長怎樣、按鈕要多大、間距要多少，交給 Meta 內部已經用了八年的這套規矩。

最直接受惠的，是正在用 AI 開發產品、但不是設計師出身的人。以前要做出一致又像樣的介面，要嘛自己懂設計，要嘛找設計師，要嘛跟 AI 來回描述很多次。現在多了一個選項：直接借用一套大公司磨了八年的規矩。

它附了七套現成的主題，換主題就能換掉整個產品的風格，也可以免費商用。不過它目前還在 Beta（測試版），更新很頻繁，光過去一週就出了五個版本，正式產品要用之前可以先觀望一下。

我自己不是做設計或網頁介面的，這篇只能介紹皮毛，歡迎懂的朋友補充。