```json{
"summary"

```json{
"summary": "为您设计一个现代化的大模型提示词对比UI组件，采用响应式布局，支持左右对比视图，包含标题、描述、对比内容区域和操作按钮。默认使用浅色背景，适配移动端和桌面端。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"relative bg-gray-50 py-12 px-4 sm:px-6 lg:px-8\">\n <div class=\"container mx-auto max-w-6xl\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-4\">大模型提示词对比</h2>\n <p class=\"text-lg text-gray-600 max-w-2xl mx-auto\">对比不同提示词在大模型中的表现效果，帮助您优化AI输出结果</p>\n </div>\n \n <div class=\"bg-white rounded-xl shadow-lg overflow-hidden mb-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 p-6\">\n <!-- 对比项1 -->\n <div class=\"border border-solid border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow duration-300\">\n <div class=\"flex items-center mb-4\">\n <div class=\"w-3 h-3 rounded-full bg-blue-500 mr-2\"></div>\n <h3 class=\"text-xl font-semibold text-gray-900\">提示词版本A</h3>\n </div>\n <p class=\"text-gray-600 mb-4\">\"请用简洁的语言解释量子计算的基本原理\"</p>\n <div class=\"bg-gray-50 rounded-lg p-4 mb-4 min-h-[150px]\">\n <p class=\"text-gray-700 text-sm\">量子计算利用量子比特(qubit)的叠加态和纠缠特性，通过量子门操作实现并行计算。相比经典计算机的二进制位，量子计算机能在同一时间处理多种可能性，从而在特定问题上实现指数级加速。</p>\n </div>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs font-medium px-2.5 py-0.5 rounded-full bg-green-100 text-green-800\">准确性: 92%</span>\n <span class=\"text-xs font-medium px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800\">相关性: 88%</span>\n </div>\n </div>\n \n <!-- 对比项2 -->\n <div class=\"border border-solid border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow duration-300\">\n <div class=\"flex items-center mb-4\">\n <div class=\"w-3 h-3 rounded-full bg-purple-500 mr-2\"></div>\n <h3 class=\"text-xl font-semibold text-gray-900\">提示词版本B</h3>\n </div>\n <p class=\"text-gray-600 mb-4\">\"能否用通俗易懂的方式说明量子计算是什么？请避免使用专业术语\"</p>\n <div class=\"bg-gray-50 rounded-lg p-4 mb-4 min-h-[150px]\">\n <p class=\"text-gray-700 text-sm\">想象一下，传统计算机像开关灯一样，要么开要么关。而量子计算机像调光灯，可以同时处于多种亮度状态。这种特殊能力让它能同时探索很多答案，从而快速解决复杂问题。</p>\n </div>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-xs font-medium px-2.5 py-0.5 rounded-full bg-green-100 text-green-800\">准确性: 87%</span>\n <span class=\"text-xs font-medium px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800\">相关性: 94%</span>\n </div>\n </div>\n </div>\n \n <div class=\"px-6 py-4 bg-gray-50 border-t border-solid border-gray-200 flex flex-col sm:flex-row justify-between items-center\">\n <div class=\"mb-4 sm:mb-0\">\n <span class=\"text-sm text-gray-600 mr-4\">对比结果:</span>\n <span class=\"text-sm font-medium text-green-600\">版本A在准确性上表现更优</span>\n </div>\n <div class=\"flex space-x-3\">\n <button class=\"px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-solid border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\">\n 导出对比\n </button>\n <button class=\"px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\">\n 优化提示词\n </button>\n </div>\n </div>\n </div>\n \n <div class=\"text-center\">\n <button class=\"inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\">\n <svg class=\"-ml-1 mr-3 h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z\" clip-rule=\"evenodd\" />\n </svg>\n 添加新对比\n </button>\n </div>\n </div>\n</div>"
},
"next": ["添加更多对比项","增加评分维度","添加图表可视化","支持提示词编辑","增加历史记录功能"]
}
```