Astryx Design System

Astryx Design System 是一套開源設計系統，提供可重用元件、主題、範本、文件與 CLI，支援高度自訂與代理輔助快速設定。

AI網站設計

AI設計助手

AI開發者工具

訪問網站

Astryx 是什麼？

Astryx 是一套開源設計系統，透過共享元件庫、主題與支援開發工具來建立使用者介面。網站將其呈現為可完全自訂且已為代理就緒，並提供同時面向人類開發者與 AI 程式撰寫工具的設定指引。

入門流程展示了一條實用路徑：安裝核心套件、主題與 CLI；執行 `npx astryx init`；然後從特定入口點匯入元件，並透過全域 CSS 套用主題。此系統也包含範例應用程式，以及用來探索元件、範本與文件的 CLI。

主要功能

廣泛的元件庫

此函式庫整理成多個元件類別，包括按鈕、表單、導覽、覆蓋層、表格、版面配置、回饋與資料顯示，且每個變體、狀態與模式都提供可直接複製的範例。

每個元件各自的入口點

元件從 `@astryxdesign/core` 套件安裝，並透過每個元件各自的子路徑匯入，讓匯入路徑更明確，也能讓打包體積更小。

以主題為基礎的 token 系統

入門指南展示了主題套件與全域 CSS 匯入，主題透過 CSS 自訂屬性提供顏色、間距、圓角與排版等設計 token。

多種樣式工作流程

Astryx 支援多種樣式工作流程，從純 CSS、className 到 Tailwind 與 CSS-in-JS，並文件化了透過 `xstyle` 套用樣式覆寫的 StyleX 路徑。

用於文件與探索的 CLI

CLI 提供列出元件、查看文件主題，以及檢視範本與 token 參考的指令，讓系統更容易在專案中探索與標準化。

參考應用程式設定

提供 Next.js 與 Vite 的範例應用，包含結合主題 CSS、StyleX、Tailwind 或來源匯入的設定。

Astryx 的常見用途

使用可重用元件建置產品 UI
當你需要一組現成的 UI 原語與產品介面模式，並希望為所新增的每個元件使用明確匯入時，使用核心函式庫。
套用共享的視覺系統
當你需要在整個應用程式中套用一致的視覺語言，並控制顏色、間距、圓角與排版等 token 值時，使用主題套件與全域 CSS 匯入。
標準化設定與文件
當你需要讓團隊快速上手、檢視可用元件，或從命令列探索範本與 token 參考時，使用 CLI 與產生的文件。
從參考應用程式啟動實作
當你想要從可運作的參考開始，為 Next.js、Vite 或 StyleX、Tailwind 等特定樣式設定建立基礎時，使用範例應用程式作為起點。
檢視元件行為與用法
當你需要在將元件接入專案前，取得特定變體、狀態與模式的可複製範例時，使用可在瀏覽器存取的元件型錄。

Pros and Cons

Pros

開源設計系統，且有清楚的設定流程。
在同一套套件生態中涵蓋元件、主題、範本、文件與 CLI。
主題以 CSS 自訂屬性提供設計 token，使全域主題設定更直接。
支援多種樣式處理方式，包括 StyleX。
提供 Next.js 與 Vite 的範例應用，協助團隊從可運作的參考開始。

Cons

來源頁面僅顯示其為開源，未呈現價格、方案或授權細節。
蒐集到的證據中，文件涵蓋範圍屬於部分內容，因此有些實作細節只透過範例呈現，而非完整的端到端指南。

FAQ

Astryx 是用來做什麼的？

Astryx 被定位為一套開源設計系統，包含元件、主題、範本、文件與 CLI。入門流程顯示可先透過 npm 安裝，接著執行設定指令來建立代理文件與起始範本。

要如何開始使用 Astryx？

來源顯示需安裝 @astryxdesign/core、像 @astryxdesign/theme-neutral 這類主題套件，以及 @astryxdesign/cli，之後執行 `npx astryx init` 來設定代理文件並選擇起始範本。

Astryx 元件要如何匯入？

Astryx 元件會從依類別劃分的子路徑入口匯入，例如 `@astryxdesign/core/Button` 或 `@astryxdesign/core/Layout`，這樣做的目的是讓匯入更明確並保持套件體積較小。

Astryx 可以自訂成符合既有設計系統嗎？

Astryx 支援多種樣式處理方式，包括純 CSS、className、Tailwind、CSS-in-JS，以及透過 `xstyle` 與 StyleX 做更深入整合。

Astryx 有提供 CLI 或範例應用嗎？

網站強調其 CLI 可用於元件、token、範本與文件，入門指南也指向 Next.js 與 Vite 的範例應用。這些是來源中最清楚呈現的實作路徑。

Quick Facts

類別: 設計系統
主要用途: 以主題與支援文件建立介面元件
安裝方式: npm 套件加上 `npx astryx init`
樣式: CSS、className、Tailwind、CSS-in-JS、StyleX
套件命名空間: @astryxdesign/core 與相關套件
來源網域: astryx.atmeta.com