前端設計 是做什麼的？
透過大膽的創意選擇，打造令人難忘的前端介面，使其從千篇一律的 AI 生成審美中脫穎而出。
另請參閱： 基礎知識請見
ui-design（字體、色彩、間距），CSS 模式請見web-design。
安裝
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install frontend-design
此技能的作用
透過以下方式引導打造視覺上與眾不同的網頁介面：
- 在編碼前先確立大膽的審美方向
- 刻意選擇字體、色彩與空間安排
- 實作令人愉悅的動態與微互動
- 避免 AI 生成 UI 中可預測的模式
使用時機
- 建立新元件、頁面或網頁應用程式時
- 製作登陸頁面、行銷網站或產品 UI 時
- 重新設計介面以使其更令人難忘時
- 任何視覺效果至關重要的前端工作
關鍵字
前端設計，網頁 UI，UI 設計，登陸頁面，創意 UI，網頁美學，字體排版，視覺設計，動態設計，與眾不同的介面
設計思考流程
在撰寫程式碼之前，先確立審美方向：
1. 理解上下文
- 目的：此介面解決什麼問題？
- 受眾：誰在使用它，他們有什麼期望？
- 限制：框架、效能、無障礙要求
2. 選擇大膽的方向
選擇一個極端的審美方向——中庸只會讓人遺忘：
| 方向 | 特徵 |
|---|---|
| 粗暴極簡 | 樸素、精簡、沒有任何多餘元素 |
| 極繁混沌 | 密集、層層疊疊、刻意讓人眼花撩亂 |
| 復古未來 | 融合復古美學與現代科技 |
| 有機/自然 | 柔和、流暢、受自然啟發 |
| 奢華/精緻 | 高級材質、低調優雅 |
| 玩趣/玩具風 | 有趣、親和、色彩明亮 |
| 編輯/雜誌風 | 以字體為主、基於網格 |
| 粗暴/原始 | 裸露結構、反設計 |
| 裝飾藝術/幾何 | 大膽形狀、對稱、裝飾 |
| 工業/功利 | 功能優先、堅固耐用 |
3. 找出令人難忘的元素
提到這個介面時，人們會記住哪一件事？堅定執行它。
美學指南
字體排版
絕對不要使用通用字體：
- Arial、Helvetica、system-ui
- Inter、Roboto（除非極具刻意性）
務必選擇有特色的字體：
- 將一個有特色的標題字體與一個精緻的內文字體搭配
- 探索：Space Grotesk、Clash Display、Cabinet Grotesk、Satoshi、General Sans、Instrument Serif、Fraunces、Newsreader
/* 字體搭配範例 */
--font-display: 'Clash Display', sans-serif;
--font-body: 'Satoshi', sans-serif;
色彩與主題
- 堅定執行一個協調的調色盤——不要因為安全而猶豫不決
- 主色 + 強調色的效果遠優於平均分配顏色
- 使用 CSS 變數以確保一致性
- 避免在白色背景上使用紫色漸層（「AI 預設」）
:root {
--color-bg: #0a0a0a;
--color-surface: #141414;
--color-text: #fafafa;
--color-accent: #ff4d00;
--color-muted: #666666;
}
空間構成
打破常規：
- 不對稱勝過完美平衡
- 刻意重疊元素
- 對角線流動或非傳統佈局
- 寬敞的留白或受控的密集度——不要取中間值
- 打破網格的元素來吸引注意
動態與互動
聚焦於高影響力的時刻：
- 頁面載入：使用
animation-delay實現錯開進場 - 觸發於滾動的動畫，令人驚喜
- 懸停狀態要展現個性
- 一般 HTML 優先使用 CSS 動畫；React 則使用 Motion 函式庫
/* 錯開進場 */
.card { animation: fadeUp 0.6s ease-out backwards; }
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
背景與氛圍
創造深度與氛圍：
- 漸層網格與多色漸層
- 噪點紋理與顆粒覆蓋層
- 幾何圖案或精細網格
- 分層透明度
- 戲劇性陰影或完全平面化
- 自訂游標用於互動元素
實作原則
將複雜度與願景相匹配
- 極繁願景 → 用豐富的動畫與詳盡的程式碼
- 極簡願景 → 克制、精準、完美的間距
- 優雅 = 完美執行願景，而不是添加更多東西
在不同版本之間變化
永遠不要陷入模式的重複：
- 交替使用淺色/深色主題
- 每次使用不同的字體系列
- 探索不同的審美方向
- 每個設計都應感覺獨一無二
絕對避免
- 絕對不要使用通用的字體系列（Inter、Roboto、Arial、系統字體）
- 絕對不要在白色背景上使用紫色漸層——即所謂的「AI 審美」
- 絕對不要使用可預測、千篇一律的佈局
- 絕對不要跳過設計思考階段——先理解再建構
- 絕對不要選擇安全的中庸審美——堅定執行一個方向
- 絕對不要忘記，與眾不同的設計需要與眾不同的程式碼
- 絕對不要在不同版本之間陷於相同的模式——刻意求變
- 絕對不要無目的地增加複雜度——無論極簡還是極繁都需要意圖