frontend-design (前端設計)
概覽
此公開擷取副本將 https://github.com/tech-leads-club/agent-skills 中的 packages/skills-catalog/skills/(design)/frontend-design 包裝成 Omni Skills 的原生編輯樣式，同時保留其原始來源。
當操作者需要保持上游工作流程、支援檔案與儲存庫上下文完整無缺，同時讓公開驗證器與私有增強器繼續進行正常的下游流程時使用。
此擷取作業會保持複製的上游檔案完整，並使用 metadata.json 中的 external_source 區塊與 ORIGIN.md 作為審查的來源歸屬錨點。
此技能引導建立獨特、生產級的前端介面，避免通用的「AI 垃圾」美學。實作真正可運作的程式碼，並在美學細節與創意選擇上達到卓越水準。
匯入的原始章節若無法乾淨對應至公開標題，仍保留在下方或支援檔案中。重要匯入章節：設計方向、AI 垃圾測試。
何時使用此技能
使用此章節作為觸發過濾器。它應在操作者載入檔案、執行指令或發起合併請求前，明確界定啟用範圍。
- 當請求明確符合匯入的原始意圖時使用：建立具有高設計品質、獨特且生產級的前端介面。當使用者要求建立網頁元件、頁面、成品、海報或應用程式時使用。產生創意、精緻的程式碼...。
- 當操作者應保留上游工作流程細節，而非從頭重寫流程時使用。
- 當來源歸屬需在答案、PR 或審查套件中保持可見時使用。
- 當複製的上游參考資料、範例或腳本能顯著改善答案時使用。
- 當工作流程在私有增強器接手前，應保持在公開擷取儲存庫中可審查時使用。
操作表格
| 情境 | 起點 | 重要性 |
|---|---|---|
| 首次使用 | metadata.json | 在接觸複製的工作流程前，透過 external_source 區塊確認儲存庫、分支、提交以及匯入路徑 |
| 來源歸屬審查 | ORIGIN.md | 提供審查者關於匯入來源的平易近人稽核軌跡 |
| 工作流程執行 | references/color-and-contrast.md | 從能顯著改變執行結果的最小複製檔案開始 |
| 支援上下文 | references/interaction-design.md | 在不載入整個套件的情況下，加入下一個最相關的複製來源檔案 |
| 交接決策 | ## 相關技能 | 當任務偏離核心時，協助操作者切換至更強的原生技能 |
工作流程
此工作流程刻意兼具編輯與操作性質。它讓匯入的來源對操作者保持實用性，同時仍滿足供應下游增強器流程的公開擷取標準。
- 確認使用者目標、匯入工作流程的範圍，以及此技能是否仍是合適的任務路由器。
- 在載入任何複製的上游支援檔案前，先閱讀概覽與來源歸屬檔案。
- 僅載入能顯著改變當前請求結果的參考資料、範例、提示或腳本。
- 執行上游工作流程，同時在工作筆記中明確標示來源歸屬與來源邊界。
- 根據上游期望與複製檔案中可引用的證據驗證結果。
- 當工作超出此匯入工作流程的核心範圍時，升級或移交給相關技能。
- 在合併或關閉前，記錄使用了哪些內容、哪些內容被修改，以及審查者仍需驗證的項目。
匯入的工作流程說明
匯入：設計方向
致力於一個大膽的美學方向：
- 目的：這個介面解決什麼問題？誰在使用它？
- 基調：選擇一個極致的風格：極簡主義、極繁混沌、復古未來、有機/自然、奢華/精緻、俏皮/玩具、編輯/雜誌、粗獷/原始、裝飾藝術/幾何、柔和/粉彩、工業/實用等。有許多風格可供選擇。將這些作為靈感，但設計一個忠於美學方向的風格。
- 限制：技術要求（框架、效能、無障礙性）。
- 差異化：是什麼讓它令人難忘？人們會記得的一件事是什麼？
關鍵：選擇一個清晰的概念方向，並精確執行。大膽的極繁主義與精緻的極簡主義都有效——關鍵在於意圖，而非強度。
然後實作可運作的程式碼，需具備：
- 生產級且功能完整
- 視覺上引人注目且令人難忘
- 具有清晰美學觀點的一致性
- 每個細節都經過精心打磨
範例
範例 1：直接要求上游工作流程
使用 @frontend-design 處理 <task>。從複製的上游工作流程開始，僅載入會改變結果的檔案，並在答案中保持來源歸屬的可見性。
說明： 當操作者需要匯入的工作流程，但不需要整個儲存庫時，這是最安全的起點。
範例 2：要求基於來源歸屬的審查
根據 metadata.json 和 ORIGIN.md 審查 @frontend-design，然後解釋你會優先載入哪些複製的上游檔案以及原因。
說明： 在審查或除錯前使用，當你需要一個精確、可稽核的來源與檔案選擇說明時。
範例 3：在執行前縮小複製的支援檔案範圍
為 <task> 使用 @frontend-design。僅載入會改變結果的複製參考資料、範例或腳本，並在繼續前明確指定檔案名稱。
說明： 這讓技能與漸進式揭露保持一致，而不是預設載入整個複製套件。
範例 4：建立審查者套件
使用複製的上游檔案加上來源歸屬審查 @frontend-design，然後在合併前總結任何差距。
說明： 當 PR 正在等待人工審查，且你想要一個可重複的稽核套件時，這很有用。
匯入的使用說明
匯入：範例
範例 1：具有強烈美學的登陸頁面
使用者說：「建立一個開發者工具產品的登陸頁面，看起來不像其他 SaaS 產品。」 動作：選擇一個大膽的方向（例如粗獷或編輯風格）；選擇一個獨特的字體配對與一致的調色板；使用流暢的間距與一個清晰的焦點來實作；避免卡片疊卡片的英雄指標陳腔濫調。 結果：一個具有清晰層級、令人難忘的排版，且無通用 AI 特徵（沒有紫色漸層、沒有帶厚邊框的圓角卡片）的單頁佈局。
範例 2：儀表板或應用程式 UI
使用者說：「建立一個具有深色主題的分析儀表板。」 動作：致力於一個特定的深色美學（例如帶有調色中性色的精緻深色，而非預設的發光黑底）；對面板使用容器查詢；加入一個經過考慮的動畫時刻（例如交錯清單載入）；確保空狀態有幫助。 結果：一個感覺經過刻意設計的功能性儀表板——獨特的調色板，沒有青/紫色發光，清晰的資料層級與響應式行為。
範例 3：海報或行銷素材
使用者說：「為一個前端效能研討會製作一張海報。」 動作：選擇一個強烈的排版或視覺概念；使用模組化的字體比例與有限的調色板；避免通用庫存照片加標題的佈局。 結果：一張可以獨立作為設計作品的海報——令人難忘的排版與構圖，而非模板填補。
最佳實踐
將產生的公開技能視為上游儲存庫的可審查包裝層。目標是保持來源歸屬明確，並僅載入能顯著改善執行結果的複製來源資料。
-
排版 → 查閱排版參考資料以了解字體比例、配對與載入策略。
- 選擇美麗、獨特且有趣的字體。
- 將一個獨特的展示字體與一個精緻的正文字體搭配。
- 要：使用具有流暢尺寸（clamp）的模組化字體比例 要：變化字體粗細與大小以建立清晰的視覺層級 不要：使用過度使用的字體——Inter、Roboto、Arial、Open Sans、系統預設 不要：將等寬字體用作「技術/開發者」氛圍的懶惰捷徑 不要：在每個標題上方放置帶有圓角的大圖示——它們很少增加價值，只會讓網站看起來像模板 ### 色彩與主題 → 查閱色彩參考資料以了解 OKLCH、調色板與深色模式。
- 致力於一個一致的調色板。
- 主導色彩搭配銳利強調色，優於膽怯、均勻分佈的調色板。
- 要：使用現代 CSS 色彩函數（oklch、color-mix、light-dark）來獲得感知均勻、可維護的調色板 要：將中性色向你的品牌色調偏移——即使微妙的暗示也能創造潛意識的一致性 不要：在彩色背景上使用灰色文字——它看起來褪色；應使用背景色的陰影 不要：使用純黑色（#000）或純白色（#fff）——始終使用色調；純黑/白在大自然中不存在 不要：使用 AI 色彩調色板：深色背景上的青色、紫色到藍色漸層、深色背景上的霓虹強調色 不要：使用漸層文字來製造「衝擊」——特別是在指標或標題上；它是裝飾性而非有意義的 不要：預設使用帶有發光強調色的深色模式——它看起來「酷」，但不需要實際的設計決策 ### 佈局與空間 → 查閱空間參考資料以了解網格、節奏與容器查詢。
匯入的操作說明
匯入：前端美學指南
排版
→ 查閱排版參考資料以了解字體比例、配對與載入策略。
選擇美麗、獨特且有趣的字體。將一個獨特的展示字體與一個精緻的正文字體搭配。
要：使用具有流暢尺寸（clamp）的模組化字體比例 要：變化字體粗細與大小以建立清晰的視覺層級 不要：使用過度使用的字體——Inter、Roboto、Arial、Open Sans、系統預設 不要：將等寬字體用作「技術/開發者」氛圍的懶惰捷徑 不要：在每個標題上方放置帶有圓角的大圖示——它們很少增加價值，只會讓網站看起來像模板
色彩與主題
→ 查閱色彩參考資料以了解 OKLCH、調色板與深色模式。
致力於一個一致的調色板。主導色彩搭配銳利強調色，優於膽怯、均勻分佈的調色板。
要：使用現代 CSS 色彩函數（oklch、color-mix、light-dark）來獲得感知均勻、可維護的調色板 要：將中性色向你的品牌色調偏移——即使微妙的暗示也能創造潛意識的一致性 不要：在彩色背景上使用灰色文字——它看起來褪色；應使用背景色的陰影 不要：使用純黑色（#000）或純白色（#fff）——始終使用色調；純黑/白在大自然中不存在 不要：使用 AI 色彩調色板：深色背景上的青色、紫色到藍色漸層、深色背景上的霓虹強調色 不要：使用漸層文字來製造「衝擊」——特別是在指標或標題上；它是裝飾性而非有意義的 不要：預設使用帶有發光強調色的深色模式——它看起來「酷」，但不需要實際的設計決策
佈局與空間
→ 查閱空間參考資料以了解網格、節奏與容器查詢。
透過變化的間距創造視覺節奏——而非到處使用相同的內距。擁抱不對稱與意想不到的構圖。為了強調而有意識地打破網格。
要：透過變化的間距創造視覺節奏——緊密分組、寬敞分隔 要：使用流暢的間距與 clamp()，讓它在較大螢幕上呼吸 要：使用不對稱與意想不到的構圖；為了強調而有意識地打破網格 不要：將所有東西包裝在卡片中——並非每件事都需要容器 不要：在卡片中嵌套卡片——視覺噪音，應扁平化層級 不要：使用相同的卡片網格——相同大小的卡片加上圖示、標題與文字，無限重複 不要：使用英雄指標佈局模板——大數字、小標籤、支援統計、漸層強調色 不要：將所有東西置中——左對齊文字搭配不對稱佈局感覺更像是經過設計 不要：到處使用相同的間距——沒有節奏，佈局感覺單調
視覺細節
要：使用有意識的、有目的的裝飾元素來強化品牌 不要：到處使用玻璃擬態——模糊效果、玻璃卡片、發光邊框被裝飾性地使用而非有目的地使用 不要：使用帶有單邊厚彩色邊框的圓角元素——一種懶惰的強調，幾乎從未看起來有意識 不要：將迷你圖表用作裝飾——看起來複雜但未傳達任何有意義內容的小圖表 不要：使用帶有通用陰影的圓角矩形——安全、易忘、可能是任何 AI 的輸出 不要：使用模態框，除非真的沒有更好的選擇——模態框是懶惰的
動畫
→ 查閱動畫參考資料以了解時間、緩動與減少動畫設定。
專注於高影響力的時刻：一個精心編排的頁面載入，帶有交錯揭示效果，比分散的微互動創造更多愉悅感。
要：使用動畫來傳達狀態變化——進入、退出、反饋 要：使用指數緩動（ease-out-quart/quint/expo）來獲得自然的減速 要：對於高度動畫，使用 grid-template-rows 過渡而非直接動畫高度 不要：動畫佈局屬性（width、height、padding、margin）——僅使用 transform 與 opacity 不要：使用彈跳或彈性緩動——它們感覺過時且廉價；真實物體是平穩減速的
互動
→ 查閱互動參考資料以了解表單、焦點與載入模式。
讓互動感覺快速。使用樂觀 UI——立即更新，稍後同步。
要：使用漸進式揭露——從簡單開始，透過互動揭示複雜性（基本選項在前，進階選項在可展開區塊後面；將