一、Demo 简介
是什么： AI 家庭食谱管家是一款基于 AI 图像识别技术的智能菜谱推荐产品，用户对着冰箱拍一张照，AI 自动识别食材并推荐匹配菜谱，支持按用餐人数一键调整分量。
面向谁： 核心用户是有日常做饭需求的家庭人群，包括 25-40 岁的上班族父母，以及 20-30 岁的独居或合租年轻人。
主要功能：
-
拍照识别食材：AI 自动识别冰箱内的食材种类和数量，识别准确率达 95% 以上
-
智能菜谱推荐：根据现有食材匹配最佳菜谱，标注食材匹配度，提示缺少的食材
-
分量自动调整：支持 1-6 人份一键调整，自动计算每种食材的精确用量
二、Demo 创作思路
灵感来源： 每天做饭前对着冰箱发愁是很多人的共同经历。身边很多上班族朋友和年轻父母，下班后已经很疲惫，还要花十几分钟甚至半小时纠结菜谱、搜做法。明明冰箱里有菜，却因为"懒得想"而打开外卖软件。如果有一个工具能"看见"食材就直接给出方案，能帮很多人省下决策时间和精力。
想解决的问题：
-
决策疲劳——每天都要想"今天吃什么"，消耗大量精力
-
信息不对称——冰箱里有什么食材、能做什么菜，缺乏系统性的匹配方案
-
分量难把握——网上的菜谱多是 2-3 人份，需要自己换算用量
-
食材浪费——冰箱角落的食材经常被遗忘，等到发现时已经过期
为什么做这个方向： 做饭是高频刚需场景，用户基数大、使用频率高；AI 图像识别技术已经成熟，技术上可行；同时可以接入生鲜电商形成商业闭环，也有减少食物浪费的社会价值。
三、Demo 体验地址
本 Demo 采用交互式可体验的 HTML 格式，可直接在浏览器中打开体验完整的产品流程。
体验方式：下载附件中的 ZIP 压缩包，解压后双击打开 demo/index.html 文件即可体验。
核心交互流程：
-
首页——点击拍照按钮
-
拍照识别——模拟相机取景，点击快门触发 AI 扫描动画
-
识别结果——展示识别出的 6 种食材，推荐 3 道匹配菜谱
-
菜谱详情——查看食材清单和烹饪步骤，可调整用餐人数（1-6 人）
-
一键下单——自动列出缺少的食材及价格，点击下单
四、TRAE 实践过程
第一步：需求分析与产品设计 通过与 TRAE 对话，明确产品定位、目标用户和核心功能，生成完整的产品创意方案和 HTML 展示页面。
第二步：交互式 Demo 开发 使用 TRAE 的代码生成能力，一次性生成包含手机模拟器、5 个可交互页面、完整业务流程的单文件 HTML Demo。
第三步：AI 图片生成 利用 TRAE 的图片生成能力，为三道推荐菜谱（西红柿炒蛋、蒜蓉西兰花、青椒土豆丝）生成高质量美食图片，替换原有 emoji 图标，提升视觉效果。
第四步：调试与优化 通过 TRAE 的实时预览功能，反复测试页面切换动画、扫描识别流程、分量调整逻辑等交互细节，确保 Demo 流畅运行。
关键技术实现：
-
纯 CSS 实现 iPhone 手机模拟器（刘海屏、圆角、阴影）
-
CSS transform + transition 实现页面左右滑动切换动画
-
JavaScript 定时器 + CSS 动画模拟 AI 扫描识别过程
-
基于基础分量和用餐人数的实时数学计算实现分量调整
index.zip (8.5 KB)