前端开发必备：AI一键生成创意UI组件代码
提示词描述：
专为前端开发者设计的UI组件生成提示词。通过明确技术栈、核心功能、视觉交互与代码规范，让AI直接输出符合工程级标准、具备响应式与动画效果的TypeScript前端组件，告别重复性基础编码。
提示语关键词：
AI写代码,前端开发,AI生成前端代码,前端组件代码模板,ChatGPT写Vue,React组件生成
提示词内容：
【模板说明】
本模板用于将抽象的UI设计需求转化为高质量的前端组件代码。通过结构化输入，AI能精准输出符合现代前端框架规范、具备良好响应式和动画效果的创意组件代码，减少重复造轮子。
【使用场景】
适用于前端开发工程师、独立开发者或UI设计师。当需要快速实现创意卡片、动态按钮、复杂表单或数据可视化图表组件时，使用此模板可跳过基础编码，直接获取可运行的工程级代码，大幅提升开发效率。
【模板正文】
角色：资深前端架构师与UI/UX专家。
任务：根据我提供的组件需求，生成高质量的前端代码。
技术栈：[填写框架，如React/Vue3] + [填写UI库，如TailwindCSS/AntDesign]。
组件名称：[填写组件英文名，如CreativePricingCard]。
核心功能：
1. [功能1，如：支持明暗主题切换，状态持久化到localStorage]
2. [功能2，如：鼠标悬停时产生3D倾斜效果，跟随鼠标坐标]
3. [功能3，如：内置骨架屏加载状态，支持异步数据模拟]
视觉与交互要求：
- 布局：[如：Flex/Grid，响应式断点设置，移动端优先]
- 动画：[如：使用CSS transition，时长300ms，缓动函数ease-in-out]
- 配色：[如：主色调#4F46E5，背景色#F9FAFB，支持CSS变量]
代码规范：
- 必须包含完整的TypeScript类型定义，禁止使用any。
- 组件需拆分为合理的子组件（若代码超过200行）。
- 添加必要的注释说明核心逻辑与复杂计算。
- 确保无障碍访问（a11y）标准，如正确的ARIA标签和键盘导航支持。
- 包含基础的错误边界处理（Error Boundary）。
【填写指南】
1. 技术栈：明确指定框架和样式库，避免AI自由发挥导致依赖冲突或引入冷门库。
2. 核心功能：尽量使用动宾短语描述，如'实现拖拽排序'而非简单的'拖拽'，越具体越好。
3. 视觉要求：提供具体的十六进制颜色代码或设计系统Token，避免AI使用默认丑陋配色。
4. 代码规范：强调TypeScript和无障碍访问，可显著提升AI输出代码的工程质量。
【效果示例】
输入：React + TailwindCSS，组件名：GlassmorphismButton，功能：点击产生水波纹，悬停发光。视觉：毛玻璃背景，圆角12px。
输出：AI将输出包含framer-motion水波纹逻辑、Tailwind backdrop-blur类名、完整Props类型定义的React函数组件代码，并附带使用示例与样式覆盖说明。