前端設計系統

概述

此技能是為了避免 AI 常產生的「通用且無個性的設計」，創建精緻獨特的前端 UI 指南。

反模式（應避免的模式）

以下模式被稱為「AI 廢話美學」，應該避免：

排版（Typography）

• •❌ Inter、Roboto、Open Sans 等過度使用的字體
• •❌ 所有文字使用相同字體家族
• •❌ 只使用標準字重

顏色（Colors）

• •❌ 紫色到粉紅色的漸層
• •❌ 通用的藍色/綠色強調色
• •❌ 彩度過高的霓虹色
• •❌ 直接使用預設 Tailwind 調色盤

版面（Layout）

• •❌ 左文字、右圖片的標準主視覺區
• •❌ 三欄均等格線的功能區
• •❌ 置中的單調卡片版面

效果（Effects）

• •❌ 過度的模糊效果（blur）
• •❌ 所有元素都加動畫
• •❌ 濫用玻璃擬態

最佳實踐（推薦模式）

排版

推薦字體搭配範例：

排版原則：

• •標題和內文使用不同字體家族（襯線 × 無襯線組合）
• •活用字重變化（300、400、600、800）
• •用字距創造視覺層次

顏色

調色盤建構原則：

主色：代表品牌識別的主要顏色
次色：補充主色的顏色（互補色或類似色）
強調色：用於 CTA 和醒目標示的注目色
中性色：用於背景和文字的灰色系

創造獨特性的技巧：

• •用 HSL 調整創造微妙的色相偏移
• •深色模式降低彩度、調整明度
• •語意顏色（success、warning、error）也要配合品牌調整

版面

差異化的版面模式：

• •非對稱格線（5:7、2:3 比例）
• •重疊元素和負邊距
• •斜向區塊分隔
• •便當格線和有機排列
• •大膽運用留白

動畫與動態

有效動畫原則：

1. •

   集中在高影響力時刻

   • •頁面載入時單一協調的動畫
   • •使用者動作（點擊、懸停）的即時回饋
   • •狀態變化（成功、錯誤）的視覺表現
2. •

   時間指引

   • •微互動：150-300ms
   • •頁面轉場：300-500ms
   • •複雜動畫：500-800ms
3. •

   緩動函數

   css

   /* 推薦緩動 */
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
   --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
   

背景與紋理

背景設計創意：

• •微妙的噪點紋理
• •幾何圖案（適度使用）
• •網格漸層
• •抽象的 blob/形狀
• •有視差效果的背景圖層

實作檢查清單

進度檢查清單：

• • 排版：為標題和內文選擇不同字體
• • 調色盤：建立 5 色以上的和諧色盤
• • 版面：考慮非對稱或獨特的格線系統
• • 動畫：實作 1-2 個高影響力動畫
• • 背景：加入紋理或獨特的背景元素
• • 一致性：確認所有元素遵循設計系統

主題範例

詳細主題範例請參考：

• •主題範例集
• •元件參考

快速參考

字體搭配速選清單：

1. •現代・簡潔 → Space Grotesk + Inter
2. •優雅・高級 → Playfair Display + Lato
3. •科技・新創 → Syne + Outfit
4. •溫暖・親切 → Fraunces + Work Sans
5. •大膽・創意 → DM Serif Display + DM Sans

顏色參考：

• •Coolors.co 產生和諧色盤
• •Realtime Colors 即時預覽
• •Happy Hues 獲取靈感