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
This commit is contained in:
richarjiang
385
CLAUDE.md
Normal file
385
CLAUDE.md
Normal file
@@ -0,0 +1,385 @@
|
||||
# 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密码管理器的设计一致性和技术可行性。
|
||||
Reference in New Issue
Block a user