modern-ui-designer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Modern UI Designer - 2025 Standards

现代UI设计师 - 2025年标准

Overview

概述

This skill provides comprehensive guidance for creating world-class UI designs that follow modern 2025 standards. It covers Tailwind CSS best practices, shadcn/ui component patterns, clean minimalist design principles, 8px grid spacing systems, mobile-first responsive design, and WCAG accessibility compliance.

Core Philosophy: Professional, minimal, accessible, and consistent.

本技能提供遵循2025年现代标准的世界级UI设计全面指导，涵盖Tailwind CSS最佳实践、shadcn/ui组件模式、简洁极简设计原则、8px网格间距系统、移动端优先响应式设计，以及WCAG无障碍合规要求。

核心理念：专业、极简、无障碍、一致性。

Design Principles (2025)

2025年设计原则

1. Clean Minimalism

1. 简洁极简主义

Core Rules:

Remove the unnecessary: Every element must have a clear purpose
Whitespace is powerful: Generous spacing improves readability and reduces cognitive load
Content-first: Design serves content, not the other way around
Visual hierarchy: Use size, color, and spacing to guide attention
Subtle over flashy: Professional designs use restraint

What to Avoid:

❌ Rainbow gradients or excessive colors
❌ Decorative elements without function
❌ Complex patterns or textures
❌ Overcrowded interfaces
❌ Inconsistent spacing

What to Embrace:

✅ Neutral color palette (grays + one accent color)
✅ Generous whitespace and breathing room
✅ Clean typography with clear hierarchy
✅ Subtle shadows and borders
✅ Consistent 8px grid system

核心规则:

移除冗余元素：每个元素必须有明确用途
留白的力量：充足的间距提升可读性，降低认知负荷
内容优先：设计为内容服务，而非本末倒置
视觉层级：通过尺寸、颜色和间距引导用户注意力
克制胜于花哨：专业设计需保持克制

需避免的情况:

❌ 彩虹渐变或过度使用色彩
❌ 无功能性的装饰元素
❌ 复杂图案或纹理
❌ 拥挤的界面
❌ 不一致的间距

值得推崇的做法:

✅ 中性调色板（灰色系 + 一种强调色）
✅ 充足的留白和呼吸空间
✅ 清晰层级的简洁排版
✅ 柔和的阴影与边框
✅ 一致的8px网格系统

2. Visual Hierarchy Best Practices

2. 视觉层级最佳实践

Size:

Use dramatic size differences for headings vs body text
Minimum 16px for body text (18px preferred for readability)
Heading scale: 48px → 32px → 24px → 20px → 18px → 16px
Use Tailwind's text-* utilities: text-6xl, text-4xl, text-2xl, text-xl, text-lg, text-base

Color:

Use color strategically to indicate importance
Primary actions: Accent color
Secondary actions: Neutral gray
Disabled states: Low contrast gray
Error states: Red (accessible contrast)
Success states: Green (accessible contrast)

Weight:

Headings: font-bold (700) or font-semibold (600)
Body: font-normal (400) or font-medium (500)
Captions: font-light (300) with careful use

Spacing:

Large spacing (32px+) separates major sections
Medium spacing (16-24px) groups related content
Small spacing (8px) for tightly related items
Internal ≤ External rule: Space inside elements should be less than space between them

尺寸:

标题与正文使用显著的尺寸差异
正文最小16px（为提升可读性，推荐18px）
标题层级：48px → 32px → 24px → 20px → 18px → 16px
使用Tailwind的text-*工具类：text-6xl, text-4xl, text-2xl, text-xl, text-lg, text-base

颜色:

战略性地使用颜色区分重要性
主操作：强调色
次要操作：中性灰色
禁用状态：低对比度灰色
错误状态：红色（符合无障碍对比度）
成功状态：绿色（符合无障碍对比度）

字重:

标题：font-bold (700) 或 font-semibold (600)
正文：font-normal (400) 或 font-medium (500)
说明文字：font-light (300)，谨慎使用

间距:

大间距（32px+）分隔主要区块
中等间距（16-24px）分组相关内容
小间距（8px）用于紧密关联的元素
内部≤外部规则：元素内部间距应小于元素之间的间距

8px Grid System

8px网格系统

Core Concept

核心概念

All spacing, sizing, and layout must use multiples of 8:

Base units: 8px, 16px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px
Half unit: 4px (only for icons, borders, or micro-adjustments)
Never use: 7px, 13px, 25px, or other non-conforming values

所有间距、尺寸和布局必须使用8的倍数:

基础单位：8px, 16px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px
半单位：4px（仅用于图标、边框或微调整）
禁止使用：7px, 13px, 25px或其他非合规数值

Why 8px?

为什么选择8px?

Device compatibility: Most screen resolutions are divisible by 8
Scaling: Works perfectly across @1x, @2x, @3x displays
Visual consistency: Easy to eyeball and maintain rhythm
Developer-friendly: Reduces translation errors from design to code

设备兼容性：大多数屏幕分辨率可被8整除
缩放适配：完美适配@1x、@2x、@3x显示屏
视觉一致性：易于目测判断，维持设计节奏
开发者友好：减少设计到代码的转换误差

Tailwind CSS Spacing Scale

Tailwind CSS间距比例

Tailwind's spacing scale aligns perfectly with 8px grid:

0   →  0px
0.5 →  2px   (exception for borders)
1   →  4px   (half unit)
2   →  8px   (base)
3   →  12px  (1.5 units, use sparingly)
4   →  16px  (2 units)
5   →  20px  (2.5 units, use sparingly)
6   →  24px  (3 units)
8   →  32px  (4 units)
10  →  40px  (5 units)
12  →  48px  (6 units)
16  →  64px  (8 units)
20  →  80px  (10 units)
24  →  96px  (12 units)
32  →  128px (16 units)

Preferred values for spacing:

Padding: p-2, p-4, p-6, p-8, p-12, p-16
Margin: m-2, m-4, m-6, m-8, m-12, m-16
Gap: gap-2, gap-4, gap-6, gap-8

Tailwind的间距比例与8px网格完美对齐:

0   →  0px
0.5 →  2px   (边框例外)
1   →  4px   (半单位)
2   →  8px   (基础单位)
3   →  12px  (1.5倍单位，谨慎使用)
4   →  16px  (2倍单位)
5   →  20px  (2.5倍单位，谨慎使用)
6   →  24px  (3倍单位)
8   →  32px  (4倍单位)
10  →  40px  (5倍单位)
12  →  48px  (6倍单位)
16  →  64px  (8倍单位)
20  →  80px  (10倍单位)
24  →  96px  (12倍单位)
32  →  128px (16倍单位)

推荐的间距取值:

内边距：p-2, p-4, p-6, p-8, p-12, p-16
外边距：m-2, m-4, m-6, m-8, m-12, m-16
间隙：gap-2, gap-4, gap-6, gap-8

Spacing Hierarchy (Proximity Principle)

间距层级（邻近原则）

Tightly related (8px - 16px):

html

<div class="space-y-2">
  <h3 class="text-xl font-semibold">Heading</h3>
  <p class="text-gray-600">Subheading</p>
</div>

Related content (24px - 32px):

html

<div class="space-y-6">
  <section><!-- Content --></section>
  <section><!-- Content --></section>
</div>

Separate sections (48px - 64px):

html

<div class="space-y-12 md:space-y-16">
  <section><!-- Major section --></section>
  <section><!-- Major section --></section>
</div>

紧密关联（8px - 16px）:

html

<div class="space-y-2">
  <h3 class="text-xl font-semibold">标题</h3>
  <p class="text-gray-600">副标题</p>
</div>

相关内容（24px - 32px）:

html

<div class="space-y-6">
  <section><!-- 内容 --></section>
  <section><!-- 内容 --></section>
</div>

独立区块（48px - 64px）:

html

<div class="space-y-12 md:space-y-16">
  <section><!-- 主要区块 --></section>
  <section><!-- 主要区块 --></section>
</div>

Component Sizing with 8px Grid

基于8px网格的组件尺寸

Buttons:

Small: h-8 (32px) with px-3 py-1.5
Medium: h-10 (40px) with px-4 py-2
Large: h-12 (48px) with px-6 py-3
Extra Large: h-14 (56px) with px-8 py-4

Input Fields:

Height: h-10 (40px) or h-12 (48px)
Padding: px-3 py-2 or px-4 py-3

Cards:

Padding: p-4, p-6, or p-8 depending on content
Border radius: rounded-md (6px), rounded-lg (8px), rounded-xl (12px)

按钮:

小型：h-8 (32px)，搭配px-3 py-1.5
中型：h-10 (40px)，搭配px-4 py-2
大型：h-12 (48px)，搭配px-6 py-3
超大型：h-14 (56px)，搭配px-8 py-4

输入框:

高度：h-10 (40px) 或 h-12 (48px)
内边距：px-3 py-2 或 px-4 py-3

卡片:

内边距：根据内容选择p-4, p-6或p-8
圆角：rounded-md (6px), rounded-lg (8px), rounded-xl (12px)

Color System (Neutral + Accent)

色彩系统（中性色 + 强调色）

The Neutral Palette Approach

中性调色板方案

Base Strategy: Gray scale + ONE accent color

Gray Scale (Tailwind):

slate-50   → Backgrounds
slate-100  → Subtle backgrounds
slate-200  → Borders, dividers
slate-300  → Disabled text
slate-400  → Placeholder text
slate-500  → Secondary text
slate-600  → Body text
slate-700  → Headings
slate-800  → Emphasis
slate-900  → Maximum contrast

Accent Color Selection:

Choose ONE primary brand color
Use for: Primary buttons, links, active states, highlights
Shades needed: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
Example: blue-600 for primary, blue-700 for hover

基础策略：灰色系 + 一种强调色

Tailwind灰色系:

slate-50   → 背景色
slate-100  → 次要背景色
slate-200  → 边框、分隔线
slate-300  → 禁用文本
slate-400  → 占位符文本
slate-500  → 次要文本
slate-600  → 正文文本
slate-700  → 标题文本
slate-800  → 强调文本
slate-900  → 最高对比度文本

强调色选择:

选择一种主品牌色
用于：主按钮、链接、激活状态、高亮元素
需要的色调：50, 100, 200, 300, 400, 500, 600, 700, 800, 900
示例：主色用blue-600， hover状态用blue-700

Semantic Colors (Minimal Use)

语义化色彩（谨慎使用）

html

<!-- Success -->
<div class="bg-green-50 text-green-700 border border-green-200">

<!-- Warning -->
<div class="bg-yellow-50 text-yellow-800 border border-yellow-200">

<!-- Error -->
<div class="bg-red-50 text-red-700 border border-red-200">

<!-- Info -->
<div class="bg-blue-50 text-blue-700 border border-blue-200">

html

<!-- 成功状态 -->
<div class="bg-green-50 text-green-700 border border-green-200">

<!-- 警告状态 -->
<div class="bg-yellow-50 text-yellow-800 border border-yellow-200">

<!-- 错误状态 -->
<div class="bg-red-50 text-red-700 border border-red-200">

<!-- 信息状态 -->
<div class="bg-blue-50 text-blue-700 border border-blue-200">

Dark Mode Support

深色模式支持

html

<!-- Neutral backgrounds -->
<div class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-50">

<!-- Borders -->
<div class="border border-slate-200 dark:border-slate-800">

<!-- Subtle backgrounds -->
<div class="bg-slate-50 dark:bg-slate-800">

<!-- Primary accent -->
<button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">

html

<!-- 中性背景 -->
<div class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-50">

<!-- 边框 -->
<div class="border border-slate-200 dark:border-slate-800">

<!-- 次要背景 -->
<div class="bg-slate-50 dark:bg-slate-800">

<!-- 主强调色 -->
<button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">

Color Contrast Rules (WCAG)

WCAG色彩对比度规则

Text Contrast Ratios:

Normal text (< 24px): Minimum 4.5:1
Large text (≥ 24px): Minimum 3:1
UI components & graphics: Minimum 3:1

Safe Combinations:

✅ slate-900 on white → 18.9:1
✅ slate-700 on white → 8.6:1
✅ slate-600 on white → 6.2:1
✅ blue-600 on white → 5.4:1
❌ slate-400 on white → 2.9:1 (fails)
❌ slate-300 on white → 1.7:1 (fails)

文本对比度比例:

常规文本（<24px）：最低4.5:1
大文本（≥24px）：最低3:1
UI组件与图形：最低3:1

安全组合:

✅ slate-900 配白色 → 18.9:1
✅ slate-700 配白色 → 8.6:1
✅ slate-600 配白色 → 6.2:1
✅ blue-600 配白色 → 5.4:1
❌ slate-400 配白色 → 2.9:1（不达标）
❌ slate-300 配白色 → 1.7:1（不达标）

Tailwind CSS Best Practices (2025)

2025年Tailwind CSS最佳实践

1. Utility-First Approach

1. 工具类优先方案

DO:

html

<!-- ✅ Compose utilities directly -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
               transition-colors duration-200">
  Click me
</button>

DON'T:

css

/* ❌ Avoid custom CSS unless absolutely necessary */
.custom-button {
  padding: 0.5rem 1rem;
  background: #3b82f6;
  /* ... */
}

推荐做法:

html

<!-- ✅ 直接组合工具类 -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
               transition-colors duration-200">
  点击我
</button>

不推荐做法:

css

/* ❌ 除非必要，避免自定义CSS */
.custom-button {
  padding: 0.5rem 1rem;
  background: #3b82f6;
  /* ... */
}

2. Component Extraction with @apply (Sparingly)

2. 谨慎使用@apply提取组件

Use @apply ONLY for:

Components used 10+ times
Third-party library overrides
Print stylesheets

css

/* ✅ Good use of @apply */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 
           focus:outline-none focus:ring-2 focus:ring-blue-500;
  }
}

仅在以下场景使用@apply:

组件使用次数≥10次
第三方库样式覆盖
打印样式表

css

/* ✅ @apply的合理用法 */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 
           focus:outline-none focus:ring-2 focus:ring-blue-500;
  }
}

3. Responsive Design (Mobile-First)

3. 响应式设计（移动端优先）

Breakpoints:

sm:  640px  → Small tablets
md:  768px  → Tablets
lg:  1024px → Desktop
xl:  1280px → Large desktop
2xl: 1536px → Extra large

Pattern:

html

<!-- Mobile first, then scale up -->
<div class="p-4 md:p-6 lg:p-8">
  <h1 class="text-2xl md:text-3xl lg:text-4xl">
    Responsive Heading
  </h1>
</div>

<!-- Grid responsive -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
  <!-- Items -->
</div>

断点:

sm:  640px  → 小型平板
md:  768px  → 平板
lg:  1024px → 桌面端
xl:  1280px → 大桌面
2xl: 1536px → 超大桌面

模式:

html

<!-- 移动端优先，逐步适配大屏 -->
<div class="p-4 md:p-6 lg:p-8">
  <h1 class="text-2xl md:text-3xl lg:text-4xl">
    响应式标题
  </h1>
</div>

<!-- 响应式网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
  <!-- 子元素 -->
</div>

4. State Variants

4. 状态变体

Hover, Focus, Active:

html

<button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
               disabled:opacity-50 disabled:cursor-not-allowed">

Dark Mode:

html

<div class="bg-white dark:bg-slate-900 
            text-slate-900 dark:text-slate-50
            border border-slate-200 dark:border-slate-800">

Hover、Focus、Active状态:

html

<button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
               disabled:opacity-50 disabled:cursor-not-allowed">

深色模式:

html

<div class="bg-white dark:bg-slate-900 
            text-slate-900 dark:text-slate-50
            border border-slate-200 dark:border-slate-800">

5. Class Organization (Consistent Order)

5. 类名组织（一致顺序）

Standard order:

Layout (display, position, overflow)
Sizing (width, height)
Spacing (margin, padding)
Typography (font, text)
Visual (background, border)
Effects (shadow, opacity)
Transitions
Variants (hover, focus, dark)

html

<!-- ✅ Organized -->
<div class="
  flex items-center justify-between
  w-full max-w-screen-lg
  px-4 py-3 my-2
  text-lg font-medium text-gray-800
  bg-white rounded shadow
  hover:shadow-md
  transition-shadow
">

标准顺序:

布局（display、position、overflow）
尺寸（width、height）
间距（margin、padding）
排版（font、text）
视觉样式（background、border）
特效（shadow、opacity）
过渡动画
变体（hover、focus、dark）

html

<!-- ✅ 有序的类名 -->
<div class="
  flex items-center justify-between
  w-full max-w-screen-lg
  px-4 py-3 my-2
  text-lg font-medium text-gray-800
  bg-white rounded shadow
  hover:shadow-md
  transition-shadow
">

6. JIT Mode & Purging

6. JIT模式与样式清除

Always enable JIT (Just-In-Time mode):

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './components/**/*.{html,js,jsx,ts,tsx}',
  ],
  // ... rest of config
}

Benefits:

Smaller CSS bundle
Arbitrary values:
```
w-[373px]
```
All variants available
Faster build times

始终启用JIT（即时编译）模式:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './components/**/*.{html,js,jsx,ts,tsx}',
  ],
  // ... 其余配置
}

优势:

更小的CSS包体积
支持任意值：
```
w-[373px]
```
所有变体可用
更快的构建速度

shadcn/ui Component Patterns

shadcn/ui组件模式

Architecture Understanding

架构理解

shadcn/ui = Radix UI + Tailwind CSS + CVA:

Radix UI: Unstyled, accessible primitives
Tailwind CSS: Utility-first styling
CVA (Class Variance Authority): Variant management

shadcn/ui = Radix UI + Tailwind CSS + CVA:

Radix UI: 无样式、无障碍的基础组件
Tailwind CSS: 工具类优先的样式方案
CVA (Class Variance Authority): 变体管理工具

Core Pattern: Copy, Own, Customize

核心模式：复制、拥有、自定义

NOT a package: You copy component source into your project

Full ownership of code
No breaking updates
Complete customization
Type-safe variants

并非包依赖：将组件源码复制到你的项目中

完全拥有代码控制权
无破坏性更新
可完全自定义
类型安全的变体

Component Anatomy Example

组件结构示例

tsx

// Button.tsx
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  // Base styles (always applied)
  "inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-slate-900 text-slate-50 hover:bg-slate-800",
        outline: "border border-slate-200 bg-transparent hover:bg-slate-100",
        ghost: "hover:bg-slate-100",
      },
      size: {
        sm: "h-8 px-3 text-sm",
        md: "h-10 px-4",
        lg: "h-12 px-6 text-lg",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  }
)

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export const Button = ({ className, variant, size, ...props }: ButtonProps) => {
  return (
    <button
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  )
}

tsx

// Button.tsx
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  // 基础样式（始终生效）
  "inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-slate-900 text-slate-50 hover:bg-slate-800",
        outline: "border border-slate-200 bg-transparent hover:bg-slate-100",
        ghost: "hover:bg-slate-100",
      },
      size: {
        sm: "h-8 px-3 text-sm",
        md: "h-10 px-4",
        lg: "h-12 px-6 text-lg",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  }
)

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export const Button = ({ className, variant, size, ...props }: ButtonProps) => {
  return (
    <button
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  )
}

Best Practices for shadcn/ui

shadcn/ui最佳实践

1. Use
cn()
utility for class merging:

tsx

import { cn } from "@/lib/utils"

// Allows className override
<Button className={cn("custom-class", conditionalClass && "other-class")} />

2. Design System Integration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ... more design tokens
      },
    },
  },
}

3. CSS Variables for Theming:

css

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --border: 217.2 32.6% 17.5%;
}

1. 使用
cn()
工具类合并类名:

tsx

import { cn } from "@/lib/utils"

// 支持类名覆盖
<Button className={cn("custom-class", conditionalClass && "other-class")} />

2. 设计系统集成:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ... 更多设计令牌
      },
    },
  },
}

3. 使用CSS变量实现主题切换:

css

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --border: 217.2 32.6% 17.5%;
}

Common Patterns

常见模式

Form Field with Label:

tsx

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input
    id="email"
    type="email"
    placeholder="you@example.com"
    className="w-full"
  />
  <p className="text-sm text-slate-500">
    We'll never share your email.
  </p>
</div>

Card Layout:

tsx

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardContent>
    <!-- Main content -->
  </CardContent>
  <CardFooter>
    <!-- Actions -->
  </CardFooter>
</Card>

Dialog Pattern:

tsx

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>
        Dialog description text
      </DialogDescription>
    </DialogHeader>
    <!-- Dialog content -->
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

带标签的表单字段:

tsx

<div className="space-y-2">
  <Label htmlFor="email">邮箱</Label>
  <Input
    id="email"
    type="email"
    placeholder="you@example.com"
    className="w-full"
  />
  <p className="text-sm text-slate-500">
    我们绝不会分享你的邮箱。
  </p>
</div>

卡片布局:

tsx

<Card>
  <CardHeader>
    <CardTitle>卡片标题</CardTitle>
    <CardDescription>卡片描述内容</CardDescription>
  </CardHeader>
  <CardContent>
    <!-- 主要内容 -->
  </CardContent>
  <CardFooter>
    <!-- 操作按钮 -->
  </CardFooter>
</Card>

对话框模式:

tsx

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">打开对话框</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>对话框标题</DialogTitle>
      <DialogDescription>
        对话框描述文本
      </DialogDescription>
    </DialogHeader>
    <!-- 对话框内容 -->
    <DialogFooter>
      <Button variant="outline">取消</Button>
      <Button>确认</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Accessibility (WCAG 2.2 Compliance)

无障碍设计（WCAG 2.2合规）

The Four Principles (POUR)

四大原则（POUR）

1. Perceivable:

Text alternatives for images
Captions for videos
Adaptable content structure
Sufficient color contrast

2. Operable:

Keyboard accessible
No keyboard traps
Sufficient time to interact
No seizure-inducing content

3. Understandable:

Readable text
Predictable behavior
Input assistance and error prevention

4. Robust:

Compatible with assistive technologies
Valid HTML
Proper ARIA attributes

1. 可感知:

图片的文本替代
视频的字幕
可适配的内容结构
充足的色彩对比度

2. 可操作:

支持键盘导航
无键盘陷阱
充足的交互时间
无诱发癫痫的内容

3. 可理解:

可读的文本
可预测的行为
输入辅助与错误预防

4. 鲁棒性:

与辅助技术兼容
有效的HTML
正确的ARIA属性

Critical Requirements

关键要求

Keyboard Navigation:

html

<!-- ✅ Proper focus management -->
<button
  class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
  Accessible Button
</button>

<!-- ✅ Skip links -->
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0">
  Skip to main content
</a>

Focus Indicators (WCAG 2.2):

Must be visible
Minimum 2px thickness
Contrast ratio of 3:1 against background
Use
```
focus:ring-2
```
and
```
focus:ring-offset-2
```

Touch Targets:

Minimum 44x44px (WCAG 2.1)
Minimum 24x24px spacing (WCAG 2.2)
Use
```
min-h-[44px] min-w-[44px]
```
for interactive elements

Color Contrast:

html

<!-- ✅ Good contrast -->
<p class="text-slate-700">Body text</p> <!-- 8.6:1 -->
<button class="bg-blue-600 text-white">Action</button> <!-- 5.4:1 -->

<!-- ❌ Poor contrast -->
<p class="text-slate-400">Fails WCAG</p> <!-- 2.9:1 -->

Semantic HTML:

html

<!-- ✅ Use proper semantic elements -->
<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Page Title</h1>
    <section>
      <h2>Section Heading</h2>
      <!-- Content -->
    </section>
  </article>
</main>

<footer>
  <!-- Footer content -->
</footer>

ARIA Labels:

html

<!-- Icon-only buttons -->
<button aria-label="Close dialog" class="...">
  <XIcon className="h-4 w-4" aria-hidden="true" />
</button>

<!-- Form labels -->
<label for="search" class="sr-only">Search</label>
<input id="search" type="search" />

<!-- Live regions -->
<div role="status" aria-live="polite" aria-atomic="true">
  Loading...
</div>

Form Accessibility:

html

<form>
  <div>
    <label for="email" class="block text-sm font-medium mb-2">
      Email
      <span class="text-red-600" aria-label="required">*</span>
    </label>
    <input
      id="email"
      type="email"
      required
      aria-required="true"
      aria-describedby="email-error"
      aria-invalid={hasError ? "true" : "false"}
      class="w-full"
    />
    {hasError && (
      <p id="email-error" class="text-sm text-red-600 mt-1" role="alert">
        Please enter a valid email address
      </p>
    )}
  </div>
</form>

键盘导航:

html

<!-- ✅ 正确的焦点管理 -->
<button
  class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
  无障碍按钮
</button>

<!-- ✅ 跳转链接 -->
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0">
  跳转到主要内容
</a>

焦点指示器（WCAG 2.2）:

必须可见
最小2px厚度
与背景的对比度≥3:1
使用
```
focus:ring-2
```
和
```
focus:ring-offset-2
```

触摸目标:

最小44x44px（WCAG 2.1）
最小24x24px间距（WCAG 2.2）
对交互元素使用
```
min-h-[44px] min-w-[44px]
```

色彩对比度:

html

<!-- ✅ 良好的对比度 -->
<p class="text-slate-700">正文文本</p> <!-- 8.6:1 -->
<button class="bg-blue-600 text-white">操作按钮</button> <!-- 5.4:1 -->

<!-- ❌ 差的对比度 -->
<p class="text-slate-400">不满足WCAG标准</p> <!-- 2.9:1 -->

语义化HTML:

html

<!-- ✅ 使用正确的语义元素 -->
<header>
  <nav aria-label="主导航">
    <ul>
      <li><a href="/">首页</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>页面标题</h1>
    <section>
      <h2>区块标题</h2>
      <!-- 内容 -->
    </section>
  </article>
</main>

<footer>
  <!-- 页脚内容 -->
</footer>

ARIA标签:

html

<!-- 仅图标按钮 -->
<button aria-label="关闭对话框" class="...">
  <XIcon className="h-4 w-4" aria-hidden="true" />
</button>

<!-- 表单标签 -->
<label for="search" class="sr-only">搜索</label>
<input id="search" type="search" />

<!-- 实时区域 -->
<div role="status" aria-live="polite" aria-atomic="true">
  加载中...
</div>

表单无障碍:

html

<form>
  <div>
    <label for="email" class="block text-sm font-medium mb-2">
      邮箱
      <span class="text-red-600" aria-label="必填">*</span>
    </label>
    <input
      id="email"
      type="email"
      required
      aria-required="true"
      aria-describedby="email-error"
      aria-invalid={hasError ? "true" : "false"}
      class="w-full"
    />
    {hasError && (
      <p id="email-error" class="text-sm text-red-600 mt-1" role="alert">
        请输入有效的邮箱地址
      </p>
    )}
  </div>
</form>

Mobile-First Responsive Design

移动端优先的响应式设计

Strategy

策略

Start with mobile (320px - 640px):

Design for smallest screen first
Optimize for touch interactions
Prioritize content hierarchy
Progressive enhancement for larger screens

从移动端开始（320px - 640px）:

先为最小屏幕设计
优化触摸交互
优先处理内容层级
为大屏逐步增强功能

Responsive Patterns

响应式模式

Container Width:

html

<!-- Responsive container -->
<div class="container mx-auto px-4 md:px-6 lg:px-8 max-w-7xl">
  <!-- Content -->
</div>

Typography Scale:

html

<!-- Responsive text -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold">
  Responsive Heading
</h1>

<p class="text-base md:text-lg leading-relaxed">
  Body text with responsive sizing
</p>

Grid Layouts:

html

<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
  <div><!-- Card --></div>
  <div><!-- Card --></div>
  <div><!-- Card --></div>
</div>

Flexbox Responsive:

html

<!-- Stack on mobile, row on desktop -->
<div class="flex flex-col md:flex-row gap-4 md:gap-6">
  <div class="flex-1"><!-- Content --></div>
  <div class="flex-1"><!-- Content --></div>
</div>

Visibility Control:

html

<!-- Hide on mobile, show on desktop -->
<div class="hidden md:block">
  Desktop only content
</div>

<!-- Show on mobile, hide on desktop -->
<div class="block md:hidden">
  Mobile only content
</div>

Navigation Pattern:

html

<!-- Mobile: Hamburger menu -->
<!-- Desktop: Horizontal nav -->
<nav>
  <!-- Mobile menu button -->
  <button class="md:hidden">
    <MenuIcon />
  </button>
  
  <!-- Desktop nav -->
  <ul class="hidden md:flex md:space-x-4">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

容器宽度:

html

<!-- 响应式容器 -->
<div class="container mx-auto px-4 md:px-6 lg:px-8 max-w-7xl">
  <!-- 内容 -->
</div>

排版比例:

html

<!-- 响应式文本 -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold">
  响应式标题
</h1>

<p class="text-base md:text-lg leading-relaxed">
  具备响应式尺寸的正文文本
</p>

网格布局:

html

<!-- 响应式网格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
  <div><!-- 卡片 --></div>
  <div><!-- 卡片 --></div>
  <div><!-- 卡片 --></div>
</div>

Flexbox响应式:

html

<!-- 移动端堆叠，桌面端横向排列 -->
<div class="flex flex-col md:flex-row gap-4 md:gap-6">
  <div class="flex-1"><!-- 内容 --></div>
  <div class="flex-1"><!-- 内容 --></div>
</div>

可见性控制:

html

<!-- 移动端隐藏，桌面端显示 -->
<div class="hidden md:block">
  仅桌面端可见内容
</div>

<!-- 移动端显示，桌面端隐藏 -->
<div class="block md:hidden">
  仅移动端可见内容
</div>

导航模式:

html

<!-- 移动端：汉堡菜单 -->
<!-- 桌面端：横向导航 -->
<nav>
  <!-- 移动端菜单按钮 -->
  <button class="md:hidden">
    <MenuIcon />
  </button>
  
  <!-- 桌面端导航 -->
  <ul class="hidden md:flex md:space-x-4">
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于我们</a></li>
  </ul>
</nav>

Typography System

排版系统

Font Selection

字体选择

Modern Professional Fonts:

Sans-serif: Inter, SF Pro, -apple-system, system-ui
Monospace: JetBrains Mono, Fira Code, SF Mono

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
    },
  },
}

现代专业字体:

无衬线字体: Inter, SF Pro, -apple-system, system-ui
等宽字体: JetBrains Mono, Fira Code, SF Mono

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
    },
  },
}

Type Scale (8px-based)

基于8px的字体比例

text-xs   → 12px (line-height: 16px)
text-sm   → 14px (line-height: 20px)
text-base → 16px (line-height: 24px) ← Body text default
text-lg   → 18px (line-height: 28px)
text-xl   → 20px (line-height: 28px)
text-2xl  → 24px (line-height: 32px)
text-3xl  → 30px (line-height: 36px)
text-4xl  → 36px (line-height: 40px)
text-5xl  → 48px (line-height: 48px)
text-6xl  → 60px (line-height: 60px)

text-xs   → 12px (行高: 16px)
text-sm   → 14px (行高: 20px)
text-base → 16px (行高: 24px) ← 正文默认
text-lg   → 18px (行高: 28px)
text-xl   → 20px (行高: 28px)
text-2xl  → 24px (行高: 32px)
text-3xl  → 30px (行高: 36px)
text-4xl  → 36px (行高: 40px)
text-5xl  → 48px (行高: 48px)
text-6xl  → 60px (行高: 60px)

Line Heights

行高

Always use 8px-aligned line heights:

html

<!-- Body text -->
<p class="text-base leading-6"> <!-- 16px text, 24px line-height -->

<!-- Headings -->
<h2 class="text-3xl leading-9"> <!-- 30px text, 36px line-height -->

始终使用8px对齐的行高:

html

<!-- 正文文本 -->
<p class="text-base leading-6"> <!-- 16px文本，24px行高 -->

<!-- 标题 -->
<h2 class="text-3xl leading-9"> <!-- 30px文本，36px行高 -->

Text Hierarchy Example

文本层级示例

html

<article class="space-y-6">
  <!-- Main heading -->
  <h1 class="text-4xl md:text-5xl font-bold text-slate-900 leading-tight">
    Article Title
  </h1>
  
  <!-- Subtitle -->
  <p class="text-xl text-slate-600 leading-relaxed">
    Engaging subtitle or description
  </p>
  
  <!-- Meta information -->
  <div class="flex items-center gap-4 text-sm text-slate-500">
    <span>By Author Name</span>
    <span>•</span>
    <time datetime="2025-01-15">Jan 15, 2025</time>
  </div>
  
  <!-- Body content -->
  <div class="prose prose-slate max-w-none">
    <p class="text-base leading-relaxed text-slate-700">
      Body paragraph with comfortable reading size and spacing...
    </p>
  </div>
</article>

html

<article class="space-y-6">
  <!-- 主标题 -->
  <h1 class="text-4xl md:text-5xl font-bold text-slate-900 leading-tight">
    文章标题
  </h1>
  
  <!-- 副标题 -->
  <p class="text-xl text-slate-600 leading-relaxed">
    引人入胜的副标题或描述
  </p>
  
  <!-- 元信息 -->
  <div class="flex items-center gap-4 text-sm text-slate-500">
    <span>作者：作者名称</span>
    <span>•</span>
    <time datetime="2025-01-15">2025年1月15日</time>
  </div>
  
  <!-- 正文内容 -->
  <div class="prose prose-slate max-w-none">
    <p class="text-base leading-relaxed text-slate-700">
      具备舒适阅读尺寸和间距的正文段落...
    </p>
  </div>
</article>

Shadows & Elevation

阴影与层级

Shadow System (Subtle Professional)

微妙专业的阴影系统

html

<!-- Subtle card elevation -->
<div class="shadow-sm"> <!-- Very subtle -->
<div class="shadow">    <!-- Default card -->
<div class="shadow-md"> <!-- Slightly raised -->
<div class="shadow-lg"> <!-- Pronounced elevation -->
<div class="shadow-xl"> <!-- Modal/dialog -->

<!-- Custom shadows (use sparingly) -->
<div class="shadow-[0_2px_8px_rgba(0,0,0,0.08)]">

Modern Pattern: Combine shadow with border

html

<div class="border border-slate-200 shadow-sm rounded-lg">
  <!-- More refined than shadow alone -->
</div>

html

<!-- 轻微的卡片层级 -->
<div class="shadow-sm"> <!-- 非常微妙 -->
<div class="shadow">    <!-- 默认卡片 -->
<div class="shadow-md"> <!-- 略微凸起 -->
<div class="shadow-lg"> <!-- 明显的层级 -->
<div class="shadow-xl"> <!-- 模态框/对话框 -->

<!-- 自定义阴影（谨慎使用） -->
<div class="shadow-[0_2px_8px_rgba(0,0,0,0.08)]">

现代模式：阴影与边框结合

html

<div class="border border-slate-200 shadow-sm rounded-lg">
  <!-- 比单独使用阴影更精致 -->
</div>

Elevation States

层级状态

html

<!-- Card hover effect -->
<div class="border border-slate-200 shadow-sm hover:shadow-md 
            transition-shadow duration-200 rounded-lg">
  Hover me
</div>

html

<!-- 卡片hover效果 -->
<div class="border border-slate-200 shadow-sm hover:shadow-md 
            transition-shadow duration-200 rounded-lg">
  鼠标悬停查看效果
</div>

Border Radius Guidelines

圆角指南

Consistent Rounding

一致的圆角取值

rounded-none → 0px
rounded-sm   → 2px   (subtle, modern)
rounded      → 4px   (default)
rounded-md   → 6px   (cards)
rounded-lg   → 8px   (buttons, inputs) ← Preferred
rounded-xl   → 12px  (large cards)
rounded-2xl  → 16px  (hero sections)
rounded-full → 9999px (circles, pills)

2025 Trend: Larger, softer corners (8px - 12px)

html

<!-- Modern button -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg">

<!-- Card -->
<div class="border border-slate-200 rounded-xl p-6">

<!-- Avatar -->
<img class="h-10 w-10 rounded-full" />

rounded-none → 0px
rounded-sm   → 2px   (微妙、现代)
rounded      → 4px   (默认)
rounded-md   → 6px   (卡片)
rounded-lg   → 8px   (按钮、输入框) ← 推荐值
rounded-xl   → 12px  (大卡片)
rounded-2xl  → 16px  (英雄区块)
rounded-full → 9999px (圆形、胶囊状)

2025年趋势：更大、更柔和的圆角（8px - 12px）

html

<!-- 现代按钮 -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg">

<!-- 卡片 -->
<div class="border border-slate-200 rounded-xl p-6">

<!-- 头像 -->
<img class="h-10 w-10 rounded-full" />

Component Design Examples

组件设计示例

Modern Button

现代按钮

html

<!-- Primary -->
<button class="
  inline-flex items-center justify-center
  h-10 px-4
  text-base font-medium
  bg-blue-600 text-white
  rounded-lg
  hover:bg-blue-700
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  active:bg-blue-800
  disabled:opacity-50 disabled:cursor-not-allowed
  transition-colors duration-200
">
  Primary Action
</button>

<!-- Secondary -->
<button class="
  inline-flex items-center justify-center
  h-10 px-4
  text-base font-medium
  border border-slate-300 bg-white text-slate-700
  rounded-lg
  hover:bg-slate-50
  focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2
  disabled:opacity-50 disabled:cursor-not-allowed
  transition-colors duration-200
">
  Secondary Action
</button>

<!-- Ghost -->
<button class="
  inline-flex items-center justify-center
  h-10 px-4
  text-base font-medium text-slate-700
  rounded-lg
  hover:bg-slate-100
  focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2
  transition-colors duration-200
">
  Ghost Button
</button>

html

<!-- 主按钮 -->
<button class="
  inline-flex items-center justify-center
  h-10 px-4
  text-base font-medium
  bg-blue-600 text-white
  rounded-lg
  hover:bg-blue-700
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  active:bg-blue-800
  disabled:opacity-50 disabled:cursor-not-allowed
  transition-colors duration-200
">
  主要操作
</button>

<!-- 次要按钮 -->
<button class="
  inline-flex items-center justify-center
  h-10 px-4
  text-base font-medium
  border border-slate-300 bg-white text-slate-700
  rounded-lg
  hover:bg-slate-50
  focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2
  disabled:opacity-50 disabled:cursor-not-allowed
  transition-colors duration-200
">
  次要操作
</button>

<!-- 幽灵按钮 -->
<button class="
  inline-flex items-center justify-center
  h-10 px-4
  text-base font-medium text-slate-700
  rounded-lg
  hover:bg-slate-100
  focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2
  transition-colors duration-200
">
  幽灵按钮
</button>

Modern Input Field

现代输入框

html

<div class="space-y-2">
  <label 
    for="email" 
    class="block text-sm font-medium text-slate-700"
  >
    Email address
  </label>
  <input
    id="email"
    type="email"
    placeholder="you@example.com"
    class="
      w-full h-10 px-3
      text-base text-slate-900 placeholder:text-slate-400
      bg-white
      border border-slate-300 rounded-lg
      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
      disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed
      transition-colors duration-200
    "
  />
  <p class="text-sm text-slate-500">
    We'll never share your email with anyone else.
  </p>
</div>

html

<div class="space-y-2">
  <label 
    for="email" 
    class="block text-sm font-medium text-slate-700"
  >
    邮箱地址
  </label>
  <input
    id="email"
    type="email"
    placeholder="you@example.com"
    class="
      w-full h-10 px-3
      text-base text-slate-900 placeholder:text-slate-400
      bg-white
      border border-slate-300 rounded-lg
      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
      disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed
      transition-colors duration-200
    "
  />
  <p class="text-sm text-slate-500">
    我们绝不会与他人分享你的邮箱。
  </p>
</div>

Modern Card

现代卡片

html

<div class="
  bg-white
  border border-slate-200
  rounded-xl
  shadow-sm hover:shadow-md
  transition-shadow duration-200
  overflow-hidden
">
  <!-- Card header with image -->
  <div class="aspect-video bg-slate-100">
    <img 
      src="..." 
      alt="..."
      class="w-full h-full object-cover"
    />
  </div>
  
  <!-- Card content -->
  <div class="p-6 space-y-4">
    <!-- Heading -->
    <h3 class="text-xl font-semibold text-slate-900">
      Card Title
    </h3>
    
    <!-- Description -->
    <p class="text-base text-slate-600 leading-relaxed">
      Card description goes here with comfortable reading spacing.
    </p>
    
    <!-- Actions -->
    <div class="flex items-center gap-3">
      <button class="...">Primary</button>
      <button class="...">Secondary</button>
    </div>
  </div>
</div>

html

<div class="
  bg-white
  border border-slate-200
  rounded-xl
  shadow-sm hover:shadow-md
  transition-shadow duration-200
  overflow-hidden
">
  <!-- 带图片的卡片头部 -->
  <div class="aspect-video bg-slate-100">
    <img 
      src="..." 
      alt="..."
      class="w-full h-full object-cover"
    />
  </div>
  
  <!-- 卡片内容 -->
  <div class="p-6 space-y-4">
    <!-- 标题 -->
    <h3 class="text-xl font-semibold text-slate-900">
      卡片标题
    </h3>
    
    <!-- 描述 -->
    <p class="text-base text-slate-600 leading-relaxed">
      卡片描述内容，具备舒适的阅读间距。
    </p>
    
    <!-- 操作按钮 -->
    <div class="flex items-center gap-3">
      <button class="...">主要操作</button>
      <button class="...">次要操作</button>
    </div>
  </div>
</div>

Modern Navigation

现代导航栏

html

<header class="sticky top-0 z-50 bg-white border-b border-slate-200">
  <nav class="container mx-auto px-4 md:px-6">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <a href="/" class="flex items-center gap-2">
        <img src="logo.svg" alt="Logo" class="h-8 w-8" />
        <span class="text-xl font-bold text-slate-900">Brand</span>
      </a>
      
      <!-- Desktop navigation -->
      <ul class="hidden md:flex items-center gap-8">
        <li>
          <a href="/" class="text-sm font-medium text-slate-700 hover:text-slate-900">
            Home
          </a>
        </li>
        <li>
          <a href="/about" class="text-sm font-medium text-slate-700 hover:text-slate-900">
            About
          </a>
        </li>
        <li>
          <a href="/contact" class="text-sm font-medium text-slate-700 hover:text-slate-900">
            Contact
          </a>
        </li>
      </ul>
      
      <!-- CTA -->
      <button class="hidden md:inline-flex ...">
        Get Started
      </button>
      
      <!-- Mobile menu button -->
      <button class="md:hidden" aria-label="Open menu">
        <MenuIcon class="h-6 w-6" />
      </button>
    </div>
  </nav>
</header>

html

<header class="sticky top-0 z-50 bg-white border-b border-slate-200">
  <nav class="container mx-auto px-4 md:px-6">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <a href="/" class="flex items-center gap-2">
        <img src="logo.svg" alt="Logo" class="h-8 w-8" />
        <span class="text-xl font-bold text-slate-900">品牌名称</span>
      </a>
      
      <!-- 桌面端导航 -->
      <ul class="hidden md:flex items-center gap-8">
        <li>
          <a href="/" class="text-sm font-medium text-slate-700 hover:text-slate-900">
            首页
          </a>
        </li>
        <li>
          <a href="/about" class="text-sm font-medium text-slate-700 hover:text-slate-900">
            关于我们
          </a>
        </li>
        <li>
          <a href="/contact" class="text-sm font-medium text-slate-700 hover:text-slate-900">
            联系我们
          </a>
        </li>
      </ul>
      
      <!-- 行动按钮 -->
      <button class="hidden md:inline-flex ...">
        开始使用
      </button>
      
      <!-- 移动端菜单按钮 -->
      <button class="md:hidden" aria-label="打开菜单">
        <MenuIcon class="h-6 w-6" />
      </button>
    </div>
  </nav>
</header>

Anti-Patterns to Avoid

需避免的反模式

❌ DON'T DO THESE

❌ 这些做法不可取

1. Inconsistent Spacing:

html

<!-- ❌ Bad: Random spacing values -->
<div class="mt-3 mb-5 px-7">

<!-- ✅ Good: 8px grid aligned -->
<div class="my-4 px-6">

2. Poor Color Contrast:

html

<!-- ❌ Bad: Fails WCAG -->
<p class="text-slate-400">Important text</p>

<!-- ✅ Good: Passes WCAG -->
<p class="text-slate-700">Important text</p>

3. Missing Focus Styles:

html

<!-- ❌ Bad: No focus indicator -->
<button class="outline-none">

<!-- ✅ Good: Clear focus ring -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500">

4. Non-Semantic HTML:

html

<!-- ❌ Bad: Divs for everything -->
<div onClick="navigate()">Home</div>

<!-- ✅ Good: Semantic elements -->
<a href="/home">Home</a>

5. Tiny Touch Targets:

html

<!-- ❌ Bad: Too small for touch -->
<button class="p-1">×</button>

<!-- ✅ Good: Minimum 44x44px -->
<button class="p-3 min-h-[44px] min-w-[44px]">×</button>

6. Over-Styled Designs:

html

<!-- ❌ Bad: Rainbow chaos -->
<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 
            shadow-2xl border-4 border-yellow-400 rounded-3xl">

<!-- ✅ Good: Minimal & professional -->
<div class="bg-white border border-slate-200 rounded-lg shadow-sm">

7. Fixed Pixel Widths:

html

<!-- ❌ Bad: Breaks on small screens -->
<div class="w-[800px]">

<!-- ✅ Good: Responsive -->
<div class="w-full max-w-3xl">

1. 不一致的间距:

html

<!-- ❌ 错误：随机的间距值 -->
<div class="mt-3 mb-5 px-7">

<!-- ✅ 正确：对齐8px网格 -->
<div class="my-4 px-6">

2. 差的色彩对比度:

html

<!-- ❌ 错误：不满足WCAG标准 -->
<p class="text-slate-400">重要文本</p>

<!-- ✅ 正确：满足WCAG标准 -->
<p class="text-slate-700">重要文本</p>

3. 缺失焦点样式:

html

<!-- ❌ 错误：无焦点指示器 -->
<button class="outline-none">

<!-- ✅ 正确：清晰的焦点环 -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500">

4. 非语义化HTML:

html

<!-- ❌ 错误：所有元素用div -->
<div onClick="navigate()">首页</div>

<!-- ✅ 正确：语义化元素 -->
<a href="/home">首页</a>

5. 过小的触摸目标:

html

<!-- ❌ 错误：触摸目标过小 -->
<button class="p-1">×</button>

<!-- ✅ 正确：最小44x44px -->
<button class="p-3 min-h-[44px] min-w-[44px]">×</button>

6. 过度设计:

html

<!-- ❌ 错误：花哨的彩虹效果 -->
<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 
            shadow-2xl border-4 border-yellow-400 rounded-3xl">

<!-- ✅ 正确：极简专业 -->
<div class="bg-white border border-slate-200 rounded-lg shadow-sm">

7. 固定像素宽度:

html

<!-- ❌ 错误：小屏幕上会断裂 -->
<div class="w-[800px]">

<!-- ✅ 正确：响应式宽度 -->
<div class="w-full max-w-3xl">

Quick Review Checklist

快速评审清单

Design Review (Before Development)

设计评审（开发前）

Development Review (After Implementation)

开发评审（开发后）

Advanced Techniques

高级技巧

1. Tailwind CSS Variables for Theming

1. 使用Tailwind CSS变量实现主题化

css

@layer base {
  :root {
    /* Spacing */
    --spacing-xs: 0.5rem;  /* 8px */
    --spacing-sm: 1rem;    /* 16px */
    --spacing-md: 1.5rem;  /* 24px */
    --spacing-lg: 2rem;    /* 32px */
    
    /* Colors */
    --color-primary: 220 90% 56%;
    --color-primary-hover: 220 90% 48%;
    
    /* Border radius */
    --radius-sm: 0.5rem;  /* 8px */
    --radius-md: 0.75rem; /* 12px */
    --radius-lg: 1rem;    /* 16px */
  }
}

css

@layer base {
  :root {
    /* 间距 */
    --spacing-xs: 0.5rem;  /* 8px */
    --spacing-sm: 1rem;    /* 16px */
    --spacing-md: 1.5rem;  /* 24px */
    --spacing-lg: 2rem;    /* 32px */
    
    /* 颜色 */
    --color-primary: 220 90% 56%;
    --color-primary-hover: 220 90% 48%;
    
    /* 圆角 */
    --radius-sm: 0.5rem;  /* 8px */
    --radius-md: 0.75rem; /* 12px */
    --radius-lg: 1rem;    /* 16px */
  }
}

2. Custom Utility Classes

2. 自定义工具类

css

@layer utilities {
  /* Text balance for headings */
  .text-balance {
    text-wrap: balance;
  }
  
  /* Smooth scroll */
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  
  /* Focus visible only */
  .focus-visible-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500;
  }
}

css

@layer utilities {
  /* 标题文本平衡 */
  .text-balance {
    text-wrap: balance;
  }
  
  /* 平滑滚动 */
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  
  /* 仅在焦点可见时显示环 */
  .focus-visible-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500;
  }
}

3. Component Composition Pattern

3. 组件组合模式

tsx

// Compose smaller components into larger ones
<Card>
  <CardHeader>
    <div className="flex items-center justify-between">
      <div className="space-y-1">
        <CardTitle>Dashboard</CardTitle>
        <CardDescription>Welcome back</CardDescription>
      </div>
      <Button variant="outline" size="sm">
        <SettingsIcon className="h-4 w-4" />
      </Button>
    </div>
  </CardHeader>
  <CardContent>
    <Tabs defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="space-y-4">
        {/* Content */}
      </TabsContent>
    </Tabs>
  </CardContent>
</Card>

tsx

// 将小组件组合成大组件
<Card>
  <CardHeader>
    <div className="flex items-center justify-between">
      <div className="space-y-1">
        <CardTitle>仪表盘</CardTitle>
        <CardDescription>欢迎回来</CardDescription>
      </div>
      <Button variant="outline" size="sm">
        <SettingsIcon className="h-4 w-4" />
      </Button>
    </div>
  </CardHeader>
  <CardContent>
    <Tabs defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">概览</TabsTrigger>
        <TabsTrigger value="analytics">分析</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="space-y-4">
        {/* 内容 */}
      </TabsContent>
    </Tabs>
  </CardContent>
</Card>

Resources & Tools

资源与工具

Design Tools

设计工具

Figma: Primary design tool
Tailwind CSS IntelliSense: VS Code extension
Headless UI: Unstyled accessible components
Radix UI: Primitive components for shadcn/ui

Figma: 首选设计工具
Tailwind CSS IntelliSense: VS Code扩展
Headless UI: 无样式的无障碍组件
Radix UI: shadcn/ui的基础组件

Accessibility Testing

无障碍测试

WAVE: Browser extension for accessibility testing
axe DevTools: Automated accessibility testing
Contrast Checker: Verify WCAG color contrast
NVDA/VoiceOver: Screen reader testing

WAVE: 用于无障碍测试的浏览器扩展
axe DevTools: 自动化无障碍测试工具
Contrast Checker: 验证WCAG色彩对比度
NVDA/VoiceOver: 屏幕阅读器测试

Color Tools

色彩工具

Coolors: Color palette generator
Tailwind Shades: Generate Tailwind color scales
Contrast Ratio: WebAIM contrast checker

Coolors: 调色板生成器
Tailwind Shades: 生成Tailwind色彩色调
Contrast Ratio: WebAIM对比度检查器

Typography

排版

Typescale: Generate type scales
Modular Scale: Calculate harmonious sizes
Google Fonts: Free web fonts

Typescale: 生成字体比例
Modular Scale: 计算和谐的尺寸
Google Fonts: 免费网页字体

Learning Resources

学习资源

Tailwind CSS Documentation: Official docs
shadcn/ui Documentation: Component library docs
WCAG Guidelines: W3C accessibility standards
Refactoring UI: Design tips by Tailwind creators

Tailwind CSS Documentation: 官方文档
shadcn/ui Documentation: 组件库文档
WCAG Guidelines: W3C无障碍标准
Refactoring UI: Tailwind创作者编写的设计技巧

Summary

总结

Modern UI Design in 2025 means:

Clean Minimalism: Remove the unnecessary, embrace whitespace
8px Grid System: Consistent, scalable spacing and sizing
Neutral + Accent: Grays with one primary color
Tailwind CSS: Utility-first, JIT-enabled, responsive
shadcn/ui: Copy-and-own accessible components
WCAG 2.2: Full keyboard support and color contrast
Mobile-First: Design small screens first, scale up
Professional Polish: Subtle shadows, soft corners, smooth transitions

Remember: The goal is not to impress with flashy design, but to create interfaces that are beautiful, functional, accessible, and a pleasure to use.

2025年现代UI设计意味着:

简洁极简主义：移除冗余，拥抱留白
8px网格系统：一致、可缩放的间距和尺寸
中性色+强调色：灰色系搭配一种主色
Tailwind CSS：工具类优先、启用JIT、响应式
shadcn/ui：复制即用的无障碍组件
WCAG 2.2：完整的键盘支持和色彩对比度
移动端优先：先设计小屏幕，再逐步增强
专业打磨：微妙的阴影、柔和的圆角、流畅的过渡

记住：设计的目标不是用花哨的效果博眼球，而是打造美观、实用、无障碍、使用愉悦的界面。

When to Use This Skill

何时使用本技能

Activate this skill when:

Designing new UI components or pages
Reviewing existing designs for modern standards
Creating design systems or component libraries
Implementing Tailwind CSS or shadcn/ui
Ensuring accessibility compliance
Optimizing responsive layouts
Troubleshooting visual design issues
Teaching or documenting UI best practices

Output Format: Always provide code examples, explain design decisions, and reference specific Tailwind utilities or shadcn/ui components when applicable.

在以下场景激活本技能:

设计新的UI组件或页面
评审现有设计是否符合现代标准
创建设计系统或组件库
实现Tailwind CSS或shadcn/ui
确保无障碍合规
优化响应式布局
排查视觉设计问题
教学或编写UI最佳实践文档

输出格式：始终提供代码示例，解释设计决策，并在适用时引用具体的Tailwind工具类或shadcn/ui组件。