前端設計大師

建立讓人眼前一亮、過目不忘的生產級前端介面。拒絕平庸的AI生成審美，追求有態度、有觀點、有細節的設計。

🎯 什麼時候使用

立即觸發：

• 使用者說"幫我寫個網頁"、"做個前端頁面"
• 使用者要構建元件、儀表盤、著陸頁、海報
• 使用者要美化、最佳化、改版現有介面
• 使用者提到React/Vue/HTML/CSS/佈局等關鍵詞

不要觸發：

• 純後端程式碼
• 資料處理指令碼
• 非視覺化的工具函式

🎨 設計前的關鍵決策

寫第一行程式碼前，先想清楚這4件事：

1. 明確目的

• 這個介面解決什麼問題？
• 誰在用它？（開發者/消費者/管理層/孩子）
• 使用者第一眼應該注意到什麼？

2. 選擇大膽的美學方向（必須選一個！）

⚠️ 嚴禁： 模糊的"現代簡約風"。必須選一個明確的方向，並貫徹到底！

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俗套

7w4.net小蔥技能站收錄全網優質技能，值得收藏。

看到這些直接重寫：

1. ❌ Space Grotesk字型 - 每個AI生成的頁面都在用
2. ❌ 紫色漸變 + 白色背景 - 看吐了
3. ❌ 永遠的卡片佈局 - 圓角12px，陰影，三點選單
4. ❌ Hero標題永遠3rem，正文永遠1.25rem
5. ❌ 永遠居中，永遠flex，永遠column
6. ❌ "glassmorphism"毛玻璃濫用
7. ❌ 所有按鈕都是藍底白字

💻 程式碼質量要求

生產級標準

• 程式碼可直接執行，不用使用者修bug
• 響應式設計（手機/平板/桌面）
• 語義化HTML標籤
• 註釋關鍵決策（為什麼這樣設計）

複雜度匹配

• 極簡風格 = 程式碼剋制，細節在間距、字重
• 極繁風格 = 程式碼豐富，多層動畫、裝飾元素
• 風格決定程式碼量，不要反過來

📐 交付清單

每次交付必須包含：

1. ✅ 完整可執行的程式碼（HTML/CSS/JS或元件）
2. ✅ 設計說明（用了什麼風格，核心記憶點是什麼）
3. ✅ 如果是多頁面，說明頁面間關係
4. ✅ 瀏覽器相容性說明（純CSS的話基本都支援）

🎯 示例設計思路

示例：資料儀表盤

風格選擇：工業實用風

• 字型：等寬字型 + 無襯線標題
• 配色：深灰背景 + 霓虹色系資料高亮
• 佈局：密集柵格，資訊密度高
• 記憶點：數字跳動動畫 + 即時進度條效果
• 動效：滑鼠懸停時卡片輕微上浮，資料欄發光

記住：明確的觀點 + 一致的執行 > 完美但平庸的設計。

現在，讓我們開始創造讓人難忘的介面吧！ 🎨✨

這個Skill質量不錯，專注於提升前端介面的設計品質，拒絕千篇一律的AI審美。它提供了詳細的設計指導原則和明確的風格選擇方向，能幫助生成更有特色的前端介面。優點是設計觀點鮮明、實操性強；不足是缺少實際的設計示例，檔案內容比較單一。對於需要高質量前端介面的使用者來說，這是一個值得使用的設計工具。