前端设计技能

在创建 UI 组件、落地页、仪表盘或任何前端设计工作时，使用本技能。

设计工作流

遵循以下结构化 UI 设计流程：

1. 布局设计 — 思考组件结构，绘制 ASCII 线框图
2. 主题设计 — 定义颜色、字体、间距、阴影
3. 动效设计 — 规划微交互与过渡动画
4. 实现 — 生成实际代码

1. 布局设计

编码前，先用 ASCII 格式草绘布局：

┌─────────────────────────────────────┐
│         HEADER / NAV BAR            │
├─────────────────────────────────────┤
│                                     │
│            HERO SECTION             │
│         (Title + CTA)               │
│                                     │
├─────────────────────────────────────┤
│   FEATURE   │  FEATURE  │  FEATURE  │
│     CARD    │   CARD    │   CARD    │
├─────────────────────────────────────┤
│            FOOTER                   │
└─────────────────────────────────────┘

2. 主题规范

配色规则：

• 切勿使用通用 Bootstrap 风格蓝色（#007bff）—— 显得过时
• 优先采用 oklch() 定义现代色彩
• 使用语义化颜色变量（如 --primary、--secondary、--muted 等）
• 从项目初期即同时考虑亮色模式与暗色模式

字体选择（Google Fonts）：

Sans-serif: Inter, Roboto, Poppins, Montserrat, Outfit, Plus Jakarta Sans, DM Sans, Space Grotesk
Monospace: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Space Mono, Geist Mono
Serif: Merriweather, Playfair Display, Lora, Source Serif Pro, Libre Baskerville
Display: Architects Daughter, Oxanium

间距与阴影：

• 采用统一的间距比例（以 0.25rem 为基准单位）
• 阴影需克制——避免厚重的投影效果
• 阴影颜色也建议使用 oklch() 表示

3. 主题范式

现代暗色模式（Vercel / Linear 风格）：

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.970 0 0);
  --muted: oklch(0.970 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
  --font-sans: Inter, system-ui, sans-serif;
}

新粗野主义（90 年代网页复兴风格）：

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0 0 0);
  --primary: oklch(0.649 0.237 26.97);
  --secondary: oklch(0.968 0.211 109.77);
  --accent: oklch(0.564 0.241 260.82);
  --border: oklch(0 0 0);
  --radius: 0px;
  --shadow: 4px 4px 0px 0px hsl(0 0% 0%);
  --font-sans: DM Sans, sans-serif;
  --font-mono: Space Mono, monospace;
}

玻璃态（Glassmorphism）：

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
}

4. 动效规范

用于规划的微语法：

button: 150ms [S1→0.95→1] press
hover: 200ms [Y0→-2, shadow↗]
fadeIn: 400ms ease-out [Y+20→0, α0→1]
slideIn: 350ms ease-out [X-100→0, α0→1]
bounce: 600ms [S0.95→1.05→1]

常用时长模式：

• 入场动画：300–500ms，缓出（ease-out）
• 悬停状态：150–200ms
• 按钮按压反馈：100–150ms
• 页面切换过渡：300–400ms

5. 实现规范

Tailwind CSS：