frontend-design-2

用途

Frontend Design Skill 是一套用于创建 UI 组件、落地页、仪表盘或任何前端设计工作的专家级设计指南。当需要进行前端界面设计时，可依据本技能提供的结构化流程与规范来产出美观、现代的界面。

设计工作流

技能建议按以下结构化方法进行 UI 设计：

布局设计（Layout Design）——梳理组件结构，绘制 ASCII 线框图
主题设计（Theme Design）——定义颜色、字体、间距、阴影
动画设计（Animation Design）——规划微交互与过渡
实现（Implementation）——生成实际代码

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）：

无衬线：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;
}

玻璃拟态（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. 动画指南

用于规划的微语法：

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：

<!-- Import via CDN for prototypes -->
<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. 响应式设计

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

/* 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()，避免通用蓝

适用场景

构建落地页、仪表盘或任何用户界面
创建 UI 组件
需要快速产出美观、现代前端设计的开发与设计工作

限制

本技能基于 SuperDesign 模式（https://superdesign.dev）。资料未提供关于收费、价格、平台支持范围或具体效果保证的信息。