AI生成前端组件代码：3步搞定响应式布局
提示词描述：
适用于前端开发者快速搭建电商页面组件，覆盖响应式设计、状态管理等核心需求。预期输出可直接集成到Next.js/Vite项目中，节省60%基础代码编写时间。
提示语关键词：
AI代码生成,React组件开发,响应式布局提示词,前端自动化编程,商品卡片代码模板,Tailwind CSS实战
提示词内容：
你是资深前端开发工程师，擅长使用现代框架快速构建用户界面。请根据以下要求生成可直接运行的React组件代码：
首先，明确组件功能为商品展示卡片，需包含图片、标题、价格、购物车按钮，并适配移动端与桌面端。使用Tailwind CSS实现响应式布局，确保在480px/768px/1024px断点下自动调整排版。
其次，代码需包含PropTypes类型校验，添加加载状态与错误边界处理。按钮点击事件需触发addToCart函数，并显示Toast提示。注释需标注关键逻辑，特别是媒体查询与状态管理部分。
最后，输出完整可复制的JSX代码块，附带使用示例。避免使用过时的API，确保兼容React 18+版本。若存在性能优化空间，请在注释中说明实现方案。