前端设计技能

在创建UI组件、着陆页、仪表板或进行任何前端设计工作时使用此技能。

设计工作流程

为UI设计遵循此结构化方法：

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

1. 布局设计

在编码之前，用ASCII格式勾勒布局：

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

2. 主题指南

颜色规则：

• 切勿使用通用的Bootstrap风格蓝色 (#007bff) —— 它显得过时
• 更倾向于使用 oklch() 进行现代颜色定义
• 使用语义化颜色变量 (--primary, --secondary, --muted 等)
• 从一开始就同时考虑浅色和深色模式

字体选择 (Google Fonts)：

无衬线体：Inter, Roboto, Poppins, Montserrat, Outfit, Plus Jakarta Sans, DM Sans, Space Grotesk
等宽字体：JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Space Mono, Geist Mono
衬线体：Merriweather, Playfair Display, Lora, Source Serif Pro, Libre Baskerville
展示字体：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;
}

玻璃态拟物化：

.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. 动画指南

用于规划的微语法：

按钮：150ms [S1→0.95→1] 按下
悬停：200ms [Y0→-2, 阴影↗]
淡入：400ms 缓出 [Y+20→0, α0→1]
滑入：350ms 缓出 [X-100→0, α0→1]
弹跳：600ms [S0.95→1.05→1]

常见模式：

• 入场动画：300-500ms，缓出
• 悬停状态：150-200ms
• 按钮按下：100-150ms
• 页面过渡：300-400ms

5. 实施规则

Tailwind CSS：

<!-- 原型阶段通过CDN导入 -->
<script src="https://cdn.tailwindcss.com"></script>

Flowbite（组件库）：

<link href="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>

图标（Lucide）：

<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>lucide.createIcons();</script>

图片：

• 使用真实的占位符服务：Unsplash、placehold.co
• 切勿编造图片URL
• 示例：https://images.unsplash.com/photo-xxx?w=800&h=600

6. 响应式设计

始终采用移动优先和响应式设计：

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

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

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

7. 无障碍访问

• 使用语义化HTML（header、main、nav、section、article）
• 包含正确的标题层级结构（h1 → h2 → h3）
• 为交互元素添加aria标签
• 确保足够的色彩对比度（至少4.5:1）
• 支持键盘导航

8. 组件设计技巧

卡片：

• 使用微妙的阴影，避免厚重的投影
• 保持内边距一致（p-4 到 p-6）
• 悬停状态：轻微上浮并增加阴影

按钮：

• 清晰的视觉层级（主要、次要、幽灵按钮）
• 足够的触摸目标尺寸（最小44x44像素）
• 加载和禁用状态

表单：

• 在输入框上方放置清晰的标签
• 可见的焦点状态
• 行内验证反馈
• 字段间留有足够间距

导航：

• 长页面的粘性页眉
• 清晰的活动状态指示
• 移动端友好的汉堡菜单

快速参考

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