前端設計方向 是做什麼的？
請在開發工作不只是讓 UI 能運作，而是要讓它感覺有目的性、精緻且與產品領域相稱時，使用此技能。
來源：自社群 PR #1659（作者 linus707）搶救整理。
注意：ECC 刻意不重新打包標準的 Anthropic frontend-design 技能。若需要官方上游技能，請從 anthropics/skills 安裝。此技能是 ECC 專屬的設計方向保留版，擷取自 #1659 中有用的本地指引。
使用時機
- 使用者要求建置網頁、應用程式、儀表板、成品、元件或 UI。
- 使用者要求讓介面更精緻、更有特色、更美觀，或降低通用感。
- 實作需要考量視覺層級、字體排版、色彩、動態效果、版面與互動選擇。
- 當前 UI 功能正常，但感覺扁平、通用、模板化或與目標受眾不符。
設計方向
在編寫程式碼之前，請選擇一個明確的方向：
- 目的：這個介面要完成什麼任務？
- 受眾：誰會重複執行這個工作流程？他們首先需要掃描什麼？
- 調性：實用、編輯、活潑、工業風、精緻、技術感、極繁、極簡、密集、平靜，或其他明確的方向。
- 記憶點：一個讓結果感到有心的設計構想。
- 限制條件：框架、無障礙、效能、響應式、以及現有的設計系統。
讓方向與領域相匹配。SaaS 營運工具通常應該保持密集、安靜且易於掃描。作品集、發表頁面、遊戲或編輯類作品則可以更具表現力。不要將登陸頁面的編排方式強加在需要頻繁日常使用的工具上。
實作指導
- 除非使用者明確要求行銷文案，否則第一個畫面應建置實際可用的體驗。
- 在引入新的視覺系統之前，優先使用現有事業元件、設計令牌、圖示庫與路由模式。
- 當介面依賴圖片、產品、地點、人物、遊戲畫面、圖表或可檢查的媒體時，請使用真實或生成的視覺素材。
- 優先使用符合情境的字體排版與間距，而非通用的超大尺寸主視覺文字。
- 保持調色盤多維度：避免 UI 由單一色系主導。
- 使用 CSS 變數或現有設計令牌，使方向在各狀態下保持一致。
- 明確設計響應式限制條件：網格、長寬比、最小/最大尺寸、固定工具欄與固定格式的控制項，不應因標籤或懸停狀態的出現而位移。
- 節制但刻意地使用動態效果。優先選擇能釐清狀態的高訊號過渡效果，而非裝飾性動畫。
- 在手機與桌面端驗證文字適配性。長標籤應能清楚換行或調整大小，而非溢出。
反模式
- 不要預設使用常見的生成模式：紫色漸層、裝飾性色塊、超大卡片、模糊的主視覺文案或類似素材的罐頭媒體。
- 不要在卡片內再放入 UI 卡片。
- 不要在所有地方使用單一的裝飾風格。
- 不要將主要產品、工具、物件或工作流程隱藏在通用的行銷段落之後。
- 若非能明顯提升效益，不要為了設計效果新增依賴套件。
- 不要在 UI 內部描述 UI 的功能，控件本身應能說明一切。
審查清單
- 第一個視窗應立即傳達產品、工作流程或物件。
- 視覺層級應支援掃描與重複使用。
- 字體排版應適應容器，不與相鄰內容重疊。
- 色彩選擇應有對比度，不應使整個調色盤變得單調。
- 在有熟悉工具動作的地方使用圖示。
- 響應式版面應具有穩定的尺寸：看板、網格、工具欄、控制項、圖塊與計數器。
- 素材應正確渲染，並承載主題內容，而非作為填補空白之用。
- 動態效果應優化導航方向，而非掩蓋遲鈍感。
- 除非有明確理由偏離，否則結果應符合儲存庫現有前端慣例。