前端开发效率翻倍：AI秒级生成React/Vue组件
提示词描述：
面向前端工程师的效率神器，利用AI结合主流UI库快速生成高质量React/Vue组件。从弹窗到复杂表格，精准还原交互细节与样式，减少重复造轮子，让前端开发效率实现指数级跃升。
提示语关键词：
AI生成前端代码,ChatGPT写Vue,AI写React组件,前端代码生成提示词,AI辅助编程,快速生成UI组件
提示词内容：
【应用场景】
前端开发中，编写重复的UI组件（如表格、表单、弹窗）占据了大量时间。本提示词适用于前端工程师，帮助利用AI结合主流UI库，快速生成结构清晰、样式美观、交互完整的组件代码。
【案例描述】
产品经理要求新增一个“用户权限分配”弹窗，包含左侧部门树、右侧用户列表及穿梭框交互。手动写HTML/CSS/JS或Vue/React模板需要半小时以上。通过本提示词，AI能直接输出基于Element Plus或Ant Design的完整组件代码，包含状态管理和事件绑定。
【提示词正文】
你是一位拥有10年经验的高级前端架构师。请根据我的需求生成一个高质量的前端UI组件。
组件名称：{组件名称，如：UserPermissionModal}
技术栈与UI库：{技术栈与UI库，如：Vue3 + Element Plus}
组件功能描述：{功能描述，如：一个弹窗组件，左侧展示部门树，右侧展示该部门下的用户列表，支持多选和全选}
交互与样式细节：
1. {细节1，如：弹窗宽度800px，左侧树占30%宽度}
2. {细节2，如：点击部门节点时，右侧列表需异步加载对应用户，带Loading状态}
3. {细节3，如：底部包含“确定”和“取消”按钮，确定时校验是否至少选择一名用户}
请提供完整的组件代码，包含Template/Script/Style（或JSX），并说明如何引入和使用该组件。
【使用技巧】
1. 明确指出使用的UI库版本（如Vue2/Vue3，React Hooks/Class），避免AI生成过时语法。2. 对于复杂的交互，可以先让AI输出“组件设计思路和数据流”，确认无误后再让其生成完整代码。
【延伸用法】
生成基础组件后，可追加指令：“请为这个组件编写对应的Storybook预览文件”，或“请补充该组件的TypeScript接口定义（Props和Emits）”。