ui-designer-design-system

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

跳到安装

仓库: echoVic/boss-skill
最近来源活动: 2026年5月15日 14:34
检测到的 SKILL.md 语言: 中文
星标: 552
分支: 48

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/echoVic/boss-skill --skill ui-designer-design-system

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

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设计时","需要定义视觉规范时","确保设计一致性时"]

设计系统规范

适用场景

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

设计系统的价值

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

设计系统组成

1. 颜色系统

品牌色

名称	色值	用途	示例场景
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`

层级	字号	行高	字重	用途	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`

名称	值	用途	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`

ui-designer-design-system

安装方式

检查来源文件

设计系统规范

适用场景

设计系统的价值

设计系统组成

1. 颜色系统

品牌色

中性色

语义色

设计系统规范

适用场景

设计系统的价值

设计系统组成

1. 颜色系统

品牌色

中性色

语义色

2. 字体系统

字体家族

字体层级

3. 间距系统

4. 圆角系统

5. 阴影系统

6. 动效系统

时长

缓动函数

CSS 变量

7. 断点系统（响应式）

输出要求

关键原则

常见误区

名称	值	用途
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)`	状态切换

断点	值	设备	容器宽度
xs	< 640px	手机	100%
sm	≥ 640px	大手机	640px
md	≥ 768px	平板	768px
lg	≥ 1024px	小桌面	1024px
xl	≥ 1280px	桌面	1280px
2xl	≥ 1536px	大桌面	1536px

ui-designer-design-system

来源信息

安装方式

检查来源文件

同仓库更多 Skills

同仓库更多 Skills

设计系统规范

适用场景

设计系统的价值

设计系统组成

1. 颜色系统

品牌色

中性色

语义色

设计系统规范

适用场景

设计系统的价值

设计系统组成

1. 颜色系统

品牌色

中性色

语义色

2. 字体系统

字体家族

字体层级

3. 间距系统

4. 圆角系统

5. 阴影系统

6. 动效系统

时长

缓动函数

CSS 变量

7. 断点系统（响应式）

输出要求

关键原则

常见误区