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/figma-design-guide.md
+++ b/docs/figma-design-guide.md
@@ -0,0 +1,443 @@
+# AI密码管理器 - Figma设计实施指南
+
+## 🎯 设计目标
+创建一个体现**安全性**、**智能化**和**未来感**的AI密码管理器界面，重点突出AI功能的无缝集成和直观的用户体验。
+
+## 📐 Figma文件设置
+
+### 1. 创建新文件
+- 文件名：`AI密码管理器 - 设计系统`
+- 画板尺寸：iPhone 14 (390 × 844px)
+- 网格：8px基础网格系统
+
+### 2. 页面结构
+```
+📄 Cover (封面页)
+📄 Design System (设计系统)
+📄 Components (组件库)
+📄 Screens (界面设计)
+📄 Prototypes (交互原型)
+```
+
+## 🎨 设计系统实施
+
+### 第一步：创建颜色样式
+
+#### 主色调系统
+```
+Primary/50: #f0f9ff
+Primary/100: #e0f2fe
+Primary/500: #0ea5e9 (主色)
+Primary/600: #0284c7
+Primary/900: #0c4a6e
+```
+
+#### AI渐变色
+```
+AI/Primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
+AI/Secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
+AI/Accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)
+```
+
+#### 安全状态色
+```
+Security/High: #10b981 (安全-绿色)
+Security/Medium: #f59e0b (警告-橙色)
+Security/Low: #ef4444 (危险-红色)
+Security/Critical: #dc2626 (严重-深红)
+```
+
+### 第二步：创建文字样式
+
+#### 标题系统
+```
+H1/Bold: SF Pro Display, 32px, Bold, 32px行高
+H2/Bold: SF Pro Display, 24px, Bold, 28px行高
+H3/SemiBold: SF Pro Display, 20px, SemiBold, 24px行高
+H4/Medium: SF Pro Display, 18px, Medium, 22px行高
+```
+
+#### 正文系统
+```
+Body/Large: SF Pro Text, 18px, Regular, 24px行高
+Body/Medium: SF Pro Text, 16px, Regular, 22px行高
+Body/Small: SF Pro Text, 14px, Regular, 20px行高
+Caption: SF Pro Text, 12px, Regular, 16px行高
+```
+
+### 第三步：创建效果样式
+
+#### 阴影系统
+```
+Shadow/SM: Y:1, Blur:2, Opacity:5%
+Shadow/MD: Y:4, Blur:6, Opacity:10%
+Shadow/LG: Y:10, Blur:15, Opacity:15%
+Shadow/XL: Y:20, Blur:25, Opacity:25%
+```
+
+#### AI发光效果
+```
+AI/Glow: 外发光, 颜色:#667eea, 模糊:8px, 扩散:2px
+Security/Glow: 外发光, 颜色:#10b981, 模糊:6px, 扩散:1px
+```
+
+## 📱 界面设计详细规范
+
+### 1. 启动页面 (Splash Screen)
+
+#### 设计要点
+- **背景**：AI主渐变 (135度，#667eea到#764ba2)
+- **Logo**：120×120px，白色，居中放置
+- **标题**："AI密码管家"，H1样式，白色，Logo下方24px
+- **加载器**：5个圆点，白色，流动动画效果
+
+#### 具体实施步骤
+1. 创建390×844px画板，命名"Splash Screen"
+2. 添加渐变背景，使用AI/Primary渐变
+3. 放置Logo图标（可用圆形+锁图标组合）
+4. 添加标题文字，应用H1样式
+5. 创建加载动画组件（5个圆点，透明度变化）
+
+### 2. 认证页面 (Authentication)
+
+#### 布局结构
+```
+┌─────────────────────────────────┐
+│ Status Bar (44px)              │
+├─────────────────────────────────┤
+│ Safe Area Top (48px)           │
+├─────────────────────────────────┤
+│                                │
+│ Logo (80×80px)                 │ ← 距顶部120px
+│ 欢迎回来 (H1)                   │ ← Logo下方32px
+│ 请验证您的身份 (Body/Medium)     │ ← 标题下方8px
+│                                │
+│ [生物识别区域]                   │ ← 中心区域
+│ 指纹图标 (64×64px)              │
+│ 使用生物识别 (Body/Large)        │
+│                                │
+│ ──── 或 ──── (分割线)           │
+│                                │
+│ [输入主密码] (Secondary Button)  │
+│                                │
+│ 忘记密码？(Text Button)          │
+│                                │
+├─────────────────────────────────┤
+│ Safe Area Bottom (34px)        │
+└─────────────────────────────────┘
+```
+
+#### 生物识别状态设计
+- **等待状态**：指纹图标，Gray/400颜色
+- **识别中**：指纹图标，AI渐变色 + 脉冲动画
+- **成功状态**：✓图标，Security/High颜色
+- **失败状态**：✗图标，Security/Low颜色
+
+### 3. 主界面 (Dashboard)
+
+#### 导航栏设计
+```
+高度：76px (44px状态栏 + 32px内容)
+背景：模糊效果 + 半透明白色
+左侧：🔒 + "AI密码管家" (H3样式)
+右侧：通知图标 + 设置图标 (24×24px)
+```
+
+#### 搜索栏设计
+```
+高度：48px
+背景：Gray/50，圆角24px
+左侧：搜索图标 (20×20px)
+占位符："搜索密码或说'银行相关的密码'"
+右侧：AI机器人图标 (24×24px，AI渐变色)
+```
+
+#### 安全状态卡片
+```
+尺寸：358×100px (左右边距16px)
+背景：白色，圆角12px，Shadow/MD
+布局：左侧评分圆环 + 右侧问题列表
+
+左侧评分区域：
+- 圆形进度条：直径60px，线宽4px
+- 评分数字：H2样式，居中
+- 状态文字：Body/Small，Gray/500
+
+右侧问题区域：
+- ⚠️ 5个弱密码 (Security/Medium色)
+- 🔄 3个过期密码 (Security/Medium色)  
+- 🔐 建议2FA (Security/High色)
+```
+
+#### 快速操作按钮
+```
+布局：三个等宽按钮，间距12px
+按钮尺寸：110×56px，圆角12px
+样式：白色背景，Shadow/SM，图标+文字
+
+按钮内容：
+1. ➕ 添加密码
+2. 📱 扫码登录
+3. 🎲 生成密码
+```
+
+#### 密码条目卡片
+```
+尺寸：358×72px
+背景：白色，圆角8px，Shadow/SM
+布局：左侧图标 + 中间信息 + 右侧状态
+
+左侧：网站图标 (32×32px，圆角6px)
+中间：
+- 网站名称 (Body/Large，Bold)
+- 用户名 (Body/Small，Gray/500)
+右侧：
+- 密码强度指示器
+- 标签徽章
+- 收藏星标
+```
+
+### 4. 密码库页面 (Vault)
+
+#### 筛选标签栏
+```
+高度：40px
+背景：透明
+标签样式：圆角20px，内边距12×8px
+选中状态：Primary/500背景，白色文字
+未选中：Gray/100背景，Gray/700文字
+
+标签内容：[全部] [收藏] [分类] [标签]
+```
+
+#### 排序选择器
+```
+高度：32px
+样式：Body/Small + 下拉箭头
+默认：最近使用 ↓
+选项：最近使用、字母排序、安全评分
+```
+
+#### 密码条目（展开版）
+```
+尺寸：358×96px
+背景：白色，圆角8px，Shadow/SM
+
+布局：
+- 顶部：网站图标 + 网站全名
+- 中部：用户名/账号
+- 底部：安全信息行 + 标签行
+
+安全信息行：
+- 密码强度：🔒●●●●○ 强度：80/100
+- 使用时间：3天前使用
+
+标签行：
+- 标签徽章：🏷️工作 🏷️开发
+- 收藏星标：⭐
+```
+
+### 5. AI助手页面
+
+#### 安全评分卡片（大版本）
+```
+尺寸：358×160px
+背景：白色，圆角16px，Shadow/LG
+
+中心圆形进度条：
+- 直径：120px
+- 线宽：8px
+- 渐变色：根据评分显示不同颜色
+- 中心数字：H1样式，48px
+- 状态文字：H3样式，评分下方
+```
+
+#### 安全问题卡片
+```
+尺寸：358×64px
+背景：白色，圆角12px，Shadow/SM
+左边框：4px宽，根据严重程度显示颜色
+
+布局：
+- 左侧：问题图标 (24×24px)
+- 中间：问题描述 (Body/Medium)
+- 右侧：箭头图标 (16×16px)
+
+颜色编码：
+- 严重：Security/Low (红色边框)
+- 警告：Security/Medium (橙色边框)
+- 建议：Security/High (绿色边框)
+```
+
+#### AI建议卡片
+```
+尺寸：358×120px
+背景：AI渐变背景
+圆角：16px
+文字：白色
+
+布局：
+- 顶部：🤖 + "基于您的使用习惯，我发现："
+- 中部：建议列表（• 开头的要点）
+- 底部：微妙的AI粒子动画效果
+```
+
+### 6. 搜索页面
+
+#### 语音搜索按钮
+```
+尺寸：358×48px
+背景：AI渐变
+圆角：24px
+内容：🎤 + "语音搜索"
+文字：白色，Body/Large
+```
+
+#### 智能分类卡片
+```
+尺寸：358×56px
+背景：白色，圆角12px，Shadow/SM
+
+布局：
+- 左侧：分类图标 (32×32px，圆形背景)
+- 中间：分类名称 + 数量
+- 右侧：预览文字 (Gray/400)
+
+分类图标背景色：
+- 🏦 银行金融：蓝色渐变
+- 💼 工作相关：紫色渐变  
+- 🛒 购物网站：橙色渐变
+- 🎮 游戏娱乐：绿色渐变
+```
+
+### 7. 密码详情页面
+
+#### 大图标区域
+```
+尺寸：80×80px
+背景：Gray/100，圆角16px
+图标：网站favicon或默认图标
+位置：页面顶部居中，距导航栏32px
+```
+
+#### 信息字段
+```
+字段容器：358×48px，底部边框1px Gray/200
+
+字段布局：
+- 标签：Body/Small，Gray/500，顶部对齐
+- 内容：Body/Medium，Gray/900，标签下方4px
+- 操作按钮：右侧，24×24px图标
+
+密码字段特殊处理：
+- 默认显示：●●●●●●●●●●●●
+- 显示按钮：👁️ 图标
+- 复制按钮：📋 图标
+```
+
+#### AI建议区域
+```
+背景：AI渐变，圆角12px
+内边距：16px
+文字：白色
+
+内容：
+- 标题：💡 AI 建议 (Body/Large，Bold)
+- 建议列表：• 开头的要点 (Body/Medium)
+- 微妙的发光效果边框
+```
+
+#### 标签组
+```
+布局：横向排列，可换行
+标签样式：
+- 背景：Primary/100
+- 文字：Primary/700
+- 圆角：16px
+- 内边距：8×12px
+- 间距：8px
+```
+
+### 8. 设置页面
+
+#### 用户信息卡片
+```
+尺寸：358×80px
+背景：白色，圆角12px，Shadow/SM
+
+布局：
+- 左侧：用户头像 (48×48px，圆形)
+- 中间：用户名 + 邮箱
+- 右侧：编辑图标
+```
+
+#### 设置分组
+```
+分组标题：
+- 样式：Body/Small，Gray/500，Bold
+- 位置：距上一组24px，距设置项12px
+
+设置项：
+- 高度：48px
+- 背景：白色
+- 分割线：底部1px，Gray/100
+
+设置项布局：
+- 左侧：图标 (24×24px) + 标题
+- 右侧：开关/值/箭头
+```
+
+#### 开关组件
+```
+尺寸：44×24px
+轨道：圆角12px
+滑块：20×20px圆形，2px边距
+
+状态：
+- 开启：Primary/500背景，白色滑块
+- 关闭：Gray/300背景，白色滑块
+- 动画：200ms缓动过渡
+```
+
+## 🎭 AI元素和未来感设计
+
+### AI视觉元素
+1. **渐变运用**：所有AI功能使用蓝紫科技渐变
+2. **发光效果**：重要AI功能添加微妙外发光
+3. **动画效果**：
+   - 脉冲呼吸：AI处理时的呼吸灯效果
+   - 渐变流动：AI卡片的渐变色流动
+   - 粒子效果：安全扫描的微粒动画
+4. **智能徽章**：AI增强功能显示渐变"AI"标识
+
+### 未来感设计元素
+1. **毛玻璃效果**：导航栏和浮层使用模糊背景
+2. **微妙阴影**：营造层次感和深度
+3. **圆角设计**：现代化的圆角处理
+4. **渐变色彩**：科技感的渐变色运用
+5. **动态反馈**：流畅的交互动画
+
+### 安全视觉语言
+1. **颜色编码**：一致的安全状态颜色系统
+2. **图标系统**：统一的安全状态图标
+3. **进度可视化**：密码强度的直观表示
+4. **状态反馈**：即时的视觉状态变化
+
+## 🔄 交互原型设计
+
+### 页面转场动画
+- **推入效果**：新页面从右侧滑入
+- **时长**：300ms
+- **缓动**：ease-out
+
+### 组件交互
+- **按钮点击**：轻微缩放 + 颜色变化
+- **卡片点击**：轻微阴影增强
+- **开关切换**：滑块平滑移动
+
+### AI功能交互
+- **语音搜索**：麦克风图标脉冲动画
+- **AI分析**：进度条 + 粒子效果
+- **智能建议**：卡片从下方滑入
+
+这个设计指南将帮助您在Figma中创建出专业、一致且具有未来感的AI密码管理器界面。每个界面都体现了安全性、智能化和用户友好的设计理念。