Elite Frontend Design

---
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`

排版规则：
- 字重极致对比：100 vs 900
- 字号至少 3 倍跳跃（如 14px body / 48px heading）
- 通过 Google Fonts `<link>` 或 `@import` 动态加载
- 每次输出尝试不同字体组合

## 色彩 (Color)

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

要求：
- 提交连贯的审美主题，用 CSS 变量管理全部颜色
- 主色调 + 尖锐对比色点缀，拒绝均匀分布
- 灵感来源参考：IDE 主题（Monokai, Dracula, Nord, Tokyo Night）、复古、蒸汽波、RPG、赛博朋克、包豪斯

```css
/* 示例：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>`

高光时刻：页面加载时交错显现 > 散乱微交互。

```css
/* 交错入场 */
.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 / 噪点效果
- 背景与审美主题严格契合

```css
/* 多层深度背景 */
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、杂志式排版、错落层叠
- ✅ 每次尝试不同字体 + 不同审美倾向
- ✅ 最终结果应让人感到经过精心设计，而非统计概率的产物