ui-designer-design-system

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种以上的字号 ❌ 过度动画 ：所有元素都加动画，影响性能和体验