b5d4724d06
- 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
385 lines
9.2 KiB
Markdown
385 lines
9.2 KiB
Markdown
# AI密码管理器 - Figma设计系统集成规则
|
||
|
||
## 项目概述
|
||
|
||
这是一个基于React Native Expo的AI驱动密码管理器项目，需要与Figma设计系统无缝集成。
|
||
|
||
## 设计系统结构
|
||
|
||
### 1. Token定义
|
||
|
||
#### 颜色令牌 (Colors)
|
||
位置：[`constants/Colors.ts`](constants/Colors.ts)
|
||
|
||
当前结构：
|
||
```typescript
|
||
export const Colors = {
|
||
light: {
|
||
text: '#11181C',
|
||
background: '#fff',
|
||
tint: '#0a7ea4',
|
||
icon: '#687076',
|
||
tabIconDefault: '#687076',
|
||
tabIconSelected: '#0a7ea4',
|
||
},
|
||
dark: {
|
||
text: '#ECEDEE',
|
||
background: '#151718',
|
||
tint: '#fff',
|
||
icon: '#9BA1A6',
|
||
tabIconDefault: '#9BA1A6',
|
||
tabIconSelected: '#fff',
|
||
},
|
||
};
|
||
```
|
||
|
||
**需要扩展为AI密码管理器的完整颜色系统：**
|
||
```typescript
|
||
export const Colors = {
|
||
// 主色调
|
||
primary: {
|
||
50: '#f0f9ff',
|
||
100: '#e0f2fe',
|
||
500: '#0ea5e9', // 主色
|
||
600: '#0284c7',
|
||
900: '#0c4a6e',
|
||
},
|
||
// AI渐变色
|
||
ai: {
|
||
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', // 深红 - 严重
|
||
},
|
||
// 功能色
|
||
success: '#10b981',
|
||
warning: '#f59e0b',
|
||
error: '#ef4444',
|
||
info: '#3b82f6',
|
||
// 中性色
|
||
gray: {
|
||
50: '#f9fafb',
|
||
100: '#f3f4f6',
|
||
500: '#6b7280',
|
||
900: '#111827',
|
||
},
|
||
// 暗色模式
|
||
dark: {
|
||
background: {
|
||
primary: '#000000',
|
||
secondary: '#1c1c1e',
|
||
tertiary: '#2c2c2e',
|
||
},
|
||
text: {
|
||
primary: '#ffffff',
|
||
secondary: '#ebebf5',
|
||
tertiary: '#ebebf599',
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
#### 字体令牌 (Typography)
|
||
需要在 `constants/` 目录下创建 `Typography.ts`：
|
||
|
||
```typescript
|
||
export const 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)
|
||
需要创建 `constants/Spacing.ts`：
|
||
|
||
```typescript
|
||
export const Spacing = {
|
||
xs: 4,
|
||
sm: 8,
|
||
md: 16,
|
||
lg: 24,
|
||
xl: 32,
|
||
'2xl': 48,
|
||
'3xl': 64,
|
||
'4xl': 80,
|
||
'5xl': 96,
|
||
};
|
||
```
|
||
|
||
### 2. 组件库
|
||
|
||
#### 当前组件结构
|
||
位置：[`components/`](components/)
|
||
|
||
现有组件：
|
||
- [`ThemedText.tsx`](components/ThemedText.tsx) - 主题化文本组件
|
||
- [`ThemedView.tsx`](components/ThemedView.tsx) - 主题化视图组件
|
||
- [`ui/`](components/ui/) - UI基础组件
|
||
|
||
**需要扩展的AI密码管理器组件：**
|
||
|
||
```
|
||
components/
|
||
├── ui/ # 基础UI组件
|
||
│ ├── Button.tsx # 按钮组件 (Primary/Secondary/AI)
|
||
│ ├── Input.tsx # 输入框 (Text/Password/Search)
|
||
│ ├── Card.tsx # 卡片组件
|
||
│ ├── Badge.tsx # 徽章组件
|
||
│ ├── Progress.tsx # 进度组件
|
||
│ ├── Switch.tsx # 开关组件
|
||
│ └── Loading.tsx # 加载组件
|
||
├── password/ # 密码相关组件
|
||
│ ├── PasswordEntryCard.tsx
|
||
│ ├── PasswordStrengthIndicator.tsx
|
||
│ └── SecurityScoreCard.tsx
|
||
├── ai/ # AI功能组件
|
||
│ ├── AIAssistantCard.tsx
|
||
│ ├── AIBadge.tsx
|
||
│ └── AISearchBar.tsx
|
||
└── navigation/ # 导航组件
|
||
├── TopNavigation.tsx
|
||
└── TabBar.tsx
|
||
```
|
||
|
||
#### 组件架构模式
|
||
使用React Native + TypeScript + 主题化设计：
|
||
|
||
```typescript
|
||
// 示例：Button组件
|
||
interface ButtonProps {
|
||
variant: 'primary' | 'secondary' | 'ai';
|
||
size: 'sm' | 'md' | 'lg';
|
||
disabled?: boolean;
|
||
loading?: boolean;
|
||
onPress: () => void;
|
||
children: React.ReactNode;
|
||
}
|
||
|
||
export const Button: React.FC<ButtonProps> = ({
|
||
variant,
|
||
size,
|
||
disabled,
|
||
loading,
|
||
onPress,
|
||
children
|
||
}) => {
|
||
// 实现逻辑
|
||
};
|
||
```
|
||
|
||
### 3. 框架和库
|
||
|
||
#### UI框架
|
||
- **React Native**: 0.79.5
|
||
- **Expo**: SDK 53
|
||
- **React**: 19.0.0
|
||
|
||
#### 样式库
|
||
- **React Native StyleSheet**: 原生样式系统
|
||
- **React Native Reanimated**: 3.17.4 (动画)
|
||
- **React Native Gesture Handler**: 2.24.0 (手势)
|
||
|
||
#### 路由系统
|
||
- **Expo Router**: 5.1.4 (基于文件系统的路由)
|
||
|
||
### 4. 资源管理
|
||
|
||
#### 图片和图标
|
||
位置：[`assets/`](assets/)
|
||
|
||
当前结构：
|
||
```
|
||
assets/
|
||
├── images/
|
||
│ ├── icon.png
|
||
│ ├── splash-icon.png
|
||
│ └── favicon.png
|
||
└── fonts/
|
||
└── SpaceMono-Regular.ttf
|
||
```
|
||
|
||
**需要扩展为：**
|
||
```
|
||
assets/
|
||
├── images/
|
||
│ ├── app-icons/ # 应用图标
|
||
│ ├── website-icons/ # 网站图标
|
||
│ └── illustrations/ # 插画素材
|
||
├── icons/
|
||
│ ├── security/ # 安全相关图标
|
||
│ ├── ai/ # AI功能图标
|
||
│ └── ui/ # 界面图标
|
||
└── fonts/ # 字体文件
|
||
```
|
||
|
||
#### 图标系统
|
||
使用 **Expo Vector Icons** (@expo/vector-icons):
|
||
|
||
```typescript
|
||
import { Ionicons, MaterialIcons } from '@expo/vector-icons';
|
||
|
||
// AI图标示例
|
||
<Ionicons name="robot" size={24} color={Colors.ai.primary} />
|
||
// 安全图标示例
|
||
<MaterialIcons name="security" size={24} color={Colors.security.high} />
|
||
```
|
||
|
||
### 5. 样式方法
|
||
|
||
#### React Native StyleSheet
|
||
```typescript
|
||
import { StyleSheet } from 'react-native';
|
||
import { Colors, Typography, Spacing } from '@/constants';
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
backgroundColor: Colors.light.background,
|
||
padding: Spacing.md,
|
||
},
|
||
title: {
|
||
fontSize: Typography.fontSize['2xl'],
|
||
fontWeight: Typography.fontWeight.bold,
|
||
color: Colors.light.text,
|
||
},
|
||
});
|
||
```
|
||
|
||
#### 主题化组件模式
|
||
基于现有的 `useThemeColor` hook：
|
||
|
||
```typescript
|
||
import { useThemeColor } from '@/hooks/useThemeColor';
|
||
|
||
export function ThemedButton({ lightColor, darkColor, ...props }) {
|
||
const backgroundColor = useThemeColor(
|
||
{ light: lightColor, dark: darkColor },
|
||
'tint'
|
||
);
|
||
|
||
return (
|
||
<Pressable style={[{ backgroundColor }, styles.button]} {...props} />
|
||
);
|
||
}
|
||
```
|
||
|
||
### 6. 项目结构
|
||
|
||
#### 当前结构
|
||
```
|
||
ai-password-manager/
|
||
├── app/ # Expo Router页面
|
||
│ ├── (tabs)/ # 标签页面
|
||
│ └── _layout.tsx # 根布局
|
||
├── components/ # 可复用组件
|
||
├── constants/ # 常量和令牌
|
||
├── hooks/ # 自定义Hooks
|
||
├── assets/ # 静态资源
|
||
└── src/ # 源代码 (待扩展)
|
||
```
|
||
|
||
**建议的完整结构：**
|
||
```
|
||
ai-password-manager/
|
||
├── app/ # Expo Router页面
|
||
│ ├── (auth)/ # 认证页面
|
||
│ ├── (tabs)/ # 主要功能页面
|
||
│ │ ├── index.tsx # Dashboard
|
||
│ │ ├── vault.tsx # 密码库
|
||
│ │ ├── ai-assistant.tsx # AI助手
|
||
│ │ └── settings.tsx # 设置
|
||
│ └── modal/ # 模态页面
|
||
├── src/
|
||
│ ├── components/ # 组件库
|
||
│ ├── services/ # 业务服务
|
||
│ │ ├── api/ # API调用
|
||
│ │ ├── crypto/ # 加密服务
|
||
│ │ ├── biometric/ # 生物识别
|
||
│ │ └── ai/ # AI功能
|
||
│ ├── stores/ # 状态管理
|
||
│ ├── utils/ # 工具函数
|
||
│ ├── types/ # TypeScript类型
|
||
│ └── hooks/ # 自定义Hooks
|
||
├── constants/ # 设计令牌
|
||
├── assets/ # 静态资源
|
||
└── docs/ # 设计文档
|
||
```
|
||
|
||
## Figma集成规则
|
||
|
||
### 1. 设计令牌同步
|
||
- Figma中的颜色样式 → `constants/Colors.ts`
|
||
- Figma中的文字样式 → `constants/Typography.ts`
|
||
- Figma中的效果样式 → `constants/Effects.ts`
|
||
|
||
### 2. 组件映射
|
||
- Figma组件 → React Native组件
|
||
- 组件变体 → TypeScript接口属性
|
||
- 组件状态 → 组件props
|
||
|
||
### 3. 资源导出
|
||
- 图标：SVG格式 → `assets/icons/`
|
||
- 图片：PNG @1x/@2x/@3x → `assets/images/`
|
||
- 字体：TTF/OTF → `assets/fonts/`
|
||
|
||
### 4. 代码生成规则
|
||
使用Figma MCP工具生成的代码应该：
|
||
- 使用设计令牌而非硬编码值
|
||
- 遵循React Native最佳实践
|
||
- 包含TypeScript类型定义
|
||
- 支持主题切换
|
||
|
||
### 5. AI元素特殊处理
|
||
- AI渐变：使用`react-native-linear-gradient`
|
||
- AI动画：使用`react-native-reanimated`
|
||
- AI发光效果：使用`shadowColor`和`elevation`
|
||
|
||
## 开发工作流
|
||
|
||
### 1. 设计阶段
|
||
1. 在Figma中创建设计
|
||
2. 使用统一的设计令牌
|
||
3. 创建组件变体和状态
|
||
|
||
### 2. 开发阶段
|
||
1. 使用Figma MCP工具获取设计
|
||
2. 生成React Native代码
|
||
3. 集成到项目组件库
|
||
|
||
### 3. 测试阶段
|
||
1. 在不同设备尺寸测试
|
||
2. 验证暗色模式适配
|
||
3. 检查无障碍功能
|
||
|
||
这个规则文档确保了Figma设计与React Native代码的完美集成，同时保持了AI密码管理器的设计一致性和技术可行性。 |