frontend-design-zh

前端设计技能

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

设计工作流程

遵循以下结构化方法进行 UI 设计：

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

1. 布局设计

在编码之前，先用 ASCII 格式绘制布局草图：

┌─────────────────────────────────────┐
│         页眉 / 导航栏               │
├─────────────────────────────────────┤
│                                     │
│            主视觉区域               │
│         (标题 + 行动号召)           │
│                                     │
├─────────────────────────────────────┤
│   功能卡片  │  功能卡片  │  功能卡片  │
├─────────────────────────────────────┤
│              页脚                   │
└─────────────────────────────────────┘

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;
}