前端設計方針 是做什麼的？
當工作不僅是讓 UI 功能正常，更是要讓它感覺有目的性、精緻且符合產品領域時，請使用此技能。
來源：由 linus707 從社群 PR #1659 搶救並整理的過時內容。
注意：ECC 刻意不重新打包官方的 Anthropic frontend-design 技能。如需官方的上游技能，請從 anthropics/skills 安裝。此技能是 ECC 專屬的設計方向救濟，保留了 #1659 中有用的本地化指導。
使用時機
- 使用者要求建置網頁、應用程式、儀表板、成品、元件或 UI。
- 使用者要求讓介面更精緻、獨特、美觀或少些通用感。
- 實作時需要決定視覺層級、排版、色彩、動畫、版面與互動選擇。
- 目前 UI 能運作，但感覺扁平、通用、套版或與目標受眾不符。
設計方向
在開始編碼前，請選擇一個明確的方向：
- 目的：這個介面要完成什麼任務？
- 受眾：誰會重複執行這個工作流程？他們最先需要掃視什麼？
- 基調：實用、編輯、趣味、工業、精煉、技術、極繁、極簡、密集、平靜，或其他明確的方向。
- 令人難忘的細節：一個讓成品感覺經過深思熟慮的設計點子。
- 限制條件：框架、無障礙性、效能、回應式設計以及現有設計系統。
讓方向與領域相符。SaaS 營運工具通常應該是密集、安靜且易於掃視的。作品集、發布頁面、遊戲或編輯類作品則可以更具表現力。不要將登陸頁面的布局硬套在需要頻繁日常使用的工具上。
實作指南
- 第一個畫面應建置實際可用的體驗，除非使用者明確要求行銷文案。
- 在引入新的視覺系統之前，先使用現有專案元件、代碼 Token、圖示庫與路由模式。
- 當介面依賴圖片、產品、地點、人物、遊戲畫面、圖表或可檢視的媒體時，使用真實或產生的視覺素材。
- 偏好情境化的排版與間距，而非通用的超大主視覺文字。
- 保持色彩配置的多維度：避免 UI 由單一色調主導。
- 使用 CSS 變數或現有設計代碼 Token，讓方向在各種狀態下保持一致。
- 明確設計回應式限制條件：網格、長寬比、最小/最大尺寸、固定工具列與固定格式的控制項不應因標籤或懸停狀態出現而偏移。
- 謹慎且刻意地使用動畫。偏好能釐清狀態的高信號過渡，而非裝飾性動畫。
- 驗證行動裝置與桌機上的文字適應性。長標籤必須能整齊換行或調整大小，而不是溢出。
反模式
- 不要預設使用常見的生成模式：紫色漸層、裝飾性色塊、超大卡片、模糊的主視覺文案或類素材庫的氛圍媒體。
- 不要在其他卡片內新增 UI 卡片。
- 當領域要求節制時，不要到處使用單一裝飾風格。
- 不要將主要產品、工具、物件或工作流程隱藏在通用的行銷章節後面。
- 除非能清楚證明其價值，否則不要為了設計裝飾而新增依賴項。
- 不要在 UI 內部描述 UI 的功能，因為控制項本身就能說明一切。
審查清單
- 第一個視窗應立即傳達產品、工作流程或物件。
- 視覺層級支援掃視與重複使用。
- 排版適合容器，且不會與相鄰內容重疊。
- 色彩選擇有對比度，且不會退化成單一色調的調色板。
- 圖示用於熟悉的工具操作（如果有的話）。
- 回應式布局的版面、網格、工具列、控制項、圖塊與計數器具有穩定的尺寸。
- 素材能正確呈現並承載主題內容，而不是作為填充物。
- 動畫能改善方向感，且不會掩蓋操作的遲緩。
- 除非有明確理由偏離，否則最終結果應符合 repo 中現有的前端慣例。