ui-designer_design-system

设计系统规范，包含颜色、字体、间距、圆角、阴影、动效等基础设计token

不碰外部（只输出文字）无严重或高危命中hashgraph-online/awesome-codex-plugins

它会碰到什么

扫了多少1 个文本文件，5 KB

它会碰到什么不碰外部（只输出文字）

命中总数0 处

命中统计严重 0 · 高 0 · 中 0 · 低 0

这一栏是扫描器报的事实，不是结论。命中多不等于有毒（安全工具、规则库、示例脚本本来就会包含危险写法），命中少也不等于干净。它和你手上的凭据、文件、网络有什么关系，需要你自己看。

技能内容

设计系统规范

适用场景

在开始具体的页面和组件设计前，需要先建立统一的设计系统，确保整个产品的视觉和交互一致性。

设计系统的价值

一致性：确保产品各部分视觉和交互统一
效率：设计师和开发者使用统一的设计语言，减少沟通成本
可维护性：修改设计token即可全局更新
可扩展性：新功能可以快速复用现有组件

设计系统组成

1. 颜色系统

品牌色

| 名称 | 色值 | 用途 | 示例场景 |

|------|------|------|----------|

中性色

| 名称 | 色值 | 用途 |

|------|------|------|

| Gray-900 | #111827 | 标题文字 |

| Gray-800 | #1F2937 | 重要文字 |

| Gray-700 | #374151 | 正文文字 |

| Gray-600 | #4B5563 | 次要文字 |

| Gray-500 | #6B7280 | 辅助文字 |

| Gray-400 | #9CA3AF | 占位文字 |

| Gray-300 | #D1D5DB | 边框、分割线 |

| Gray-200 | #E5E7EB | 浅边框 |

| Gray-100 | #F3F4F6 | 背景 |

| Gray-50 | #F9FAFB | 浅背景 |

| White | #FFFFFF | 卡片背景、主背景 |

语义色

| 名称 | 色值 | 用途 | 背景色 |

|------|------|------|--------|

颜色使用原则：

主色用于主要操作和强调，不要滥用
中性色用于文字和背景，建立清晰的层次
语义色用于状态反馈，保持一致性
确保颜色对比度符合WCAG AA标准（≥4.5:1）

2. 字体系统

字体家族

/* 无衬线字体（主要） */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;

/* 等宽字体（代码） */
--font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;

字体层级

| 层级 | 字号 | 行高 | 字重 | 用途 | CSS 变量 |

|------|------|------|------|------|----------|

| Display | 48px | 1.1 | 700 | 大标题、落地页 | --text-display |

| H1 | 32px | 1.2 | 700 | 页面标题 | --text-h1 |

| H2 | 24px | 1.3 | 600 | 区块标题 | --text-h2 |

| H3 | 20px | 1.4 | 600 | 小标题 | --text-h3 |

| H4 | 18px | 1.4 | 600 | 卡片标题 | --text-h4 |

| Body | 16px | 1.5 | 400 | 正文 | --text-body |

| Body-sm | 14px | 1.5 | 400 | 辅助文字 | --text-body-sm |

| Caption | 12px | 1.4 | 400 | 说明文字、标签 | --text-caption |

字体使用原则：

标题使用较大字号和较重字重，建立层次
正文使用16px，确保可读性
行高保持1.4-1.6，确保舒适阅读
不要使用过多字号，保持简洁

3. 间距系统

基础单位：4px（所有间距都是4的倍数）

| 名称 | 值 | 用途 | CSS 变量 |

|------|-----|------|----------|

| space-0 | 0 | 无间距 | --space-0 |

间距使用原则：

相关元素间距小，不相关元素间距大
使用统一的间距系统，不要随意使用其他值
移动端可以适当减小间距

4. 圆角系统

| 名称 | 值 | 用途 | CSS 变量 |

|------|-----|------|----------|

| radius-none | 0 | 无圆角 | --radius-none |

| radius-lg | 12px | 卡片 | --radius-lg |

圆角使用原则：

圆角让界面更友好，但不要过度
保持一致性，同类元素使用相同圆角
移动端可以使用稍大的圆角

5. 阴影系统

| 名称 | 值 | 用途 | CSS 变量 |

|------|-----|------|----------|

阴影使用原则：

阴影表示层级，越重要的元素阴影越深
不要过度使用阴影，保持克制
悬停时可以加深阴影，表示可交互

6. 动效系统

时长

| 名称 | 值 | 用途 |

|------|-----|------|

| duration-fast | 150ms | 微交互（hover、focus） |

| duration-normal | 250ms | 状态切换、展开收起 |

| duration-slow | 350ms | 页面过渡、大型动画 |

缓动函数

| 名称 | 值 | 用途 |

|------|-----|------|

| ease-out | cubic-bezier(0, 0, 0.2, 1) | 元素进入（淡入、展开） |

| ease-in | cubic-bezier(0.4, 0, 1, 1) | 元素退出（淡出、收起） |

| ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | 状态切换 |

CSS 变量

--transition-fast: 150ms cubic-bezier(0, 0, 0.2, 1);
--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

动效使用原则：

动效要有意义，不要为了炫技
保持克制，不要过度动画
微交互要快（150ms），大动画可以慢（350ms）
使用合适的缓动函数，让动画更自然

7. 断点系统（响应式）

| 断点 | 值 | 设备 | 容器宽度 |

|------|-----|------|----------|

| xs | < 640px | 手机 | 100% |

| sm | ≥ 640px | 大手机 | 640px |

| md | ≥ 768px | 平板 | 768px |

| lg | ≥ 1024px | 小桌面 | 1024px |

| xl | ≥ 1280px | 桌面 | 1280px |

| 2xl | ≥ 1536px | 大桌面 | 1536px |

响应式设计原则：

移动优先（Mobile First）
关键内容在所有设备上都可见
移动端简化操作，桌面端提供更多功能
触控目标在移动端至少44x44px

输出要求

在UI设计文档中，应包含以下设计系统章节：

## 4. 设计系统

### 4.1 颜色系统
[品牌色、中性色、语义色表格]

### 4.2 字体系统
[字体家族、字体层级表格]

### 4.3 间距系统
[间距表格]

### 4.4 圆角系统
[圆角表格]

### 4.5 阴影系统
[阴影表格]

### 4.6 动效系统
[时长、缓动函数表格]