Menu
设计系统规范，包含颜色、字体、间距、圆角、阴影、动效等基础设计token
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
BMAD 全自动研发流水线编排器。编排 9 个专业 Agent（PM、架构师、UI Designer、Tech Lead、Scrum Master、Frontend、Backend、QA、DevOps）从需求到部署。 Triggers: 'boss mode', '/boss', '全自动开发', '从需求到部署', '帮我做一个', 'build this', 'ship it', '全流程', '自动化开发', '一键开发', 'start a project', 'new feature' Does NOT trigger: - 单文件修改或简单 bug 修复（直接编辑即可） - 纯代码阅读或解释（使用 read 工具） - 已有 pipeline 正在运行时的重复启动 - 极小事（预计 <30 分钟人工可完成、不需要 PRD/架构/门禁记录） Output: 完整项目代码 + PRD/架构/UI/测试/部署文档，写入 .boss/<feature>/ 目录
后端测试编写指南，包括单元测试、集成测试和E2E测试的编写方法和最佳实践
自动生成 CHANGELOG，基于 git 提交历史和 pipeline 产物信息，遵循 Conventional Commits 和 Keep a Changelog 规范
从CEO/战略视角进行商业价值评审，评估市场契合度、ROI、竞争优势、风险和战略对齐
设计变体模式，产出2-3个设计方案及 tradeoff 分析，供用户选择后确定最终方案
前端测试编写指南，包括单元测试、集成测试和E2E测试的编写方法和最佳实践
| 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种以上的字号 ❌ 过度动画：所有元素都加动画，影响性能和体验