認識 Astromer：為 Astro 打造的 UI 元件與設計系統

Astromer 是一套為 Astro 專案設計的 UI 元件庫。它把元件、CSS 樣式與設計 token 整理成可以組合的基礎，讓內容網站、產品頁面與應用介面能沿用同一套視覺和互動語言。

如果你正在做 Astro 網站，Astromer 可以從一顆按鈕開始使用；當頁面增加，再逐步採用表單、導覽、內容區塊與版型模式。你可以保留自己的內容結構和品牌風格，不需要一次重做整個網站。

它提供什麼

@astromer/core 提供 Astro 原生元件和元件樣式；@astromer/tokens 提供顏色、字體、間距等設計變數。現有元件涵蓋 Button、Input、Card、Dialog、Tabs、Section，也包含 Hero、ArticleHeader、FeatureGrid 等組合模式。文件站和 Playground 可以直接查看範例與操作行為。

Astromer 以 CSS 為主要樣式層，元件使用 Astro 的 .astro 檔案，必要的互動再加入小範圍的瀏覽器程式。這讓一般內容與版型能先以 HTML 和 CSS 呈現。Dialog 等互動元件則依照實際情境處理鍵盤、焦點與關閉行為；導入產品後仍應檢查自己的文案、對比、驗證訊息與操作流程。

外觀如何組合

設計 token 讓元件共享一致的基礎樣式，也保留產品調整空間。Astromer 將亮暗模式、調色盤與選用的視覺 Theme 分開管理：data-theme 控制亮暗或跟隨系統，data-palette 選擇語義配色，data-visual-theme 則在匯入對應 CSS 後改變字體、形狀與排版節奏。

這些屬性由使用 Astromer 的網站設定。文件與 Playground 提供切換介面，方便在同一組元件上比較不同外觀；正式產品可以依自己的需求決定偏好如何保存。

從一顆按鈕開始

目前的安裝文件以 Node.js 20 以上及 Astro 7 以上為起點。安裝 core 與 tokens，並在全域 CSS 或 layout 引入兩份樣式後，就能在 Astro 頁面匯入元件：

pnpm add @astromer/core @astromer/tokens astro@^7

@import "@astromer/tokens";
@import "@astromer/core/styles";

---
import Button from "@astromer/core/components/Button.astro";
---

<Button variant="solid">開始探索</Button>

接著可以到文件站查看元件的 props、slots 與可操作範例，再把實際需要的元件加入頁面。對既有專案，我會先選一個明確的畫面需求，確認它在手機、鍵盤操作和亮暗模式下都合適，再擴大使用範圍。

目前階段

Astromer 仍在早期開發。元件、tokens、文件與 Playground 已有可檢視的實作；導入前請以當前文件和實際套件版本確認 API。這篇文章提供入門地圖，進一步的設計取捨與內容編輯器整合，可以接著閱讀 Astromer 的開發實作文章。

延伸閱讀