design-system

Name: design-system
Author: echoVic

554stars48forks

How to install design-system?

echovic/boss-skill/design-system

$npx -y skills add echoVic/boss-skill --skill design-system

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# 设计系统规范
2
3	## 适用场景
4
5	在开始具体的页面和组件设计前，需要先建立统一的设计系统，确保整个产品的视觉和交互一致性。
6
7	## 设计系统的价值
8
9	1. 一致性：确保产品各部分视觉和交互统一
10	2. 效率：设计师和开发者使用统一的设计语言，减少沟通成本
11	3. 可维护性：修改设计token即可全局更新
12	4. 可扩展性：新功能可以快速复用现有组件
13
14	## 设计系统组成
15
16	### 1. 颜色系统
17
18	#### 品牌色
19
20	\| 名称 \| 色值 \| 用途 \| 示例场景 \|
21	\|------\|------\|------\|----------\|
22	\| Primary \| `#3B82F6` \| 主要操作、强调 \| 主按钮、链接、选中状态 \|
23	\| Primary-hover \| `#2563EB` \| 主色悬停态 \| 按钮悬停 \|
24	\| Primary-active \| `#1D4ED8` \| 主色按下态 \| 按钮按下 \|
25	\| Primary-light \| `#DBEAFE` \| 主色浅色背景 \| 标签背景、高亮区域 \|
26
27	#### 中性色
28
29	\| 名称 \| 色值 \| 用途 \|
30	\|------\|------\|------\|
31	\| Gray-900 \| `#111827` \| 标题文字 \|
32	\| Gray-800 \| `#1F2937` \| 重要文字 \|
33	\| Gray-700 \| `#374151` \| 正文文字 \|
34	\| Gray-600 \| `#4B5563` \| 次要文字 \|
35	\| Gray-500 \| `#6B7280` \| 辅助文字 \|
36	\| Gray-400 \| `#9CA3AF` \| 占位文字 \|
37	\| Gray-300 \| `#D1D5DB` \| 边框、分割线 \|
38	\| Gray-200 \| `#E5E7EB` \| 浅边框 \|
39	\| Gray-100 \| `#F3F4F6` \| 背景 \|
40	\| Gray-50 \| `#F9FAFB` \| 浅背景 \|
41	\| White \| `#FFFFFF` \| 卡片背景、主背景 \|
42
43	#### 语义色
44
45	\| 名称 \| 色值 \| 用途 \| 背景色 \|
46	\|------\|------\|------\|--------\|
47	\| Success \| `#10B981` \| 成功状态 \| `#D1FAE5` \|
48	\| Warning \| `#F59E0B` \| 警告状态 \| `#FEF3C7` \|
49	\| Error \| `#EF4444` \| 错误状态 \| `#FEE2E2` \|
50	\| Info \| `#3B82F6` \| 信息提示 \| `#DBEAFE` \|
51
52	颜色使用原则：
53	- 主色用于主要操作和强调，不要滥用
54	- 中性色用于文字和背景，建立清晰的层次
55	- 语义色用于状态反馈，保持一致性
56	- 确保颜色对比度符合WCAG AA标准（≥4.5:1）
57
58	### 2. 字体系统
59
60	#### 字体家族
61
62	```css
63	/* 无衬线字体（主要） */
64	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
65	"Helvetica Neue", Arial, "Noto Sans", sans-serif;
66
67	/* 等宽字体（代码） */
68	--font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
69	```
70
71	#### 字体层级
72
73	\| 层级 \| 字号 \| 行高 \| 字重 \| 用途 \| CSS 变量 \|
74	\|------\|------\|------\|------\|------\|----------\|
75	\| Display \| 48px \| 1.1 \| 700 \| 大标题、落地页 \| `--text-display` \|
76	\| H1 \| 32px \| 1.2 \| 700 \| 页面标题 \| `--text-h1` \|
77	\| H2 \| 24px \| 1.3 \| 600 \| 区块标题 \| `--text-h2` \|
78	\| H3 \| 20px \| 1.4 \| 600 \| 小标题 \| `--text-h3` \|
79	\| H4 \| 18px \| 1.4 \| 600 \| 卡片标题 \| `--text-h4` \|
80	\| Body \| 16px \| 1.5 \| 400 \| 正文 \| `--text-body` \|
81	\| Body-sm \| 14px \| 1.5 \| 400 \| 辅助文字 \| `--text-body-sm` \|
82	\| Caption \| 12px \| 1.4 \| 400 \| 说明文字、标签 \| `--text-caption` \|
83
84	字体使用原则：
85	- 标题使用较大字号和较重字重，建立层次
86	- 正文使用16px，确保可读性
87	- 行高保持1.4-1.6，确保舒适阅读
88	- 不要使用过多字号，保持简洁
89
90	### 3. 间距系统
91
92	基础单位：4px（所有间距都是4的倍数）
93
94	\| 名称 \| 值 \| 用途 \| CSS 变量 \|
95	\|------\|-----\|------\|----------\|
96	\| space-0 \| 0 \| 无间距 \| `--space-0` \|
97	\| space-1 \| 4px \| 紧凑元素间（图标与文字） \| `--space-1` \|
98	\| space-2 \| 8px \| 相关元素间（标签与输入框） \| `--space-2` \|
99	\| space-3 \| 12px \| 组内元素间 \| `--space-3` \|
100	\| space-4 \| 16px \| 默认间距 \| `--space-4` \|
101	\| space-5 \| 20px \| 组间间距 \| `--space-5` \|
102	\| space-6 \| 24px \| 区块内间距 \| `--space-6` \|
103	\| space-8 \| 32px \| 区块间间距 \| `--space-8` \|
104	\| space-10 \| 40px \| 大区块间距 \| `--space-10` \|
105	\| space-12 \| 48px \| 页面级间距 \| `--space-12` \|
106	\| space-16 \| 64px \| 超大间距 \| `--space-16` \|
107
108	间距使用原则：
109	- 相关元素间距小，不相关元素间距大
110	- 使用统一的间距系统，不要随意使用其他值
111	- 移动端可以适当减小间距
112
113	### 4. 圆角系统
114
115	\| 名称 \| 值 \| 用途 \| CSS 变量 \|
116	\|------\|-----\|------\|----------\|
117	\| radius-none \| 0 \| 无圆角 \| `--radius-none` \|
118	\| radius-sm \| 4px \| 小元素（标签、徽章） \| `--radius-sm` \|
119	\| radius-md \| 8px \| 按钮、输入框 \| `--radius-md` \|
120	\| radius-lg \| 12px \| 卡片 \| `--radius-lg` \|
121	\| radius-xl \| 16px \| 大卡片、弹窗 \| `--radius-xl` \|
122	\| radius-2xl \| 24px \| 超大卡片 \| `--radius-2xl` \|
123	\| radius-full \| 9999px \| 圆形、胶囊按钮 \| `--radius-full` \|
124
125	圆角使用原则：
126	- 圆角让界面更友好，但不要过度
127	- 保持一致性，同类元素使用相同圆角
128	- 移动端可以使用稍大的圆角
129
130	### 5. 阴影系统
131
132	\| 名称 \| 值 \| 用途 \| CSS 变量 \|
133	\|------\|-----\|------\|----------\|
134	\| shadow-xs \| `0 1px 2px rgba(0,0,0,0.05)` \| 微小浮起 \| `--shadow-xs` \|
135	\| shadow-sm \| `0 1px 3px rgba(0,0,0,0.1)` \| 轻微浮起 \| `--shadow-sm` \|
136	\| shadow-md \| `0 4px 6px rgba(0,0,0,0.1)` \| 卡片 \| `--shadow-md` \|
137	\| shadow-lg \| `0 10px 15px rgba(0,0,0,0.1)` \| 弹窗、下拉菜单 \| `--shadow-lg` \|
138	\| shadow-xl \| `0 20px 25px rgba(0,0,0,0.15)` \| 模态框 \| `--shadow-xl` \|
139	\| shadow-2xl \| `0 25px 50px rgba(0,0,0,0.25)` \| 大型模态框 \| `--shadow-2xl` \|
140
141	阴影使用原则：
142	- 阴影表示层级，越重要的元素阴影越深
143	- 不要过度使用阴影，保持克制
144	- 悬停时可以加深阴影，表示可交互
145
146	### 6. 动效系统
147
148	#### 时长
149
150	\| 名称 \| 值 \| 用途 \|
151	\|------\|-----\|------\|
152	\| duration-fast \| 150ms \| 微交互（hover、focus） \|
153	\| duration-normal \| 250ms \| 状态切换、展开收起 \|
154	\| duration-slow \| 350ms \| 页面过渡、大型动画 \|
155
156	#### 缓动函数
157
158	\| 名称 \| 值 \| 用途 \|
159	\|------\|-----\|------\|
160	\| ease-out \| `cubic-bezier(0, 0, 0.2, 1)` \| 元素进入（淡入、展开） \|
161	\| ease-in \| `cubic-bezier(0.4, 0, 1, 1)` \| 元素退出（淡出、收起） \|
162	\| ease-in-out \| `cubic-bezier(0.4, 0, 0.2, 1)` \| 状态切换 \|
163
164	#### CSS 变量
165
166	```css
167	--transition-fast: 150ms cubic-bezier(0, 0, 0.2, 1);
168	--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
169	--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
170	```
171
172	动效使用原则：
173	- 动效要有意义，不要为了炫技
174	- 保持克制，不要过度动画
175	- 微交互要快（150ms），大动画可以慢（350ms）
176	- 使用合适的缓动函数，让动画更自然
177
178	### 7. 断点系统（响应式）
179
180	\| 断点 \| 值 \| 设备 \| 容器宽度 \|
181	\|------\|-----\|------\|----------\|
182	\| xs \| < 640px \| 手机 \| 100% \|
183	\| sm \| ≥ 640px \| 大手机 \| 640px \|
184	\| md \| ≥ 768px \| 平板 \| 768px \|
185	\| lg \| ≥ 1024px \| 小桌面 \| 1024px \|
186	\| xl \| ≥ 1280px \| 桌面 \| 1280px \|
187	\| 2xl \| ≥ 1536px \| 大桌面 \| 1536px \|
188
189	响应式设计原则：
190	- 移动优先（Mobile First）
191	- 关键内容在所有设备上都可见
192	- 移动端简化操作，桌面端提供更多功能
193	- 触控目标

People who liked this also viewed

6 picks

Type

web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026483k29k
lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026332k16k
design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026280k66k
ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026280k109k
caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026249k92k
codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026225k182k

design-system

554stars48forks

View on GitHub

How to install design-system?

echovic/boss-skill/design-system

$npx -y skills add echoVic/boss-skill --skill design-system

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# 设计系统规范
2
3	## 适用场景
4
5	在开始具体的页面和组件设计前，需要先建立统一的设计系统，确保整个产品的视觉和交互一致性。
6
7	## 设计系统的价值
8
9	1. 一致性：确保产品各部分视觉和交互统一
10	2. 效率：设计师和开发者使用统一的设计语言，减少沟通成本
11	3. 可维护性：修改设计token即可全局更新
12	4. 可扩展性：新功能可以快速复用现有组件
13
14	## 设计系统组成
15
16	### 1. 颜色系统
17
18	#### 品牌色
19
20	\| 名称 \| 色值 \| 用途 \| 示例场景 \|
21	\|------\|------\|------\|----------\|
22	\| Primary \| `#3B82F6` \| 主要操作、强调 \| 主按钮、链接、选中状态 \|
23	\| Primary-hover \| `#2563EB` \| 主色悬停态 \| 按钮悬停 \|
24	\| Primary-active \| `#1D4ED8` \| 主色按下态 \| 按钮按下 \|
25	\| Primary-light \| `#DBEAFE` \| 主色浅色背景 \| 标签背景、高亮区域 \|
26
27	#### 中性色
28
29	\| 名称 \| 色值 \| 用途 \|
30	\|------\|------\|------\|
31	\| Gray-900 \| `#111827` \| 标题文字 \|
32	\| Gray-800 \| `#1F2937` \| 重要文字 \|
33	\| Gray-700 \| `#374151` \| 正文文字 \|
34	\| Gray-600 \| `#4B5563` \| 次要文字 \|
35	\| Gray-500 \| `#6B7280` \| 辅助文字 \|
36	\| Gray-400 \| `#9CA3AF` \| 占位文字 \|
37	\| Gray-300 \| `#D1D5DB` \| 边框、分割线 \|
38	\| Gray-200 \| `#E5E7EB` \| 浅边框 \|
39	\| Gray-100 \| `#F3F4F6` \| 背景 \|
40	\| Gray-50 \| `#F9FAFB` \| 浅背景 \|
41	\| White \| `#FFFFFF` \| 卡片背景、主背景 \|
42
43	#### 语义色
44
45	\| 名称 \| 色值 \| 用途 \| 背景色 \|
46	\|------\|------\|------\|--------\|
47	\| Success \| `#10B981` \| 成功状态 \| `#D1FAE5` \|
48	\| Warning \| `#F59E0B` \| 警告状态 \| `#FEF3C7` \|
49	\| Error \| `#EF4444` \| 错误状态 \| `#FEE2E2` \|
50	\| Info \| `#3B82F6` \| 信息提示 \| `#DBEAFE` \|
51
52	颜色使用原则：
53	- 主色用于主要操作和强调，不要滥用
54	- 中性色用于文字和背景，建立清晰的层次
55	- 语义色用于状态反馈，保持一致性
56	- 确保颜色对比度符合WCAG AA标准（≥4.5:1）
57
58	### 2. 字体系统
59
60	#### 字体家族
61
62	```css
63	/* 无衬线字体（主要） */
64	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
65	"Helvetica Neue", Arial, "Noto Sans", sans-serif;
66
67	/* 等宽字体（代码） */
68	--font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
69	```
70
71	#### 字体层级
72
73	\| 层级 \| 字号 \| 行高 \| 字重 \| 用途 \| CSS 变量 \|
74	\|------\|------\|------\|------\|------\|----------\|
75	\| Display \| 48px \| 1.1 \| 700 \| 大标题、落地页 \| `--text-display` \|
76	\| H1 \| 32px \| 1.2 \| 700 \| 页面标题 \| `--text-h1` \|
77	\| H2 \| 24px \| 1.3 \| 600 \| 区块标题 \| `--text-h2` \|
78	\| H3 \| 20px \| 1.4 \| 600 \| 小标题 \| `--text-h3` \|
79	\| H4 \| 18px \| 1.4 \| 600 \| 卡片标题 \| `--text-h4` \|
80	\| Body \| 16px \| 1.5 \| 400 \| 正文 \| `--text-body` \|
81	\| Body-sm \| 14px \| 1.5 \| 400 \| 辅助文字 \| `--text-body-sm` \|
82	\| Caption \| 12px \| 1.4 \| 400 \| 说明文字、标签 \| `--text-caption` \|
83
84	字体使用原则：
85	- 标题使用较大字号和较重字重，建立层次
86	- 正文使用16px，确保可读性
87	- 行高保持1.4-1.6，确保舒适阅读
88	- 不要使用过多字号，保持简洁
89
90	### 3. 间距系统
91
92	基础单位：4px（所有间距都是4的倍数）
93
94	\| 名称 \| 值 \| 用途 \| CSS 变量 \|
95	\|------\|-----\|------\|----------\|
96	\| space-0 \| 0 \| 无间距 \| `--space-0` \|
97	\| space-1 \| 4px \| 紧凑元素间（图标与文字） \| `--space-1` \|
98	\| space-2 \| 8px \| 相关元素间（标签与输入框） \| `--space-2` \|
99	\| space-3 \| 12px \| 组内元素间 \| `--space-3` \|
100	\| space-4 \| 16px \| 默认间距 \| `--space-4` \|
101	\| space-5 \| 20px \| 组间间距 \| `--space-5` \|
102	\| space-6 \| 24px \| 区块内间距 \| `--space-6` \|
103	\| space-8 \| 32px \| 区块间间距 \| `--space-8` \|
104	\| space-10 \| 40px \| 大区块间距 \| `--space-10` \|
105	\| space-12 \| 48px \| 页面级间距 \| `--space-12` \|
106	\| space-16 \| 64px \| 超大间距 \| `--space-16` \|
107
108	间距使用原则：
109	- 相关元素间距小，不相关元素间距大
110	- 使用统一的间距系统，不要随意使用其他值
111	- 移动端可以适当减小间距
112
113	### 4. 圆角系统
114
115	\| 名称 \| 值 \| 用途 \| CSS 变量 \|
116	\|------\|-----\|------\|----------\|
117	\| radius-none \| 0 \| 无圆角 \| `--radius-none` \|
118	\| radius-sm \| 4px \| 小元素（标签、徽章） \| `--radius-sm` \|
119	\| radius-md \| 8px \| 按钮、输入框 \| `--radius-md` \|
120	\| radius-lg \| 12px \| 卡片 \| `--radius-lg` \|
121	\| radius-xl \| 16px \| 大卡片、弹窗 \| `--radius-xl` \|
122	\| radius-2xl \| 24px \| 超大卡片 \| `--radius-2xl` \|
123	\| radius-full \| 9999px \| 圆形、胶囊按钮 \| `--radius-full` \|
124
125	圆角使用原则：
126	- 圆角让界面更友好，但不要过度
127	- 保持一致性，同类元素使用相同圆角
128	- 移动端可以使用稍大的圆角
129
130	### 5. 阴影系统
131
132	\| 名称 \| 值 \| 用途 \| CSS 变量 \|
133	\|------\|-----\|------\|----------\|
134	\| shadow-xs \| `0 1px 2px rgba(0,0,0,0.05)` \| 微小浮起 \| `--shadow-xs` \|
135	\| shadow-sm \| `0 1px 3px rgba(0,0,0,0.1)` \| 轻微浮起 \| `--shadow-sm` \|
136	\| shadow-md \| `0 4px 6px rgba(0,0,0,0.1)` \| 卡片 \| `--shadow-md` \|
137	\| shadow-lg \| `0 10px 15px rgba(0,0,0,0.1)` \| 弹窗、下拉菜单 \| `--shadow-lg` \|
138	\| shadow-xl \| `0 20px 25px rgba(0,0,0,0.15)` \| 模态框 \| `--shadow-xl` \|
139	\| shadow-2xl \| `0 25px 50px rgba(0,0,0,0.25)` \| 大型模态框 \| `--shadow-2xl` \|
140
141	阴影使用原则：
142	- 阴影表示层级，越重要的元素阴影越深
143	- 不要过度使用阴影，保持克制
144	- 悬停时可以加深阴影，表示可交互
145
146	### 6. 动效系统
147
148	#### 时长
149
150	\| 名称 \| 值 \| 用途 \|
151	\|------\|-----\|------\|
152	\| duration-fast \| 150ms \| 微交互（hover、focus） \|
153	\| duration-normal \| 250ms \| 状态切换、展开收起 \|
154	\| duration-slow \| 350ms \| 页面过渡、大型动画 \|
155
156	#### 缓动函数
157
158	\| 名称 \| 值 \| 用途 \|
159	\|------\|-----\|------\|
160	\| ease-out \| `cubic-bezier(0, 0, 0.2, 1)` \| 元素进入（淡入、展开） \|
161	\| ease-in \| `cubic-bezier(0.4, 0, 1, 1)` \| 元素退出（淡出、收起） \|
162	\| ease-in-out \| `cubic-bezier(0.4, 0, 0.2, 1)` \| 状态切换 \|
163
164	#### CSS 变量
165
166	```css
167	--transition-fast: 150ms cubic-bezier(0, 0, 0.2, 1);
168	--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
169	--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
170	```
171
172	动效使用原则：
173	- 动效要有意义，不要为了炫技
174	- 保持克制，不要过度动画
175	- 微交互要快（150ms），大动画可以慢（350ms）
176	- 使用合适的缓动函数，让动画更自然
177
178	### 7. 断点系统（响应式）
179
180	\| 断点 \| 值 \| 设备 \| 容器宽度 \|
181	\|------\|-----\|------\|----------\|
182	\| xs \| < 640px \| 手机 \| 100% \|
183	\| sm \| ≥ 640px \| 大手机 \| 640px \|
184	\| md \| ≥ 768px \| 平板 \| 768px \|
185	\| lg \| ≥ 1024px \| 小桌面 \| 1024px \|
186	\| xl \| ≥ 1280px \| 桌面 \| 1280px \|
187	\| 2xl \| ≥ 1536px \| 大桌面 \| 1536px \|
188
189	响应式设计原则：
190	- 移动优先（Mobile First）
191	- 关键内容在所有设备上都可见
192	- 移动端简化操作，桌面端提供更多功能
193	- 触控目标

People who liked this also viewed

6 picks

Type