前端开发提效：用AI一键生成高复用React组件
提示词描述：
专为前端开发者设计的React组件生成提示词。通过结构化输入，AI可快速输出包含TypeScript类型定义、Hooks最佳实践及边界处理的完整组件代码，大幅减少样板代码编写时间。
提示语关键词：
AI写代码, React组件开发, 前端提示词, AI生成前端代码, TypeScript组件模板, ChatGPT写前端
提示词内容：
【应用场景】
在日常前端开发中，经常需要根据设计稿或产品需求快速构建可复用的UI组件。手动编写样板代码耗时且容易出错，使用AI辅助可以大幅提升组件开发效率，确保代码规范。
【案例描述】
假设需要开发一个带有分页和搜索功能的“用户数据表格”组件。传统方式需要手写状态管理、API请求、防抖搜索等逻辑。通过本提示词，AI能直接生成基于TypeScript和Ant Design的完整组件代码，包含类型定义和边界情况处理。
【提示词正文】
你是一位资深前端架构师。请帮我编写一个高复用性的React组件。
组件名称：{组件名称}
核心功能：{核心功能}
技术栈与UI框架：{技术栈与UI框架}
特殊交互与边界要求：{特殊交互}
要求：
1. 使用TypeScript编写，提供完整的Props和State类型定义。
2. 遵循React Hooks最佳实践，合理拆分自定义Hook。
3. 包含必要的错误边界处理和Loading状态。
4. 代码需包含详细的中文注释，说明核心逻辑。
5. 给出该组件的使用示例代码。
【使用技巧】
在填写“特殊交互”时，尽量具体。例如不要只写“支持搜索”，而是写“支持输入防抖、回车搜索以及清空按钮”。越具体的约束，AI生成的代码越贴近生产环境。
【延伸用法】
生成代码后，可以让AI继续“为该组件编写Jest单元测试，覆盖核心交互和边界情况”，从而形成完整的组件开发闭环。