介绍
# Frontend Design Skill
在创建 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 风格)：** ```css :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 年代网页复兴)：** ```css :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; } ```
**玻璃拟态：** ```css .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：** ```html <!-- Import via CDN for prototypes --> <script src="https://cdn.tailwindcss.com"></script> ```
**Flowbite (组件库)：** ```html <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script> ```
**图标：** ```html <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. 响应式设计
始终优先考虑移动端并设计响应式布局：
```css /* Mobile first */ .container { padding: 1rem; }
/* Tablet */ @media (min-width: 768px) { .container { padding: 2rem; } }
/* Desktop */ @media (min-width: 1024px) { .container { max-width: 1200px; margin: 0 auto; } } ```
### 7. 无障碍访问
- 使用语义化 HTML (header, main, nav, section, article) - 包含正确的标题层级 (h1 → h2 → h3) - 为交互元素添加 aria-labels - 确保足够的颜色对比度（最低 4.5:1） - 支持键盘导航
### 8. 组件设计技巧
**卡片：** - 含蓄的阴影，而非过重的投影 - 一致的内边距 (p-4 到 p-6) - 悬停状态：轻微上浮 + 阴影加深
**按钮：** - 清晰的视觉层级（primary, secondary, ghost） - 足够的触摸目标（最小 44x44px） - 加载和禁用状态
**表单：** - 输入框上方有清晰的标签 - 可见的聚焦状态 - 内联验证反馈 - 字段之间有足够的间距
**导航：** - 长页面使用粘性页头 - 清晰的激活状态指示 - 移动端友好的汉堡菜单
---
## 快速参考
| 元素 | 推荐 | |---------|---------------| | 主字体 | Inter, Outfit, DM Sans | | 代码字体 | JetBrains Mono, Fira Code | | 圆角 | 0.5rem - 1rem (现代), 0 (粗犷主义) | | 阴影 | 含蓄，最多 1-2 层 | | 间距 | 4px 基本单位 (0.25rem) | | 动画 | 150-400ms, ease-out | | 颜色 | 现代用 oklch()，避免通用蓝色 |
---
*基于 SuperDesign 模式 — https://superdesign.dev*