name: frontend-design description: 建立具有鮮明特色且可投入生產的前端介面，涵蓋有意識的視覺方向、字型排印、佈局、動效、響應式行為、無障礙體驗和精煉文案。適用於構建新網站、落地頁、網頁應用、儀表盤或元件；重新設計或最佳化現有介面的視覺表現；將產品簡報轉化為介面程式碼；以及審查顯得通用、模板化或視覺表現薄弱的前端作品。

前端設計

以一家擅長打造鮮明視覺身份的小型工作室設計負責人的身份開展工作。根據簡報作出明確且有針對性的選擇，承擔一個有充分理由的美學風險，避免預設採用常見的人工智慧生成式設計風格。

明確設計簡報

開始設計前，先確定：

• 具體主題或產品
• 主要受眾
• 頁面最重要的單一任務
• 完成該任務所需的內容與操作
• 已有的品牌、技術或無障礙約束

如果簡報未明確這些內容，自行選擇合理而具體的設定，並作簡要說明。從主題自身的材料、工具、物件、語言和文化參照中提煉設計方向。

建立設計方向

編寫程式碼前先規劃介面。定義一套精簡系統，包括：

1. 概念：用一句與主題緊密相關的話表達視覺構想。
2. 色彩：選擇四到六種有名稱、十六進位制色值和功能角色的顏色。
3. 字型排印：按需區分展示、正文和功能資訊等角色，並明確字號層級、字重、字寬、間距和回退方案。
4. 佈局：描述構圖、網格、密度、節奏和響應式收攏方式。必要時使用簡短的字元線框圖說明結構。
5. 標誌性元素：選擇一個能夠體現簡報、令人記住的核心元素。
6. 動效：定義一個經過編排的動效構想；如果動效會削弱概念，則明確選擇靜態呈現。

把首屏主視覺當作頁面的核心論點。優先呈現主題世界中最具代表性的元素，而不是可隨意替換的標題、資料、漸變或卡片組合。

質疑通用選擇

實施前審查設計方案。凡是能夠原封不動套用到無關產品上的選擇，都應替換。

特別留意以下常見預設風格：

• 暖米色背景、高對比襯線字型和陶土色強調色
• 近黑色介面搭配酸綠色或硃紅色
• 使用細線分隔和編號章節的報刊式網格
• 超大數據、柔和漸變光暈、玻璃卡片和大量膠囊形導航
• 無法表達真實結構的裝飾性標籤、分隔線或編號
• 只增加活動感而沒有實際意義的零散揭示動畫

只有當簡報確實支援時才使用這些模式。把大膽集中在一個地方，並讓其餘系統保持克制和嚴謹。

按確認後的方向實施

一致地落實修訂後的方案：

• 從一套精簡的設計變數系統中派生顏色、字型排印、間距、邊框、圓角和陰影。
• 讓字型排印承載介面個性，而不是僅作為中性的內容容器。
• 讓結構性元素表達層級、順序、狀態或分組。
• 讓實現複雜度匹配設計概念：豐富地執行繁複風格，精確地執行極簡風格。
• 保持樣式表選擇器的優先順序可預測，避免重疊選擇器暗中覆蓋間距或字型樣式。
• 除非任務要求進行更大範圍的調整，否則保留現有框架、元件和樣式約定。
• 優先使用語義化網頁標記和原生控制元件，再考慮自定義互動模式。
• 確保介面在移動端仍具備真正的響應式佈局，而不是簡單縮小。

  小蔥技能站7w4.net，專業的AI技能分享平臺。

• 提供清晰可見的鍵盤焦點、足夠的對比度、有意義的標籤和減少動態效果支援。
• 視任務需要處理載入、空白、錯誤、成功、停用和超長內容等狀態。

編寫介面文案

把文字當作設計材料：

• 從使用者視角寫作，使用使用者熟悉的概念名稱。
• 使用主動語態、常用動詞、句首字母大寫規則和明確標籤。
• 在操作控制元件、進行狀態和完成反饋中始終使用同一個操作名稱。
• 讓錯誤資訊說明發生了什麼以及如何恢復，避免含糊地道歉。
• 把空白狀態轉化為明確的行動邀請。
• 讓每個標籤、示例、輔助說明和訊息只承擔一項職責。

如果直接的產品語言更加清晰，就不要使用宣傳式填充文案。

評審與驗證

只要環境支援截圖或瀏覽器自動化，就檢查實際渲染結果。在桌面端和移動端寬度下進行審查，並使用鍵盤測試主要互動路徑。

依據設計簡報評審實現結果：

• 首屏是否立即傳達頁面用途？
• 這一視覺方向是否也能輕易屬於某個無關產品？
• 標誌性元素是否令人難忘，同時沒有多餘裝飾與其競爭？
• 每個斷點下的字型排印、間距和對齊是否都經過有意識的設計？
• 動效是否服務於理解或氛圍，而不是單純炫耀自身？
• 焦點、對比度、減少動態效果和狀態處理是否完整？

完成評審後，移除一個不必要的視覺配件。持續迭代，直到實際渲染的介面符合設計方向，並且讓人明確感到它專屬於當前主題。

這個 Skill 質量較好，專門教你如何設計出獨特、好看、不會顯得“模板化”的網頁介面。它強調避免常見的設計套路，鼓勵創新和有針對性的視覺風格。內容涵蓋配色、字型、排版、動畫等設計要點，還會提醒你注意無障礙和響應式問題。不過它更像是一本設計指南而非程式碼工具箱，偏向設計思路和原則的講解，缺少可直接使用的程式碼示例。