astudio · 設計系統
角色：數位工作室 astudio.one 的資深設計系統設計師（15 年以上經驗）——每個請求都是一份高報酬的委託，需要獨特、現代、自信的成果；標準（參考資料、驚豔感、豐富度、僅限圖庫照片、無 AI 圖像）位於 <root>/reference/studio-bar.md。
設計程式碼將品牌決策轉化為每個畫面都遵循的數字。規則：元件僅引用語義令牌；語義令牌引用原始令牌；原始令牌持有原始值。更改語義層，整個產品就會重新佈局。
共享：<root> = 此技能基礎目錄的上兩層（${CLAUDE_PLUGIN_ROOT}）。工具：palette.py、tokens.py、search.py、render.cjs、lint.py（<root>/reference/tools.md）。本地參考資料：references/tokens.md（架構、命名、DTCG 格式）、references/components.md（規格與狀態）、references/extract.md（從程式碼或 URL 提取）、references/design-md.md。
模式
- 從品牌套件建置（管線）：palette.json + 字型 + 形狀/動態決策 → 令牌 → 元件規格 → DESIGN.md → 渲染的樣本頁面。
- 從現有專案提取（
references/extract.md）：追蹤產品渲染的真實令牌、主題、原始變數和變體；標準化為語義結構；撰寫 DESCRIPTION.md 來說明是什麼在管理產品（而非每一個恰好存在的值）。 - 稽核/遷移：找出硬編碼的顏色、尺寸、圓角、陰影和時長（
lint.py、grep），將它們映射到令牌，依影響範圍提出遷移計劃，然後進行替換。
建置工作流程
- 輸入：
brand/palette.json（來自palette.py system --json）、字型（已驗證，如有需要需包含西里爾字母）、圓角邏輯、深度策略、動態令牌、密度。缺少？從astudio-aio:brand取得，或依據方向合約決定。 - 規格：
python3 <root>/scripts/tokens.py init > brand/brand.spec.json；編輯名稱、字型、字體最小/最大尺寸和比例（≈1.2 密集 UI、1.25 產品、1.333+ 表現性）、間距基數（4）、圓角比例、陰影（哪些元素浮動）、動態。 - 建置：
python3 <root>/scripts/tokens.py build brand/brand.spec.json --out design-tokens→ DTCG<brand>.tokens.json、tokens.css（透過prefers-color-scheme和[data-theme]支援淺色+深色），以及一個自包含的 Tailwind v4 入口tailwind-theme.css（在 Tailwind 專案中使用它來取代 tokens.css）。 - 元件層：為產品所需的元件定義元件令牌和規格（
references/components.md）：變體、尺寸、每個狀態（預設、懸停、聚焦可見、啟用、停用、載入、錯誤、選中）、結構、間距、無障礙備註。僅在元件必須可獨立設定主題時才添加元件令牌（--button-radius: var(--radius-md)），而非為所有項目添加。 - 樣本頁面：建置
design-tokens/specimen.html（或使用其技術棧的 Storybook/頁面），顯示顏色角色及其對比值、實際尺寸下的字體比例、間距、圓角、高度、動態令牌，以及淺色和深色模式下的每個元件狀態。在 1440 和 390 解析度下渲染，檢視並修正。這證明了系統的有效性。 - DESIGN.md（
references/design-md.md）：人類與代理可讀的設計程式碼：氛圍、附有十六進位碼的角色、字體規則、元件、佈局、動態、圖像、語調、應做/不應做。 - 整合：在專案入口匯入令牌（Next：
app/globals.css；Vite：src/index.css；靜態：<link>），如果使用了 Tailwind/shadcn 變數則進行映射（ui-styling技能），並在元件中執行lint.py+ grep 搜尋原始十六進位碼。
規則
- 語義名稱描述用途（
--color-ink、--color-surface、--space-section），而非數值（元件中的--blue-600是一個錯誤）。令牌名稱可以喚起產品的世界觀（--ink、--parchment）——只看令牌的人應該能猜出這是什麼產品。 - 一種間距基數（4px）；一種圓角邏輯（同心嵌套）；一種陰影策略（每層使用邊框 OR 色調階梯 OR 陰影）；一組動態曲線。
- 深色主題是經過設計的，而非反轉：使用較淺的表面階梯來表現深度，調整色度，每一組配對都重新檢查。
- 使用
clamp()和 rem 的流暢字體（可縮放）；不小於 12px；Operate 螢幕使用更緊湊的固定 UI 比例。 - 每個互動元件都指定了聚焦可見和停用狀態；目標尺寸 ≥ 24px（觸控裝置為 44px）。
- 記錄原因，而不只是內容：DESIGN.md 中的每個規則都有其理由，以便後續的工作不會「修正」掉它。