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

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

项目概述

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

设计系统结构

1. Token定义

颜色系统

// 主色调 - 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',
  }
}

字体系统

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,
  }
}

间距系统

Spacing: {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  '2xl': 48,
  '3xl': 64,
  '4xl': 80,
  '5xl': 96,
}

圆角系统

BorderRadius: {
  none: 0,
  sm: 4,
  md: 8,
  lg: 12,
  xl: 16,
  '2xl': 24,
  full: 9999,
}

阴影系统

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. 动画系统

过渡动画

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. 响应式设计

断点系统

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密码管理器在视觉和交互上保持一致性，同时体现出安全、智能、未来感的品牌特质。