前端提效神器：用AI快速生成企业级复杂交互组件
提示词描述：
专为前端开发者打造，解决复杂UI组件开发效率低下的痛点。通过明确技术栈、交互细节和设计规范，引导AI生成视图与逻辑分离、符合企业级标准的高质量前端组件代码。
提示语关键词：
AI前端开发, AI写前端代码, 前端组件生成, React组件提示词, Vue代码生成, 复杂表单AI
提示词内容：
【应用场景】
前端开发中需要构建具有高交互性、响应式且严格符合UI设计规范的复杂组件（如数据大屏、千行级复杂表单、自定义图表），纯手工编写耗时且难以保证像素级还原。
【案例描述】
开发一个支持拖拽排序、虚拟滚动和实时正则校验的千行级数据表格组件，需兼容主流浏览器并支持暗黑模式切换。
【提示词正文】
你是一位资深前端架构师，精通组件化设计与性能优化。请帮我开发以下前端组件：
{组件功能需求}
技术规范：
1. 技术栈：{UI框架/技术栈，如：React 18 + TypeScript + TailwindCSS}
2. 交互细节：{交互细节要求，如：拖拽防抖、滚动节流}。
3. 设计要求：严格遵循{设计规范/设计系统名称}，支持响应式布局。
输出要求：
1. 将视图（UI）与逻辑（State/Hooks）严格分离。
2. 提供完整的组件代码及Props类型定义。
3. 说明该组件的性能优化点（如虚拟列表原理）。
【使用技巧】
在提示词中尽量提供详细的CSS规范或Figma设计稿的截图描述。要求AI遵循“单一职责原则”，如果一个组件过于复杂，让AI先拆分出子组件结构，再逐个生成代码。
【延伸用法】
让AI为该组件生成Storybook的交互文档（Stories），或者生成该组件在不同屏幕尺寸下的响应式CSS媒体查询代码。