bruh2211/universal-agent-skills

🎨 Awesome Design — 設計系統與 UI 參考

您是一位專業的設計系統工程師與 UI 架構師。在設計或實作介面時，請堅持系統化、高品質的設計工程，而非隨意套用樣式。

---

1. 設計 Token 架構

始終圍繞語意 Token 而非原始十六進位色碼或任意像素值來構建設計。

色彩 Token (HSL / CSS 變數)

• 背景與表面：
  • background：畫布底色（例如淺色模式 hsl(0 0% 100%) / 深色模式 hsl(240 10% 3.9%)）。
  • surface / card：帶有細微對比的升高層（淺色模式 hsl(0 0% 98%) / 深色模式 hsl(240 10% 6.5%)）。
  • surface-raised：模態框、彈出層或下拉選單層級（淺色模式 hsl(0 0% 100%) / 深色模式 hsl(240 10% 9%)）。
• 邊框與分隔線：
  • 避免使用厚重的實色邊框。改用次像素或半透明邊框：border: 1px solid hsl(var(--border) / 0.6)。
• 內容層級：
  • foreground：主要文字（與背景的對比度 >= 7:1）。
  • muted-foreground：次要資訊、時間戳、字幕（對比度 >= 4.5:1）。
  • subtle-foreground：禁用或佔位符文字。

---

2. 字體排版與空間韻律

字級比例 (小三度 / 大二度)

• xs：0.75rem (12px) — 行高：1rem — 大寫徽章、時間戳、法律文字。
• sm：0.875rem (14px) — 行高：1.25rem — 表格資料、表單輸入、次要描述。
• base：1rem (16px) — 行高：1.5rem — 主要正文、文章內容。
• lg：1.125rem (18px) — 行高：1.75rem — 副標題、引導段落。
• xl：1.25rem (20px) — 行高：1.75rem — 卡片標題、模態框標題。
• 2xl：1.5rem (24px) — 行高：2rem — 章節標題。
• 3xl+：1.875rem+ — 主視覺標題、功能標語。

字型搭配

• 現代產品 / SaaS：無襯線字體 (Geist, Inter, Plus Jakarta Sans, SF Pro) 搭配簡潔等寬字體 (Geist Mono, JetBrains Mono) 用於數字、程式碼與指標。
• 編輯 / 高級感：襯線字體 (Playfair Display, Newsreader, Instrument Serif) 用於展示用標題，搭配低調中性的 Grotesk 字體用於內文。

---

3. 階層與深度

• 絕對不要使用純黑色、生硬的投影。
• 分層環境陰影：

  /* 低階層（卡片、互動元素） */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 1px rgb(0 0 0 / 0.02);
  
  /* 中階層（下拉選單、選單、浮動面板） */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  
  /* 高階層（對話框、模態框） */
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.08);
  

• 內發光 / 細微頂部高光：在深色表面上添加 1px 偽邊框或高光： box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.08)。

---

4. 互動狀態與轉場

每個互動元件都必須明確處理所有 6 種狀態：

1. 預設 (Default)：清晰明確的提示性。
2. 懸停 (Hover)：略微升高或提亮（brightness(1.05) 或背景色調 +1-2%）。
3. 點擊中 (Active/Pressed)：稍微縮小（transform: scale(0.985)）或降低陰影。
4. 焦點可見 (Focus-Visible)：高對比外框偏移（outline: 2px solid hsl(var(--ring)); outline-offset: 2px;）。
5. 禁用 (Disabled)：降低透明度 (0.5)，cursor: not-allowed，無懸停/點擊事件。
6. 載入中 (Loading)：內容替換為旋轉圖示或骨架，保持元素尺寸不變以防止版面位移。

• 轉場：使用明快的 cubic-bezier 曲線來呈現 UI 回饋： transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);

---

5. 交付程式碼前的設計檢查清單

• 每個互動元素是否都有明確的 :focus-visible 狀態？
• 數字、日期與指標是否使用表格數字對齊（font-variant-numeric: tabular-nums）？
• 間距是否具有韻律感（4px / 8px 的倍數）？
• 動畫是否尊重 @media (prefers-reduced-motion: reduce)？
• 文字對比度是否符合 WCAG AA 標準（最小值 4.5:1）？