ai-password-manager/docs/figma-design-system-rules.md

# AI密码管理器 - Figma设计系统规范

## 项目概述

基于React Native Expo的AI驱动密码管理器，需要体现安全性、智能化和未来感的设计理念。

## 设计系统结构

### 1. Token定义

#### 颜色系统
```typescript
// 主色调 - AI科技感蓝紫渐变
Primary: {
  50: '#f0f9ff',
  100: '#e0f2fe', 
  200: '#bae6fd',
  300: '#7dd3fc',
  400: '#38bdf8',
  500: '#0ea5e9',  // 主色
  600: '#0284c7',
  700: '#0369a1',
  800: '#075985',
  900: '#0c4a6e',
}

// AI渐变色
AI_Gradient: {
  primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  secondary: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
  accent: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
}

// 安全状态色
Security: {
  high: '#10b981',    // 绿色 - 安全
  medium: '#f59e0b',  // 橙色 - 警告  
  low: '#ef4444',     // 红色 - 危险
  critical: '#dc2626', // 深红 - 严重
}

// 功能色
Functional: {
  success: '#10b981',
  warning: '#f59e0b', 
  error: '#ef4444',
  info: '#3b82f6',
}

// 中性色
Gray: {
  50: '#f9fafb',
  100: '#f3f4f6',
  200: '#e5e7eb',
  300: '#d1d5db',
  400: '#9ca3af',
  500: '#6b7280',
  600: '#4b5563',
  700: '#374151',
  800: '#1f2937',
  900: '#111827',
}

// 暗色模式
Dark: {
  background: {
    primary: '#000000',
    secondary: '#1c1c1e',
    tertiary: '#2c2c2e',
  },
  text: {
    primary: '#ffffff',
    secondary: '#ebebf5',
    tertiary: '#ebebf599',
  }
}
```

#### 字体系统
```typescript
Typography: {
  // 字体族
  fontFamily: {
    primary: 'SF Pro Display', // iOS系统字体
    secondary: 'SF Pro Text',
    mono: 'SF Mono',
  },
  
  // 字体大小
  fontSize: {
    xs: 12,
    sm: 14,
    base: 16,
    lg: 18,
    xl: 20,
    '2xl': 24,
    '3xl': 30,
    '4xl': 36,
  },
  
  // 字重
  fontWeight: {
    light: '300',
    normal: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
    heavy: '800',
  },
  
  // 行高
  lineHeight: {
    tight: 1.25,
    normal: 1.5,
    relaxed: 1.75,
  }
}
```

#### 间距系统
```typescript
Spacing: {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  '2xl': 48,
  '3xl': 64,
  '4xl': 80,
  '5xl': 96,
}
```

#### 圆角系统
```typescript
BorderRadius: {
  none: 0,
  sm: 4,
  md: 8,
  lg: 12,
  xl: 16,
  '2xl': 24,
  full: 9999,
}
```

#### 阴影系统
```typescript
Shadow: {
  sm: {
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 1,
  },
  md: {
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 6,
    elevation: 3,
  },
  lg: {
    shadowOffset: { width: 0, height: 10 },
    shadowOpacity: 0.15,
    shadowRadius: 15,
    elevation: 6,
  },
  xl: {
    shadowOffset: { width: 0, height: 20 },
    shadowOpacity: 0.25,
    shadowRadius: 25,
    elevation: 10,
  }
}
```

### 2. 组件库架构

#### 基础组件
- **Button**: 主要按钮、次要按钮、文本按钮、图标按钮
- **Input**: 文本输入、密码输入、搜索输入
- **Card**: 基础卡片、密码条目卡片、安全状态卡片
- **Badge**: 状态徽章、标签徽章、AI徽章
- **Avatar**: 用户头像、网站图标
- **Progress**: 进度条、圆形进度、安全评分

#### 复合组件
- **PasswordStrengthIndicator**: 密码强度指示器
- **SecurityScoreCard**: 安全评分卡片
- **PasswordEntryCard**: 密码条目卡片
- **AIAssistantCard**: AI助手卡片
- **SearchBar**: 智能搜索栏
- **BiometricPrompt**: 生物识别提示

#### 布局组件
- **Screen**: 页面容器
- **Section**: 区块容器
- **List**: 列表容器
- **Grid**: 网格容器

### 3. 图标系统

#### 图标库
- **系统图标**: SF Symbols (iOS), Material Icons (Android)
- **自定义图标**: 安全相关、AI相关、密码管理相关
- **网站图标**: Favicon获取和显示

#### 图标规范
- **尺寸**: 16px, 20px, 24px, 32px, 48px, 64px
- **样式**: 线性、填充、双色调
- **颜色**: 继承文本颜色或指定颜色

### 4. 动画系统

#### 过渡动画
```typescript
Transitions: {
  // 页面转场
  screen: {
    duration: 300,
    easing: 'ease-out',
  },
  // 组件状态变化
  component: {
    duration: 200,
    easing: 'ease-in-out',
  },
  // 微交互
  micro: {
    duration: 150,
    easing: 'ease-out',
  }
}
```

#### AI特效动画
- **脉冲效果**: AI处理时的呼吸灯效果
- **渐变流动**: AI功能的渐变色流动
- **粒子效果**: 安全扫描的粒子动画
- **发光效果**: 重要AI功能的发光边框

### 5. 响应式设计

#### 断点系统
```typescript
Breakpoints: {
  // iPhone SE (3rd gen)
  small: { width: 375, height: 667 },
  // iPhone 14
  medium: { width: 390, height: 844 },
  // iPhone 14 Pro Max  
  large: { width: 430, height: 932 },
  // iPad
  tablet: { width: 768, height: 1024 },
}
```

#### 适配策略
- **小屏**: 单列布局，紧凑间距
- **中屏**: 标准布局，正常间距
- **大屏**: 利用额外空间显示更多信息
- **横屏**: 双列或分栏布局

### 6. 无障碍设计

#### 可访问性标准
- **对比度**: 符合WCAG AA标准 (4.5:1)
- **字体大小**: 支持动态字体调整
- **触摸目标**: 最小44x44pt
- **屏幕阅读器**: 完整的VoiceOver支持

#### 语义化标记
- **角色定义**: button, link, heading, list等
- **状态描述**: selected, disabled, expanded等
- **标签关联**: label与input的关联

### 7. 设计原则

#### AI元素设计
1. **渐变运用**: AI功能使用蓝紫科技渐变
2. **发光效果**: 重要AI功能添加微妙发光
3. **动画反馈**: AI处理时显示智能动画
4. **智能徽章**: AI增强功能显示"AI"标识

#### 安全视觉语言
1. **颜色编码**: 绿色=安全，橙色=警告，红色=危险
2. **图标系统**: 统一的安全状态图标
3. **进度指示**: 密码强度的视觉化表示
4. **状态反馈**: 即时的视觉状态反馈

#### 交互设计
1. **手势操作**: 左右滑动的快捷操作
2. **触觉反馈**: 重要操作的震动反馈
3. **状态动画**: 流畅的状态转换动画
4. **加载状态**: 优雅的加载和骨架屏

### 8. Figma组织结构

#### 文件结构
```
AI密码管理器设计系统/
├── 🎨 Design Tokens
│   ├── Colors
│   ├── Typography  
│   ├── Spacing
│   └── Effects
├── 🧩 Components
│   ├── Atoms
│   ├── Molecules
│   └── Organisms
├── 📱 Screens
│   ├── Authentication
│   ├── Dashboard
│   ├── Vault
│   ├── AI Assistant
│   ├── Search
│   └── Settings
├── 🔄 Prototypes
│   ├── User Flows
│   └── Interactions
└── 📚 Documentation
    ├── Style Guide
    └── Component Specs
```

#### 命名规范
- **页面**: `Screen/功能名称`
- **组件**: `Component/组件类型/组件名称`
- **状态**: `组件名称/状态名称`
- **变体**: `尺寸-状态-主题`

### 9. 开发交接规范

#### 设计标注
- **间距**: 使用8px网格系统
- **字体**: 指定字重和行高
- **颜色**: 使用设计令牌名称
- **动画**: 指定时长和缓动函数

#### 资源导出
- **图标**: SVG格式，多尺寸
- **图片**: PNG/WebP，@1x/@2x/@3x
- **动画**: Lottie JSON格式

#### 组件文档
- **用法说明**: 何时使用该组件
- **属性列表**: 所有可配置属性
- **状态变化**: 不同状态的视觉表现
- **交互行为**: 用户交互的反馈

这个设计系统将确保AI密码管理器在视觉和交互上保持一致性，同时体现出安全、智能、未来感的品牌特质。