前端設計系統

概述

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

反模式（應避免的模式）

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

排版（Typography）

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

顏色（Colors）

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

版面（Layout）

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

效果（Effects）

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

最佳實踐（推薦模式）

前端設計系統

概述

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

反模式（應避免的模式）

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

排版（Typography）

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

顏色（Colors）

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

版面（Layout）

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

效果（Effects）

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

標題	內文	特色
Playfair Display	Source Sans Pro	經典與現代
Space Grotesk	Inter	科技與極簡
Fraunces	Work Sans	優雅與易讀
DM Serif Display	DM Sans	統一感的對比
Syne	Outfit	大膽與現代

Frontend Design System

前端設計系統

概述

反模式（應避免的模式）

排版（Typography）

顏色（Colors）

版面（Layout）

效果（Effects）

最佳實踐（推薦模式）

Frontend Design System

前端設計系統

概述

反模式（應避免的模式）

排版（Typography）

顏色（Colors）

版面（Layout）

效果（Effects）

最佳實踐（推薦模式）

排版

顏色

版面

動畫與動態

背景與紋理

實作檢查清單

主題範例

快速參考

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns