前端設計系統
哲學： 每個像素都有其目的。克制即是奢華。使用者心理驅動決策。 核心原則： 思考，不要死記。詢問，不要假設。
🎯 選擇性閱讀規則（強制）
強制檔案務必讀取，選讀檔案只在需要時讀取：
| 檔案 | 狀態 | 何時讀取 |
|---|---|---|
| ux-psychology.md | 🔴 強制 | 永遠優先閱讀！ |
| color-system.md | ⚪ 選讀 | 處理色彩/色板決策時 |
| typography-system.md | ⚪ 選讀 | 字體選擇與搭配 |
| visual-effects.md | ⚪ 選讀 | 玻璃態、陰影、漸層 |
| animation-guide.md | ⚪ 選讀 | 需要動畫時 |
| motion-graphics.md | ⚪ 選讀 | Lottie、GSAP、3D |
| decision-trees.md | ⚪ 選讀 | 情境模板 |
🔴 ux-psychology.md = 永遠讀取，其餘只在相關時讀取。
🔧 執行腳本
執行以下腳本進行審計（不需讀取，直接執行）：
| 腳本 | 用途 | 使用方式 |
|---|---|---|
scripts/ux_audit.py | UX 心理學與無障礙審計 | python scripts/ux_audit.py <專案路徑> |
⚠️ 關鍵：先問再假設（強制）
停！ 如果使用者的要求是開放式的，不要預設使用你最喜歡的方案。
當使用者提示不明確時，請詢問：
未指定顏色？ 詢問：
「您偏好什麼色系？（藍/綠/橘/中性/其他？）」
未指定風格？ 詢問：
「您希望呈現什麼風格？（極簡/大膽/復古/未來感/有機感？）」
未指定佈局？ 詢問：
「您對佈局有什麼偏好？（單欄/網格/不對稱/滿版？）」
⛔ 應避免的預設傾向（反安全港）：
| AI 預設傾向 | 為什麼不好 | 應該思考 |
|---|---|---|
| Bento 網格（現代陳腔濫調） | 每個 AI 設計都在用 | 為什麼這個內容需要網格？ |
| 英雄區分割（左/右） | 可預測且無趣 | 試試巨型排版或垂直敘事？ |
| 網格/極光漸層 | 「新」的懶人背景 | 什麼是大膽的顏色搭配？ |
| 玻璃態 | AI 眼中的「高級」 | 試試實色、高對比的扁平設計？ |
| 深青色 / 金融科技藍 | 從紫色禁令後的安全港 | 為什麼不用紅色、黑色或螢光綠？ |
| 「編排 / 賦能」 | AI 生成的文案 | 人類會怎麼說這句話？ |
| 深色背景 + 霓虹光暈 | 過度使用，「AI 風格」 | 品牌到底需要什麼？ |
| 全部圓角 | 通用/安全 | 哪裡可以使用銳利、野獸派邊緣？ |
🔴 「你選擇的每一個『安全』結構，都讓你離通用模板更近一步。敢於冒險。」
1. 限制分析（永遠優先）
在任何設計工作之前，回答這些問題或詢問使用者：
| 限制 | 問題 | 為什麼重要 |
|---|---|---|
| 時程 | 有多少時間？ | 決定複雜度 |
| 內容 | 已準備好還是佔位？ | 影響佈局靈活性 |
| 品牌 | 有現有規範嗎？ | 可能決定色彩/字體 |
| 技術 | 使用什麼技術棧？ | 影響實作能力 |
| 受眾 | 確切是誰？ | 驅動所有視覺決策 |
受眾 → 設計方法
| 受眾 | 思考方向 |
|---|---|
| Z 世代 | 大膽、快速、行動優先、真實 |
| 千禧世代 | 乾淨、極簡、價值驅動 |
| X 世代 | 熟悉、可信、清晰 |
| 戰後嬰兒潮 | 易讀、高對比、簡單 |
| B2B | 專業、數據導向、信任 |
| 奢侈品 | 克制優雅、留白 |
2. UX 心理學原則
核心定律（內化這些）
| 定律 | 原則 | 應用 |
|---|---|---|
| 希克定律 | 選擇越多 = 決策越慢 | 限制選項，使用漸進揭露 |
| 費茲定律 | 越大 + 越近 = 越容易點擊 | 適當調整 CTA 大小 |
| 米勒定律 | 工作記憶約容納 7 個項目 | 將內容分組 |
| 馮·雷斯托夫效應 | 與眾不同 = 印象深刻 | 讓 CTA 視覺上突出 |
| 序列位置效應 | 最先與最後最容易被記住 | 將關鍵資訊放在開頭與結尾 |
情緒設計層級
本能層級（瞬間） → 第一印象：色彩、圖像、整體感受
行為層級（使用） → 使用中：速度、回饋、效率
反思層級（記憶） → 使用後：「這讓我感覺很好」
建立信任
- 在敏感操作上顯示安全指示
- 在相關處使用社會證明
- 提供清晰的聯絡/支援管道
- 一致且專業的設計
- 透明的政策
3. 佈局原則
黃金比例（φ = 1.618）
用於比例和諧：
├── 內容：側邊欄 ≈ 62%：38%
├── 每個標題大小 = 前一個 × 1.618（用於戲劇性比例）
├── 間距可遵循：小 → 中 → 大（各 × 1.618）
8 點網格概念
所有間距與尺寸皆為 8 的倍數：
├── 緊湊：4px（微調用半格）
├── 小：8px
├── 中：16px
├── 大：24px、32px
├── 特大：48px、64px、80px
└── 根據內容密度調整
關鍵尺寸原則
| 元素 | 考量 |
|---|---|
| 觸控目標 | 最低舒適點擊尺寸 |
| 按鈕 | 高度根據重要性層級決定 |
| 輸入框 | 與按鈕高度一致以對齊 |
| 卡片 | 一致的內距，留白呼吸空間 |
| 閱讀寬度 | 每行 45-75 個字元為最佳 |
4. 色彩原則
60-30-10 法則
60% → 主色/背景（平靜、中性基底）
30% → 次要色（輔助區域）
10% → 強調色（CTA、亮點、引人注意）
色彩心理學（輔助決策）
| 若你需要... | 考慮色相 | 避免 |
|---|---|---|
| 信任、平靜 | 藍色系 | 侵略性紅色 |
| 成長、自然 | 綠色系 | 工業灰 |
| 活力、急迫 | 橘色、紅色 | 被動藍色 |
| 奢華、創意 | 深青綠、金、祖母綠 | 廉價感的鮮亮色 |
| 乾淨、極簡 | 中性色 | 過度飽和的色彩 |
選擇流程
- 這是什麼產業？（縮小選項）
- 希望傳達什麼情緒？（選定主色）
- 淺色還是深色模式？（設定基礎）
- 若未指定，請詢問使用者
詳細色彩理論請參考：color-system.md
5. 排版原則
比例選擇
| 內容類型 | 比例 | 感受 |
|---|---|---|
| 密集 UI | 1.125-1.2 | 緊湊、高效 |
| 一般網頁 | 1.25 | 平衡（最常見） |
| 編輯型 | 1.333 | 易讀、寬敞 |
| 英雄/展示 | 1.5-1.618 | 戲劇性效果 |
搭配概念
對比 + 和諧：
├── 差異足夠以建立層級
├── 相似足夠以維持連貫
└── 通常：展示字體 + 中性字體，或襯線 + 無襯線
可讀性規則
- 行長：每行 45-75 個字元為最佳
- 行高：內文 1.4-1.6
- 對比度：符合 WCAG 要求
- 字級：網頁內文至少 16px
詳細排版指南請參考：typography-system.md
6. 視覺效果原則
玻璃態（在適當情況下使用）
關鍵屬性：
├── 半透明背景
├── 背景模糊
├── 微妙邊框以定義範圍
└── ⚠️ **警告：** 標準藍色/白色玻璃態已是現代陳腔濫調。要嘛用得徹底，要嘛完全不用。
陰影層級
高度概念：
├── 越高元素 = 陰影越大
├── Y 偏移 > X 偏移（光從上方來）
├── 多層陰影 = 更逼真
└── 深色模式：可能需要改用發光效果
漸層使用
和諧的漸層：
├── 色環上的相鄰色（類似色）
├── 或同一色相、不同明度
├── 避免強烈互補色對比
├── 🚫 **不用網格/極光漸層**（浮動色塊）
└── 每個專案都要大膽變化
完整效果指南請參考：visual-effects.md
7. 動畫原則
時間概念
時長取決於：
├── 距離（越遠 = 越長）
├── 尺寸（越大 = 越慢）
├── 重要性（關鍵 = 清楚）
└── 情境（緊急 = 快，奢華 = 慢）
緩動選擇
| 動作 | 緩動 | 原因 |
|---|---|---|
| 進入 | 緩出 | 減速、穩定下來 |
| 離開 | 緩入 | 加速、退出 |
| 強調 | 緩入緩出 | 平穩、慎重 |
| 趣味 | 彈跳 | 好玩、有活力 |
效能
- 僅對 transform 和 opacity 做動畫
- 尊重使用者減少動畫的偏好
- 在低階裝置上測試
動畫模式請參考：animation-guide.md，進階內容請參考：motion-graphics.md
8. 「驚喜因素」檢查清單
高級感指標
- 留白充足（奢華 = 呼吸空間）
- 微妙的深度與立體感
- 流暢、有目的的動畫
- 對細節的講究（對齊、一致性）
- 一致的視覺節奏
- 自訂元素（不全為預設值）
信任建立者
- 適當處顯示安全提示
- 社會證明 / 見證
- 清晰的價值主張
- 專業圖像
- 一致的設計語言
情感觸發點
- 英雄區能引發預期情緒
- 人性化元素（面孔、故事）
- 進度/成就指標
- 愉悅瞬間
9. 反模式（避免事項）
❌ 懶人設計指標
- 未經考慮就使用系統預設字體
- 不符主題的圖庫照片
- 不一致的間距
- 過多互相競爭的色彩
- 缺乏層級的文字牆
- 不可讀的對比度
❌ AI 傾向模式（避免！）
- 每個專案都用同樣的顏色
- 預設使用深色 + 霓虹
- 什麼都用紫羅蘭色（紫色禁令 ✅）
- 簡單登陸頁也用 Bento 網格
- 網格漸層與發光效果
- 一樣的佈局結構 / Vercel 複製品
- 不詢問使用者偏好
❌ 暗黑模式（不道德）
- 隱藏成本
- 虛假緊迫感
- 強制操作
- 欺騙性 UI
- 確認羞辱
10. 決策流程摘要
針對每個設計任務：
1. 限制
└── 時程、品牌、技術、受眾是什麼？
└── 若不明確 → 詢問
2. 內容
└── 有哪些現有內容？
└── 層級結構為何？
3. 風格方向
└── 什麼適合這個情境？
└── 若不明確 → 詢問（不要預設！）
4. 執行
└── 套用上述原則
└── 檢查是否有反模式
5. 複查
└── 「這樣對使用者有幫助嗎？」
└── 「這和我的預設做法有什麼不同？」
└── 「我會為此感到驕傲嗎？」
參考檔案
關於特定領域的深入指南：
- color-system.md - 色彩理論與選擇流程
- typography-system.md - 字體搭配與比例決策
- visual-effects.md - 效果原則與技巧
- animation-guide.md - 動態設計原則
- motion-graphics.md - 進階：Lottie、GSAP、SVG、3D、粒子
- decision-trees.md - 特定情境模板
- ux-psychology.md - 使用者心理學深入探討
相關技能
| 技能 | 使用時機 |
|---|---|
| frontend-design（本技能） | 編碼前使用 - 學習設計原則（色彩、排版、UX 心理學） |
| web-design-guidelines | 編碼後使用 - 審計無障礙、效能與最佳實務 |
設計後工作流程
實作設計後，執行審計：
1. 設計 → 閱讀 frontend-design 原則 ← 你在此處
2. 編碼 → 實作設計
3. 審計 → 執行 web-design-guidelines 複查
4. 修正 → 處理審計中的發現
下一步： 編碼完成後，使用
web-design-guidelines技能審計你的實作，確保無障礙、焦點狀態、動畫與效能沒有問題。
切記： 設計是思考，不是複製。每個專案都應根據其獨特的情境與使用者，重新思考。避免現代 SaaS 安全港！