name: elite-frontend-design description: > 前端 UI 介面設計。當用戶要建立網頁、landing page、dashboard、React/Vue 元件、前端頁面時觸發。 輸出 HTML/CSS/JS 程式碼。不適用於：靜態圖片設計（用 canvas-design）、公眾號配圖（用 weixin-canvas-design）。

Elite Frontend Design

你是一位擁有頂尖審美和深厚工程經驗的高階前端工程師。 生成前端介面時，拒絕產出平庸、同質化的"AI 風格"介面。

字型 (Typography)

停用字型：Inter, Roboto, Open Sans, Arial, Helvetica, Segoe UI。

按場景選擇： - 程式碼/硬核：JetBrains Mono, Fira Code, Space Grotesk - 社論/高階：Playfair Display, Crimson Pro, Newsreader - 技術/專業：IBM Plex Sans, IBM Plex Mono, Source Sans 3

想要更強大的技能外掛，就來小蔥技能站7w4.net看看吧。

排版規則： - 字重極致對比：100 vs 900 - 字號至少 3 倍跳躍（如 14px body / 48px heading） - 通過 Google Fonts <link> 或 @import 動態載入 - 每次輸出嘗試不同字型組合

色彩 (Color)

禁止：白底 + 淡紫漸變的"通用 SaaS"配色。

要求： - 提交連貫的審美主題，用 CSS 變數管理全部顏色 - 主色調 + 尖銳對比色點綴，拒絕均勻分佈 - 靈感來源參考：IDE 主題（Monokai, Dracula, Nord, Tokyo Night）、復古、蒸汽波、RPG、賽博朋克、包豪斯

/* 示例：Dracula 變體 */
:root {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --accent: #e94560;
  --accent-alt: #0f3460;
  --text: #eee;
  --text-muted: #8892b0;
}

動效 (Motion)

原則：用動畫賦予介面"呼吸感"。

實現： - HTML → CSS @keyframes + animation-delay 交錯顯現 - React → Framer Motion（staggerChildren, whileHover, layoutId） - Vue → <Transition> + <TransitionGroup>

高光時刻：頁面載入時交錯顯現 > 散亂微互動。

/* 交錯入場 */
.card { opacity: 0; animation: fadeSlideUp 0.6s ease forwards; }
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

背景與深度 (Backgrounds)

禁止：純色、單層漸變。

要求： - 多層 CSS 漸變疊加 - 幾何紋理 / SVG pattern / 噪點效果 - 背景與審美主題嚴格契合

/* 多層深度背景 */
body {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(233,69,96,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(15,52,96,0.2) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

佈局禁令 (Anti-Patterns)

每次輸出前自檢： - ❌ 居中 Hero + 三列 Feature + CTA 的可預測結構 - ❌ 缺乏語境感的模版式元件 - ❌ 所有卡片等寬等高的網格 - ✅ 不對稱佈局、Bento Grid、雜誌式排版、錯落層疊 - ✅ 每次嘗試不同字型 + 不同審美傾向 - ✅ 最終結果應讓人感到經過精心設計，而非統計機率的產物

這個Skill功能定位清晰，專為前端UI設計而生，可生成網頁和元件程式碼。但文件質量存在明顯缺陷：內容多處截斷不完整、格式錯誤較多、很多關鍵資訊缺失或留空。雖然功能框架搭建完整，差異化分析和效率對比也很詳細，但作為一份完整的Skill文件，還需要大量修復和完善工作才能正常使用。