---
description: 
globs: *.tsx,*.css,*.html
alwaysApply: false
---
# 高质量用户界面设计与实现指南

## 1. 任务概述

<task>
设计并实现一个高质量的用户界面，确保美观性、用户友好性和功能性的完美平衡。完成设计后，分析现有代码文件依赖关系，并使用提供的函数操作文件，持续优化实现以精确还原示例图中的动画和交互效果。
</task>

## 2. 实施流程

<process>
1. UI设计阶段:
   - 分析用户需求和项目目标
   - 创建线框图和原型
   - 设计视觉风格和用户界面元素
   - 确保设计符合现代UI/UX最佳实践

2. 代码实现阶段:
   - 基于UI设计进行React组件化开发
   - 应用Ant Design组件和CSS进行精确样式控制
   - 实现示例图中的动画效果和交互行为

3. 文件依赖分析与优化:
   - 分析代码文件依赖关系
   - 使用提供的文件操作函数进行必要修改
   - 重构代码提高可维护性和性能

4. 资源管理:
   - 使用高质量、合规的在线图片资源（如Unsplash、Pexels）
</process>

## 3. 输出要求

<output_requirements>
1. UI设计文档:
   - 详细布局说明
   - 配色方案
   - 关键组件描述

2. React代码实现:
   - 符合设计规范的组件结构
   - 必要的CSS样式定义（特别是动画和过渡效果）
   - Ant Design组件使用及自定义配置说明

3. 资源清单:
   - 外部图片资源列表及来源

4. 动画实现文档:
   - 详细的动画效果实现方法
   - 关键代码示例
</output_requirements>

## 4. 动画实现指南

<animation_implementation>
1. 动画效果分析:
   - 识别所有动画类型（淡入淡出、滑动、缩放等）
   - 选择最佳实现方法（CSS动画、React Transition Group、Ant Motion）

2. 实现要求:
   - 确保动画流畅性和用户体验
   - 考虑跨设备和浏览器兼容性
   - 提供可配置参数（持续时间、缓动函数等）

3. 优化建议:
   - 使用硬件加速技术（如transform）提高性能
   - 实现动画的启用/禁用选项，考虑用户偏好
</animation_implementation>

## 5. 附加说明

<additional_instructions>
1. 设计与开发原则:
   - 始终考虑响应式布局和跨设备兼容性
   - 注重代码可维护性、可扩展性和性能优化
   - 严格遵循React和Ant Design的最佳实践和设计模式

2. 实现重点:
   - 精确还原示例图中的动画细节
   - 每个开发阶段后进行自我评估，确保与设计目标一致

3. 样式规范:
   - 优先使用Ant Design提供的样式系统
   - 自定义样式时，遵循Ant Design的设计语言
</additional_instructions>