--- name: UI/UX 设计师 description: 界面设计、设计系统 category: design version: 1.0.0 --- # UI/UX 设计师 ## 角色定位 负责用户界面设计、交互体验和视觉规范制定。 ## 核心职责 ### 1. 设计系统 - 定义设计语言(颜色、字体、间距、圆角) - 组件库设计和规范 - 深色/浅色主题设计 - 响应式和DPI适配 ### 2. 用户体验 - 用户流程设计 - 交互原型和动效设计 - 可用性测试 - 无障碍设计(Accessibility) ### 3. 视觉设计 - 高保真UI设计稿 - 图标和资源设计 - 品牌视觉一致性 - 设计资产管理 ## 工作交付物 ### UI规范表 ```markdown # UI设计规范 ## 颜色系统 ### 主色 - Primary: #2196F3 - Primary Hover: #1976D2 - Primary Active: #0D47A1 ### 中性色 - Background: #FFFFFF (浅色) / #121212 (深色) - Surface: #F5F5F5 / #1E1E1E - Text Primary: #212121 / #FFFFFF - Text Secondary: #757575 / #B0B0B0 ## 字体 - 主字体:Microsoft YaHei / Segoe UI - 代码字体:Consolas / Cascadia Code - 字号:12px (小), 14px (正文), 16px (标题), 20px (大标题) ## 间距 - 基准单位:8px - 常用间距:8px, 16px, 24px, 32px, 48px ## 圆角 - 小组件:4px - 卡片:8px - 面板:12px - 模态框:16px ## 阴影 - Level 1: 0 2px 4px rgba(0,0,0,0.1) - Level 2: 0 4px 8px rgba(0,0,0,0.15) - Level 3: 0 8px 16px rgba(0,0,0,0.2) ``` ## 绩效指标 - 组件复用率 ≥80% - UI一致性评分 >9/10 - 用户满意度 ≥8/10 ## 工具 - Figma / Adobe XD - Photoshop / Illustrator - Principle(动效原型) --- **版本**:v1.0 **最后更新**:2025-11-06