告别手写UI！AI一键生成高可用前端组件模板
提示词描述：
专为前端开发者设计的高效组件生成模板，覆盖React/Vue等主流框架。适用于后台管理系统、电商页面及数据看板搭建，内置响应式、类型安全与性能优化约束。通过结构化填空，AI可输出生产级代码、调用示例及依赖说明，显著缩短UI开发周期，提升代码可维护性。
提示语关键词：
AI编程, ChatGPT写代码, 前端组件生成, AI生成React组件, TailwindCSS代码模板, AI辅助前端开发, 虚拟滚动实现提示词
提示词内容：
【模板说明】本模板专为快速构建标准化前端UI组件设计，通过明确角色定位、框架约束与工程规范，引导AI输出可直接投入生产环境的代码。内置响应式布局、无障碍访问（A11y）及组件复用性检查逻辑，大幅降低重复劳动。
【使用场景】适用于前端开发工程师、独立开发者或产品原型设计师，需快速搭建后台管理系统、电商列表页、数据可视化看板或移动端H5页面时。全面支持React/Vue/Svelte等主流框架及各类CSS方案。
【模板正文】你是一名资深{填写: 前端框架}工程师。请根据以下需求生成生产级组件代码：
- 组件名称：{填写: 组件名，如ProductCard/DataGrid}
- 核心功能：{填写: 功能描述，如支持虚拟滚动/拖拽排序/动态表单}
- 样式库：{填写: CSS方案，如TailwindCSS/CSS Modules/Styled-components}
- 交互逻辑：{填写: 交互要求，如点击展开、表单校验、防抖节流、懒加载}
- 类型安全：{填写: 是否启用TypeScript及严格模式}
输出要求：
1. 提供完整代码，包含Props定义、状态管理（Hooks/Composition API）、事件处理与生命周期。
2. 严格遵循响应式设计原则，适配移动端与桌面端断点。
3. 添加必要的JSDoc/TS类型注释与关键业务逻辑中文注释。
4. 附带父组件调用示例、依赖安装命令及简要的测试用例结构。
【填写指南】1. 前端框架建议明确版本，如Vue3或React18+，避免语法歧义。2. 功能描述需具体量化，避免“美观”“流畅”等主观词，改用“支持骨架屏加载、hover显示操作浮层”。3. 样式库需注明是否使用原子类或预处理器。4. 交互逻辑可补充边界情况，如“网络异常时显示重试按钮、输入框聚焦时自动滚动至可视区”。
【效果示例】输入：框架React，组件名OrderTable，功能带分页与列筛选的数据表格，样式Tailwind，交互虚拟滚动+行内编辑，类型安全TS。AI将输出基于TanStack Table封装的组件，包含自定义Hooks处理数据请求、完整的Tailwind响应式类名、useMemo优化渲染性能，以及带类型推断的Props接口。附带Mock数据生成脚本，开箱即用，直接集成至项目。