我先进行设计系统调研，获取专业的设计建议。好的，现在我来设计这个母婴类AI菜谱生成APP的核心界面。让我构思一个独特的美学方向。
**设计思考：**
- **目的**：妈妈/爸爸输入家里现有的食材，AI智能推荐适合宝宝的辅食菜谱
- **基调**：选择"有机自然风 + 温暖手绘感"——柔和的奶油色系搭配水果色点缀，圆润可爱的卡片，营造安全、温暖、可信赖的感觉
- **差异化**：食材输入采用"可视化食材篮"的交互方式，让输入食材变得像"往篮子里放食物"一样有趣直观
- **设备**：移动端（xs断点）
```json{
"summary": "为母婴AI菜谱App设计核心界面，采用温暖有机的自然美学风格。主色调为奶油白(#FFF8F0)搭配蜜桃橙(#FF8A65)、牛油果绿(#7BC67E)和淡紫(#C8A2C8)。字体选用Nunito(圆润可爱)搭配Lora(优雅正文)。核心交互：顶部食材输入区采用可视化食材篮设计，点击食材类别快速添加；中间AI生成菜谱卡片流，每张卡片展示菜名、适合月龄、烹饪时间和食材匹配度；底部悬浮AI生成按钮。整体采用圆角卡片、柔和阴影、微动效，营造温暖亲切的母婴产品体验。",
"widget": {"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n <title>宝宝小厨房 - AI辅食菜谱</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link href=\"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;90…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <style>\n :root {\n --cream: #FFF8F0;\n --peach: #FF8A65;\n --peach-light: #FFE0CC;\n --avocado: #7BC67E;\n --avocado-light: #D4EDDA;\n --lavender: #C8A2C8;\n --lavender-light: #EDE0F0;\n --warm-brown: #8D6E63;\n --soft-coral: #FF6B6B;\n --bg-gradient-start: #FFF8F0;\n --bg-gradient-end: #FFF0E8;\n --card-shadow: 0 8px 32px rgba(255, 138, 101, 0.12);\n --card-shadow-hover: 0 12px 40px rgba(255, 138, 101, 0.2);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n }\n \n body {\n font-family: 'Nunito', sans-serif;\n background: linear-gradient(160deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);\n min-height: 100vh;\n overflow-x: hidden;\n }\n \n /* 背景装饰圆 */\n .bg-circle {\n position: fixed;\n border-radius: 50%;\n opacity: 0.15;\n pointer-events: none;\n z-index: 0;\n }\n .bg-circle-1 {\n width: 300px;\n height: 300px;\n background: var(--peach);\n top: -80px;\n right: -60px;\n }\n .bg-circle-2 {\n width: 200px;\n height: 200px;\n background: var(--avocado);\n bottom: 120px;\n left: -60px;\n }\n .bg-circle-3 {\n width: 150px;\n height: 150px;\n background: var(--lavender);\n bottom: -40px;\n right: 20px;\n }\n \n /* 噪点纹理 */\n .noise-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 1;\n opacity: 0.03;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\");\n background-repeat: repeat;\n background-size: 256px 256px;\n }\n \n .app-container {\n position: relative;\n z-index: 2;\n max-width: 420px;\n margin: 0 auto;\n min-height: 100vh;\n padding: 0 16px 100px;\n }\n \n /* 顶部导航 */\n .app-header {\n padding: 20px 0 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .app-header h1 {\n font-family: 'Nunito', sans-serif;\n font-weight: 800;\n font-size: 22px;\n color: var(--warm-brown);\n letter-spacing: -0.3px;\n }\n .app-header h1 i {\n color: var(--peach);\n margin-right: 6px;\n }\n .header-actions {\n display: flex;\n gap: 12px;\n }\n .header-actions button {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: none;\n background: rgba(255,255,255,0.7);\n backdrop-filter: blur(10px);\n color: var(--warm-brown);\n font-size: 16px;\n cursor: pointer;\n transition: all 0.25s ease;\n box-shadow: 0 2px 8px rgba(141, 110, 99, 0.08);\n }\n .header-actions button:active {\n transform: scale(0.92);\n }\n \n /* 欢迎语 */\n .welcome-section {\n padding: 8px 0 16px;\n }\n .welcome-section h2 {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 17px;\n color: var(--warm-brown);\n line-height: 1.4;\n }\n .welcome-section h2 span {\n color: var(--peach);\n }\n .welcome-section p {\n font-family: 'Lora', serif;\n font-size: 13px;\n color: #B8A094;\n margin-top: 2px;\n font-style: italic;\n }\n \n /* 食材输入区 - 可视化食材篮 */\n .basket-section {\n background: rgba(255,255,255,0.6);\n backdrop-filter: blur(20px);\n border-radius: 24px;\n padding: 18px 16px 16px;\n margin-bottom: 16px;\n box-shadow: var(--card-shadow);\n border: 1px solid rgba(255,255,255,0.8);\n transition: all 0.3s ease;\n }\n .basket-section:focus-within {\n box-shadow: 0 8px 32px rgba(255, 138, 101, 0.18);\n }\n \n .basket-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n }\n .basket-header label {\n font-weight: 700;\n font-size: 14px;\n color: var(--warm-brown);\n display: flex;\n align-items: center;\n gap: 6px;\n }\n .basket-header label i {\n color: var(--peach);\n font-size: 15px;\n }\n .basket-count {\n font-size: 12px;\n background: var(--peach-light);\n color: var(--peach);\n padding: 2px 10px;\n border-radius: 20px;\n font-weight: 700;\n }\n \n /* 已选食材标签 */\n .selected-ingredients {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n min-height: 36px;\n margin-bottom: 12px;\n }\n .ingredient-tag {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n background: white;\n padding: 6px 12px 6px 10px;\n border-radius: 30px;\n font-size: 13px;\n font-weight: 600;\n color: var(--warm-brown);\n box-shadow: 0 2px 8px rgba(141, 110, 99, 0.08);\n animation: tagPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n border: 1px solid rgba(255,255,255,0.6);\n }\n .ingredient-tag .tag-icon {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n color: white;\n }\n .ingredient-tag .tag-remove {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: none;\n background: #F5EDE8;\n color: #B8A094;\n font-size: 8px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n margin-left: 2px;\n }\n .ingredient-tag .tag-remove:active {\n background: #E8DCD4;\n transform: scale(0.85);\n }\n \n .empty-basket {\n color: #C8B8AE;\n font-size: 13px;\n padding: 6px 0;\n font-weight: 500;\n }\n .empty-basket i {\n margin-right: 4px;\n }\n \n @keyframes tagPop {\n 0% { transform: scale(0.7); opacity: 0; }\n 100% { transform: scale(1); opacity: 1; }\n }\n \n /* 食材快捷选择 */\n .quick-ingredients {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n padding: 4px 0 2px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n .quick-ingredients::-webkit-scrollbar {\n display: none;\n }\n .quick-ingredient-btn {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n padding: 8px 14px;\n border-radius: 16px;\n border: 1.5px solid transparent;\n background: rgba(255,255,255,0.5);\n cursor: pointer;\n transition: all 0.25s ease;\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 12px;\n color: var(--warm-brown);\n min-width: 64px;\n }\n .quick-ingredient-btn i {\n font-size: 18px;\n margin-bottom: 1px;\n }\n .quick-ingredient-btn:active {\n transform: scale(0.92);\n }\n .quick-ingredient-btn.fruit {\n border-color: rgba(255, 138, 101, 0.3);\n }\n .quick-ingredient-btn.fruit i { color: var(--peach); }\n .quick-ingredient-btn.fruit:active { background: var(--peach-light); }\n .quick-ingredient-btn.veg {\n border-color: rgba(123, 198, 126, 0.3);\n }\n .quick-ingredient-btn.veg i { color: var(--avocado); }\n .quick-ingredient-btn.veg:active { background: var(--avocado-light); }\n .quick-ingredient-btn.grain {\n border-color: rgba(200, 162, 200, 0.3);\n }\n .quick-ingredient-btn.grain i { color: var(--lavender); }\n .quick-ingredient-btn.grain:active { background: var(--lavender-light); }\n .quick-ingredient-btn.protein {\n border-color: rgba(255, 107, 107, 0.3);\n }\n .quick-ingredient-btn.protein i { color: var(--soft-coral); }\n .quick-ingredient-btn.protein:active { background: #FFE8E8; }\n \n /* 自定义输入 */\n .custom-input-row {\n display: flex;\n gap: 8px;\n margin-top: 12px;\n }\n .custom-input-row input {\n flex: 1;\n border: 1.5px solid #EDE4DC;\n border-radius: 14px;\n padding: 10px 14px;\n font-family: 'Nunito', sans-serif;\n font-size: 13px;\n color: var(--warm-brown);\n background: rgba(255,255,255,0.6);\n outline: none;\n transition: all 0.25s;\n }\n .custom-input-row input::placeholder {\n color: #C8B8AE;\n }\n .custom-input-row input:focus {\n border-color: var(--peach);\n box-shadow: 0 0 0 3px rgba(255, 138, 101, 0.12);\n }\n .custom-input-row button {\n width: 42px;\n height: 42px;\n border-radius: 14px;\n border: none;\n background: var(--peach);\n color: white;\n font-size: 16px;\n cursor: pointer;\n transition: all 0.25s;\n flex-shrink: 0;\n box-shadow: 0 4px 12px rgba(255, 138, 101, 0.3);\n }\n .custom-input-row button:active {\n transform: scale(0.92);\n box-shadow: 0 2px 6px rgba(255, 138, 101, 0.2);\n }\n \n /* 分隔标题 */\n .section-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 4px 10px;\n }\n .section-title h3 {\n font-weight: 700;\n font-size: 16px;\n color: var(--warm-brown);\n }\n .section-title h3 i {\n color: var(--peach);\n margin-right: 6px;\n font-size: 14px;\n }\n .section-title .see-all {\n font-size: 12px;\n color: #B8A094;\n font-weight: 600;\n cursor: pointer;\n transition: color 0.2s;\n }\n .section-title .see-all:active {\n color: var(--peach);\n }\n \n /* 菜谱卡片流 */\n .recipe-list {\n display: flex;\n flex-direction: column;\n gap: 14px;\n }\n \n .recipe-card {\n background: rgba(255,255,255,0.7);\n backdrop-filter: blur(20px);\n border-radius: 20px;\n padding: 16px;\n box-shadow: var(--card-shadow);\n border: 1px solid rgba(255,255,255,0.8);\n cursor: pointer;\n transition: all 0.3s ease;\n animation: cardSlideUp 0.5s ease both;\n }\n .recipe-card:active {\n transform: scale(0.98);\n box-shadow: var(--card-shadow-hover);\n }\n \n .recipe-card:nth-child(1) { animation-delay: 0.05s; }\n .recipe-card:nth-child(2) { animation-delay: 0.15s; }\n .recipe-card:nth-child(3) { animation-delay: 0.25s; }\n .recipe-card:nth-child(4) { animation-delay: 0.35s; }\n \n @keyframes cardSlideUp {\n 0% { opacity: 0; transform: translateY(20px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n \n .recipe-card-top {\n display: flex;\n gap: 14px;\n }\n .recipe-thumb {\n width: 72px;\n height: 72px;\n border-radius: 16px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 30px;\n color: white;\n position: relative;\n overflow: hidden;\n }\n .recipe-thumb::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);\n }\n .recipe-thumb.thumb-peach { background: linear-gradient(135deg, #FF8A65, #FFAB91); }\n .recipe-thumb.thumb-green { background: linear-gradient(135deg, #7BC67E, #A5D6A7); }\n .recipe-thumb.thumb-purple { background: linear-gradient(135deg, #C8A2C8, #E1BEE7); }\n .recipe-thumb.thumb-coral { background: linear-gradient(135deg, #FF6B6B, #FF8E8E); }\n \n .recipe-info {\n flex: 1;\n min-width: 0;\n }\n .recipe-info h4 {\n font-weight: 700;\n font-size: 15px;\n color: var(--warm-brown);\n line-height: 1.3;\n margin-bottom: 4px;\n }\n .recipe-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: 6px;\n }\n .recipe-tag {\n font-size: 10px;\n font-weight: 700;\n padding: 2px 8px;\n border-radius: 20px;\n background: rgba(255,255,255,0.6);\n color: #B8A094;\n border: 1px solid rgba(200,184,174,0.2);\n }\n .recipe-tag.tag-age {\n background: var(--peach-light);\n color: var(--peach);\n border-color: transparent;\n }\n .recipe-tag.tag-match {\n background: var(--avocado-light);\n color: #5BA85E;\n border-color: transparent;\n }\n \n .recipe-meta {\n display: flex;\n gap: 12px;\n font-size: 11px;\n color: #B8A094;\n font-weight: 600;\n }\n .recipe-meta span i {\n margin-right: 3px;\n font-size: 10px;\n }\n \n .recipe-card-bottom {\n margin-top: 12px;\n padding-top: 10px;\n border-top: 1px solid rgba(200,184,174,0.15);\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .recipe-match-bar {\n flex: 1;\n margin-right: 12px;\n }\n .recipe-match-bar .bar-label {\n font-size: 10px;\n font-weight: 600;\n color: #B8A094;\n margin-bottom: 3px;\n }\n .recipe-match-bar .bar-track {\n height: 4px;\n background: #F0E8E0;\n border-radius: 4px;\n overflow: hidden;\n }\n .recipe-match-bar .bar-fill {\n height: 100%;\n border-radius: 4px;\n background: linear-gradient(90deg, var(--avocado), var(--peach));\n transition: width 0.8s ease;\n }\n .recipe-card-bottom .view-btn {\n font-size: 12px;\n font-weight: 700;\n color: var(--peach);\n background: var(--peach-light);\n padding: 6px 14px;\n border-radius: 30px;\n border: none;\n cursor: pointer;\n transition: all 0.25s;\n white-space: nowrap;\n font-family: 'Nunito', sans-serif;\n }\n .recipe-card-bottom .view-btn:active {\n transform: scale(0.92);\n }\n \n /* 底部悬浮AI生成按钮 */\n .fab-container {\n position: fixed;\n bottom: 24px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n max-width: 420px;\n width: calc(100% - 32px);\n }\n .fab-button {\n width: 100%;\n padding: 16px 24px;\n border-radius: 20px;\n border: none;\n background: linear-gradient(135deg, var(--peach) 0%, #FF7043 100%);\n color: white;\n font-family: 'Nunito', sans-serif;\n font-weight: 800;\n font-size: 16px;\n cursor: pointer;\n box-shadow: 0 8px 32px rgba(255, 138, 101, 0.4);\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n letter-spacing: 0.3px;\n }\n .fab-button:active {\n transform: scale(0.96);\n box-shadow: 0 4px 16px rgba(255, 138, 101, 0.3);\n }\n .fab-button i {\n font-size: 18px;\n }\n .fab-button .sparkle {\n display: inline-block;\n animation: sparkle 1.5s ease-in-out infinite;\n }\n @keyframes sparkle {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.6; transform: scale(1.2); }\n }\n .fab-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n \n /* 底部安全区 */\n .bottom-safe {\n height: 100px;\n }\n \n /* 空状态 */\n .empty-state {\n text-align: center;\n padding: 30px 20px;\n background: rgba(255,255,255,0.4);\n border-radius: 20px;\n border: 2px dashed rgba(200,184,174,0.3);\n }\n .empty-state i {\n font-size: 40px;\n color: #D4C8BE;\n margin-bottom: 12px;\n }\n .empty-state p {\n font-family: 'Lora', serif;\n font-size: 14px;\n color: #B8A094;\n font-style: italic;\n }\n \n /* 月龄选择器 */\n .age-selector {\n display: flex;\n gap: 6px;\n overflow-x: auto;\n padding: 4px 0 8px;\n scrollbar-width: none;\n }\n .age-selector::-webkit-scrollbar { display: none; }\n .age-chip {\n flex-shrink: 0;\n padding: 6px 14px;\n border-radius: 30px;\n border: 1.5px solid rgba(200,184,174,0.3);\n background: rgba(255,255,255,0.4);\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 12px;\n color: #B8A094;\n cursor: pointer;\n transition: all 0.25s;\n }\n .age-chip.active {\n background: var(--peach);\n color: white;\n border-color: var(--peach);\n box-shadow: 0 4px 12px rgba(255, 138, 101, 0.25);\n }\n .age-chip:active {\n transform: scale(0.92);\n }\n </style>\n</head>\n<body>\n <!-- 背景装饰 -->\n <div class=\"bg-circle bg-circle-1\"></div>\n <div class=\"bg-circle bg-circle-2\"></div>\n <div class=\"bg-circle bg-circle-3\"></div>\n <div class=\"noise-overlay\"></div>\n \n <div class=\"app-container\">\n <!-- 顶部导航 -->\n <header class=\"app-header\">\n <h1><i class=\"fa-solid fa-utensils\"></i> 宝宝小厨房</h1>\n <div class=\"header-actions\">\n <button aria-label=\"收藏\"><i class=\"fa-regular fa-heart\"></i></button>\n <button aria-label=\"历史记录\"><i class=\"fa-regular fa-clock\"></i></button>\n </div>\n </header>\n \n <!-- 欢迎语 -->\n <div class=\"welcome-section\">\n <h2>👋 今天家里有什么食材？<br>让 <span>AI 小厨娘</span> 给宝宝做辅食 🍼</h2>\n <p>— 输入食材，智能匹配适合月龄的菜谱</p>\n </div>\n \n <!-- 月龄选择 -->\n <div class=\"age-selector\">\n <div class=\"age-chip active\" data-age=\"6\">6月+</div>\n <div class=\"age-chip\" data-age=\"8\">8月+</div>\n <div class=\"age-chip\" data-age=\"10\">10月+</div>\n <div class=\"age-chip\" data-age=\"12\">12月+</div>\n <div class=\"age-chip\" data-age=\"18\">18月+</div>\n <div class=\"age-chip\" data-age=\"24\">24月+</div>\n <div class=\"age-chip\" data-age=\"36\">3岁+</div>\n </div>\n \n <!-- 食材篮 -->\n <div class=\"basket-section\">\n <div class=\"basket-header\">\n <label><i class=\"fa-solid fa-basket-shopping\"></i> 我的食材篮</label>\n <span class=\"basket-count\" id=\"basketCount\">0 种</span>\n </div>\n \n <div class=\"selected-ingredients\" id=\"selectedIngredients\">\n <span class=\"empty-basket\"><i class=\"fa-regular fa-face-smile\"></i> 点击下方食材添加～</span>\n </div>\n \n <!-- 快捷食材 -->\n <div class=\"quick-ingredients\">\n <button class=\"quick-ingredient-btn fruit\" data-name=\"苹果\" data-icon=\"fa-apple-whole\">\n <i class=\"fa-solid fa-apple-whole\"></i>\n <span>苹果</span>\n </button>\n <button class=\"quick-ingredient-btn fruit\" data-name=\"香蕉\" data-icon=\"fa-apple-whole\">\n <i class=\"fa-solid fa-apple-whole\"></i>\n <span>香蕉</span>\n </button>\n <button class=\"quick-ingredient-btn veg\" data-name=\"胡萝卜\" data-icon=\"fa-carrot\">\n <i class=\"fa-solid fa-carrot\"></i>\n <span>胡萝卜</span>\n </button>\n <button class=\"quick-ingredient-btn veg\" data-name=\"西兰花\" data-icon=\"fa-broccoli\">\n <i class=\"fa-solid fa-broccoli\"></i>\n <span>西兰花</span>\n </button>\n <button class=\"quick-ingredient-btn veg\" data-name=\"南瓜\" data-icon=\"fa-carrot\">\n <i class=\"fa-solid fa-carrot\"></i>\n <span>南瓜</span>\n </button>\n <button class=\"quick-ingredient-btn grain\" data-name=\"大米\" data-icon=\"fa-seedling\">\n <i class=\"fa-solid fa-seedling\"></i>\n <span>大米</span>\n </button>\n <button class=\"quick-ingredient-btn grain\" data-name=\"面条\" data-icon=\"fa-seedling\">\n <i class=\"fa-solid fa-seedling\"></i>\n <span>面条</span>\n </button>\n <button class=\"quick-ingredient-btn protein\" data-name=\"鸡蛋\" data-icon=\"fa-egg\">\n <i class=\"fa-solid fa-egg\"></i>\n <span>鸡蛋</span>\n </button>\n <button class=\"quick-ingredient-btn protein\" data-name=\"鸡胸肉\" data-icon=\"fa-drumstick-bite\">\n <i class=\"fa-solid fa-drumstick-bite\"></i>\n <span>鸡胸肉</span>\n </button>\n <button class=\"quick-ingredient-btn protein\" data-name=\"豆腐\" data-icon=\"fa-cube\">\n <i class=\"fa-solid fa-cube\"></i>\n <span>豆腐</span>\n </button>\n </div>\n \n <!-- 自定义输入 -->\n <div class=\"custom-input-row\">\n <input type=\"text\" id=\"customIngredient\" placeholder=\"输入其他食材...\" maxlength=\"10\">\n <button id=\"addCustomBtn\" aria-label=\"添加食材\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n \n <!-- 推荐菜谱 -->\n <div class=\"section-title\">\n <h3><i class=\"fa-solid fa-wand-magic-sparkles\"></i> AI 推荐菜谱</h3>\n <span class=\"see-all\">查看全部 <i class=\"fa-solid fa-chevron-right\" style=\"font-size:9px;\"></i></span>\n </div>\n \n <div class=\"recipe-list\" id=\"recipeList\">\n <!-- 菜谱卡片 1 -->\n <div class=\"recipe-card\">\n <div class=\"recipe-card-top\">\n <div class=\"recipe-thumb thumb-peach\">\n <i class=\"fa-solid fa-apple-whole\"></i>\n </div>\n <div class=\"recipe-info\">\n <h4>苹果胡萝卜泥</h4>\n <div class=\"recipe-tags\">\n <span class=\"recipe-tag tag-age\"><i class=\"fa-regular fa-clock\"></i> 6月+</span>\n <span class=\"recipe-tag tag-match\"><i class=\"fa-solid fa-check\"></i> 食材匹配</span>\n </div>\n <div class=\"recipe-meta\">\n <span><i class=\"fa-regular fa-clock\"></i> 15分钟</span>\n <span><i class=\"fa-regular fa-star\"></i> 4.8</span>\n <span><i