母婴婴儿饮食主题移动端界面设计

By 13964333253, 25 April, 2026
角色
assistant
content

我先来获取设计系统推荐和相关资源。现在我来设计一个温馨、柔和的母婴婴儿饮食界面。

```json{
"summary": "设计了一个母婴婴儿饮食主题的移动端界面,采用柔和的暖色调(奶油白、蜜桃粉、浅薄荷绿),搭配圆润的卡片和有机形状。包含宝宝信息头部、每日饮食时间线、营养分类卡片、本周食谱推荐和添加记录按钮。使用 'Quicksand' 圆润字体营造亲切感,背景采用柔和渐变与装饰性有机形状,整体风格温暖治愈。",
"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>宝宝饮食日记</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link href=\"https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600…\" 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 --peach: #FDE8E0;\n --peach-dark: #F5C6B8;\n --mint: #D4F0E8;\n --mint-dark: #A8D8C8;\n --cream: #FFF8F0;\n --warm-pink: #FF9E9E;\n --soft-coral: #FFB5A7;\n --lavender: #E8DFF5;\n --baby-blue: #D4E8F5;\n --text-primary: #4A3728;\n --text-secondary: #8B7A6E;\n --card-shadow: 0 8px 32px rgba(200, 160, 140, 0.15);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Noto Sans SC', 'Quicksand', sans-serif;\n background: var(--cream);\n min-height: 100vh;\n overflow-x: hidden;\n }\n \n .font-quicksand {\n font-family: 'Quicksand', sans-serif;\n }\n \n /* 背景装饰 */\n .bg-ornament {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 0;\n overflow: hidden;\n }\n \n .bg-ornament .blob {\n position: absolute;\n border-radius: 50%;\n filter: blur(60px);\n opacity: 0.4;\n }\n \n .bg-ornament .blob-1 {\n width: 300px;\n height: 300px;\n background: var(--peach);\n top: -80px;\n right: -60px;\n animation: floatBlob 8s ease-in-out infinite;\n }\n \n .bg-ornament .blob-2 {\n width: 250px;\n height: 250px;\n background: var(--mint);\n bottom: 10%;\n left: -80px;\n animation: floatBlob 10s ease-in-out infinite reverse;\n }\n \n .bg-ornament .blob-3 {\n width: 180px;\n height: 180px;\n background: var(--lavender);\n top: 40%;\n right: -40px;\n animation: floatBlob 7s ease-in-out infinite 2s;\n }\n \n @keyframes floatBlob {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 33% { transform: translate(20px, -20px) scale(1.05); }\n 66% { transform: translate(-10px, 15px) scale(0.95); }\n }\n \n /* 主容器 */\n .app-container {\n position: relative;\n z-index: 1;\n max-width: 420px;\n margin: 0 auto;\n padding: 20px 16px 100px;\n min-height: 100vh;\n }\n \n /* 顶部状态栏 */\n .status-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 0 16px;\n }\n \n .status-bar .time {\n font-family: 'Quicksand', sans-serif;\n font-weight: 600;\n font-size: 14px;\n color: var(--text-primary);\n }\n \n .status-icons {\n display: flex;\n gap: 6px;\n color: var(--text-primary);\n font-size: 12px;\n }\n \n /* 头部 - 宝宝信息 */\n .baby-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 24px;\n animation: fadeInDown 0.6s ease-out;\n }\n \n .baby-info {\n display: flex;\n align-items: center;\n gap: 14px;\n }\n \n .baby-avatar {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--peach-dark), var(--soft-coral));\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 26px;\n color: white;\n box-shadow: 0 4px 16px rgba(255, 158, 158, 0.3);\n position: relative;\n flex-shrink: 0;\n }\n \n .baby-avatar::after {\n content: '';\n position: absolute;\n inset: -3px;\n border-radius: 50%;\n border: 2px solid rgba(255, 255, 255, 0.5);\n animation: pulseRing 2s ease-in-out infinite;\n }\n \n @keyframes pulseRing {\n 0%, 100% { transform: scale(1); opacity: 0.5; }\n 50% { transform: scale(1.08); opacity: 0; }\n }\n \n .baby-details h1 {\n font-family: 'Quicksand', 'Noto Sans SC', sans-serif;\n font-size: 20px;\n font-weight: 700;\n color: var(--text-primary);\n line-height: 1.3;\n }\n \n .baby-details .age {\n font-size: 13px;\n color: var(--text-secondary);\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 2px;\n }\n \n .baby-details .age i {\n font-size: 10px;\n color: var(--warm-pink);\n }\n \n .header-actions {\n display: flex;\n gap: 12px;\n }\n \n .header-actions button {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: none;\n background: white;\n color: var(--text-secondary);\n font-size: 16px;\n cursor: pointer;\n box-shadow: 0 2px 12px rgba(200, 160, 140, 0.1);\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .header-actions button:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(200, 160, 140, 0.2);\n color: var(--warm-pink);\n }\n \n /* 今日概览卡片 */\n .today-summary {\n background: linear-gradient(135deg, #FFF5F0, #FFF0F5);\n border-radius: 24px;\n padding: 20px;\n margin-bottom: 20px;\n box-shadow: var(--card-shadow);\n animation: fadeInUp 0.6s ease-out 0.1s both;\n position: relative;\n overflow: hidden;\n }\n \n .today-summary::before {\n content: '';\n position: absolute;\n top: -30px;\n right: -30px;\n width: 120px;\n height: 120px;\n background: radial-gradient(circle, rgba(255, 181, 167, 0.2), transparent);\n border-radius: 50%;\n }\n \n .today-summary .label {\n font-size: 13px;\n color: var(--text-secondary);\n font-weight: 500;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n \n .today-summary .label i {\n color: var(--warm-pink);\n }\n \n .today-stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n }\n \n .stat-item {\n text-align: center;\n padding: 10px 8px;\n background: rgba(255, 255, 255, 0.6);\n border-radius: 16px;\n backdrop-filter: blur(10px);\n }\n \n .stat-item .number {\n font-family: 'Quicksand', sans-serif;\n font-size: 24px;\n font-weight: 700;\n color: var(--text-primary);\n line-height: 1.2;\n }\n \n .stat-item .number .unit {\n font-size: 12px;\n font-weight: 500;\n color: var(--text-secondary);\n }\n \n .stat-item .stat-label {\n font-size: 11px;\n color: var(--text-secondary);\n margin-top: 4px;\n }\n \n .stat-item .stat-icon {\n font-size: 14px;\n margin-bottom: 4px;\n }\n \n .stat-item:nth-child(1) .stat-icon { color: var(--warm-pink); }\n .stat-item:nth-child(2) .stat-icon { color: #7EC8A0; }\n .stat-item:nth-child(3) .stat-icon { color: #B8A0D4; }\n \n /* 时间线 - 饮食记录 */\n .section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 14px;\n animation: fadeInUp 0.6s ease-out 0.2s both;\n }\n \n .section-header h2 {\n font-family: 'Quicksand', 'Noto Sans SC', sans-serif;\n font-size: 17px;\n font-weight: 700;\n color: var(--text-primary);\n }\n \n .section-header a {\n font-size: 13px;\n color: var(--warm-pink);\n text-decoration: none;\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 4px;\n transition: gap 0.3s ease;\n }\n \n .section-header a:hover {\n gap: 8px;\n }\n \n .timeline {\n position: relative;\n padding-left: 28px;\n margin-bottom: 24px;\n }\n \n .timeline::before {\n content: '';\n position: absolute;\n left: 10px;\n top: 8px;\n bottom: 8px;\n width: 2px;\n background: linear-gradient(to bottom, var(--peach-dark), var(--mint-dark), var(--lavender));\n border-radius: 2px;\n }\n \n .timeline-item {\n position: relative;\n margin-bottom: 16px;\n animation: fadeInUp 0.5s ease-out both;\n }\n \n .timeline-item:nth-child(1) { animation-delay: 0.25s; }\n .timeline-item:nth-child(2) { animation-delay: 0.35s; }\n .timeline-item:nth-child(3) { animation-delay: 0.45s; }\n .timeline-item:nth-child(4) { animation-delay: 0.55s; }\n \n .timeline-item:last-child {\n margin-bottom: 0;\n }\n \n .timeline-dot {\n position: absolute;\n left: -22px;\n top: 14px;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n border: 3px solid white;\n box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n }\n \n .timeline-dot.meal { background: var(--warm-pink); }\n .timeline-dot.snack { background: #7EC8A0; }\n .timeline-dot.milk { background: var(--baby-blue); }\n \n .timeline-card {\n background: white;\n border-radius: 18px;\n padding: 14px 16px;\n box-shadow: 0 2px 16px rgba(200, 160, 140, 0.08);\n display: flex;\n align-items: center;\n gap: 14px;\n transition: all 0.3s ease;\n cursor: pointer;\n }\n \n .timeline-card:hover {\n transform: translateX(4px);\n box-shadow: 0 4px 20px rgba(200, 160, 140, 0.15);\n }\n \n .timeline-card .food-icon {\n width: 44px;\n height: 44px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n flex-shrink: 0;\n }\n \n .timeline-card .food-icon.meal-icon { background: #FFF0EC; color: var(--warm-pink); }\n .timeline-card .food-icon.snack-icon { background: #E8F5EE; color: #7EC8A0; }\n .timeline-card .food-icon.milk-icon { background: #E8F0F8; color: #7EB0D4; }\n \n .timeline-card .food-info {\n flex: 1;\n min-width: 0;\n }\n \n .timeline-card .food-info .food-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--text-primary);\n }\n \n .timeline-card .food-info .food-desc {\n font-size: 12px;\n color: var(--text-secondary);\n margin-top: 2px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .timeline-card .food-info .food-desc .tag {\n background: var(--cream);\n padding: 1px 8px;\n border-radius: 10px;\n font-size: 10px;\n color: var(--text-secondary);\n }\n \n .timeline-card .food-time {\n font-family: 'Quicksand', sans-serif;\n font-size: 12px;\n font-weight: 600;\n color: var(--text-secondary);\n text-align: right;\n flex-shrink: 0;\n }\n \n /* 营养分类网格 */\n .nutrition-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 10px;\n margin-bottom: 24px;\n animation: fadeInUp 0.6s ease-out 0.3s both;\n }\n \n .nutrition-item {\n background: white;\n border-radius: 18px;\n padding: 14px 8px;\n text-align: center;\n box-shadow: 0 2px 12px rgba(200, 160, 140, 0.06);\n transition: all 0.3s ease;\n cursor: pointer;\n }\n \n .nutrition-item:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(200, 160, 140, 0.12);\n }\n \n .nutrition-item .nutri-icon {\n width: 40px;\n height: 40px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n margin: 0 auto 8px;\n }\n \n .nutrition-item .nutri-icon.grain { background: #FFF0E0; color: #E8A060; }\n .nutrition-item .nutri-icon.protein { background: #FFE8E8; color: #E87070; }\n .nutrition-item .nutri-icon.veggie { background: #E8F5E8; color: #60B880; }\n .nutrition-item .nutri-icon.fruit { background: #FFF0E8; color: #F0A070; }\n \n .nutrition-item .nutri-name {\n font-size: 12px;\n font-weight: 500;\n color: var(--text-primary);\n }\n \n .nutrition-item .nutri-count {\n font-family: 'Quicksand', sans-serif;\n font-size: 11px;\n color: var(--text-secondary);\n margin-top: 2px;\n }\n \n /* 本周食谱推荐 */\n .recipe-section {\n animation: fadeInUp 0.6s ease-out 0.4s both;\n }\n \n .recipe-scroll {\n display: flex;\n gap: 14px;\n overflow-x: auto;\n padding: 4px 0 8px;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n \n .recipe-scroll::-webkit-scrollbar {\n display: none;\n }\n \n .recipe-card {\n min-width: 160px;\n background: white;\n border-radius: 20px;\n padding: 16px;\n box-shadow: 0 2px 16px rgba(200, 160, 140, 0.08);\n transition: all 0.3s ease;\n cursor: pointer;\n flex-shrink: 0;\n }\n \n .recipe-card:hover {\n transform: translateY(-4px) scale(1.02);\n box-shadow: 0 8px 28px rgba(200, 160, 140, 0.15);\n }\n \n .recipe-card .recipe-img {\n width: 100%;\n height: 100px;\n border-radius: 14px;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 36px;\n }\n \n .recipe-card .recipe-img.img-1 { background: linear-gradient(135deg, #FFE8D0, #FFD4B8); }\n .recipe-card .recipe-img.img-2 { background: linear-gradient(135deg, #D4F0E0, #B8E8D0); }\n .recipe-card .recipe-img.img-3 { background: linear-gradient(135deg, #E8D8F0, #D8C0E8); }\n .recipe-card .recipe-img.img-4 { background: linear-gradient(135deg, #FFE0E8, #FFC8D4); }\n \n .recipe-card .recipe-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--text-primary);\n margin-bottom: 4px;\n }\n \n .recipe-card .recipe-meta {\n font-size: 11px;\n color: var(--text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .recipe-card .recipe-meta i {\n font-size: 10px;\n }\n \n .recipe-card .recipe-meta .badge {\n background: var(--mint);\n color: #4A8A70;\n padding: 1px 8px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 500;\n }\n \n /* 底部添加按钮 */\n .fab-button {\n position: fixed;\n bottom: 32px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n background: linear-gradient(135deg, var(--warm-pink), var(--soft-coral));\n color: white;\n border: none;\n padding: 14px 28px;\n border-radius: 50px;\n font-size: 15px;\n font-weight: 600;\n font-family: 'Noto Sans SC', sans-serif;\n display: flex;\n align-items: center;\n gap: 10px;\n box-shadow: 0 8px 32px rgba(255, 158, 158, 0.4);\n cursor: pointer;\n transition: all 0.3s ease;\n animation: fadeInUp 0.6s ease-out 0.6s both;\n }\n \n .fab-button:hover {\n transform: translateX(-50%) translateY(-3px);\n box-shadow: 0 12px 40px rgba(255, 158, 158, 0.5);\n }\n \n .fab-button:active {\n transform: translateX(-50%) scale(0.96);\n }\n \n /* 动画 */\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes fadeInDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n /* 底部安全区 */\n .safe-bottom {\n height: 40px;\n }\n </style>\n</head>\n<body>\n\n <!-- 背景装饰 -->\n <div class=\"bg-ornament\">\n <div class=\"blob blob-1\"></div>\n <div class=\"blob blob-2\"></div>\n <div class=\"blob blob-3\"></div>\n </div>\n\n <!-- 主容器 -->\n <div class=\"app-container\">\n \n <!-- 状态栏 -->\n <div class=\"status-bar\">\n <span class=\"time\">9:41</span>\n <div class=\"status-icons\">\n <i class=\"fa-solid fa-signal\"></i>\n <i class=\"fa-solid fa-wifi\"></i>\n <i class=\"fa-solid fa-battery-three-quarters\"></i>\n </div>\n </div>\n\n <!-- 宝宝信息头部 -->\n <div class=\"baby-header\">\n <div class=\"baby-info\">\n <div class=\"baby-avatar\">\n <i class=\"fa-solid fa-baby\"></i>\n </div>\n <div class=\"baby-details\">\n <h1>小糯米 🍼</h1>\n <div class=\"age\">\n <i class=\"fa-solid fa-cake-candles\"></i>\n 8个月12天 · 女宝\n </div>\n </div>\n </div>\n <div class=\"header-actions\">\n <button title=\"消息\">\n <i class=\"fa-regular fa-bell\"></i>\n </button>\n <button title=\"设置\">\n <i class=\"fa-regular fa-user\"></i>\n </button>\n </div>\n </div>\n\n <!-- 今日概览 -->\n <div class=\"today-summary\">\n <div class=\"label\">\n <i class=\"fa-regular fa-calendar-check\"></i>\n 今日饮食概览\n </div>\n <div class=\"today-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-icon\"><i class=\"fa-solid fa-utensils\"></i></div>\n <div class=\"number\">4 <span class=\"unit\">餐</span></div>\n <div class=\"stat-label\">已喂食</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-icon\"><i class=\"fa-solid fa-droplet\"></i></div>\n <div class=\"number\">620 <span class=\"unit\">ml</span></div>\n <div class=\"stat-label\">奶量</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-icon\"><i class=\"fa-solid fa-apple-whole\"></i></div>\n <div class=\"number\">5 <span class=\"unit\">种</span></div>\n <div class=\"stat-label\">食材</div>\n </div>\n </div>\n </div>\n\n <!-- 营养分类 -->\n <div class=\"nutrition-grid\">\n <div class=\"nutrition-item\">\n <div class=\"nutri-icon grain\"><i class=\"fa-solid fa-wheat-awn\"></i></div>\n <div class=\"nutri-name\">谷物</div>\n <div class=\"nutri-count\">2次</div>\n </div>\n <div class=\"nutrition-item\">\n <div class=\"nutri-icon protein\"><i class=\"fa-solid fa-egg\"></i></div>\n <div class=\"nutri-name\">蛋白质</div>\n <div class=\"nutri-count\">1次</div>\n </div>\n <div class=\"nutrition-item\">\n <div class=\"nutri-icon veggie\"><i class=\"fa-solid fa-carrot\"></i></div>\n <div class=\"nutri-name\">蔬菜</div>\n <div class=\"nutri-count\">3次</div>\n </div>\n <div class=\"nutrition-item\">\n <div class=\"nutri-icon fruit\"><i class=\"fa-solid fa-apple-whole\"></i></div>\n <div class=\"nutri-name\">水果</div>\n <div class=\"nutri-count\">2次</div>\n </div>\n </div>\n\n <!-- 饮食时间线 -->\n <div class=\"section-header\">\n <h2><i class=\"fa-regular fa-clock\" style=\"color: var(--warm-pink); margin-right: 6px;\"></i>今日饮食记录</h2>\n <a href=\"#\">查看全部 <i class=\"fa-solid fa-chevron-right\"></i></a>\n </div>\n\n <div class=\"timeline\">\n <div class=\"timeline-item\">\n <div class=\"timeline-dot milk\"></div>\n <div class=\"timeline-card\">\n <div class=\"food-icon milk-icon\"><i class=\"fa-solid fa-bottle-water\"></i></div>\n <div class=\"food-info\">\n <div class=\"food-name\">配方奶</div>\n <div class=\"food-desc\">\n 180ml\n <span class=\"tag\">全部喝完</span>\n </div>\n </div>\n <div class=\"food-time\">07:30</div>\n </div>\n </div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-dot meal\"></div>\n <div class=\"timeline-card\">\n <div class=\"food-icon meal-icon\"><i class=\"fa-solid fa-bowl-food\"></i></div>\n <div class=\"food-info\">\n <div class=\"food-name\">南瓜小米糊</div>\n <div class=\"food-desc\">\n 约80g\n <span class=\"tag\">高铁</span>\n <span class=\"tag\">新添加</span>\n </div>\n </div>\n <div class=\"food-time\">10:00</div>\n </div>\n </div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-dot snack\"></div>\n <div class=\"timeline-card\">\n <div class=\"food-icon snack-icon\"><i class=\"fa-solid fa-apple-whole\"></i></div>\n <div class=\"food-info\">\n <div class=\"food-name\">苹果泥 + 牛油果</div>\n <div class=\"food-desc\">\n 约50g\n <span class=\"tag\">维生素</span>\n </div>\n </div>\n <div class=\"food-time\">15:00</div>\n </div>\n </div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-dot meal\"></div>\n <div class=\"timeline-card\">\n <div class=\"food-icon meal-icon\"><i class=\"fa-solid fa-fish\"></i></div>\n <div class=\"food-info\">\n <div class=\"food-name\">鳕鱼西兰花碎碎面</div>\n <div class=\"food-desc\">\n 约90g\n <span class=\"tag\">DHA</span>\n <span class=\"tag\">手指食物</span>\n </div>\n </div>\n <div class=\"food-time\">18:00</div>\n </div>\n </div>\n </div>\n\n <!-- 本周食谱推荐 -->\n <div class=\"recipe-section\">\n <div class=\"section-header\">\n <h2><i class=\"fa-regular fa-star\" style=\"color: #F0C060; margin-right: 6px;\"></i>本周推荐食谱</h2>\n <a href=\"#\">更多 <i class=\"fa-solid fa-chevron-right\"></i></a>\n </div>\n \n <div class=\"recipe-scroll\">\n <div class=\"recipe-card\">\n <div class=\"recipe-img img-1\">\n <i class=\"fa-solid fa-carrot\"></i>\n </div>\n <div class=\"recipe-name\">胡萝卜土豆泥</div>\n <div class=\"recipe-meta\">\n <i class=\"fa-regular fa-clock\"></i> 20min\n <span class=\"badge\">6月+</span>\n </div>\n </div>\n\n <div class=\"recipe-card\">\n <div class=\"recipe-img img-2\">\n <i class=\"fa-solid fa-leaf\"></i>\n </div>\n <div class=\"recipe-name\">菠菜猪肝粥</div>\n <div class=\"recipe-meta\">\n <i class=\"fa-regular fa-clock\"></i> 40min\n <span class=\"badge\">补铁</span>\n </div>\n </div>\n\n <div class=\"recipe-card\">\n <div class=\"recipe-img img-3\">\n <i class=\"fa-solid fa-strawberry\"></i>\n </div>\n <div class=\"recipe-name\">蓝莓山药糕</div>\n <div class=\"recipe-meta\">\n <i class=\"fa-regular fa-clock\"></i> 30min\n <span class=\"badge\">手指食物</span>\n </div>\n </div>\n\n <div class=\"recipe-card\">\n <div class=\"recipe-img

total_tokens
13479
summary
设计了一个母婴婴儿饮食主题的移动端界面,采用柔和的暖色调(奶油白、蜜桃粉、浅薄荷绿),搭配圆润的卡片和有机形状。包含宝宝信息头部、每日饮食时间线、营养分类卡片、本周食谱推荐和添加记录按钮。使用 'Quicksand' 圆润字体营造亲切感,背景采用柔和渐变与装饰性有机形状,整体风格温暖治愈。
uiParsing
关闭