# Frontend Design > 建立獨特且生產等級的前端介面，具備高設計品質。當使用者要求建構 Web 元件、頁面、產出物、海報或應用程式時使用此技能（例如：網站、登陸頁面、儀表板、React 元件、HTML/CSS 佈局，或為任何 Web UI 進行樣式美化）。產生創意、精緻的程式碼和 UI 設計，避免泛用的 AI 美學。 - Skill: `tai-ch0802/frontend-design` (Agent Skill, multi-file: 10 files) - Install (CLI): `npx skillmds@latest add tai-ch0802/frontend-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/tai-ch0802/frontend-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: 完整條款請見 LICENSE.txt - Author: Tai-ch0802 (https://skillmd.com/u/tai-ch0802) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/tai-ch0802/frontend-design --- 此技能指導建立獨特且生產等級的前端介面，避免泛用的「AI 廉價」美學。實作真正可運行的程式碼，對美學細節和創意選擇給予極高關注。 使用者提供前端需求：要建構的元件、頁面、應用程式或介面。他們可能會包含關於用途、受眾或技術限制的上下文。 ## 設計思維 在編碼之前，理解上下文並承諾一個**大膽**的美學方向： - **用途**：此介面解決什麼問題？誰在使用它？ - **調性**：選擇一個極端的風格方向：極簡主義、極繁主義混沌、復古未來主義、有機/自然、奢華/精緻、趣味/玩具感、編輯/雜誌風、粗獷主義/原始、裝飾藝術/幾何、柔和/粉彩、工業/實用主義等。有太多風味可供選擇。用這些作為靈感，但設計一個忠於美學方向的作品。 - **限制**：技術需求（框架、效能、無障礙性）。 - **差異化**：什麼讓這個設計令人**難忘**？有人會記住的那一件事是什麼？ **關鍵**：選擇清晰的概念方向並精準執行。大膽的極繁主義和精緻的極簡主義都可行 — 關鍵在於意圖性，而非強度。 然後實作可運行的程式碼（HTML/CSS/JS、React、Vue 等），要求： - 生產等級且功能完備 - 視覺上引人注目且令人難忘 - 具有清晰美學觀點的一致性 - 每個細節都精心打磨 ## 前端美學指南 重點關注： - **排版**：選擇美觀、獨特且有趣的字體。避免泛用字體如 Arial 和 Inter；改為選擇能提升前端美感的獨特選擇；出人意料、有個性的字體選擇。搭配一個獨特的展示字體和一個精緻的內文字體。 - **色彩與主題**：承諾一致的美學方向。使用 CSS 變數確保一致性。強調色搭配鮮明的焦點色，效果優於膽怯的、均勻分配的色票。 - **動態效果**：使用動畫製作效果和微互動。對於 HTML 優先使用純 CSS 方案。有 Motion 函式庫時用於 React。聚焦在高影響力的時刻：一個精心編排的頁面載入配合交錯呈現（animation-delay）比分散的微互動更令人驚喜。使用觸發捲動和出人意料的懸停狀態。 - **空間構圖**：出人意料的佈局。不對稱。重疊。對角線流動。打破網格的元素。慷慨的負空間或受控的密度。 - **背景與視覺細節**：營造氛圍和深度而非預設使用純色。添加與整體美學相匹配的情境效果和質感。運用創意形式如漸層網格、雜訊質地、幾何圖案、分層透明度、戲劇性陰影、裝飾性邊框、自訂游標和顆粒覆蓋。 **絕不**使用泛用的 AI 生成美學，如過度使用的字體系列（Inter、Roboto、Arial、系統字體）、老套的配色方案（特別是白色背景上的紫色漸層）、可預測的佈局和元件模式，以及缺乏場景特殊性的千篇一律設計。 要有創意地詮釋並做出出人意料的選擇，讓設計感覺真正為情境量身打造。每個設計都不應相同。在淺色和深色主題之間變化，使用不同字體、不同美學。**絕不**趨向常見選擇（例如 Space Grotesk）。 **重要**：將實作複雜度與美學願景相匹配。極繁設計需要精心的程式碼，包含大量動畫和效果。極簡或精緻的設計需要克制、精準，以及對間距、排版和微妙細節的細心照顧。優雅來自於對願景的出色執行。 記住：Claude 有能力創造非凡的創意作品。不要保留，展示當跳出既定框架並全力投入獨特願景時，真正能創造的成果。