ui-design

id	ui_design
name	ui_design
description	色彩、排版、間距、Accessibility 與 55+ 設計風格指南

🎨 UI 設計技能

概覽

此技能涵蓋所有 UI/UX 設計相關知識，幫助建立美觀、易用、一致的使用者介面。

---

⚠️ 必讀：去 AI 感設計

在開始任何設計前，必須先閱讀 去 AI 感設計指南

確保你的設計：

• ❌ 不像 AI 自動生成的模板
• ❌ 不像充滿庫存照片的商業網站
• ✅ 有個性、有溫度、有記憶點
• ✅ 適度的不對稱和變化

---

📚 內容索引

基礎設計系統

主題	說明
色彩系統	調色板、對比度、色彩心理學
排版規範	字型選擇、階層、行高
間距系統	留白、網格、間距比例
無障礙設計	WCAG 標準、色彩對比、鍵盤導航
自動化 a11y 驗證	axe-core + WCAG 2.2 AA 規則表
a11y 上線檢查	上線前無障礙清單
元件組合模式	Compound、Slot/asChild、Headless
shadcn/ui + Radix	現代元件系統 + design token

設計風格

類別	數量
風格索引	55 種風格總覽
基礎風格	10 種
產業風格	15 種
藝術風格	10 種
文化風格	7 種
科技風格	8 種
特殊風格	5 種

---

快速選擇

依專案類型

專案	推薦風格
企業官網	企業風、極簡、瑞士風
電商網站	電商風、質感設計、扁平化
SaaS 產品	SaaS 風、科技極簡、玻璃擬態
個人作品集	編輯風、極簡、創意風格
部落格	部落格風、編輯風、極簡
遊戲娛樂	遊戲風、賽博龐克、霓虹
醫療健康	醫療風、極簡、乾淨
環保公益	環保風、有機、自然

依品牌調性

調性	推薦風格
專業穩重	企業風、瑞士風、法律風
年輕活潑	孟菲斯、波普、童趣
高端奢華	奢華、裝飾藝術、編輯風
科技創新	科技極簡、AI 風格、玻璃擬態
溫暖親切	北歐風、有機、插畫風
藝術個性	野獸派、抽象、線條藝術

---

設計原則

1. 一致性 (Consistency)

• 使用統一的設計語言
• 維持元件風格一致
• 建立並遵循設計系統

2. 階層性 (Hierarchy)

• 明確的視覺層次
• 重要資訊突出顯示
• 使用大小、顏色、位置區分層級

3. 平衡性 (Balance)

• 視覺重量分配均勻
• 對稱或非對稱平衡
• 留白與內容的平衡

4. 對比性 (Contrast)

• 足夠的色彩對比
• 字體粗細對比
• 大小比例對比

5. 親和性 (Affordance)

• 元素看起來可互動
• 按鈕像按鈕
• 連結有明確識別

6. 回饋性 (Feedback)

• 互動有回饋
• 載入狀態明確
• 錯誤訊息清楚

---

設計系統建立流程

1. 定義品牌
   └── 品牌價值、人格、調性

2. 選擇風格
   └── 使用風格精靈或直接選擇

3. 建立基礎
   ├── 色彩系統
   ├── 字型系統
   └── 間距系統

4. 設計元件
   ├── 基礎元件（按鈕、輸入框）
   ├── 複合元件（卡片、表單）
   └── 區塊元件（頁首、頁尾）

5. 組裝頁面
   ├── 頁面佈局
   ├── 響應式調整
   └── 動態效果

6. 驗證測試
   ├── 無障礙檢測
   ├── 跨裝置測試
   └── 使用者測試

---

相關資源

• 響應式設計
• 元件模板
• 元件組合模式
• 設計風格精靈
• shadcn/ui + Radix
• a11y 自動化測試
• 效能：CLS / 圖片優化