Menú
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/echoVic/boss-skill --skill ui-designer-design-systemEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Basado en la clasificación ocupacional SOC
Mostrando SKILL.md
| name | ui-designer/design-system |
| description | 设计系统规范，包含颜色、字体、间距、圆角、阴影、动效等基础设计token |
| version | 1.0.0 |
| agent | ui-designer |
| type | guideline |
| user-invocable | false |
| agent-invocable | true |
| dependencies | [] |
| triggers | ["开始UI设计时","需要定义视觉规范时","确保设计一致性时"] |
在开始具体的页面和组件设计前，需要先建立统一的设计系统，确保整个产品的视觉和交互一致性。
| 名称 | 色值 | 用途 | 示例场景 |
|---|---|---|---|
| Primary | #3B82F6 | 主要操作、强调 | 主按钮、链接、选中状态 |
| Primary-hover | #2563EB | 主色悬停态 | 按钮悬停 |
| Primary-active | #1D4ED8 | 主色按下态 | 按钮按下 |
| Primary-light | #DBEAFE | 主色浅色背景 | 标签背景、高亮区域 |
| 名称 | 色值 | 用途 |
|---|---|---|
| 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 | 卡片背景、主背景 |
| 名称 | 色值 | 用途 |
|---|
| 背景色 |
|---|
| Success | #10B981 | 成功状态 | #D1FAE5 |
| Warning | #F59E0B | 警告状态 | #FEF3C7 |
| Error | #EF4444 | 错误状态 | #FEE2E2 |
| Info | #3B82F6 | 信息提示 | #DBEAFE |
颜色使用原则：
/* 无衬线字体（主要） */
--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 |
字体使用原则：
基础单位：4px（所有间距都是4的倍数）
| 名称 | 值 | 用途 | CSS 变量 |
|---|---|---|---|
| space-0 | 0 | 无间距 | --space-0 |
| space-1 | 4px | 紧凑元素间（图标与文字） | --space-1 |
| space-2 | 8px | 相关元素间（标签与输入框） | --space-2 |
| space-3 | 12px | 组内元素间 | --space-3 |
| space-4 | 16px | 默认间距 | --space-4 |
| space-5 | 20px | 组间间距 | --space-5 |
| space-6 | 24px | 区块内间距 | --space-6 |
| space-8 | 32px | 区块间间距 | --space-8 |
| space-10 | 40px | 大区块间距 | --space-10 |
| space-12 | 48px | 页面级间距 | --space-12 |
| space-16 | 64px | 超大间距 | --space-16 |
间距使用原则：
| 名称 | 值 | 用途 | CSS 变量 |
|---|---|---|---|
| radius-none | 0 | 无圆角 | --radius-none |
| radius-sm | 4px | 小元素（标签、徽章） | --radius-sm |
| radius-md | 8px | 按钮、输入框 | --radius-md |
| radius-lg | 12px | 卡片 | --radius-lg |
| radius-xl | 16px | 大卡片、弹窗 | --radius-xl |
| radius-2xl | 24px | 超大卡片 | --radius-2xl |
| radius-full | 9999px | 圆形、胶囊按钮 | --radius-full |
圆角使用原则：
| 名称 | 值 | 用途 | CSS 变量 |
|---|---|---|---|
| shadow-xs | 0 1px 2px rgba(0,0,0,0.05) | 微小浮起 | --shadow-xs |
| shadow-sm | 0 1px 3px rgba(0,0,0,0.1) | 轻微浮起 | --shadow-sm |
| shadow-md | 0 4px 6px rgba(0,0,0,0.1) | 卡片 | --shadow-md |
| shadow-lg | 0 10px 15px rgba(0,0,0,0.1) | 弹窗、下拉菜单 | --shadow-lg |
| shadow-xl | 0 20px 25px rgba(0,0,0,0.15) | 模态框 | --shadow-xl |
| shadow-2xl | 0 25px 50px rgba(0,0,0,0.25) | 大型模态框 | --shadow-2xl |
阴影使用原则：
| 名称 | 值 | 用途 |
|---|---|---|
| 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) | 状态切换 |
--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);
动效使用原则：
| 断点 | 值 | 设备 | 容器宽度 |
|---|---|---|---|
| xs | < 640px | 手机 | 100% |
| sm | ≥ 640px | 大手机 | 640px |
| md | ≥ 768px | 平板 | 768px |
| lg | ≥ 1024px | 小桌面 | 1024px |
| xl | ≥ 1280px | 桌面 | 1280px |
| 2xl | ≥ 1536px | 大桌面 | 1536px |
响应式设计原则：
在UI设计文档中，应包含以下设计系统章节：
## 4. 设计系统
### 4.1 颜色系统
[品牌色、中性色、语义色表格]
### 4.2 字体系统
[字体家族、字体层级表格]
### 4.3 间距系统
[间距表格]
### 4.4 圆角系统
[圆角表格]
### 4.5 阴影系统
[阴影表格]
### 4.6 动效系统
[时长、缓动函数表格]
❌ 随意使用颜色：不使用定义的颜色，随意添加新颜色 ❌ 间距不统一：使用5px、7px等非4倍数的间距 ❌ 字号过多：定义10种以上的字号 ❌ 过度动画：所有元素都加动画，影响性能和体验