[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-astryx-open-source-meta-design-system-zh":3,"article-related-astryx-open-source-meta-design-system-zh":31,"series-tools-f1187152-abac-4641-93ae-0df5c3f81e12":78},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":23,"views":27,"created_at":28,"published_at":29,"topic_cluster_id":30},"f1187152-abac-4641-93ae-0df5c3f81e12","astryx-open-source-meta-design-system-zh","Meta 開源 Astryx 設計系統","\u003Cp data-speakable=\"summary\">\u003Ca href=\"\u002Ftag\u002Fmeta\">Meta\u003C\u002Fa> 將內部使用 8 年、支援 13,000+ 應用的 Astryx 設計系統開源，主打 React、StyleX 與 \u003Ca href=\"\u002Ftag\u002Fai-agent\">AI agent\u003C\u002Fa> 友善工作流。\u003C\u002Fp>\u003Cp>Meta 釋出 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fastryx\" target=\"_blank\" rel=\"noopener\">Astryx\u003C\u002Fa>，這套以 React 和 StyleX 打底的設計系統目前仍在 beta。它把元件、主題、CLI 和範本整合成單一工具包，目標同時服務工程師與 AI 助手。\u003C\u002Fp>\u003Cp>官方說法是，Astryx 已在 Meta 內部跑了 8 年，累積支援 13,000+ 個 app。這次開源後，外部團隊可以直接看見它如何處理主題、可及性、模板化與自動化生成。\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>項目\u003C\u002Fth>\u003Cth>數值\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>內部支援 app\u003C\u002Ftd>\u003Ctd>13,000+\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>元件數\u003C\u002Ftd>\u003Ctd>150+\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>主題數\u003C\u002Ftd>\u003Ctd>7\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>GitHub stars\u003C\u002Ftd>\u003Ctd>1.6k\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Forks\u003C\u002Ftd>\u003Ctd>88\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>最新版本\u003C\u002Ftd>\u003Ctd>v0.1.2\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2>發生了什麼\u003C\u002Fh2>\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fastryx\" target=\"_blank\" rel=\"noopener\">facebook\u002Fastryx\u003C\u002Fa> 現在已公開，MIT 授權可直接取用。專案包含 150+ 個 typed React components、7 套主題、dark mode、模板，以及可用來 scaffold 元件和主題的 CLI。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782842576719-yvre.png\" alt=\"Meta 開源 Astryx 設計系統\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>Meta 把 Astryx 定位成「fully customizable」與「\u003Ca href=\"\u002Ftag\u002Fagent\">agent\u003C\u002Fa> ready」的系統。這代表文件、API 與 CLI 都朝同一套使用方式設計，讓人類開發者和 \u003Ca href=\"\u002Ftag\u002Fai-工具\">AI 工具\u003C\u002Fa>能沿著同一條路徑\u003Ca href=\"\u002Fnews\u002Fkimi-k2-5-local-setup-ollama-docker-zh\">產出\u003C\u002Fa> UI。\u003C\u002Fp>\u003Cp>它也刻意避開樣式綁死。團隊可用 className、Tailwind、CSS modules 或純 CSS 覆寫樣式，主題則透過 CSS custom properties 調整，不必包一層或 fork 整個元件庫。\u003C\u002Fp>\u003Cp>目前 repo 已有約 1.6k stars、88 forks，最新版是 \u003Ca href=\"\u002Fnews\u002Fmanus-ai-pricing-2026-plans-credits-costs-zh\">2026\u003C\u002Fa> 年 6 月 29 日釋出的 v0.1.2。對一個剛開源的內部設計系統來說，這個起點不小，但距離成熟生態還有一段路。\u003C\u002Fp>\u003Cul>\u003Cli>React + StyleX 為核心\u003C\u002Fli>\u003Cli>150+ accessible components\u003C\u002Fli>\u003Cli>7 套主題：neutral、butter、chocolate、matcha、stone、gothic、y2k\u003C\u002Fli>\u003Cli>基本使用不需要 build plugin\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>為什麼重要\u003C\u002Fh2>\u003Cp>對前端團隊來說，Astryx 提供的是一個可參考的「大規模設計系統」樣本。它把元件、文件、codemods、模板與建置工具放在一起，能降低導入成本，也比較容易維持設計與程式碼的一致性。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782842575480-k8ue.png\" alt=\"Meta 開源 Astryx 設計系統\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>和許多只強調視覺規範的系統相比，Astryx 更像是為生產線設計的工具箱。團隊如果已經用 React，能更快評估它是否適合做跨產品的 UI 標準，尤其是需要大量主題切換或品牌客製的場景。\u003C\u002Fp>\u003Cp>它對 \u003Ca href=\"\u002Ftag\u002Fai-coding\">AI coding\u003C\u002Fa> 工具也有實際意義。當文件、API、CLI 的結構一致時，助手更容易照著既有模式生成或修改介面，減少生成碼和人工碼之間的落差。\u003C\u002Fp>\u003Cp>對產業來說，Meta 這次不是只丟出一個元件庫，而是把內部標準包成可外部檢驗的\u003Ca href=\"\u002Fnews\u002Fai-infrastructure-trillion-dollar-asset-class-zh\">基礎設施\u003C\u002Fa>。接下來要看的，不是它有多大，而是有多少團隊真的會拿它來做下一個產品介面。\u003C\u002Fp>\u003Cp>問題很直接：Astryx 會成為 AI 輔助 UI 開發的參考框架，還是只是一套名字很大、但只有少數 React 團隊會真正採用的設計系統？\u003C\u002Fp>","Meta 將內部使用 8 年、支援 13,000+ 應用的 Astryx 設計系統開源，主打 React、StyleX 與 AI agent 友善工作流。","github.com","https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fastryx",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782842576719-yvre.png","tools","zh","3792cfcc-d13d-4fbc-95ca-108c3b49a6c6",[17,18,19,20,21,22],"Meta","Astryx","設計系統","React","StyleX","AI agent",[24,25,26],"Astryx 已開源，內含 150+ 元件、7 套主題與 CLI。","它的重點是可組合、可覆寫，並對 AI 助手友善。","對團隊而言，這是一個可直接評估的大型設計系統範本。",0,"2026-06-30T18:02:23.332763+00:00","2026-06-30T18:02:23.324+00:00","0c64eda0-d76f-4e13-bd85-d085ff6d151e",{"tags":32,"relatedLang":37,"relatedPosts":41},[33,35],{"name":20,"slug":34},"react",{"name":17,"slug":36},"meta",{"id":15,"slug":38,"title":39,"language":40},"astryx-open-source-meta-design-system-en","Astryx open-sources Meta’s 13,000-app design system","en",[42,48,54,60,66,72],{"id":43,"slug":44,"title":45,"cover_image":46,"image_url":46,"created_at":47,"category":13},"05e9b65e-4f55-439e-8bd2-f978dc784b6d","system-design-learning-path-from-scratch-zh","System design 一次學會的路線","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782849806074-jwd5.png","2026-06-30T20:02:56.539095+00:00",{"id":49,"slug":50,"title":51,"cover_image":52,"image_url":52,"created_at":53,"category":13},"11362fe5-3666-4c78-9685-6393c8130ae2","googles-gemini-live-camera-editing-right-move-zh","Google 把 Gemini 做成即時攝影編輯，這一步是對的","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782838971989-agke.png","2026-06-30T17:02:20.205174+00:00",{"id":55,"slug":56,"title":57,"cover_image":58,"image_url":58,"created_at":59,"category":13},"e2cbc0d9-63a2-4732-af6b-dc18b1720f0e","manus-ai-pricing-2026-plans-credits-costs-zh","Manus AI 2026 方案與信用點成本指南","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782835379959-kc71.png","2026-06-30T16:02:28.898341+00:00",{"id":61,"slug":62,"title":63,"cover_image":64,"image_url":64,"created_at":65,"category":13},"e17aff8d-c92b-4b3d-b3ea-3c8d795c3472","base44-rolls-out-own-ai-model-zh","Base44 推出自家 AI 模型，年收達 1.5 億美元","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782832685676-14aw.png","2026-06-30T15:17:28.63747+00:00",{"id":67,"slug":68,"title":69,"cover_image":70,"image_url":70,"created_at":71,"category":13},"c27d5faa-7ef9-4182-98be-e3576fad25ee","kimi-k25-pricing-and-features-explained-zh","Kimi K2.5 價格與功能實測指南","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782829090346-8bxw.png","2026-06-30T14:17:39.85392+00:00",{"id":73,"slug":74,"title":75,"cover_image":76,"image_url":76,"created_at":77,"category":13},"1c3ea466-d657-4a0c-a1b9-284ed6a40118","qodo-2-8-multi-repo-ai-code-review-beta-zh","Qodo 2.8 推多倉庫 AI Code Review 測試版","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1782821878091-idce.png","2026-06-30T12:17:23.844821+00:00",[79,84,89,94,99,104,109,114,119,124],{"id":80,"slug":81,"title":82,"created_at":83},"855cd52f-6fab-46cc-a7c1-42195e8a0de4","surepath-real-time-mcp-policy-controls-zh","SurePath 推出即時 MCP 政策控管","2026-03-26T07:57:40.77233+00:00",{"id":85,"slug":86,"title":87,"created_at":88},"9b19ab54-edef-4dbd-9ce4-a51e4bae4ebb","mcp-in-2026-the-ai-tool-layer-teams-use-zh","2026 年 MCP：團隊真的在用的 AI 工具層","2026-03-26T08:01:46.589694+00:00",{"id":90,"slug":91,"title":92,"created_at":93},"af9c46c3-7a28-410b-9f04-32b3de30a68c","prompting-in-2026-what-actually-works-zh","2026 提示工程，真正有用的是什麼","2026-03-26T08:08:12.453028+00:00",{"id":95,"slug":96,"title":97,"created_at":98},"05553086-6ed0-4758-81fd-6cab24b575e0","garry-tan-open-sources-claude-code-toolkit-zh","Garry Tan 開源 Claude Code 工具包","2026-03-26T08:26:20.068737+00:00",{"id":100,"slug":101,"title":102,"created_at":103},"042a73a2-18a2-433d-9e8f-9802b9559aac","github-ai-projects-to-watch-in-2026-zh","2026 必看 20 個 GitHub AI 專案","2026-03-26T08:28:09.619964+00:00",{"id":105,"slug":106,"title":107,"created_at":108},"a5f94120-ac0d-4483-9a8b-63590071ac6a","claude-code-vs-cursor-2026-zh","Claude Code 與 Cursor 深度對比：202…","2026-03-26T13:27:14.279193+00:00",{"id":110,"slug":111,"title":112,"created_at":113},"0975afa1-e0c7-4130-a20d-d890eaed995e","practical-github-guide-learning-ml-2026-zh","2026 機器學習入門 GitHub 實用指南","2026-03-27T01:16:49.712576+00:00",{"id":115,"slug":116,"title":117,"created_at":118},"bfdb467a-290f-4a80-b3a9-6f081afb6dff","aiml-2026-student-ai-ml-lab-repo-review-zh","AIML-2026：像課綱的學生實驗 Repo","2026-03-27T01:21:51.467798+00:00",{"id":120,"slug":121,"title":122,"created_at":123},"80cabc3e-09fc-4ff5-8f07-b8d68f5ae545","ai-trending-github-repos-and-research-feeds-zh","AI Trending：把 AI 資源收成一張表","2026-03-27T01:31:35.262183+00:00",{"id":125,"slug":126,"title":127,"created_at":128},"3ce6e6e2-bac5-463e-9f8d-45caabcc61f7","awesome-ai-for-science-research-tools-map-zh","AI 科研工具清單，開始像地圖了","2026-03-27T01:46:50.521945+00:00"]