前端設計系統 是做什麼的？
哲學： 每個像素都有其目的。節制就是奢華。使用者心理驅動決策。 核心原則： 思考，不要死記。提問，不要假設。
🎯 選擇性閱讀規則（強制）
務必閱讀必要檔案，僅在需要時閱讀選用檔案：
| 檔案 | 狀態 | 何時閱讀 |
|---|---|---|
| ux-psychology.md | 🔴 必要 | 務必先讀！ |
| color-system.md | ⚪ 選用 | 色彩／調色板決策 |
| typography-system.md | ⚪ 選用 | 字型選擇／搭配 |
| visual-effects.md | ⚪ 選用 | Glassmorphism、陰影、漸層 |
| 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 Grid（現代陳腔濫調） | 每個 AI 設計都用 | 為什麼這個內容需要網格？ |
| Hero Split（左／右分割） | 可預測且無聊 | 試試大字型排版或垂直敘事？ |
| Mesh/Aurora 漸層 | 「新的」懶人背景 | 什麼是大膽的配色？ |
| Glassmorphism | AI 認為的「高級感」 | 試試實心、高對比的平面設計？ |
| 深青色／金融科技藍 | 從紫色禁令中逃脫的安全港 | 為什麼不用紅色、黑色或螢光綠？ |
| 「Orchestrate / Empower」 | 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. 視覺效果原則
Glassmorphism（適當使用）
關鍵屬性：
├── 半透明背景
├── 背景模糊
├── 細微邊框以增加定義
└── ⚠️ **警告：** 標準的藍色／白色 Glassmorphism 是現代陳腔濫調。要嘛徹底改變，要嘛不用。
陰影層級
高度概念：
├── 越高層的元素 = 越大陰影
├── Y 偏移 > X 偏移（光從上方來）
├── 多層陰影 = 更真實
└── 深色模式：可能需要發光效果替代
漸層用法
和諧的漸層：
├── 色環上相鄰的顏色（類似色）
├── 或相同色調、不同明度
├── 避免互補色強烈對比
├── 🚫 **不要用 Mesh/Aurora 漸層**（浮動色塊）
└── 每個專案要大幅變化
完整效果指南請見：visual-effects.md
7. 動畫原則
時間概念
基於以下因素決定持續時間：
├── 距離（越遠 = 越長）
├── 尺寸（越大 = 越慢）
├── 重要性（關鍵 = 清晰）
└── 情境（緊急 = 快，奢華 = 慢）
緩動選擇
| 動作 | 緩動 | 原因 |
|---|---|---|
| 進入 | Ease-out | 減速、穩定 |
| 離開 | Ease-in | 加速、退出 |
| 強調 | Ease-in-out | 平順、刻意 |
| 趣味 | Bounce | 好玩、有活力 |
效能
- 只動畫 transform 和 opacity
- 尊重 reduced-motion 偏好
- 在低階裝置上測試
動畫模式請見：animation-guide.md，進階內容見：motion-graphics.md
8. 「驚豔要素」檢查清單
高級感指標
- 充裕的留白（奢華 = 呼吸空間）
- 細微的深度與立體感
- 流暢、有意義的動畫
- 對細節的注重（對齊、一致性）
- 有凝聚力的視覺節奏
- 自訂元素（不全為預設值）
信任建立
- 適當的安全提示
- 社交證明／使用者見證
- 清楚的價值主張
- 專業的圖像
- 一致的設計語言
情感觸發點
- 能引起目標情緒的主視覺區
- 人性元素（臉孔、故事）
- 進度／成就指標
- 令人驚喜的小細節
9. 反模式（避免事項）
❌ 懶人設計指標
- 未經考量使用系統預設字型
- 不相配的圖庫圖片
- 不一致的間距
- 過多競爭的顏色
- 沒有層級的文字牆
- 無法存取的對比
❌ AI 傾向模式（避免！）
- 每個專案用相同顏色
- 預設深色 + 霓虹
- 什麼都用紫色／紫羅蘭（紫色禁令 ✅）
- 簡單著陸頁用 Bento 網格
- Mesh 漸層與發光效果
- 相同佈局結構／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 - 使用者心理深入探討
相關技能
| 技能 | 使用時機 |
|---|---|
| 前端設計（本文） | 編碼之前 - 學習設計原則（色彩、字型、UX 心理學） |
| 網頁設計指南 | 編碼之後 - 審計可及性、效能與最佳實踐 |
設計後工作流程
實施設計後，執行審計：
1. 設計 → 閱讀前端設計原則 ← 你在此處
2. 編碼 → 實施設計
3. 審計 → 執行網頁設計指南審查
4. 修正 → 處理審計結果
下一步： 編碼完成後，使用
web-design-guidelines技能審計你的實作，檢查可及性、焦點狀態、動畫與效能問題。
切記： 設計是思考，不是複製。每個專案都應根據其獨特的脈絡與使用者，獲得全新的考量。避免現代 SaaS 安全港！