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

自建还是参考的决策

Situation	Action
Existing design system	Follow it strictly
No design system	Use this skill to establish foundations
Partial system	Identify gaps, extend consistently

场景	行动
已有设计系统	严格遵循
无设计系统	使用本技能搭建基础
部分设计系统	识别缺口，统一扩展

Token Organization

标记体系

Layer	Example	Purpose
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

一致性决策树

Component exists? → Use existing pattern
Similar exists? → Adapt existing (don't create competing pattern)
New category? → Propose to user, document reasoning

组件已存在？ → 使用现有模式
有类似组件？ → 适配现有组件（勿创建竞争模式）
全新类别？ → 向用户提议，并记录设计思路

Color System

色彩系统

Every project should define:

Primary, Secondary, Accent
Background, Foreground, Muted
Destructive, Success, Warning

每个项目都应定义：

主色、辅助色、强调色
背景色、前景色、弱化色
错误色、成功色、警告色

Contrast Requirements

对比度要求

Use Case	Minimum
Body text	4.5:1 (AA)
Large text	3:1 (AA)
UI components	3: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

字号层级

Name	Size	Use
sm	14px	Secondary text
base	16px	Body text
lg	18px	Lead paragraphs
xl	20px	Section headers
2xl	24px	Page headers

名称	尺寸	用途
sm	14px	次要文本
base	16px	正文文本
lg	18px	引导段落
xl	20px	章节标题
2xl	24px	页面标题

Spacing System

间距系统

Base unit: 4px or 8px

Token	4px Base	Use
1	4px	Tight spacing
2	8px	Default gap
4	16px	Card padding
6	24px	Page margins

基础单位： 4px 或 8px

标记	4px基准	用途
1	4px	紧凑间距
2	8px	默认间距
4	16px	卡片内边距
6	24px	页面外边距

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

时长规范

Token	Duration	Use
fast	100ms	Micro-interactions
DEFAULT	200ms	Most transitions
slow	300ms	Complex animations

标记	时长	用途
fast	100ms	微交互
DEFAULT	200ms	大多数过渡效果
slow	300ms	复杂动画

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

组件状态

State	Visual Treatment	Example
Default	Base styling	Normal button
Hover	Subtle feedback	Lighter/darker bg
Active	Pressed state	Scaled down slightly
Focus	Visible outline	2px ring, offset
Disabled	Reduced opacity	50% opacity, no pointer
Loading	Spinner/skeleton	Button with spinner
Error	Destructive color	Red 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

按钮组件

Variant	Use	Min Size
Primary	Main actions	44x44px
Secondary	Alternative actions	44x44px
Ghost	Subtle actions	44x44px
Destructive	Delete actions	44x44px

变体	用途	最小尺寸
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

响应式断点

Token	Min Width
sm	640px
md	768px
lg	1024px
xl	1280px

标记	最小宽度
sm	640px
md	768px
lg	1024px
xl	1280px

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