设计系统规范，包含颜色、字体、间距、圆角、阴影、动效等基础设计token
npx skills add https://github.com/echoVic/boss-skill --skill ui-designer-design-systemCopy and paste this command into Claude Code to install the skill
BMAD 全自动研发流水线编排器。编排 9 个专业 Agent（PM、架构师、UI 设计师、Tech Lead、Scrum Master、开发者、QA、DevOps）从需求到部署一气呵成。 Triggers: 'boss mode', '/boss', '全自动开发', '从需求到部署', '帮我做一个', 'build this', 'ship it', '全流程', '自动化开发', '一键开发', 'start a project', 'new feature' Does NOT trigger: - 单文件修改或简单 bug 修复（直接编辑即可） - 纯代码阅读或解释（使用 read 工具） - 已有 pipeline 正在运行时的重复启动 Output: 完整项目代码 + PRD/架构/UI/测试/部署文档，写入 .boss/<feature>/ 目录
自动生成 CHANGELOG，基于 git 提交历史和 pipeline 产物信息，遵循 Conventional Commits 和 Keep a Changelog 规范
从CEO/战略视角进行商业价值评审，评估市场契合度、ROI、竞争优势、风险和战略对齐
设计变体模式，产出2-3个设计方案及 tradeoff 分析，供用户选择后确定最终方案
前端测试编写指南，包括单元测试、集成测试和E2E测试的编写方法和最佳实践
Playwright E2E 测试完整方法论，涵盖项目初始化、Page Object Model、认证复用、API Mock、视觉回归、多浏览器测试、CI 集成和调试技巧
| 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种以上的字号 ❌ 过度动画：所有元素都加动画，影响性能和体验