frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Design Skill

前端设计 Skill

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

使用该 Skill 创建 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）：

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. 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-labels属性
确保足够的颜色对比度（最低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