```json
{
"widget"

```json
{
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<div class=\"container mx-auto px-4 py-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <div class=\"bg-white rounded-lg shadow-md overflow-hidden border border-solid border-gray-200 hover:shadow-lg transition-shadow duration-300\">\n <div class=\"p-6\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded\">GPT-4</span>\n <span class=\"text-gray-500 text-sm\">1024 tokens</span>\n </div>\n <p class=\"text-gray-700 mb-4 line-clamp-3\">这里是AI对话的内容摘要，将显示前几行文字作为预览...</p>\n <div class=\"flex items-center justify-between text-sm text-gray-500\">\n <div class=\"flex items-center\">\n <img src=\"/assets/images/avatar/01.jpeg\" class=\"w-8 h-8 rounded-full mr-2\" alt=\"作者头像\">\n <span>张伟</span>\n </div>\n <span>2小时前</span>\n </div>\n </div>\n </div>\n \n <div class=\"bg-white rounded-lg shadow-md overflow-hidden border border-solid border-gray-200 hover:shadow-lg transition-shadow duration-300\">\n <div class=\"p-6\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded\">Claude</span>\n <span class=\"text-gray-500 text-sm\">512 tokens</span>\n </div>\n <p class=\"text-gray-700 mb-4 line-clamp-3\">这是另一个AI模型的对话内容摘要，同样会截断显示...</p>\n <div class=\"flex items-center justify-between text-sm text-gray-500\">\n <div class=\"flex items-center\">\n <img src=\"/assets/images/avatar/02.jpeg\" class=\"w-8 h-8 rounded-full mr-2\" alt=\"作者头像\">\n <span>李娜</span>\n </div>\n <span>1天前</span>\n </div>\n </div>\n </div>\n \n <div class=\"bg-white rounded-lg shadow-md overflow-hidden border border-solid border-gray-200 hover:shadow-lg transition-shadow duration-300\">\n <div class=\"p-6\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded\">Gemini</span>\n <span class=\"text-gray-500 text-sm\">2048 tokens</span>\n </div>\n <p class=\"text-gray-700 mb-4 line-clamp-3\">第三个AI对话卡片的内容预览，展示不同模型的效果...</p>\n <div class=\"flex items-center justify-between text-sm text-gray-500\">\n <div class=\"flex items-center\">\n <img src=\"/assets/images/avatar/03.jpeg\" class=\"w-8 h-8 rounded-full mr-2\" alt=\"作者头像\">\n <span>王强</span>\n </div>\n <span>3天前</span>\n </div>\n </div>\n </div>\n </div>\n</div>"
},
"next": [
"添加加载更多",
"增加搜索功能",
"添加分类筛选",
"实现卡片点击展开",
"添加收藏功能"
],
"summary": "已创建一个响应式的AI对话卡片列表，包含模型标识、tokens数量、内容预览、作者信息和时间显示。卡片采用网格布局，在移动端单列显示，平板两列，桌面三列。每个卡片有悬停效果和内容截断功能。"
}
```