前端設計系統
哲學： 每個像素都有其目的。克制即是奢華。使用者心理驅動決策。 核心原則： 思考，而非記憶。提問，而非假設。
🎯 選擇性閱讀規則（強制）
始終閱讀必要檔案，選擇性檔案僅在需要時閱讀：
| 檔案 | 狀態 | 何時閱讀 |
|---|---|---|
| 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 = 永遠閱讀。其他檔案 = 僅在相關時閱讀。
🔧 執行期腳本
執行這些以進行審計（不要閱讀，直接執行）：
| 腳本 | 用途 | 使用方式 |
|---|---|---|
ux_audit validator | UX 心理學與可及性審計 | call_tool_checklist |
⚠️ 關鍵：先問再假設（強制）
停！如果使用者的要求是開放式的，請不要預設使用你偏好的選項。
當使用者提示模糊時，提問：
未指定顏色？ 提問：
"您偏好哪種色調？（藍/綠/橘/中性/其他？）"
未指定風格？ 提問：
"您想呈現什麼風格？（極簡/大膽/復古/未來/有機？）"
未指定佈局？ 提問：
"您有偏好的佈局嗎？（單欄/網格/不對稱/全寬？）"
⛔ 應避免的 AI 預設傾向（反安全港）：
| AI 預設傾向 | 為何不理想 | 改為思考 |
|---|---|---|
| Bento 網格（現代陳腔濫調） | 每個 AI 設計都用 | 為什麼這個內容需要網格？ |
| 英雄區左右分割 | 可預測且無聊 | 試試巨型標題或垂直敘事？ |
| Mesh/Aurora 漸層 | 「新的」偷懶背景 | 什麼是大膽的配色組合？ |
| 玻璃態 | 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. 視覺效果原則
玻璃態（在適當情況下使用）
關鍵屬性：
├── 半透明背景
├── 背景模糊
├── 微弱邊框以定義形體
└── ⚠️ **警告：** 標準藍白玻璃態是現代陳腔濫調。要嘛大膽使用，要嘛完全不用。
陰影層級
高度概念：
├── 越高元素 = 陰影越大
├── Y 偏移 > X 偏移（光從上方來）
├── 多層陰影 = 更真實
└── 深色模式：可能需要改用光暈
漸層使用
和諧漸層：
├── 色環上相鄰色（類似色）
├── 或同一色相、不同明度
├── 避免強烈對比色組合
├── 🚫 **不使用 Mesh/Aurora 漸層**（浮動色塊）
└── 每個專案都應大膽變化
完整效果指南請見：visual-effects.md
7. 動畫原則
時間概念
時長基於：
├── 距離（越遠 = 越長）
├── 大小（越大 = 越慢）
├── 重要性（關鍵 = 清楚）
└── 情境（緊急 = 快速，奢華 = 緩慢）
緩動選擇
| 動作 | 緩動 | 原因 |
|---|---|---|
| 進場 | 緩出 | 減速、穩定 |
| 離場 | 緩入 | 加速、退出 |
| 強調 | 緩入緩出 | 流暢、慎重 |
| 趣味 | 彈跳 | 有趣、有活力 |
效能
- 僅對 transform 和 opacity 進行動畫
- 尊重 reduced-motion 偏好設定
- 在低階裝置上測試
動畫模式請見：animation-guide.md，進階請見：motion-graphics.md
8. 「驚喜感」檢查清單
高級感指標
- 充裕的留白（奢華 = 呼吸空間）
- 微妙的深度與立體感
- 流暢、有意義的動畫
- 對細節的講究（對齊、一致性）
- 有凝聚力的視覺節奏
- 自訂元素（而非全部使用預設）
信任建立要素
- 在適當處顯示安全提示
- 社會證明/見證
- 清晰的價值主張
- 專業的圖像
- 一致的設計語言
情感觸發點
- 英雄區能喚起預期情感
- 人性化元素（臉孔、故事）
- 進度/成就指標
- 令人愉悅的瞬間
9. 反模式（不要做的事）
❌ 懶惰設計指標
- 未經考慮直接使用系統預設字型
- 不符主題的庫存圖片
- 不一致的間距
- 過多互相競爭的顏色
- 缺乏層級的文字牆
- 無障礙對比不足
❌ AI 傾向模式（避免！）
- 每個專案都用相同顏色
- 暗色 + 霓虹作為預設
- 什麼都用紫色（✅ 紫色禁令）
- 簡單 Landing Page 使用 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 - 使用者心理學深度探討
相關技能
| 技能 | 何時使用 |
|---|---|
| frontend-design（此技能） | 編碼前 - 學習設計原則（配色、字體排印、UX 心理學） |
| web-design-guidelines | 編碼後 - 審計可及性、效能與最佳實踐 |
設計後工作流程
在實作設計之後，執行審計：
1. 設計 → 閱讀 frontend-design 原則 ← 您在此處
2. 編碼 → 實作設計
3. 審計 → 執行 web-design-guidelines 審查
4. 修正 → 處理審計結果
下一步： 編碼後，使用
web-design-guidelines技能審計您的實作，檢查可及性、焦點狀態、動畫與效能問題。
記住： 設計是思考，而不是複製。每個專案都應根據其獨特的情境和使用者，獲得全新的考量。避免現代 SaaS 安全港！