ai-password-manager/CLAUDE.md

AI密码管理器 - Figma设计系统集成规则

项目概述

这是一个基于React Native Expo的AI驱动密码管理器项目，需要与Figma设计系统无缝集成。

设计系统结构

1. Token定义

颜色令牌 (Colors)

位置：constants/Colors.ts

当前结构：

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密码管理器的完整颜色系统：

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：

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：

export const Spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  '2xl': 48,
  '3xl': 64,
  '4xl': 80,
  '5xl': 96,
};

2. 组件库

当前组件结构

位置：components/

现有组件：

• ThemedText.tsx - 主题化文本组件
• ThemedView.tsx - 主题化视图组件
• 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 + 主题化设计：

// 示例：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/
├── 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):

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

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：

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密码管理器的设计一致性和技术可行性。