For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /zh-tw/docs/web/ui-kit.md (or send Accept: text/markdown).
UI 套件與區塊
共享元件、設計令牌與區塊目錄。
開始之前
使用“檔案”→“開啟資料夾”在 Visual Studio Code 中開啟下載的 supastack 專案，然後選擇“終端”→“新建終端”。儲存庫根目錄是包含 package.json、apps 和 packages 的資料夾。執行下面的命令並保持終端開啟。如果無法識別命令，請先完成工具安裝指南，然後再繼續。
首先閱讀平臺教程。伺服器是響應瀏覽器或電話請求的應用程式程式。 Web 讀取 apps/web/.env.local，Expo 讀取 apps/mobile/.env.local，資料庫遷移命令讀取 root .env。無資料庫/儀錶板演示與真實/身份驗證帳戶分開，需要遷移Postgres。僅電話或桌面結帳需要單獨執行的 Web 後端。
corepack pnpm --filter @supastack/web dev安裝與配置
packages/ui-web 包含共享產品元件(按鈕、輸入、卡片、徽章、對話方塊、外殼部件),packages/design-tokens 是 app-theme.css 對映為 CSS 變數的令牌來源。/kit-blocks 路由掛載區塊目錄 —— 你可以帶入產品的組合區塊。
apps/mobile 消費 packages/ui-native 以獲得等價原生原語,因此端面樣式按平臺保留,而契約保持共享。
# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web dev
# Then open http://localhost:3000/kit-blocks in your browser
# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)實現流程
優先用共享元件組合介面;只有當套件無法表達某個模式時才退回到自定義元素。新的共享部件屬於 ui-web,採用令牌驅動的樣式,使每個主題包自動應用。
將營銷元件(src/marketing)保持在產品端面之外,反之亦然 —— 兩套外殼系統是有意分離的。
驗證與排障
對每個 density/radius/font 預設以及至少一個亮色和一個暗色包驗證新元件。檢查鍵盤焦點、320px 佈局和 reduced motion;/settings/appearance 的套件畫廊是最快的檢查方式。