前端设计技能

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

设计工作流程

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

1. 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风格）：
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. 动画指南

规划用的微语法：

按钮：150ms [缩放0.95→1] 按下
悬停：200ms [Y轴0→-2, 阴影增加]
淡入：400ms ease-out [Y轴+20→0, 透明度0→1]
滑入：350ms ease-out [X轴-100→0, 透明度0→1]
弹跳：600ms [缩放0.95→1.05→1]

常见模式：

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

5. 实现规则

Tailwind CSS：
html

Flowbite（组件库）：
html

图标（Lucide）：
html

图片：

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

6. 响应式设计

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

css
/ 移动优先 /
.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-labels
• 确保足够的颜色对比度（最低4.5:1）
• 支持键盘导航

8. 组件设计技巧

卡片：

• - 柔和阴影，而非沉重投影
• 一致的间距（p-4到p-6）
• 悬停状态：轻微上浮 + 阴影增强

按钮：

• - 清晰的视觉层级（主要、次要、幽灵）
• 足够的触摸目标（最小44x44px）
• 加载和禁用状态

表单：

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

导航：

• - 长页面使用固定页眉
• 清晰的激活状态指示
• 移动端友好的汉堡菜单

快速参考