AI代码生成器：一键构建{技术栈}前端组件
提示词描述：
适用于前端开发者快速生成高质量可复用组件，特别适合需要标准化代码输出的团队。通过结构化参数输入，可精准控制代码架构与性能指标。建议搭配ESLint规则使用，生成代码可直接接入CI/CD流程。掌握此模板可缩短60%组件开发周期，同时保证代码质量符合企业级标准。
提示语关键词：
AI代码生成,前端开发提示词,React组件模板,TypeScript代码生成,虚拟滚动实现,CSS-in-JS方案
提示词内容：
你是资深前端架构师，请根据以下参数生成可直接投产的组件代码：技术栈为{技术栈}，组件功能描述为{功能描述}，需兼容{浏览器版本}。请严格遵循以下规范：1. 采用模块化架构，分离UI逻辑与状态管理；2. 实现响应式布局，使用CSS Grid/Flexbox替代浮动方案；3. 包含完整的TypeScript类型定义及Props校验；4. 集成错误边界处理与加载状态指示器；5. 输出代码需包含单元测试用例框架。请特别注意：避免使用内联样式，优先采用CSS-in-JS方案；状态管理需区分本地状态与全局状态；事件处理函数必须使用useCallback优化渲染性能。示例输入：技术栈=React18+TailwindCSS，功能描述=带虚拟滚动的数据表格，浏览器版本=Chrome 90+。输出时请按以下顺序组织：1. 组件核心代码 2. 样式文件 3. 测试用例模板 4. 性能优化说明