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

docs/figma-quick-start-guide.md

@@ -0,0 +1,121 @@
+# Figma快速开始指南 - AI密码管理器设计
+
+## 🚀 第一步：创建Figma文件和画板
+
+### 1. 打开Figma并创建文件
+1. 在浏览器中访问 [figma.com](https://figma.com)
+2. 点击右上角 **"New design file"** 按钮
+3. 文件会自动创建并打开
+
+### 2. 重命名文件
+1. 点击左上角的 **"Untitled"** 文件名
+2. 输入：**"AI密码管理器设计系统"**
+3. 按回车确认
+
+### 3. 创建iPhone画板
+1. 按键盘 **F** 键（或点击左侧工具栏的Frame图标）
+2. 在右侧面板中找到 **"Phone"** 分类
+3. 点击 **"iPhone 14"** (390 × 844px)
+4. 画板会自动创建在画布中央
+
+### 4. 重命名画板
+1. 确保画板被选中（边框显示蓝色）
+2. 在右侧面板顶部，将名称改为：**"Splash Screen"**
+
+## 🎨 第二步：创建第一个设计元素
+
+### 方法一：创建矩形（推荐）
+1. 按键盘 **R** 键（或点击左侧工具栏的矩形图标）
+2. 在画板内拖拽创建一个矩形
+3. 矩形会自动被选中（显示蓝色边框和控制点）
+
+### 方法二：创建文本
+1. 按键盘 **T** 键（或点击左侧工具栏的文本图标）
+2. 在画板内点击任意位置
+3. 输入文字：**"AI密码管家"**
+4. 按Esc键完成编辑，文本会被选中
+
+### 方法三：创建圆形
+1. 按键盘 **O** 键（或点击左侧工具栏的椭圆图标）
+2. 按住Shift键并拖拽，创建一个正圆
+3. 圆形会自动被选中
+
+## ✅ 第三步：确认元素已选中
+
+### 选中状态的标志：
+- 元素周围有**蓝色边框**
+- 四个角有**蓝色控制点**
+- 右侧面板显示该元素的属性
+- 左侧图层面板中该元素名称被高亮
+
+### 如果元素没有被选中：
+1. 用鼠标**单击**该元素
+2. 或者在左侧图层面板中**点击**元素名称
+
+## 🔧 第四步：验证MCP工具连接
+
+当您完成上述步骤并确保有元素被选中后，我就可以使用Figma MCP工具来：
+
+1. **获取当前设计图像** - 查看您创建的元素
+2. **生成React Native代码** - 为设计元素生成对应的代码
+3. **分析设计变量** - 获取颜色、字体等设计属性
+4. **优化设计** - 根据AI密码管理器的需求调整设计
+
+## 🎯 推荐的开始方式
+
+### 创建启动页面背景：
+1. 按 **R** 键创建矩形
+2. 调整大小覆盖整个画板 (390×844px)
+3. 在右侧面板的Fill区域：
+   - 点击颜色方块
+   - 选择 **Linear** 渐变
+   - 设置渐变角度为 **135度**
+   - 第一个颜色：**#667eea** (蓝紫色)
+   - 第二个颜色：**#764ba2** (深紫色)
+
+### 添加Logo占位符：
+1. 按 **O** 键创建圆形
+2. 设置尺寸为 **120×120px**
+3. 填充白色 **#FFFFFF**
+4. 居中放置在画板中
+
+### 添加标题文字：
+1. 按 **T** 键创建文本
+2. 输入：**"AI密码管家"**
+3. 设置字体大小：**32px**
+4. 设置颜色：**白色 #FFFFFF**
+5. 居中对齐
+
+## 🚨 常见问题解决
+
+### 问题1：找不到iPhone 14画板
+- 按F键后，在右侧面板向下滚动找到"Phone"分类
+- 或者手动创建Frame，设置尺寸为390×844px
+
+### 问题2：元素创建后没有被选中
+- 用鼠标单击该元素
+- 或按V键切换到选择工具，然后点击元素
+
+### 问题3：无法看到渐变选项
+- 确保元素被选中
+- 在右侧面板的Fill区域，点击颜色方块
+- 在弹出的颜色选择器中，点击顶部的渐变图标
+
+### 问题4：MCP工具提示"Nothing is selected"
+- 确保在Figma中有元素被选中（显示蓝色边框）
+- 刷新浏览器页面重新选择元素
+- 确保Figma标签页是当前活跃的标签页
+
+## 📞 准备就绪的信号
+
+当您看到以下情况时，就可以告诉我"已经选中元素"：
+
+✅ Figma中有一个元素被选中（蓝色边框）  
+✅ 右侧面板显示该元素的属性  
+✅ 左侧图层面板中元素名称被高亮  
+
+然后我就可以使用MCP工具来帮您开始设计AI密码管理器的界面了！
+
+---
+
+**提示**：如果您在任何步骤遇到困难，请告诉我具体在哪一步，我会提供更详细的指导。