前端创意动画组件怎么选？React与Vue代码生成对比评测
提示词描述：
专为前端开发者设计的创意代码生成提示词。通过对比React和Vue生态下的主流动画库，帮助开发者快速选型，并利用AI生成包含手势交互、状态管理的高性能动画组件代码，大幅提升创意交互开发效率。
提示语关键词：
AI写代码,前端开发,React动画,Vue组件,ChatGPT提示词,代码生成模板,前端交互设计
提示词内容：
【需求分析】
在开发Web端创意交互（如3D卡片翻转、粒子跟随效果）时，开发者常面临动画库选择困难，且手动编写复杂贝塞尔曲线和状态管理代码耗时费力。本提示词旨在通过AI对比不同框架，生成最优的创意动画代码。
【方法对比】
1. React生态：采用Framer Motion，优势在于声明式API和与React状态无缝集成，适合复杂组件级动画；劣势是包体积稍大。
2. Vue生态：采用VueUse/Motion，优势是组合式API契合Vue3逻辑复用，轻量且性能好；劣势是高级物理动画支持略逊一筹。
【推荐方案】
若项目为React且需复杂手势交互，推荐Framer Motion；若为Vue3且追求极致轻量，推荐VueUse。请使用以下提示词模板让AI生成代码：
“你是一个资深前端创意开发专家。我需要实现一个{填写具体动画效果，如：鼠标跟随的3D磁吸卡片}。请对比{填写技术栈，如：React Framer Motion}和{填写备选技术栈，如：Vue VueUse}的实现方案，并推荐最适合当前场景的方案。接着，请提供推荐方案的完整代码，包含详细的注释和性能优化建议。”
【使用步骤】
1. 明确你的项目基础技术栈（React或Vue）。
2. 将上述模板中的{填写}替换为具体需求。
3. 将提示词发送给AI，获取对比分析与代码。
4. 将生成的代码复制到项目中，根据AI的“性能优化建议”调整细节。
【效果展示】
AI将输出类似如下的核心代码结构：
```javascript
import { motion, useMotionValue, useTransform } from 'framer-motion';
export const MagneticCard = () => {
const x = useMotionValue(0);
const y = useMotionValue(0);
// 磁吸逻辑与transform配置
}
```