feat(docs): add comprehensive design system and AI password manager architecture

- Add complete Figma design system with color, typography, and component specifications - Create detailed UI/UX design architecture for React Native implementation - Include AI-specific design elements with gradients, animations, and visual language - Add implementation guides for developers and step-by-step Figma instructions - Configure MCP server integration for Figma design workflow - Create SplashScreen component with AI gradient background and loading animations
2025-07-22 10:07:39 +08:00
parent ebbbabab6c
commit b5d4724d06
17 changed files with 4739 additions and 1 deletions
--- a/docs/design-system-specs.md
+++ b/docs/design-system-specs.md
@@ -0,0 +1,324 @@
+# AI密码管理器 - 设计系统详细规范
+
+## 🎨 视觉设计原则
+
+### 核心设计理念
+1. **AI优先**: 所有设计元素都体现智能化特征
+2. **安全感**: 通过视觉传达信任和安全
+3. **未来感**: 现代化、前瞻性的界面设计
+4. **简洁性**: 复杂功能的简单化呈现
+5. **一致性**: 统一的视觉语言和交互模式
+
+## 🌈 颜色系统详细规范
+
+### 主色调 (Primary Blue)
+```
+用途：主要品牌色、重要按钮、链接、选中状态
+- Primary 50: #f0f9ff (浅色背景)
+- Primary 100: #e0f2fe (悬停背景)
+- Primary 200: #bae6fd (边框色)
+- Primary 300: #7dd3fc (禁用状态)
+- Primary 400: #38bdf8 (悬停状态)
+- Primary 500: #0ea5e9 (默认主色)
+- Primary 600: #0284c7 (按下状态)
+- Primary 700: #0369a1 (深色主题)
+- Primary 800: #075985 (强调色)
+- Primary 900: #0c4a6e (最深色)
+```
+
+### AI渐变色系
+```
+用途：AI功能标识、智能建议、未来感元素
+- AI Gradient 1: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
+- AI Gradient 2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
+- AI Gradient 3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)
+- AI Glow: #667eea with 20% opacity blur
+```
+
+### 安全状态色系
+```
+高安全级别 (绿色系)
+- Success 50: #ecfdf5
+- Success 100: #d1fae5
+- Success 500: #10b981 (主要成功色)
+- Success 600: #059669 (深色成功色)
+- Success 900: #064e3b
+
+中等安全级别 (橙色系)
+- Warning 50: #fffbeb
+- Warning 100: #fef3c7
+- Warning 500: #f59e0b (主要警告色)
+- Warning 600: #d97706 (深色警告色)
+- Warning 900: #92400e
+
+低安全级别 (红色系)
+- Error 50: #fef2f2
+- Error 100: #fee2e2
+- Error 500: #ef4444 (主要错误色)
+- Error 600: #dc2626 (深色错误色)
+- Error 900: #7f1d1d
+```
+
+### 中性色系
+```
+用途：文本、背景、边框、图标
+- Gray 25: #fcfcfd (最浅背景)
+- Gray 50: #f9fafb (卡片背景)
+- Gray 100: #f3f4f6 (分割线)
+- Gray 200: #e5e7eb (边框)
+- Gray 300: #d1d5db (禁用边框)
+- Gray 400: #9ca3af (占位符文本)
+- Gray 500: #6b7280 (次要文本)
+- Gray 600: #4b5563 (标签文本)
+- Gray 700: #374151 (正文文本)
+- Gray 800: #1f2937 (标题文本)
+- Gray 900: #111827 (主要文本)
+```
+
+### 暗色模式色系
+```
+背景色
+- Dark BG Primary: #000000 (主背景)
+- Dark BG Secondary: #1c1c1e (卡片背景)
+- Dark BG Tertiary: #2c2c2e (输入框背景)
+- Dark BG Quaternary: #3a3a3c (悬停背景)
+
+文本色
+- Dark Text Primary: #ffffff (主要文本)
+- Dark Text Secondary: #ebebf5 (次要文本)
+- Dark Text Tertiary: #ebebf599 (60% 透明度)
+- Dark Text Quaternary: #ebebf54d (30% 透明度)
+
+边框色
+- Dark Border Primary: #38383a
+- Dark Border Secondary: #48484a
+```
+
+## 📝 字体系统
+
+### 字体族
+```
+主字体：SF Pro Display (iOS) / Roboto (Android)
+代码字体：SF Mono / Roboto Mono
+```
+
+### 字体大小和行高
+```
+Display (展示用)
+- Display XL: 48px / 56px (1.167) - 主要标题
+- Display LG: 36px / 44px (1.222) - 页面标题
+- Display MD: 30px / 38px (1.267) - 卡片标题
+
+Heading (标题用)
+- H1: 24px / 32px (1.333) - 页面主标题
+- H2: 20px / 28px (1.4) - 区块标题
+- H3: 18px / 24px (1.333) - 小节标题
+
+Body (正文用)
+- Body XL: 18px / 28px (1.556) - 重要正文
+- Body LG: 16px / 24px (1.5) - 标准正文
+- Body MD: 14px / 20px (1.429) - 次要正文
+- Body SM: 12px / 16px (1.333) - 辅助文本
+
+Label (标签用)
+- Label XL: 16px / 20px (1.25) - 大标签
+- Label LG: 14px / 18px (1.286) - 标准标签
+- Label MD: 12px / 16px (1.333) - 小标签
+- Label SM: 10px / 14px (1.4) - 微标签
+```
+
+### 字重系统
+```
+- Thin: 100 (装饰用)
+- Light: 300 (次要信息)
+- Regular: 400 (正文)
+- Medium: 500 (强调)
+- Semibold: 600 (小标题)
+- Bold: 700 (重要标题)
+- Heavy: 800 (特殊强调)
+- Black: 900 (品牌标题)
+```
+
+## 📏 间距系统
+
+### 基础间距单位
+```
+基础单位：4px (0.25rem)
+
+间距级别：
+- 0: 0px
+- 1: 4px (0.25rem)
+- 2: 8px (0.5rem)
+- 3: 12px (0.75rem)
+- 4: 16px (1rem) - 标准间距
+- 5: 20px (1.25rem)
+- 6: 24px (1.5rem)
+- 8: 32px (2rem)
+- 10: 40px (2.5rem)
+- 12: 48px (3rem)
+- 16: 64px (4rem)
+- 20: 80px (5rem)
+- 24: 96px (6rem)
+```
+
+### 组件内间距
+```
+按钮内边距：
+- Small: 8px 12px
+- Medium: 12px 16px
+- Large: 16px 24px
+
+卡片内边距：
+- Small: 12px
+- Medium: 16px
+- Large: 24px
+
+输入框内边距：
+- Height: 48px
+- Horizontal: 16px
+- Vertical: 12px
+```
+
+## 🎭 阴影系统
+
+### 卡片阴影
+```
+Card Shadow XS:
+- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
+
+Card Shadow SM:
+- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
+
+Card Shadow MD:
+- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
+
+Card Shadow LG:
+- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
+
+Card Shadow XL:
+- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
+```
+
+### 按钮阴影
+```
+Button Shadow:
+- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
+
+Button Shadow Hover:
+- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
+
+Button Shadow Active:
+- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
+```
+
+### AI发光效果
+```
+AI Glow Subtle:
+- box-shadow: 0 0 20px rgba(102, 126, 234, 0.15)
+
+AI Glow Medium:
+- box-shadow: 0 0 30px rgba(102, 126, 234, 0.25)
+
+AI Glow Strong:
+- box-shadow: 0 0 40px rgba(102, 126, 234, 0.35)
+```
+
+## 🔘 圆角系统
+
+### 圆角级别
+```
+- None: 0px (直角)
+- XS: 2px (微圆角)
+- SM: 4px (小圆角)
+- MD: 6px (中圆角)
+- LG: 8px (大圆角)
+- XL: 12px (特大圆角)
+- 2XL: 16px (超大圆角)
+- 3XL: 24px (巨大圆角)
+- Full: 9999px (完全圆形)
+```
+
+### 组件圆角应用
+```
+按钮：8px (LG)
+输入框：8px (LG)
+卡片：12px (XL)
+模态框：16px (2XL)
+头像：9999px (Full)
+标签：4px (SM)
+```
+
+## 🎯 图标系统
+
+### 图标尺寸
+```
+- XS: 12px (微图标)
+- SM: 16px (小图标)
+- MD: 20px (标准图标)
+- LG: 24px (大图标)
+- XL: 32px (特大图标)
+- 2XL: 48px (超大图标)
+```
+
+### 图标风格
+```
+- 线性图标：2px 线宽，圆角端点
+- 填充图标：用于选中状态
+- 双色图标：主色 + 灰色组合
+- AI图标：渐变色处理
+```
+
+### 安全状态图标
+```
+- 高安全：🛡️ (盾牌) - 绿色
+- 中等安全：⚠️ (警告) - 橙色  
+- 低安全：🚨 (警报) - 红色
+- AI功能：🤖 (机器人) - 渐变色
+- 生物识别：👆 (指纹) / 👁️ (面容)
+```
+
+## 📱 移动端适配
+
+### 屏幕尺寸断点
+```
+- Small: 375px (iPhone SE)
+- Medium: 390px (iPhone 14)
+- Large: 430px (iPhone 14 Pro Max)
+```
+
+### 触摸目标尺寸
+```
+最小触摸目标：44px × 44px
+推荐触摸目标：48px × 48px
+舒适触摸目标：56px × 56px
+```
+
+### 安全区域
+```
+顶部安全区域：44px (状态栏)
+底部安全区域：34px (Home Indicator)
+侧边安全区域：16px (最小边距)
+```
+
+## 🌙 暗色模式适配
+
+### 适配原则
+```
+1. 保持品牌色不变
+2. 降低整体对比度
+3. 使用真黑色背景
+4. 适当调整阴影效果
+5. 保持可读性标准
+```
+
+### 颜色映射
+```
+浅色模式 → 暗色模式
+White (#ffffff) → Dark BG Primary (#000000)
+Gray 50 (#f9fafb) → Dark BG Secondary (#1c1c1e)
+Gray 100 (#f3f4f6) → Dark BG Tertiary (#2c2c2e)
+Gray 900 (#111827) → Dark Text Primary (#ffffff)
+Gray 500 (#6b7280) → Dark Text Secondary (#ebebf5)
+```
+
+这个详细的设计系统规范将确保整个AI密码管理器应用的视觉一致性和用户体验质量。请按照这些规范在Figma中创建您的设计系统。