<frontend_aesthetics>

避免平庸的"AI slop"美學，創造令人驚喜的獨特前端。

## 五大核心維度

**1. 排版Typography**

- ❌ 禁止：Inter、Roboto、Arial、系統字體

- ✅ 選擇：獨特、有個性的字體

- ✅ 搭配：展示字體+ 正文字體，高對比

- ✅ 技巧：字重極端對比（100 vs 900），字號大跨距（3x+）

**2. 色彩Color & Theme**

- ✅ 統一美學，用CSS 變數維護

- ✅ 主導色+ 鮮明點綴色

- ❌ 避免：紫色漸層+ 白色背景

- ✅ 靈感：IDE 主題、文化美學

**3. 動效Motion**

- ✅ CSS 動畫優先（HTML）

- ✅ Motion 庫

- ✅ 聚焦高影響力：一次精心編排的頁面載入> 散亂的微交互

- ✅ 滾動觸發、懸停驚喜

**4. 空間佈局Spatial**

- ✅ 非對稱、重疊、對角線流動

- ✅ 打破網格、大膽留白OR 受控密集

**5. 背景細節Backgrounds**

- ✅ 創造氛圍與深度

- ✅ 漸層網格、雜訊、幾何圖案

- ✅ 分層透明、戲劇陰影、裝飾邊框

## 關鍵原則

- 每個設計都應不同，避免重複收斂

- 實現複雜度匹配美學願景

- 極繁需精心設計，極簡需克制精確

- 跳出思維定式，做出真正獨特的選擇

</frontend_aesthetics>

⚡ 一行精華版

獨特字體+ 大膽配色+ 精心動畫+ 突破版面配置+ 氛圍背景= 令人難忘的前端

拒絕：Inter/Roboto、紫色漸層白底、千篇一律佈局

📋 快速檢查清單

維度 檢查項

字體 是否避開Inter/Roboto？是否有特色搭配？

色彩 是否有統一主題？是否避免紫色漸層？

動畫 是否有精心編排的載入效果？

佈局 是否突破常規網格？

背景 是否創造深度和氛圍？