Back to Details

generic-design-system

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Generic Design System

通用设计系统

Design system reference adapting to any project's visual language.
适配任意项目视觉语言的设计系统参考。

Research First for New Systems

新系统需先开展调研

When creating a NEW design system (not following an existing one):
Skill(ui-research)  # Research modern patterns first
References:
  • UI Inspiration Sources - Research sources
  • Design Patterns - Visual tokens
当创建全新设计系统（而非遵循现有系统）时：
Skill(ui-research)  # 先调研现代设计模式
参考资料：
  • UI灵感来源 - 调研资源
  • 设计模式 - 视觉标记

When to Use This Skill

何时使用本技能

Use for:
  • Implementing UI components
  • Choosing colors or typography
  • Creating animations or transitions
  • Ensuring visual consistency
  • Setting up design tokens
  • Reviewing design system compliance
Don't use when:
  • UX flow design → use 
    generic-ux-designer
  • Feature architecture → use 
    generic-feature-developer
  • Code quality review → use 
    generic-code-reviewer
适用场景：
  • 实现UI组件
  • 选择色彩或排版方案
  • 制作动画或过渡效果
  • 确保视觉一致性
  • 配置设计标记
  • 审查设计系统合规性
不适用场景：
  • UX流程设计 → 使用
    generic-ux-designer
  • 功能架构设计 → 使用
    generic-feature-developer
  • 代码质量评审 → 使用
    generic-code-reviewer

Design System Architecture

设计系统架构

When to Build vs Reference

自建还是参考的决策

SituationAction
Existing design systemFollow it strictly
No design systemUse this skill to establish foundations
Partial systemIdentify gaps, extend consistently
场景行动
已有设计系统严格遵循
无设计系统使用本技能搭建基础
部分设计系统识别缺口，统一扩展

Token Organization

标记体系

LayerExamplePurpose
Primitive
--color-blue-500
Raw values
Semantic
--color-primary
Meaning
Component
--button-background
Context
Decision: Use semantic tokens in code, primitive tokens as foundation only.
层级示例用途
基础层
--color-blue-500
原始值
语义层
--color-primary
赋予含义
组件层
--button-background
上下文关联
决策建议： 代码中使用语义标记，仅将基础标记作为底层支撑。

Consistency Decision Tree

一致性决策树

  1. Component exists? → Use existing pattern
  2. Similar exists? → Adapt existing (don't create competing pattern)
  3. New category? → Propose to user, document reasoning
  1. 组件已存在？ → 使用现有模式
  2. 有类似组件？ → 适配现有组件（勿创建竞争模式）
  3. 全新类别？ → 向用户提议，并记录设计思路

Color System

色彩系统

Every project should define:
  • Primary, Secondary, Accent
  • Background, Foreground, Muted
  • Destructive, Success, Warning
每个项目都应定义：
  • 主色、辅助色、强调色
  • 背景色、前景色、弱化色
  • 错误色、成功色、警告色

Contrast Requirements

对比度要求

Use CaseMinimum
Body text4.5:1 (AA)
Large text3:1 (AA)
UI components3:1 (AA)
使用场景最低标准
正文文本4.5:1（AA级）
大文本3:1（AA级）
UI组件3:1（AA级）

Typography

排版系统

Font Stack

字体栈

css
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "SF Mono", Monaco, "Courier New", monospace;
css
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "SF Mono", Monaco, "Courier New", monospace;

Type Scale

字号层级

NameSizeUse
sm14pxSecondary text
base16pxBody text
lg18pxLead paragraphs
xl20pxSection headers
2xl24pxPage headers
名称尺寸用途
sm14px次要文本
base16px正文文本
lg18px引导段落
xl20px章节标题
2xl24px页面标题

Spacing System

间距系统

Base unit: 4px or 8px
Token4px BaseUse
14pxTight spacing
28pxDefault gap
416pxCard padding
624pxPage margins
基础单位： 4px 或 8px
标记4px基准用途
14px紧凑间距
28px默认间距
416px卡片内边距
624px页面外边距

Animation

动画系统

GPU-Accelerated Only

仅使用GPU加速属性

DO animate: 
transform
, 
opacity
AVOID: 
width
, 
height
, 
top
, 
left
, 
margin
, 
padding
建议动画属性： 
transform
、
opacity
避免使用： 
width
、
height
、
top
、
left
、
margin
、
padding

Duration

时长规范

TokenDurationUse
fast100msMicro-interactions
DEFAULT200msMost transitions
slow300msComplex animations
标记时长用途
fast100ms微交互
DEFAULT200ms大多数过渡效果
slow300ms复杂动画

Timing

缓动函数

css
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
css
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

Components

组件规范

Component States

组件状态

StateVisual TreatmentExample
DefaultBase stylingNormal button
HoverSubtle feedbackLighter/darker bg
ActivePressed stateScaled down slightly
FocusVisible outline2px ring, offset
DisabledReduced opacity50% opacity, no pointer
LoadingSpinner/skeletonButton with spinner
ErrorDestructive colorRed border/text
状态视觉表现示例
默认态基础样式常规按钮
悬停态细微反馈背景深浅变化
激活态按压状态轻微缩小
聚焦态可见轮廓2px环形边框，偏移
禁用态降低透明度50%透明度，无指针事件
加载态加载动画/骨架屏带加载动画的按钮
错误态警示色红色边框/文本

Touch Targets

触摸目标区域

  • Minimum: 44x44px (WCAG 2.1 AAA)
  • Spacing: 8px between adjacent targets
  • Mobile: Consider 48x48px for primary actions
  • 最小尺寸： 44x44px（WCAG 2.1 AAA级）
  • 间距： 相邻目标间距8px
  • 移动端： 主操作建议使用48x48px

Buttons

按钮组件

VariantUseMin Size
PrimaryMain actions44x44px
SecondaryAlternative actions44x44px
GhostSubtle actions44x44px
DestructiveDelete actions44x44px
变体用途最小尺寸
Primary主要操作44x44px
Secondary次要操作44x44px
Ghost次要隐性操作44x44px
Destructive删除类操作44x44px

Form Inputs

表单输入组件

  • Clear focus states (2px visible ring)
  • Error states with messages
  • Label always visible
  • Required indicator
  • 清晰的聚焦状态（2px可见环形边框）
  • 带提示信息的错误状态
  • 标签始终可见
  • 必填标识

Modals

模态框

  • Focus trapped inside
  • Escape to close
  • Dark overlay (50-70% opacity)
  • 焦点锁定在模态框内
  • 按ESC键可关闭
  • 深色遮罩（透明度50-70%）

Responsive Breakpoints

响应式断点

TokenMin Width
sm640px
md768px
lg1024px
xl1280px
标记最小宽度
sm640px
md768px
lg1024px
xl1280px

Dark Mode

深色模式

css
:root {
  --background: #ffffff;
  --foreground: #000000;
}
[data-theme="dark"] {
  --background: #000000;
  --foreground: #ffffff;
}
css
:root {
  --background: #ffffff;
  --foreground: #000000;
}
[data-theme="dark"] {
  --background: #000000;
  --foreground: #ffffff;
}

See Also

相关资源

  • Design Patterns - Atomic Design, tokens, component docs
  • Code Review Standards - Accessibility checks
  • generic-ux-designer
    - For UX flow and research decisions
  • Project 
    CLAUDE.md
    - Project-specific design constraints
READ references when:
  • Setting up new design system → DESIGN_PATTERNS.md (full structure)
  • Complex component patterns → DESIGN_PATTERNS.md (Atomic Design section)
  • 设计模式 - 原子设计、标记、组件文档
  • 代码评审标准 - 无障碍检查
  • generic-ux-designer
    - 用于UX流程与调研决策
  • 项目
    CLAUDE.md
    - 项目专属设计约束
以下场景需阅读参考资料：
  • 搭建新设计系统 → DESIGN_PATTERNS.md（完整架构）
  • 复杂组件模式 → DESIGN_PATTERNS.md（原子设计章节）