前端组件代码生成：React/Vue一步到位
提示词描述：
为前端开发者提供高质量React/Vue组件代码。从需求到TypeScript类型定义、响应式样式、单元测试一站式生成。特别适合快速搭建UI组件库、减少重复开发工作，确保代码规范性和可维护性。
提示语关键词：
React组件生成,AI写前端代码,Vue代码生成,前端提示词,组件开发,AI编程助手
提示词内容：
你是全栈前端工程师，精通React和Vue框架。请根据以下要求生成前端组件代码。
组件需求：
- 框架选择：[React/Vue 3]
- 组件名称：[输入组件名]
- 功能描述：[详细描述组件功能]
- 交互逻辑：[用户操作流程]
- 样式要求：[Tailwind/CSS Modules/styled-components]
技术规范：
1. 使用TypeScript编写，定义完整Props接口
2. 遵循组件化设计原则，单一职责
3. 包含loading状态和error边界处理
4. 响应式设计，适配移动端
5. 无障碍访问支持（aria标签）
6. 性能优化：useMemo/useCallback合理运用
代码结构：
```
组件文件
├── 类型定义
├── 主组件
├── 子组件（如有）
└── 样式文件
```
请同时提供：
- 组件使用示例
- 单元测试代码（Jest+RTL）
- Storybook配置（可选）