前端开发必备：AI秒生成创意UI组件代码
提示词描述：
专为前端开发者设计的创意组件生成提示词。通过设定角色和具体风格，引导AI输出带有详细注释和动画效果的前端代码，适合需要快速出原型或寻找UI灵感的开发者，大幅提升页面开发效率。
提示语关键词：
AI写代码,ChatGPT编程,前端代码生成,AI生成UI组件,React组件代码模板
提示词内容：
【使用场景】
当你需要快速构建一个具有独特视觉表现的前端组件，却苦于没有灵感或手写CSS太繁琐时，这个提示词能帮你激发创意并直接生成可用代码。
【操作步骤】
第一步：思考你要做的组件，比如一个“赛博朋克风格的倒计时器”。
第二步：将以下模板复制给AI，并替换大括号内的内容：
“你是一位资深前端创意开发者。请帮我编写一个 {组件名称} 的代码。设计要求是 {设计风格}，必须具备的核心功能是 {核心功能}。请提供完整的HTML/CSS/JS代码，并加上详细的中文注释，方便我学习。”
第三步：运行代码，如果效果不够惊艳，可以回复“请增加一些鼠标悬停的微交互动画”。
【效果示例】
AI会输出一个带有霓虹灯发光效果、数字跳动动画的倒计时器代码，结构清晰，直接复制即可在浏览器运行。
【进阶技巧】
建议每次只让AI生成一个核心功能，跑通后再通过对话叠加动画效果，这样代码的bug率最低哦！