```json
{
"summary

```json
{
"summary": "根据需求分析，我将为初中生物学习设计一个游戏化昆虫学习APP的UI组件，包含知识卡片、趣味问答和成就系统等核心模块。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<div class=\"container mx-auto p-4\">\n <!-- 知识卡片组件 -->\n <div class=\"bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg\">\n <div class=\"relative h-48 bg-green-50 flex items-center justify-center\">\n <img src=\"/assets/images/illustration/11.png\" alt=\"昆虫插图\" class=\"h-full object-contain\">\n <div class=\"absolute top-2 right-2 bg-yellow-400 text-xs font-bold px-2 py-1 rounded-full\">新发现!</div>\n </div>\n <div class=\"p-5\">\n <div class=\"flex justify-between items-start\">\n <h3 class=\"text-xl font-bold text-gray-800 mb-2\">中华蜜蜂</h3>\n <span class=\"bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded\">膜翅目</span>\n </div>\n <p class=\"text-gray-600 text-sm mb-4\">社会性昆虫，工蜂寿命约30天，采集半径3公里...</p>\n \n <!-- 进度条 -->\n <div class=\"mb-3\">\n <div class=\"flex justify-between text-xs text-gray-500 mb-1\">\n <span>知识进度</span>\n <span>60%</span>\n </div>\n <div class=\"w-full bg-gray-200 rounded-full h-2\">\n <div class=\"bg-green-500 h-2 rounded-full\" style=\"width: 60%\"></div>\n </div>\n </div>\n \n <div class=\"flex space-x-2\">\n <button class=\"flex-1 bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg text-sm font-medium transition-colors\">\n 学习资料\n </button>\n <button class=\"flex-1 border border-green-500 text-green-500 hover:bg-green-50 py-2 px-4 rounded-lg text-sm font-medium transition-colors\">\n 趣味测验\n </button>\n </div>\n </div>\n </div>\n \n <!-- 成就徽章组件 -->\n <div class=\"mt-6 bg-blue-50 rounded-lg p-4\">\n <h4 class=\"font-bold text-lg text-gray-800 mb-3 flex items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5 text-yellow-500 mr-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" />\n </svg>\n 今日成就\n </h4>\n <div class=\"grid grid-cols-4 gap-2\">\n <div class=\"bg-white rounded-full w-14 h-14 flex items-center justify-center shadow-inner border-2 border-yellow-300\">\n <img src=\"/assets/images/svg/Asset187.svg\" class=\"w-8 h-8\" alt=\"收集成就\">\n </div>\n <div class=\"bg-white rounded-full w-14 h-14 flex items-center justify-center shadow-inner border-2 border-gray-200 opacity-40\">\n <img src=\"/assets/images/svg/sand-clock.svg\" class=\"w-8 h-8\" alt=\"待解锁\">\n </div>\n <div class=\"bg-white rounded-full w-14 h-14 flex items-center justify-center shadow-inner border-2 border-gray-200 opacity-40\">\n <img src=\"/assets/images/svg/term-life.svg\" class=\"w-8 h-8\" alt=\"待解锁\">\n </div>\n <div class=\"bg-white rounded-full w-14 h-14 flex items-center justify-center shadow-inner border-2 border-gray-200 opacity-40\">\n <img src=\"/assets/images/svg/family-health.svg\" class=\"w-8 h-8\" alt=\"待解锁\">\n </div>\n </div>\n </div>\n</div>"
},
"next": [
"添加AR识别功能",
"设计积分系统",
"添加成就动画",
"增加社交分享",
"添加学习日历"
]
}
```