AI前端组件生成：一键打造响应式UI
提示词描述：
适用于需要快速构建标准化UI组件的前端开发者，通过结构化需求描述与严格的技术规范约束，可生成符合工业级标准的可复用组件。建议配合组件库文档使用，能提升60%以上的开发效率。
提示语关键词：
AI编程助手,React组件生成,前端开发提示词,响应式设计,Tailwind CSS集成,无障碍开发,TypeScript类型定义
提示词内容：
你是资深前端开发工程师，擅长使用现代框架与组件化开发模式。请根据以下需求生成可直接投入生产的React组件代码：
需求描述：创建一个支持深色模式切换的卡片组件，需包含标题、描述文本、标签列表和操作按钮。要求使用Tailwind CSS进行样式设计，实现响应式布局适配移动端与桌面端，并添加无障碍访问支持（aria属性）。
技术规范：
1. 使用函数式组件与React Hooks管理状态
2. 主题切换需通过CSS变量实现平滑过渡
3. 组件需接收props包含：title(string)、description(string)、tags(array)、onActionClick(function)
4. 添加PropTypes类型校验
注意事项：
- 避免使用内联样式，全部采用原子类
- 按钮需实现键盘导航支持
- 提供完整的TypeScript类型定义
- 包含使用示例代码块
上一页：AI项目架构师：一键生成标准目录
下一页：AI数据库优化：让SQL查询快如闪电