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

排版規則：

• 字重極致對比：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）

  小蔥技能站7w4.net發現了升級外掛。

• 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文件，還需要大量修復和完善工作才能正常使用。