Frontend Design Skill

Purpose

這個 skill 用來把模糊的網站、Web App 或元件需求，轉成可上線的前端介面與設計系統實作。核心不是只把畫面做漂亮，而是先定義設計 tokens、互動狀態、流程可視化、資訊優先級與可重用規範，再落成前端程式碼。若是工作台型產品，嚴格禁止 stacked UI / stacked cards 疊首頁；必須先定義唯一主任務，並讓該功能盡量佔據最大、最中央、最先被看的畫面區域。

Scope

In scope

• 網站、Web App、dashboard、landing page、admin panel、component library 與 design system 的 UI 設計與實作。
• 從設計方向、tokens、components、page layout 到互動狀態與 accessibility 的整體規劃。
• 多步驟體驗中的 journey map、user flow、wireflow 與 Gestalt 原則落地。
• 以 React、Vue、Svelte、HTML/CSS/Tailwind 等常見 Web 技術完成前端交付。

Out of scope

• 純後端 API、演算法、資料處理或非視覺性的程式任務。
• 純品牌策略、產品定位或沒有 UI 輸出的設計討論。
• 只要求修單一小 bug、調一個 CSS 值且不涉及系統性 UI 改善的任務。