名称： frontend-design
描述： 专业前端设计指南，用于创建美观、现代化的用户界面。适用于构建落地页、仪表板或任何用户界面设计。
元数据： {"clawdbot":{"emoji":"🎨"}}

前端设计技能

在创建 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. 动效指南

用于规划的微语法：

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：

<!-- 原型设计时通过 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)
- 悬停状态：轻微上浮 + 阴影增强

按钮：
- 清晰的视觉层级 (主要、次要、幽灵按钮)
- 足够的触摸目标尺寸 (最小 44x44px)
- 加载和禁用状态

表单：
- 输入框上方有清晰的标签
- 可见的焦点状态
- 内联验证反馈
- 字段间有足够的间距

导航：
- 长页面使用粘性页眉
- 清晰的活动状态指示
- 移动端友好的汉堡菜单

快速参考

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