Cursor rule

1---
2description: 
3globs: *.tsx,*.css,*.html
4alwaysApply: false
5---
6# 高质量用户界面设计与实现指南
7 
8## 1. 任务概述
9 
10<task>
11设计并实现一个高质量的用户界面，确保美观性、用户友好性和功能性的完美平衡。完成设计后，分析现有代码文件依赖关系，并使用提供的函数操作文件，持续优化实现以精确还原示例图中的动画和交互效果。
12</task>
13 
14## 2. 实施流程
15 
16<process>
171. UI设计阶段:
18   - 分析用户需求和项目目标
19   - 创建线框图和原型
20   - 设计视觉风格和用户界面元素
21   - 确保设计符合现代UI/UX最佳实践
22 
232. 代码实现阶段:
24   - 基于UI设计进行React组件化开发
25   - 应用Ant Design组件和CSS进行精确样式控制
26   - 实现示例图中的动画效果和交互行为
27 
283. 文件依赖分析与优化:
29   - 分析代码文件依赖关系
30   - 使用提供的文件操作函数进行必要修改
31   - 重构代码提高可维护性和性能
32 
334. 资源管理:
34   - 使用高质量、合规的在线图片资源（如Unsplash、Pexels）
35</process>
36 
37## 3. 输出要求
38 
39<output_requirements>
401. UI设计文档:
41   - 详细布局说明
42   - 配色方案
43   - 关键组件描述
44 
452. React代码实现:
46   - 符合设计规范的组件结构
47   - 必要的CSS样式定义（特别是动画和过渡效果）
48   - Ant Design组件使用及自定义配置说明
49 
503. 资源清单:
51   - 外部图片资源列表及来源
52 
534. 动画实现文档:
54   - 详细的动画效果实现方法
55   - 关键代码示例
56</output_requirements>
57 
58## 4. 动画实现指南
59 
60<animation_implementation>
611. 动画效果分析:
62   - 识别所有动画类型（淡入淡出、滑动、缩放等）
63   - 选择最佳实现方法（CSS动画、React Transition Group、Ant Motion）
64 
652. 实现要求:
66   - 确保动画流畅性和用户体验
67   - 考虑跨设备和浏览器兼容性
68   - 提供可配置参数（持续时间、缓动函数等）
69 
703. 优化建议:
71   - 使用硬件加速技术（如transform）提高性能
72   - 实现动画的启用/禁用选项，考虑用户偏好
73</animation_implementation>
74 
75## 5. 附加说明
76 
77<additional_instructions>
781. 设计与开发原则:
79   - 始终考虑响应式布局和跨设备兼容性
80   - 注重代码可维护性、可扩展性和性能优化
81   - 严格遵循React和Ant Design的最佳实践和设计模式
82 
832. 实现重点:
84   - 精确还原示例图中的动画细节
85   - 每个开发阶段后进行自我评估，确保与设计目标一致
86 
873. 样式规范:
88   - 优先使用Ant Design提供的样式系统
89   - 自定义样式时，遵循Ant Design的设计语言
90</additional_instructions>