别再熬夜写CSS了！AI一键生成React组件模板
提示词描述：
专为前端开发者打造的UI组件生成提示词。适合赶项目或搭Demo时使用，通过结构化填空快速输出高质量React/Vue代码。掌握具体参数填写技巧，AI生成的代码基本可直接复用，大幅缩短开发周期。
提示语关键词：
AI生成代码, ChatGPT编程, React组件提示词, AI前端开发, GPT写网页, 前端代码模板
提示词内容：
【模板说明】
嘿，朋友！是不是每次写前端UI都感觉在跟CSS死磕，调个边距能掉一把头发？这个模板就是专门来救场的。你只需要把需求像填空一样塞进去，AI就能直接吐出一段干净利落的组件代码，连样式和逻辑都帮你理得明明白白，省下的时间喝杯咖啡、早点下班不香吗？
【使用场景】
特别适合前端赶项目进度、做公司内部管理系统页面，或者刚学编程想快速搭个Demo的时候用。不管你是用Vue还是React，这套逻辑都通吃，主打一个“开箱即用”。
【模板正文】
请扮演拥有十年经验的前端架构师。帮我生成一个基于{填写技术栈}的UI组件。具体需求如下：
1. 核心功能：{填写功能需求}
2. 视觉风格：{填写UI风格}
3. 交互细节：{填写特殊交互}
4. 代码规范：保持高内聚低耦合，添加必要的TypeScript类型定义，并预留好扩展接口。请直接输出完整可运行的代码块，不需要额外废话。
【填写指南】
跟你掏心窝子说，填的时候千万别太“玄学”！比如“UI风格”别写“大气点”，直接换成“浅灰底色+16px圆角+hover时轻微上浮阴影”；“技术栈”务必写清“React 18 + TypeScript + TailwindCSS”。你给的条件越具体，AI生成的代码就越贴近你的项目规范，基本复制粘贴就能跑。
【效果示例】
假如你填了“数据筛选下拉框”、“商务深蓝配色”、“选中后自动触发API请求”，AI会秒回一个结构完整的tsx文件。里面包含了状态管理、防抖处理、以及完美的样式隔离，连错误边界都给你写好了，直接就能塞进项目里，真的巨省心！