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>/ 目录

2026-06-28549

backend-testing-guide

echoVic/boss-skill

后端测试编写指南，包括单元测试、集成测试和E2E测试的编写方法和最佳实践

2026-06-28549

devops-changelog-generation

echoVic/boss-skill

自动生成 CHANGELOG，基于 git 提交历史和 pipeline 产物信息，遵循 Conventional Commits 和 Keep a Changelog 规范

2026-05-22549

pm-strategic-review

echoVic/boss-skill

从CEO/战略视角进行商业价值评审，评估市场契合度、ROI、竞争优势、风险和战略对齐

2026-05-22549

ui-designer-design-variants

echoVic/boss-skill

设计变体模式，产出2-3个设计方案及 tradeoff 分析，供用户选择后确定最终方案

2026-05-22549

frontend-testing-guide

echoVic/boss-skill

前端测试编写指南，包括单元测试、集成测试和E2E测试的编写方法和最佳实践

2026-05-16549

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`

颜色使用原则：

主色用于主要操作和强调，不要滥用
中性色用于文字和背景，建立清晰的层次
语义色用于状态反馈，保持一致性
确保颜色对比度符合WCAG AA标准（≥4.5:1）

2. 字体系统

字体家族

/* 无衬线字体（主要） */
--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`

字体使用原则：

标题使用较大字号和较重字重，建立层次
正文使用16px，确保可读性
行高保持1.4-1.6，确保舒适阅读
不要使用过多字号，保持简洁

3. 间距系统

基础单位：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`

间距使用原则：

相关元素间距小，不相关元素间距大
使用统一的间距系统，不要随意使用其他值
移动端可以适当减小间距

4. 圆角系统

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

圆角使用原则：

圆角让界面更友好，但不要过度
保持一致性，同类元素使用相同圆角
移动端可以使用稍大的圆角

5. 阴影系统

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

阴影使用原则：

阴影表示层级，越重要的元素阴影越深
不要过度使用阴影，保持克制
悬停时可以加深阴影，表示可交互

6. 动效系统

时长

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

CSS 变量

--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);

动效使用原则：

动效要有意义，不要为了炫技
保持克制，不要过度动画
微交互要快（150ms），大动画可以慢（350ms）
使用合适的缓动函数，让动画更自然

7. 断点系统（响应式）

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

响应式设计原则：

移动优先（Mobile First）
关键内容在所有设备上都可见
移动端简化操作，桌面端提供更多功能
触控目标在移动端至少44x44px

输出要求

在UI设计文档中，应包含以下设计系统章节：

## 4. 设计系统

### 4.1 颜色系统
[品牌色、中性色、语义色表格]

### 4.2 字体系统
[字体家族、字体层级表格]

### 4.3 间距系统
[间距表格]

### 4.4 圆角系统
[圆角表格]

### 4.5 阴影系统
[阴影表格]

### 4.6 动效系统
[时长、缓动函数表格]

关键原则

一致性：所有设计都使用统一的design token
可扩展性：新功能可以快速复用现有规范
可维护性：修改token即可全局更新
克制：不要定义过多变体，保持简洁

常见误区

❌ 随意使用颜色：不使用定义的颜色，随意添加新颜色 ❌ 间距不统一：使用5px、7px等非4倍数的间距 ❌ 字号过多：定义10种以上的字号 ❌ 过度动画：所有元素都加动画，影响性能和体验