前端設計系統
哲學： 每個像素都有其目的。克制是一種奢侈。使用者心理驅動決策。 核心原則： 思考，而非記憶。提問，而非假設。
🎯 選擇性閱讀規則（強制）
務必閱讀必要檔案，選擇性檔案僅在需要時閱讀：
| 檔案 | 狀態 | 閱讀時機 |
|---|---|---|
| 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 心理學與可及性稽核 | 使用瀏覽器開發者工具與 Lighthouse |
⚠️ 關鍵：在假設之前先提問（強制）
停！如果使用者的請求是開放式的，請勿預設使用你最喜歡的模式。
當使用者提示不明確時，請提問：
顏色未指定？ 提問：
「您偏好哪種配色？(藍色/綠色/橘色/中性色/其他？)」
風格未指定？ 提問：
「您想要什麼風格？(極簡/大膽/復古/未來感/有機？)」
佈局未指定？ 提問：
「您對佈局有偏好嗎？(單欄/網格/不對稱/滿版？)」
⛔ 應避免的預設傾向（反安全港）：
| AI 預設傾向 | 為何不好 | 應思考的方向 |
|---|---|---|
| Bento Grid（現代陳腔濫調） | 每個 AI 設計都在用 | 為什麼這個內容需要使用網格？ |
| Hero Split（左/右分割） | 可預測且無聊 | 巨型字體排版或垂直敘事如何？ |
| Mesh/Aurora 漸層 | 新的「懶人」背景 | 什麼是激進的顏色搭配？ |
| 玻璃擬態 | AI 眼中的「高級感」 | 採用純色、高對比的扁平設計如何？ |
| 深青色 / 金融科技藍 | 從紫色禁令中逃脫的安全港 | 為什麼不試試紅色、黑色或螢光綠？ |
| 「Orchestrate / Empower」 | AI 生成的文案 | 人類會怎麼說這句話？ |
| 暗色背景 + 霓虹光 | 過度使用，「AI 感」 | 品牌實際上需要什麼？ |
| 全部圓角 | 通用/安全 | 哪裡可以使用銳利、粗獷的邊角？ |
🔴 「你選擇的每一個『安全』結構，都讓你離通用模板更近一步。勇於冒險。」
1. 限制條件分析（永遠優先）
在進行任何設計工作之前，回答下列問題或詢問使用者：
| 限制條件 | 問題 | 為何重要 |
|---|---|---|
| 時程 | 有多少時間？ | 決定複雜度 |
| 內容 | 準備好了還是暫用？ | 影響佈局靈活性 |
| 品牌 | 是否有既有準則？ | 可能決定顏色/字型 |
| 技術 | 使用什麼技術棧？ | 影響功能能力 |
| 受眾 | 具體是誰？ | 驅動所有視覺決策 |
受眾 → 設計方針
| 受眾 | 思考方向 |
|---|---|
| Z 世代 | 大膽、快速、行動優先、真實 |
| 千禧世代 | 乾淨、極簡、價值驅動 |
| X 世代 | 熟悉、可信、清晰 |
| 嬰兒潮世代 | 易讀、高對比、簡潔 |
| B2B | 專業、數據導向、信任 |
| 奢侈品 | 克制的優雅、留白 |
2. UX 心理學原則
核心定律（內化這些）
| 定律 | 原則 | 應用 |
|---|---|---|
| 希克定律 | 選擇越多，決策越慢 | 限制選項，使用漸進式揭露 |
| 費茲定律 | 越大越近越好點擊 | 適當調整 CTA 大小 |
| 米勒定律 | 工作記憶約 7 個項目 | 將內容分組 |
| 馮·雷斯托夫效應 | 不同 = 令人難忘 | 讓 CTA 視覺上突出 |
| 序列位置效應 | 最前最後最容易被記住 | 關鍵資訊放在開頭或結尾 |
情緒設計層次
本能層（瞬間）→ 第一印象：色彩、意象、整體感覺
行為層（使用）→ 使用中：速度、反饋、效率
反思層（記憶）→ 使用後：「我喜歡這個產品所代表的我的形象」
建立信任
- 敏感操作的安全性指示
- 在適當時機使用社會證明
- 清晰的聯繫方式/支援管道
- 一致且專業的設計
- 透明的政策
3. 佈局原則
黃金比例（φ = 1.618）
用於比例和諧：
├── 內容：側邊欄 ≈ 62%：38%
├── 每個標題大小 = 前一個 × 1.618（營造影劇性規模）
├── 間距可依循：sm → md → lg（每個 × 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. 動畫原則
時機概念
根據以下條件決定持續時間：
├── 距離（越遠 = 越長）
├── 大小（越大 = 越慢）
├── 重要性（關鍵 = 越清楚）
└── 情境（緊急 = 快速，奢華 = 緩慢）
緩動選擇
| 動作 | 緩動方式 | 原因 |
|---|---|---|
| 進入 | Ease-out | 減速、穩定落下 |
| 離開 | Ease-in | 加速、退出 |
| 強調 | Ease-in-out | 平滑、刻意 |
| 趣味性 | Bounce | 好玩、有活力 |
效能
- 僅動畫化 transform 與 opacity
- 尊重 reduced-motion 偏好設定
- 在低階裝置上進行測試
動畫模式請參閱： animation-guide.md，進階內容請參閱： motion-graphics.md
8. 「驚豔元素」檢查清單
高級感指標
- 大量的留白（奢華 = 呼吸空間）
- 微妙的深度與立體感
- 流暢、有意義的動畫
- 對細節的關注（對齊、一致性）
- 一致且協調的視覺節奏
- 自訂元素（而非全部使用預設）
信任建立者
- 在適當位置顯示安全性提示
- 社會證明 / 客戶推薦
- 清晰的價值主張
- 專業的圖像
- 一致的設計語言
情緒觸發點
- 能引發預期情緒的英雄區
- 人物元素（臉孔、故事）
- 進度/成就指示器
- 令人愉悅的小驚喜
9. 反模式（不該做的事）
❌ 懶惰設計指標
- 未經考量直接使用系統預設字型
- 與設計不搭的圖庫照片
- 不一致的間距
- 過多相互競爭的顏色
- 缺乏層級的文字牆
- 可及性不足的對比度
❌ AI 傾向模式（避免！）
- 每個專案都用相同的顏色
- 暗色 + 霓虹作為預設
- 什麼都紫色/紫羅蘭色（紫色禁令 ✅）
- 簡單的登陸頁面也用 Bento grid
- 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 安全港！