前端設計
📖 技能介紹
name: frontend-design version: 1.0.0 description: > 建立獨特、生產級的前端介面，追求高設計品質。當用戶要求構建 網頁元件、頁面、海報、應用時使用（包括網站、著陸頁、儀表盤、 React元件、HTML/CSS佈局、美化任何Web介面）。生成有創意、 打磨精細的程式碼和UI設計，堅決拒絕千篇一律的"AI審美"。 metadata: author: 移植並最佳化自 Anthropic category: design
前端設計大師
建立讓人眼前一亮、過目不忘的生產級前端介面。拒絕平庸的AI生成審美，追求有態度、有觀點、有細節的設計。
🎯 什麼時候使用
立即觸發： - 使用者說"幫我寫個網頁"、"做個前端頁面" - 使用者要構建元件、儀表盤、著陸頁、海報 - 使用者要美化、最佳化、改版現有介面 - 使用者提到React/Vue/HTML/CSS/佈局等關鍵詞
不要觸發： - 純後端程式碼 - 資料處理指令碼 - 非視覺化的工具函式
🎨 設計前的關鍵決策
寫第一行程式碼前，先想清楚這4件事：
1. 明確目的
- 這個介面解決什麼問題？
- 誰在用它？（開發者/消費者/管理層/孩子）
- 使用者第一眼應該注意到什麼？
2. 選擇大膽的美學方向（必須選一個！）
| 風格 | 描述 | 適用場景 |
|---|---|---|
| 極簡主義 | 極致留白，少即是多，每個元素都有理由 | 高階產品、作品集 |
| 極繁主義 | 資訊爆炸，重疊，分層，視覺衝擊 | 藝術節、時尚品牌 |
| 復古未來 | 80年代電腦風，CRT效果，畫素感 | 科技、遊戲、NFT |
| 有機自然 | 曲線、漸變、柔和、流動感 | 健康、生活方式 |
| 奢華精緻 | 高對比度，精細排版，黑金/白金配色 | 奢侈品、高階服務 |
| 趣味玩具 | 圓潤、明亮、可愛、互動感強 | 面向兒童、娛樂產品 |
| 雜誌編輯 | 柵格系統，大標題，圖文穿插 | 媒體、部落格、內容站 |
| 粗野主義 | 原始、直接、邊框、黑白為主 | 藝術、先鋒品牌 |
| 裝飾藝術 | 幾何圖案，對稱，金色點綴 | 高階活動、酒店 |
| 柔和馬卡龍 | 低飽和度，圓型，軟陰影 | 社交、女性向產品 |
| 工業實用 | 功能優先，等寬字型，儀表盤風格 | 工具、資料產品 |
⚠️ 嚴禁： 模糊的"現代簡約風"。必須選一個明確的方向，並貫徹到底！
3. 技術約束
- 用什麼框架？（純HTML/React/Vue）
- 效能要求？（純CSS優先，儘量少JS）
- 無障礙要求？
4. 記憶點設計
使用者記住這個介面的那一個點是什麼？
必須有且只有一個核心記憶點： - 一個特別的動畫效果 - 一種不尋常的佈局方式 - 一個獨特的字型組合 - 一個驚豔的背景紋理 - 一個意想不到的互動
🔑 五大設計原則
1. 字型排版：拒絕平庸
✅ 應該做： - 選擇有性格的字型，避開Inter/Roboto/Arial這些過度使用的字型 - 用一個有特色的標題字型 + 一個易讀的正文字型 - 字號要有層級差異（不要都是14-16px） - 大標題用字距（letter-spacing）製造高階感
❌ 不應該： - 全用系統預設字型 - 字號差異太小，沒有視覺層級 - 一行超過80字元（閱讀困難）
2. 色彩：大膽承諾
✅ 應該做： - 用CSS變數確保一致性 - 主色調佔70%，輔助色20%，強調色10% - 大膽用單色或雙色（少即是多） - 深色/淺色模式都考慮
❌ 不應該： - 紫色漸變配白色背景（爛大街了！） - 彩虹色，什麼顏色都有 - 對比度不夠，文字看不清
3. 動效：一擊即中
✅ 應該做： - 頁面載入用交錯動畫（animation-delay） - 滾動觸發的漸入效果 - 懸停時的小驚喜（不要太誇張） - 純CSS動畫優先（效能好）
❌ 不應該： - 到處都是微互動，分散注意力 - 動畫太長太搶戲（超過300ms） - 一滾動什麼都在動（暈）
4. 空間佈局：打破常規
✅ 應該做： - 非對稱佈局（不要永遠左右對稱） - 元素重疊製造層次感 - 斜向流動，打破水平垂直的單調 - 大膽留白（或者大膽密集） - 偶爾有元素突破柵格
❌ 不應該： - 永遠居中，永遠12柵格，永遠flex - 所有元素間距都一樣 - 頁面像個規矩的表格
5. 背景與細節：製造氛圍
✅ 可以加： - 噪點紋理（grain/noise） - 漸變網格（gradient mesh） - 幾何圖案點綴 - 多層透明疊加 - 戲劇化的陰影 - 裝飾性邊框 - 自定義滑鼠游標
❌ 永遠純白/純黑背景（除非是極簡風格）
🚫 絕對禁止的AI俗套
看到這些直接重寫：
- ❌ Space Grotesk字型 - 每個AI生成的頁面都在用
- ❌ 紫色漸變 + 白色背景 - 看吐了
- ❌ 永遠的卡片佈局 - 圓角12px，陰影，三點選單
- ❌ Hero標題永遠3rem，正文永遠1.25rem
- ❌ 永遠居中，永遠flex，永遠column
- ❌ "glassmorphism"毛玻璃濫用
- ❌ 所有按鈕都是藍底白字
💻 程式碼質量要求
生產級標準
- 程式碼可直接執行，不用使用者修bug
- 響應式設計（手機/平板/桌面）
小蔥技能7w4.net有更新，你可以訪問看下。
- 語義化HTML標籤
- 註釋關鍵決策（為什麼這樣設計）
複雜度匹配
- 極簡風格 = 程式碼剋制，細節在間距、字重
- 極繁風格 = 程式碼豐富，多層動畫、裝飾元素
- 風格決定程式碼量，不要反過來
📐 交付清單
每次交付必須包含：
- ✅ 完整可執行的程式碼（HTML/CSS/JS或元件）
- ✅ 設計說明（用了什麼風格，核心記憶點是什麼）
- ✅ 如果是多頁面，說明頁面間關係
- ✅ 瀏覽器相容性說明（純CSS的話基本都支援）
🎯 示例設計思路
示例：資料儀表盤
風格選擇：工業實用風 - 字型：等寬字型 + 無襯線標題 - 配色：深灰背景 + 霓虹色系資料高亮 - 佈局：密集柵格，資訊密度高 - 記憶點：數字跳動動畫 + 即時進度條效果 - 動效：滑鼠懸停時卡片輕微上浮，資料欄發光
記住：明確的觀點 + 一致的執行 > 完美但平庸的設計。
現在，讓我們開始創造讓人難忘的介面吧！ 🎨✨
🤖 AI 評測
這個Skill質量不錯，專注於提升前端介面的設計品質，拒絕千篇一律的AI審美。它提供了詳細的設計指導原則和明確的風格選擇方向，能幫助生成更有特色的前端介面。優點是設計觀點鮮明、實操性強；不足是缺少實際的設計示例，檔案內容比較單一。對於需要高質量前端介面的使用者來說，這是一個值得使用的設計工具。
