AI UI组件提示词：一键生成响应式设计
提示词描述：
适用于需要快速构建现代化UI组件的前端开发者，支持React/Vue/Angular等主流框架。通过结构化提示词可获得符合行业标准的响应式组件，内置无障碍访问与性能优化方案。建议配合Figma设计稿使用，将标注参数填入占位符即可生成可直接集成的生产级代码。
提示语关键词：
AI代码生成,UI组件开发,响应式设计,React组件生成,前端框架模板,无障碍访问实现,CSS变量应用
提示词内容：
你是资深前端架构师，请基于{组件类型}需求生成{框架}代码。首先分析组件的交互逻辑与视觉层级，输出符合W3C标准的HTML结构。其次采用CSS Grid/Flexbox实现响应式布局，确保在{断点范围}内自适应。最后添加ARIA属性提升无障碍访问能力。请遵循以下规范：1.使用语义化标签替代div嵌套 2.通过CSS变量管理主题色 3.事件处理采用防抖机制 4.提供暗色模式切换方案。输出需包含完整组件代码、使用示例及性能优化建议。特别注意避免过度使用内联样式，确保样式可维护性。