```json
{
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<div class=\"group relative overflow-hidden rounded-xl border border-solid border-gray-200 bg-white shadow-md transition-all duration-300 hover:shadow-lg hover:border-blue-300\">\n <div class=\"relative\">\n <img src=\"https://placehold.co/400x300\" alt=\"产品展示\" class=\"aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-105\" />\n <div class=\"absolute bottom-0 left-0 bg-blue-600 px-3 py-1 text-sm font-semibold text-white\">新品上市</div>\n </div>\n \n <div class=\"p-5\">\n <h3 class=\"mb-2 text-lg font-bold text-gray-800 line-clamp-1\">高端无线蓝牙耳机</h3>\n <p class=\"mb-4 text-sm text-gray-600 line-clamp-2\">专业级降噪技术，30小时续航，人体工学设计带来全天舒适佩戴体验</p>\n \n <div class=\"flex items-center justify-between\">\n <div>\n <span class=\"text-xl font-bold text-blue-600\">¥599</span>\n <span class=\"ml-2 text-sm text-gray-500 line-through\">¥799</span>\n </div>\n \n <button class=\"rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors duration-300 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\">\n 加入购物车\n </button>\n </div>\n </div>\n</div>"
},
"next": [
"添加收藏按钮",
"增加评分功能",
"添加数量选择器",
"悬停显示更多信息",
"添加快速预览功能"
],
"summary": "已创建现代化产品卡片组件，包含产品图片、标题、描述、价格标签和购物按钮。组件采用响应式设计，具有悬停放大图片和阴影增强效果，价格信息突出显示，并添加了新品标签。"
}
```
推理
我们正在设计一个现代化的移动端组件，用户要求是一个产品展示卡片组件，具有图片、标题、描述和价格，并且有悬停效果。
根据要求，我们将设计一个响应式的产品卡片，使用TailwindCSS实现。
组件结构：
- 整体卡片容器：圆角、阴影，悬停时阴影变大，有过渡效果。
- 产品图片：顶部，圆角，适应容器宽度。
- 信息区域：标题、描述、价格和购买按钮。
- 购买按钮：悬停时改变背景色。
设计细节：
- 卡片最大宽度：在移动端为全宽，中等屏幕以上固定宽度。
- 图片使用占位符，尺寸为400x300（宽高比4:3），使用object-cover保持比例。
- 标题：加粗，适当字号。
- 描述：限制行数（例如2行），超出省略。
- 价格：突出显示，颜色使用绿色。
- 按钮：蓝色背景，悬停变深蓝。
响应式考虑：
- 在移动端（默认）卡片宽度为100%，中等屏幕以上（md）宽度为45%（即一行两个），大屏幕（lg）宽度为30%（一行三个）。
- 使用flex-wrap和合适的宽度类实现。
我们将使用以下类：
- 容器：flex, flex-wrap, justify-center, gap-4 或 gap-6（用于多个卡片排列）
- 单个卡片：w-full, md:w-[45%], lg:w-[30%], 并设置最大宽度（例如max-w-sm）避免过大。
但是，用户只要求一个卡片组件，所以我们将构建单个卡片的样式，然后可以放在一个flex容器中展示多个。
由于用户没有提供具体文案，我们使用默认文案。
图片：使用占位符 https://placehold.co/400x300
注意：我们按照约束，不使用任何注释，且遵循TailwindCSS配置。
开始构建单个卡片的HTML结构。
卡片结构：
<div class="卡片容器">
<img ...>
<div class="信息容器">
<h3>产品标题</h3>
<p>描述</p>
<div>价格</div>
<button>加入购物车</button>
</div>
</div>
交互效果：
- 卡片悬停：阴影变大（shadow-lg -> hover:shadow-xl）
- 按钮悬停：背景变深（bg-blue-500 -> hover:bg-blue-700）
代码生成如下：
根据要求，我们将设计一个响应式的产品卡片，使用TailwindCSS实现。
组件结构：
- 整体卡片容器：圆角、阴影，悬停时阴影变大，有过渡效果。
- 产品图片：顶部，圆角，适应容器宽度。
- 信息区域：标题、描述、价格和购买按钮。
- 购买按钮：悬停时改变背景色。
设计细节：
- 卡片最大宽度：在移动端为全宽，中等屏幕以上固定宽度。
- 图片使用占位符，尺寸为400x300（宽高比4:3），使用object-cover保持比例。
- 标题：加粗，适当字号。
- 描述：限制行数（例如2行），超出省略。
- 价格：突出显示，颜色使用绿色。
- 按钮：蓝色背景，悬停变深蓝。
响应式考虑：
- 在移动端（默认）卡片宽度为100%，中等屏幕以上（md）宽度为45%（即一行两个），大屏幕（lg）宽度为30%（一行三个）。
- 使用flex-wrap和合适的宽度类实现。
我们将使用以下类：
- 容器：flex, flex-wrap, justify-center, gap-4 或 gap-6（用于多个卡片排列）
- 单个卡片：w-full, md:w-[45%], lg:w-[30%], 并设置最大宽度（例如max-w-sm）避免过大。
但是，用户只要求一个卡片组件，所以我们将构建单个卡片的样式，然后可以放在一个flex容器中展示多个。
由于用户没有提供具体文案，我们使用默认文案。
图片：使用占位符 https://placehold.co/400x300
注意：我们按照约束，不使用任何注释，且遵循TailwindCSS配置。
开始构建单个卡片的HTML结构。
卡片结构：
<div class="卡片容器">
<img ...>
<div class="信息容器">
<h3>产品标题</h3>
<p>描述</p>
<div>价格</div>
<button>加入购物车</button>
</div>
</div>
交互效果：
- 卡片悬停：阴影变大（shadow-lg -> hover:shadow-xl）
- 按钮悬停：背景变深（bg-blue-500 -> hover:bg-blue-700）
代码生成如下：
角色
assistant
content