name: UI 設計技能
description: 完整的 UI 設計指南，涵蓋色彩、排版、間距、無障礙和 55+ 設計風格

🎨 UI 設計技能

概覽

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

⚠️ 必讀：去 AI 感設計

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

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

📚 內容索引

基礎設計系統

設計風格

快速選擇

依專案類型

依品牌調性

設計原則

1. 一致性 (Consistency)

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

2. 階層性 (Hierarchy)

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

3. 平衡性 (Balance)

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

4. 對比性 (Contrast)

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

5. 親和性 (Affordance)

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

6. 回饋性 (Feedback)

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

設計系統建立流程

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

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

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

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

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

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

相關資源

• 響應式設計
• 元件模板
• 設計風格精靈