前端设计技能

在创建 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. 动效设计规范

微语法（Micro-syntax）用于动效规划：

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：

Flowbite（组件库）：

图标（Lucide）：

图片资源：

• 使用真实占位图服务：Unsplash、placehold.co
• 禁止虚构图片 URL
• 示例：https://images.unsplash.com/photo-xxx?w=800&h=600

6. 响应式设计

始终采用移动优先（Mobile-first）与响应式设计原则：

/* 移动端优先 */
.container { padding: 1rem; }

/* 平板端 */
@media (min-width: 768px) {
  .container { padding: 2rem; }
}

/* 桌面端 */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

7. 可访问性（Accessibility）

• 使用语义化 HTML（header、main、nav、section、article 等）
• 保持正确的标题层级（h1 → h2 → h3）
• 为可交互元素添加 aria-label
• 确保足够的颜色对比度（最低 4.5:1）
• 支持键盘导航操作

8. 组件设计要点

卡片（Cards）：

• 采用柔和阴影，避免厚重的 drop-shadow
• 统一对齐内边距（推荐 p-4 至 p-6）
• 悬停态：轻微上浮 + 阴影增强

按钮（Buttons）：

• 清晰的视觉层级（主按钮、次按钮、幽灵按钮）
• 充足的触控区域（最小尺寸 44×44px）
• 提供加载态与禁用态样式

表单（Forms）：

• 输入框上方显示明确标签
• 焦点状态需清晰可见
• 提供行内验证反馈
• 字段间保留充足间距

导航（Navigation）：

• 长页面启用粘性头部（Sticky header）
• 明确标识当前激活项（Active state）
• 移动端适配汉堡菜单（Hamburger menu）

速查表

基于 SuperDesign 设计模式 — https://superdesign.dev