design-patterns
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDesign Patterns Reference
设计模式参考库
This skill provides a curated library of proven design patterns that generate high-quality, non-vibe-coded UI.
本Skill提供一个精心整理的、经过验证的设计模式库，可生成高质量、非凭感觉编码的UI。
Layout Patterns
布局模式
Hero Sections
Hero区域
Pattern 1: Split Hero
Best for: SaaS, product landing pages
┌─────────────────────────────────────────────┐
│ [Content] [Media] │
│ Headline Image/Video/ │
│ Subhead Illustration │
│ CTA Buttons │
└─────────────────────────────────────────────┘Pattern 2: Centered Hero
Best for: Announcements, events, minimal designs
┌─────────────────────────────────────────────┐
│ [Eyebrow Badge] │
│ Headline │
│ Subhead │
│ [CTA] [Secondary] │
│ [Social Proof] │
└─────────────────────────────────────────────┘Pattern 3: Product Showcase
Best for: E-commerce, physical products
┌─────────────────────────────────────────────┐
│ [Product Image - Large, High Quality] │
│ ───────────────────────────────────────── │
│ Product Name Price │
│ Brief Description [Add to Cart] │
│ [Feature Icons] │
└─────────────────────────────────────────────┘模式1：分割式Hero
最佳适用场景：SaaS、产品落地页
┌─────────────────────────────────────────────┐
│ [Content] [Media] │
│ Headline Image/Video/ │
│ Subhead Illustration │
│ CTA Buttons │
└─────────────────────────────────────────────┘模式2：居中Hero
最佳适用场景：公告、活动、极简设计
┌─────────────────────────────────────────────┐
│ [Eyebrow Badge] │
│ Headline │
│ Subhead │
│ [CTA] [Secondary] │
│ [Social Proof] │
└─────────────────────────────────────────────┘模式3：产品展示Hero
最佳适用场景：电商、实体产品
┌─────────────────────────────────────────────┐
│ [Product Image - Large, High Quality] │
│ ───────────────────────────────────────── │
│ Product Name Price │
│ Brief Description [Add to Cart] │
│ [Feature Icons] │
└─────────────────────────────────────────────┘Navigation Patterns
导航模式
Top Navigation (Desktop)
┌─────────────────────────────────────────────┐
│ [Logo] Nav Items... [CTA] [Account] │
└─────────────────────────────────────────────┘Sidebar Navigation (Dashboard)
┌─────────────────────────────────────────────┐
│ [Logo] │ Page Content │
│ ─────────────── │ │
│ Nav Item 1 │ │
│ Nav Item 2 │ │
│ Nav Item 3 │ │
│ │ │
│ [Collapsed User] │ │
└─────────────────────────────────────────────┘顶部导航（桌面端）
┌─────────────────────────────────────────────┐
│ [Logo] Nav Items... [CTA] [Account] │
└─────────────────────────────────────────────┘侧边栏导航（仪表盘）
┌─────────────────────────────────────────────┐
│ [Logo] │ Page Content │
│ ─────────────── │ │
│ Nav Item 1 │ │
│ Nav Item 2 │ │
│ Nav Item 3 │ │
│ │ │
│ [Collapsed User] │ │
└─────────────────────────────────────────────┘Card Patterns
卡片模式
Content Card
┌─────────────────┐
│ [Image] │
│ Category │
│ Title │
│ Description... │
│ [Meta] [Action] │
└─────────────────┘Feature Card
┌─────────────────┐
│ [Icon] │
│ Feature Name │
│ Description │
│ that explains │
│ the benefit. │
└─────────────────┘Pricing Card
┌─────────────────┐
│ Plan Name │
│ $XX/mo │
│ Description │
│ ─────────────── │
│ ✓ Feature 1 │
│ ✓ Feature 2 │
│ ✓ Feature 3 │
│ [CTA Button] │
└─────────────────┘内容卡片
┌─────────────────┐
│ [Image] │
│ Category │
│ Title │
│ Description... │
│ [Meta] [Action] │
└─────────────────┘功能卡片
┌─────────────────┐
│ [Icon] │
│ Feature Name │
│ Description │
│ that explains │
│ the benefit. │
└─────────────────┘定价卡片
┌─────────────────┐
│ Plan Name │
│ $XX/mo │
│ Description │
│ ─────────────── │
│ ✓ Feature 1 │
│ ✓ Feature 2 │
│ ✓ Feature 3 │
│ [CTA Button] │
└─────────────────┘Component Patterns
组件模式
Buttons
按钮
Primary Button
- Background: Primary color
- Text: White/contrast color
- Padding: 12px 24px (or 16px 32px for large)
- Border-radius: 6px (or 8px)
- Font-weight: 500 or 600
- Hover: Darken 10%
Secondary Button
- Background: Transparent
- Border: 1px solid primary or gray
- Text: Primary color or gray-700
- Same padding and radius as primary
Ghost Button
- Background: Transparent
- No border
- Text: Primary color
- Underline or subtle hover effect
主按钮
- 背景色：主色调
- 文字色：白色/对比色
- 内边距：12px 24px（大尺寸为16px 32px）
- 圆角：6px（或8px）
- 字体粗细：500或600
- 悬停效果：加深10%
次按钮
- 背景色：透明
- 边框：1px 主色调或灰色
- 文字色：主色调或gray-700
- 内边距和圆角与主按钮一致
幽灵按钮
- 背景色：透明
- 无边框
- 文字色：主色调
- 下划线或细微悬停效果
Forms
表单
Input Field
html
<div class="form-group">
<label for="input">Label</label>
<input type="text" id="input" placeholder="Placeholder">
<span class="hint">Helper text</span>
</div>Styling:
- Border: 1px solid gray-300
- Border-radius: 6px
- Padding: 10px 14px
- Focus: Border primary color + ring
- Error: Border red + red text
输入框
html
<div class="form-group">
<label for="input">Label</label>
<input type="text" id="input" placeholder="Placeholder">
<span class="hint">Helper text</span>
</div>样式规范：
- 边框：1px solid gray-300
- 圆角：6px
- 内边距：10px 14px
- 聚焦状态：边框为主色调 + 外发光
- 错误状态：边框为红色 + 红色文字
Feedback
反馈组件
Toast Notification
┌────────────────────────────┐
│ [Icon] Message text [X] │
└────────────────────────────┘Position: Top-right or bottom-center
Duration: 3-5 seconds
Alert Banner
┌──────────────────────────────────────────┐
│ [Icon] Alert message with more details. │
│ [Action Link] [X] │
└──────────────────────────────────────────┘Toast通知
┌────────────────────────────┐
│ [Icon] Message text [X] │
└────────────────────────────┘位置：右上角或底部居中
持续时间：3-5秒
提示横幅
┌──────────────────────────────────────────┐
│ [Icon] Alert message with more details. │
│ [Action Link] [X] │
└──────────────────────────────────────────┘Sector-Specific Patterns
特定行业模式
Fintech
金融科技（Fintech）
Trust Indicators:
- Security badges (SOC2, bank-level encryption)
- Regulatory compliance logos
- Trust pilot/review scores
- "Protected by..." messaging
Data Display:
- Clean data tables with sorting
- Clear number formatting (currency, percentages)
- Status indicators (green/yellow/red)
- Trend indicators (arrows, sparklines)
Color Guidance:
- Primary: Blues, teals
- Success: Greens (money positive)
- Warning: Amber (caution)
- Avoid: Aggressive reds except for losses
信任标识：
- 安全认证徽章（SOC2、银行级加密）
- 合规监管标识
- Trust Pilot/评分
- “由...保护”类文案
数据展示：
- 带排序功能的简洁数据表格
- 清晰的数字格式（货币、百分比）
- 状态指示器（绿/黄/红）
- 趋势指示器（箭头、迷你折线图）
色彩指引：
- 主色调：蓝色、蓝绿色
- 成功色：绿色（代表资金正向）
- 警告色：琥珀色（代表注意）
- 避免：除亏损场景外，使用刺眼的红色
Healthcare
医疗健康
Accessibility Priority:
- WCAG AAA contrast where possible
- Large touch targets (48px minimum)
- Clear, readable fonts (18px+ body)
- High-contrast mode option
Information Hierarchy:
- Critical info: Prominent placement
- Warnings: Clear visual distinction
- Patient data: Clear labeling
- Actions: Confirmation for destructive
Color Guidance:
- Calming: Soft blues, greens
- Clinical: Clean whites
- Avoid: Harsh, aggressive colors
无障碍优先级：
- 尽可能符合WCAG AAA对比度标准
- 大尺寸触控目标（最小48px）
- 清晰易读的字体（正文字号18px+）
- 高对比度模式选项
信息层级：
- 关键信息：突出展示
- 警告信息：清晰的视觉区分
- 患者数据：清晰标注
- 操作：破坏性操作需确认
色彩指引：
- 舒缓色调：柔和蓝、绿色
- 临床风格：干净白色
- 避免：刺眼、激进的颜色
E-commerce
电商
Product Display:
- High-quality images (multiple angles)
- Clear pricing (original + sale)
- Stock status
- Quick add to cart
Trust & Conversion:
- Reviews and ratings
- Free shipping threshold
- Return policy highlight
- Secure checkout badges
Urgency (use sparingly):
- Low stock indicators
- Sale countdown
- Limited time offers
产品展示：
- 高质量图片（多角度）
- 清晰定价（原价+促销价）
- 库存状态
- 快速加入购物车
信任与转化：
- 评价和评分
- 免运费门槛
- 突出退货政策
- 安全结账徽章
紧迫感（谨慎使用）：
- 库存不足提示
- 促销倒计时
- 限时优惠
SaaS
SaaS
Onboarding:
- Progressive disclosure
- Progress indicators
- Skip options
- Contextual help
Dashboard:
- Key metrics prominent
- Clear navigation
- Quick actions
- Recent activity
Pricing Page:
- Clear comparison
- Recommended plan highlight
- Feature differentiation
- FAQ section
用户引导：
- 渐进式信息披露
- 进度指示器
- 跳过选项
- 上下文帮助
仪表盘：
- 关键指标突出展示
- 清晰导航
- 快速操作入口
- 最近活动记录
定价页：
- 清晰对比
- 推荐计划高亮
- 功能差异化展示
- FAQ板块
Anti-Patterns (Avoid These)
反模式（需避免）
Layout Anti-Patterns
布局反模式
- ❌ Walls of text without visual breaks
- ❌ Too many competing focal points
- ❌ Inconsistent alignment
- ❌ Cramped spacing
- ❌ 无视觉分隔的大段文字
- ❌ 过多相互竞争的视觉焦点
- ❌ 对齐不一致
- ❌ 间距拥挤
Component Anti-Patterns
组件反模式
- ❌ Mystery meat navigation (icons without labels)
- ❌ Infinite scroll without way back
- ❌ Carousel as primary content
- ❌ Pop-ups on page load
- ❌ 神秘肉导航（无文字标注的图标）
- ❌ 无限滚动无返回入口
- ❌ 将轮播作为主要内容
- ❌ 页面加载时弹出弹窗
Visual Anti-Patterns
视觉反模式
- ❌ Generic purple-blue gradients
- ❌ Floating decorative blobs
- ❌ Stock photos of business handshakes
- ❌ Default framework colors unchanged
- ❌ 通用紫蓝渐变
- ❌ 漂浮装饰 blob
- ❌ 商务握手类图库照片
- ❌ 未修改的框架默认颜色