frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Design Skill

前端设计技能

Use this skill when creating UI components, landing pages, dashboards, or any frontend design work.

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

Design Workflow

设计工作流程

Follow this structured approach for UI design:

Layout Design — Think through component structure, create ASCII wireframes
Theme Design — Define colors, fonts, spacing, shadows
Animation Design — Plan micro-interactions and transitions
Implementation — Generate the actual code

遵循以下结构化的UI设计方法：

布局设计 — 梳理组件结构，绘制ASCII线框图
主题设计 — 定义颜色、字体、间距、阴影样式
动画设计 — 规划微交互与过渡效果
代码实现 — 生成实际可运行代码

1. Layout Design

1. 布局设计

Before coding, sketch the layout in ASCII format:

┌─────────────────────────────────────┐
│         HEADER / NAV BAR            │
├─────────────────────────────────────┤
│                                     │
│            HERO SECTION             │
│         (Title + CTA)               │
│                                     │
├─────────────────────────────────────┤
│   FEATURE   │  FEATURE  │  FEATURE  │
│     CARD    │   CARD    │   CARD    │
├─────────────────────────────────────┤
│            FOOTER                   │
└─────────────────────────────────────┘

编码前，先以ASCII格式绘制布局草图：

┌─────────────────────────────────────┐
│         HEADER / NAV BAR            │
├─────────────────────────────────────┤
│                                     │
│            HERO SECTION             │
│         (Title + CTA)               │
│                                     │
├─────────────────────────────────────┤
│   FEATURE   │  FEATURE  │  FEATURE  │
│     CARD    │   CARD    │   CARD    │
├─────────────────────────────────────┤
│            FOOTER                   │
└─────────────────────────────────────┘

2. Theme Guidelines

2. 主题设计指南

Color Rules:

NEVER use generic bootstrap-style blue (#007bff) — it looks dated
Prefer oklch() for modern color definitions
Use semantic color variables (--primary, --secondary, --muted, etc.)
Consider both light and dark mode from the start

Font Selection (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

Spacing & Shadows:

Use consistent spacing scale (0.25rem base)
Shadows should be subtle — avoid heavy drop shadows
Consider using oklch() for shadow colors too

颜色规则：

切勿使用通用的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. Theme Patterns

3. 主题样式模板

Modern Dark Mode (Vercel/Linear style):

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;
}

Neo-Brutalism (90s web revival):

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;
}

Glassmorphism:

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;
}

现代暗色模式（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. Animation Guidelines

4. 动画设计指南

Micro-syntax for planning:

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]

Common patterns:

Entry animations: 300-500ms, ease-out
Hover states: 150-200ms
Button press: 100-150ms
Page transitions: 300-400ms

规划用微语法：

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. Implementation Rules

5. 代码实现规则

Tailwind CSS:

html

<!-- Import via CDN for prototypes -->
<script src="https://cdn.tailwindcss.com"></script>

Flowbite (component library):

html

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

Icons (Lucide):

html

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

Images:

Use real placeholder services: Unsplash, placehold.co
Never make up image URLs

Example:

https://images.unsplash.com/photo-xxx?w=800&h=600

Tailwind CSS：

html

<!-- 原型开发可通过CDN引入 -->
<script src="https://cdn.tailwindcss.com"></script>

Flowbite（组件库）：

html

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

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. Responsive Design

6. 响应式设计

Always design mobile-first and responsive:

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; }
}

始终遵循移动端优先的响应式设计原则：

css

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

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

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

7. Accessibility

7. 无障碍设计

Use semantic HTML (header, main, nav, section, article)
Include proper heading hierarchy (h1 → h2 → h3)
Add aria-labels to interactive elements
Ensure sufficient color contrast (4.5:1 minimum)
Support keyboard navigation

使用语义化HTML标签（header、main、nav、section、article）
遵循正确的标题层级（h1 → h2 → h3）
为交互元素添加aria-label属性
确保足够的颜色对比度（最低4.5:1）
支持键盘导航

8. Component Design Tips

8. 组件设计技巧

Cards:

Subtle shadows, not heavy drop shadows
Consistent padding (p-4 to p-6)
Hover state: slight lift + shadow increase

Buttons:

Clear visual hierarchy (primary, secondary, ghost)
Adequate touch targets (min 44x44px)
Loading and disabled states

Forms:

Clear labels above inputs
Visible focus states
Inline validation feedback
Adequate spacing between fields

Navigation:

Sticky header for long pages
Clear active state indication
Mobile-friendly hamburger menu

卡片组件：

使用柔和阴影，避免厚重投影
保持统一内边距（p-4至p-6）
悬停状态：轻微上浮+阴影增强

按钮组件：

清晰的视觉层级（主按钮、次按钮、幽灵按钮）
足够的触摸目标尺寸（最小44x44px）
包含加载态与禁用态

表单组件：

输入框上方设置清晰标签
可见的焦点状态
行内校验反馈
字段间保持足够间距

导航组件：

长页面使用粘性头部
清晰标识当前激活状态
移动端适配汉堡菜单

Quick Reference

快速参考

Element	Recommendation
Primary font	Inter, Outfit, DM Sans
Code font	JetBrains Mono, Fira Code
Border radius	0.5rem - 1rem (modern), 0 (brutalist)
Shadow	Subtle, 1-2 layers max
Spacing	4px base unit (0.25rem)
Animation	150-400ms, ease-out
Colors	oklch() for modern, avoid generic blue

Based on SuperDesign patterns — https://superdesign.dev

元素	推荐方案
主字体	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