---
description: 设计稿像素级精度和视觉规范
globs: ["**/*.vue", "**/*.css", "**/*.scss", "**/components/**/*"]
alwaysApply: false
---

# 设计稿像素级精度规范

## 🎯 像素级精度要求

### 设计稿标注规范
```css
/* ✅ 严格按照设计稿标注的精确数值 */
.card {
  width: 320px;           /* 设计稿标注宽度 */
  height: 240px;          /* 设计稿标注高度 */
  padding: 24px 16px;     /* 设计稿标注内边距 */
  border-radius: 8px;     /* 设计稿标注圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 设计稿标注阴影 */
  font-size: 14px;        /* 设计稿标注字体大小 */
  line-height: 1.5;       /* 设计稿标注行高 */
  margin: 16px 0;         /* 设计稿标注外边距 */
}

/* ❌ 错误示例 - 随意调整数值 */
.card {
  width: 300px;  /* 偏差过大，不符合设计稿 */
  height: 250px; /* 偏差过大，不符合设计稿 */
  padding: 20px; /* 不符合设计稿标注 */
}
```

### 误差控制标准
```typescript
// ✅ 误差控制函数
const validateDesignAccuracy = (actual: number, design: number): boolean => {
  const tolerance = 2; // 允许2px误差
  return Math.abs(actual - design) <= tolerance;
};

// ✅ 设计稿数值验证
const designSpecs = {
  cardWidth: 320,
  cardHeight: 240,
  padding: 24,
  borderRadius: 8,
  fontSize: 14,
};

// 验证实现
const isValidCard = validateDesignAccuracy(actualWidth, designSpecs.cardWidth);
```

## 🎨 颜色规范

### 精确色值使用
```css
/* ✅ 严格使用设计稿提供的色值 */
:root {
  /* 主色调 - 从设计稿获取 */
  --primary-50: #fef7f0;
  --primary-100: #fdeee1;
  --primary-200: #fbdcc3;
  --primary-300: #f8c9a5;
  --primary-400: #f5b687;
  --primary-500: #ff6b35;  /* 主色 */
  --primary-600: #e55a2b;
  --primary-700: #cc4921;
  --primary-800: #b33817;
  --primary-900: #7c2d12;
  
  /* 中性色 - 从设计稿获取 */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* 语义化颜色 */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
}

/* ✅ 使用精确色值 */
.button-primary {
  background-color: var(--primary-500); /* #ff6b35 */
  color: white;
}

.button-secondary {
  background-color: var(--gray-100); /* #f3f4f6 */
  color: var(--gray-900); /* #111827 */
}
```

### 多格式色值支持
```css
/* ✅ 支持多种色值格式 */
.color-examples {
  /* HEX 格式 */
  color: #ff6b35;
  
  /* RGB 格式 */
  background-color: rgb(255, 107, 53);
  
  /* RGBA 格式 */
  border-color: rgba(255, 107, 53, 0.8);
  
  /* HSL 格式 */
  box-shadow: 0 0 0 1px hsl(14, 100%, 60%);
}
```

## 📝 字体规范

### 字体族设置
```css
/* ✅ 严格按照设计稿字体规范 */
body {
  font-family: 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    'PingFang SC', 
    'Hiragino Sans GB', 
    'Microsoft YaHei', 
    'Helvetica Neue', 
    Helvetica, 
    Arial, 
    sans-serif;
}

/* ✅ 字体大小层级 */
.text-xs { 
  font-size: 12px; 
  line-height: 16px; 
}

.text-sm { 
  font-size: 14px; 
  line-height: 20px; 
}

.text-base { 
  font-size: 16px; 
  line-height: 24px; 
}

.text-lg { 
  font-size: 18px; 
  line-height: 28px; 
}

.text-xl { 
  font-size: 20px; 
  line-height: 28px; 
}

.text-2xl { 
  font-size: 24px; 
  line-height: 32px; 
}

.text-3xl { 
  font-size: 30px; 
  line-height: 36px; 
}
```

### 字重规范
```css
/* ✅ 字重使用标准数值 */
.font-light { font-weight: 300; }    /* Light */
.font-normal { font-weight: 400; }   /* Regular */
.font-medium { font-weight: 500; }   /* Medium */
.font-semibold { font-weight: 600; } /* Semibold */
.font-bold { font-weight: 700; }     /* Bold */
```

## 📐 间距系统

### 8px 栅格系统
```css
/* ✅ 使用 8px 栅格系统 */
.spacing-system {
  /* 基础间距单位 */
  --space-1: 4px;   /* 0.5 * 8px */
  --space-2: 8px;   /* 1 * 8px */
  --space-3: 12px;  /* 1.5 * 8px */
  --space-4: 16px;  /* 2 * 8px */
  --space-5: 20px;  /* 2.5 * 8px */
  --space-6: 24px;  /* 3 * 8px */
  --space-8: 32px;  /* 4 * 8px */
  --space-10: 40px; /* 5 * 8px */
  --space-12: 48px; /* 6 * 8px */
  --space-16: 64px; /* 8 * 8px */
  --space-20: 80px; /* 10 * 8px */
  --space-24: 96px; /* 12 * 8px */
}

/* ✅ 应用间距 */
.card {
  padding: var(--space-6);     /* 24px */
  margin-bottom: var(--space-4); /* 16px */
}

.button {
  padding: var(--space-2) var(--space-4); /* 8px 16px */
}
```

## 🎯 设计稿工具集成

### Figma 开发者模式
```typescript
// ✅ 从 Figma 获取设计令牌
interface DesignTokens {
  colors: {
    primary: {
      50: string;
      500: string;
      900: string;
    };
    gray: {
      50: string;
      500: string;
      900: string;
    };
  };
  spacing: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
  };
  typography: {
    fontSizes: {
      xs: string;
      sm: string;
      base: string;
      lg: string;
      xl: string;
    };
    fontWeights: {
      normal: number;
      medium: number;
      semibold: number;
      bold: number;
    };
  };
}

// ✅ 设计令牌配置
const designTokens: DesignTokens = {
  colors: {
    primary: {
      50: '#fef7f0',
      500: '#ff6b35',
      900: '#7c2d12',
    },
    gray: {
      50: '#f9fafb',
      500: '#6b7280',
      900: '#111827',
    },
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },
  typography: {
    fontSizes: {
      xs: '12px',
      sm: '14px',
      base: '16px',
      lg: '18px',
      xl: '20px',
    },
    fontWeights: {
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
    },
  },
};
```

## 🎯 像素级精度最佳实践

### 必需配置项
- ✅ 误差控制在 2px 以内
- ✅ 严格使用设计稿提供的色值
- ✅ 按照设计稿字体规范设置
- ✅ 使用 8px 栅格系统
- ✅ 集成设计工具获取精确数值

### 参考文件
- `styles/design-tokens.css` - 设计令牌文件
- `components/BaseCard.vue` - 卡片组件示例
- `utils/design-validation.ts` - 设计验证工具