frontend-design-direction

Frontend Design Direction

當開發目標不只是讓 UI 具備基本功能，而是要讓介面呈現出明確意圖、高級質感，並完美契合產品領域時，請使用此 Skill。

來源：搶救自已停滯的社群 PR #1659（作者 linus707）。

註：ECC 故意未重新打包 Anthropic 官方的 frontend-design Skill。若需要官方上游 Skill，請直接從 anthropics/skills 安裝。本 Skill 是將 #1659 中極具價值的在地指導原則進行搶救並針對 ECC 整理出的設計方向版本。

使用時機

• 使用者要求建立網頁、App、儀表板、Artifact、元件或 UI 介面。
• 使用者要求讓介面更精緻、更有特色、更美觀，或擺脫公版套版感（generic）。
• 實作過程需要針對視覺層次、字體排印（typography）、色彩、動態、版面配置及互動體驗做出具體決策。
• 目前的 UI 雖然能運作，但視覺平淡、套版感強、缺乏特色，或與目標受眾需求不符。

設計方向

在開始撰寫程式碼之前，請先確定明確的設計方向：

1. 目的（Purpose）：這個介面要完成什麼任務？
2. 受眾（Audience）：誰會重複使用此工作流程？他們首先需要快速瀏覽（scan）什麼資訊？
3. 基調（Tone）：實用導向、雜誌刊物風、活潑、工業風、精緻、技術導向、極繁主義、極簡主義、緊湊高密度、平靜，或其他明確方向。
4. 記憶點（Memorable detail）：一個能讓整體成果展現出精心設計感的核心點子。
5. 限制條件（Constraints）：框架、無障礙性（accessibility）、效能、響應式設計（responsiveness）以及現有的設計系統（design system）。

設計方向必須與產品領域契合。SaaS 營運工具通常應該緊湊、克制且便於快速掃視；而作品集、產品發布頁、遊戲或專題文章則可以更有表現力。切勿把 Landing Page 的版面配置強加在需要每日高頻使用的工具上。

實作指南

• 第一個畫面請直接呈現實際可用的功能體驗，除非使用者明確要求撰寫行銷文案。
• 在引進新的視覺系統之前，優先使用專案現有的元件、Design Token、圖示庫和路由模式。
• 當介面依賴圖片、產品、地點、人物、遊戲畫面、圖表或可檢視的媒體內容時，請使用真實或生成的視覺素材。
• 優先使用契合情境的字體排印與間距配置，避免使用千篇一律的大字體主視覺標題（oversized hero text）。
• 保持調色盤的多維度：避免讓 UI 被單一色相家族獨占。
• 善用 CSS 變數或既有的 Design Token，確保整體方向在各種狀態下保持一致。
• 明確設計響應式限制：網格、長寬比、最小/最大尺寸、穩定的工具列和固定格式的控制項，不應在標籤切換或 Hover 狀態出現時發生版面位移。
• 謹慎且精準地使用動態效果。優先使用能明確傳達狀態變化的高訊號過渡（high-signal transitions），而非純裝飾性的動畫。
• 仔細檢查文字在行動端與桌面端的適應性。較長的標籤必須能乾淨地換行或調整大小，絕不能溢出容器。

反模式

• 不要直接套用常見的 AI 生成套路：紫色漸層、裝飾性流體形狀（blobs）、過大的卡片、模糊的 Hero 區塊文案，或像圖庫素材一樣的情境媒體。
• 不要嵌套卡片（在 UI 卡片內部再放置卡片）。
• 當該領域需要克制時，不要在所有地方使用單一的裝飾風格。
• 不要把主要產品、工具、物件或工作流程隱藏在通用的行銷區塊之後。
• 不要為了純粹的設計花招而新增依賴套件，除非它帶來的價值顯著超過成本。
• 當控制項本身已經能清楚表達功能時，不要在 UI 內部以文字額外說明 UI 的功能。

審查清單

• 首屏首視圖（first viewport）能立即傳達產品、工作流程或核心物件。
• 視覺層次結構能有效支援資訊掃視與重複使用。
• 字體排印大小合宜，且不會與相鄰內容重疊。
• 色彩選擇具備足夠對比度，不會坍塌成單調的單色調。
• 圖示用於常見的工具操作（在適用情況下）。
• 響應式配置在看板、網格、工具列、控制項、卡片磚和計數器上均具備穩定的尺寸。
• 視覺素材能正常渲染並切中主題，而不是僅充當填補空白的素材。
• 動態效果有助於操作指引與定位，且不會掩蓋介面的卡頓。
• 產出成果符合 Repo 現有的前端開發規範，除非有明確的合理理由需要偏離。