frontend-design

# Frontend Design — 避免 AI Slop 的設計指引 > 來源：[Improving Frontend Design Through Skills](https://claude.com/blog/improving-frontend-design-through-skills) > 📦 離線歸檔：[`archive/articles/improving-frontend-design-through-skills.md`](https://github.com/zeuikli/claude-code-workspace/blob/blog-archive/archive/articles/improving-frontend-design-through-skills.md) ## 字型選擇 避免：Inter、Roboto、system-ui 等過度使用的預設字體 推薦搭配： - 標題：Playfair Display、DM Serif Display、Space Grotesk - 內文：DM Sans、Source Serif 4、JetBrains Mono（程式碼） - 使用 Google Fonts 或 Bunny Fonts CDN ## 色彩系統 避免：漸層按鈕、藍紫配色、過度飽和 推薦： - 選擇一個主色調，搭配中性色與一個強調色 - 使用 oklch() 色彩空間產生和諧的調色盤 - 暗色模式：降低飽和度而非反轉顏色 ## 動態效果 避免：彈跳動畫、過度的 hover 效果 推薦： - 微妙的淡入（opacity 0→1, 200-300ms） - 使用 CSS `transition` 而非 JS 動畫 - 滾動觸發的漸進顯示（Intersection Observer） ## 背景與紋理 避免：純白背景、stock photo 背景 推薦： - 極淡的噪點紋理（CSS noise pattern） - 幾何網格或點陣圖案 - 玻璃擬態（backdrop-filter: blur）搭配半透明卡片 ## 版面配置 - 限制最大寬度（max-width: 1200px） - 使用 CSS Grid 搭配不等欄寬 - 留白是設計工具，不是浪費空間 ## Gotcha - **不要覆蓋已建立的設計系統**：若專案使用 Tailwind / shadcn / MUI，先遵循其約定，不要用本 skill 的偏好蓋掉。 - **品牌字型優先**：若專案有 brand identity（logo 字型、既有色盤），本 skill 的字型建議僅供參考，不要強行替換。 - **深色背景需確認可及性**：深色配淺字 contrast ratio 需 ≥ 4.5:1（WCAG AA），不要只顧美觀。 - **動態效果不是必須**：若使用者未要求動畫，不要主動加入 transition / animation，避免拖慢渲染。