不知道今天吃什么
在库存、口味和时间之间反复比较,最后又回到“随便吃点”或点外卖。
02 / CONTEXT
为什么需要这个产品?
家庭饮食不只是做一道菜。从冰箱里有什么,到今晚有多少时间、想吃什么、该怎么搭配,一顿饭之前,是一连串需要自己完成的判断。
AI 私厨管家从一个工作日晚餐场景出发:让想在家好好吃饭的人,少一点搜索和犹豫,多一点可以立即开始的行动。
食材零散,不知道它们能组成哪一餐。
时间有限,不想再翻几十份菜谱。
双手被占用,需要看得懂、跟得上的指导。

定义一餐的边界 → 组织核心链路 → 用可运行原型验证
03 / PROBLEM
一道菜,从选择到坚持,跨过的是三种不同的成本。
在库存、口味和时间之间反复比较,最后又回到“随便吃点”或点外卖。
菜谱提供了步骤,却未必解释火候、时机与替代方案。每一次不确定,都会打断烹饪。
记录与计划需要额外精力,单次做饭没有成为下一次选择的有效反馈。
用户真正缺少的不是更多菜谱,
而是一条从食材到完成一顿饭的低决策路径。
04 / RESEARCH & INSIGHT
从典型用户的厨房场景出发,理解行为背后的阻力与现有工具留下的空缺。
依据:现有项目文档、用户场景与原型分析。以下为设计阶段的定性判断与待验证假设,不代表量化用户研究结果。
WHO / 为谁设计
共同点是时间碎片化、依赖手机获取信息,也需要在双手忙碌时获得帮助。
OBSERVATION / 场景里的阻力
MARKET GAP / 三种解决问题的方式
比较的是交互模式与本项目的设计目标,不是各产品当前功能的支持清单。
| 比较维度 | 菜谱平台 | 通用 AI | AI 私厨管家 · 设计目标 |
|---|---|---|---|
| 从哪里开始 | 搜索菜名、浏览内容 | 描述需求、组织提问 | 拍下现有食材,补充偏好 |
| 如何做选择 | 用户比较不同菜谱 | 通过对话逐步收敛 | 同时展示库存、时间与推荐依据 |
| 如何完成 | 跟随图文或视频教程 | 在对话中继续追问 | 步骤、语音、计时在一条任务里衔接 |
| 如何延续 | 收藏与再次搜索 | 继续提供个人上下文 | 记录一餐,逐步沉淀偏好与反馈 |
Search & Choose
找到一道菜Understand & Assist
帮助完成一顿饭本案例的依据是可检查的项目文档与可运行原型;识别、推荐及营养数据使用本地模拟,不将设计目标等同于已上线能力。
| 工作层 | 项目依据 | 产出与验证 |
|---|---|---|
| 产品定义 | PRODUCT.md · 开发版 PRD | 目标用户、核心价值、北极星指标与明确的非目标 |
| MVP 收敛 | 产品结构 · 页面清单 · 优先级 | 从长期产品版图中收敛出一条最短可验证做饭闭环 |
| 体验设计 | 用户流程 · 状态逻辑 · 文案规则 | 识别确认、推荐解释、步骤指导、记录与健康反馈 |
| 视觉系统 | IP 资产 · 厨房背景 · 菜谱摄影 | 暖橙、奶油白、健康绿与“小厨”角色组成统一品牌语言 |
| 原型实现 | React · HTML/CSS/JS · Android 构建 | 独立 HTML 可运行原型与 Android 测试包,用真实流程检查设计 |
05 / STRATEGY
把“今天吃什么”变成一条可执行路径。面向独居青年、上班族与烹饪新手,从现有食材出发,把晚餐带到完成。
识别现有库存,允许确认与修正。
结合用户、时间、健康目标、偏好和库存。
收敛候选,用具体依据解释推荐。
用语音、计时与分步指导连接每个动作。
记录口味和完成反馈,服务下一餐。
用库存、时间与偏好收敛候选,不让用户在海量菜谱里继续做选择题。
把准备、火候、计时与调味拆成单手可读、可暂停的操作步骤。
识别冰箱中的现有食材,优先推荐能直接开做或只缺少少量食材的方案。
通过记录、收藏、口味与健康目标,让下一次推荐更贴近真实生活。
06 / ARCHITECTURE
五项底部导航承载高频日常;识别确认、智能匹配、菜谱详情与烹饪模式组成连续任务。
一次任务跨越多个入口,但不要求用户反复回到首页重新开始。
07 / CORE JOURNEY
从识别手边的食材开始,把选择、烹饪与反馈连成一次可以走通的任务。
完成料理获得美味成就感,完成一道菜07沉淀饮食记录记录热量、营养与个人偏好08查看健康分析查看趋势与可执行健康建议拍一下或手动补充,不要求先维护复杂库存。
匹配度、命中与缺料信息帮助用户快速选择。
步骤、火候、计时和语音入口围绕真实厨房操作。
健康数据为估算建议,并明确标注仅供参考。
08 / KEY EXPERIENCE
INPUT → DECISION → EXECUTION。从眼前食材,到可解释的选择,再到可跟随的操作。

01 / 拍照识别
用户已经站在食材面前。Camera 将逐项输入食材名称,变为一次拍摄;相册与手动输入为拍摄不便、权限未开放的情况保留入口。
AI 识别结果是待确认的输入,不是不可修改的答案。
查看确认与修正机制 →02 / AI 智能推荐
匹配度负责快速筛选,食材、缺料、时间和健康信息负责帮助判断。自然语言理由把这些条件连起来,让推荐可以被理解、比较和拒绝。

DECISION / 推荐信息结构示例
为什么推荐命中两种现有食材,只需补充蒜末;做法简单,适合时间有限的一餐。
匹配度为原型示例,不代表识别置信度;营养建议仅供参考。03 / 语音伴厨
手湿、拿着刀、正在看火时,语音承担高频控制。界面一次聚焦一个步骤,暂停、继续、重复和计时始终可见,语音与触屏可以互相接替。
Voice 的价值是减少厨房操作成本。

单步任务 · 本地交互演示
02 / 04 · 翻炒中火 · 注意观察颜色,不确定时可以先暂停。
等待开始。可尝试暂停、继续与重复步骤。
此处模拟语音指令反馈,不调用麦克风。09 / UI EXPLORATION
对比信息结构,解释为什么改变。Final 使用当前项目真实 UI,Early 使用用于讨论取舍的简化线框。
素材说明:未找到可核实的三组独立 Early 稿。以下 Early 均标注为 Exploration Reconstruction,不作为历史版本证据,也不据此声称已完成用户测试。
菜名、图片和标签告诉用户这是什么,却没有解释为什么适合现在。
把推荐依据前置到卡片,不要求进入详情再比较。
增加匹配、库存命中、缺料、时间与自然语言理由。
家常菜 清淡 快手
缺少“我现在能不能做”的决策信息。
识别后直接推荐,会把错误输入带进结果,用户不知道从哪里改。
在 AI 输出与推荐之间,明确设置用户确认环节。
识别 → 确认 → 修改 → 推荐;增加、删除与重识别都有入口。
缺少检查与修正路径。
信息完整,但阅读、滚动与点击同时争夺厨房里的注意力。
将正在进行的任务与完整教程分层,让控制保持可达。
突出单步任务、大尺寸控制、Voice 与 Timer;完整步骤仍可回看。
每个步骤同等突出,操作分散。

真实素材:screen-recommend.png。对照卡片中的匹配、缺料与推荐理由。
10 / DESIGN SYSTEM
统一基础规则、可操作组件、影像语言与小厨角色,让体验中的每一次反馈使用同一套语言。
TYPOGRAPHY
延续品牌中的思源黑体 / DIN Next 字体方向。当前网页使用系统无衬线回退,中文优先 PingFang / Microsoft YaHei,计时数字使用等宽数字。
SPACING & RADIUS
以 4px 为基础递进。组件内部紧凑,任务之间拉开距离;延续 14px 产品圆角与 52px 主操作高度,长篇展示区域保持开放。
组件不只是外观。焦点、按下、选中与反馈一起定义下一步。以下为可操作的 HTML 示例。
BUTTON / INPUT / CHIP
选择标签,查看选中反馈。
SEARCH / RECIPE CARD

15 分钟 · 缺料 1 项
没有匹配菜谱,试试“西兰花”或清空搜索。
AI RECOMMENDATION
命中西兰花和虾仁,补齐蒜末即可开做。
VOICE CONTROL
本地控制示例,不调用麦克风。
温暖、聪明、可靠,亲切但不幼稚。早期的绿色未来感让位于自然厨房光线、真实食物与家庭场景:Warm / Smart / Reliable / Kitchen-first / Food-led。



帽子建立厨房识别,橙色指向下一步,智能信号说明当前状态。小厨在首页、识别、推荐、语音陪伴与记录中出现,解释状态、给予鼓励,功能信息仍由清晰组件承担。
明亮橙发、白色厨师帽与围裙保留亲切的专业感。表情传递鼓励,状态文字说明当前进度和下一步。
COOK WITH CONFIDENCE · 温暖陪伴,智能作厨


“需要我推荐今晚的菜谱吗?”
同一角色,承接推荐与语音陪伴。
11 / AI EXPERIENCE
把状态、确定性、修正权和推荐依据放到使用路径里。AI 负责降低负担,用户保有最终判断。
交互示例使用本地模拟。番茄 92%、牛肉 87% 是置信度展示样例,不是模型实测准确率;与菜谱匹配度分别表达。
用明确的动词说明当前工作,不把不同阶段都压成一个“加载中”。
用短反馈说明正在识别食材,避免无信息等待。
选择一项,查看系统状态。
完成后说明发现了什么,并给出可执行的下一步;需要更久时保留当前上下文。
成功不等于绝对正确。以食材为单位表达置信度,并让每一项都能确认和修改。
先告诉用户发现几种食材,再进入逐项确认。
以下两项为独立的置信度交互示例。
请检查食材名称,再确认用于推荐。
Human in the Loop:编辑入口就放在结果旁边,修改后保留已经完成的输入。
识别结果允许检查、补充和更改,不要求盲信 AI。
Explainability:把依据放到结果附近,使用户能够检查条件、判断适配度,而不是只相信一个分数。
候选菜谱同时展示匹配度、缺料、时间和难度。
用自然语言解释命中食材与当前推荐依据。
识别置信度回答“认得有多确定”;匹配度回答“与条件有多适合”。两者不能混为准确率。
Execution Feedback → Long-term Feedback。让计时解释眼前的进度,让健康反馈服务下一餐。
火候、预计时间、倒计时和步骤状态集中呈现。
先给整体判断与行动建议,并明确数据仅供参考。
12 / INTERACTIVE PROTOTYPE
设计最终没有停留在一组静态界面里。我把核心路径真正做成了可以点击、切换和验证的产品。
TRY THIS FLOW
下方轻量 Demo 用于检验导航、搜索筛选、模块切换与数据状态。确认、修改食材的可操作示例位于 AI Experience →。快速入口可直接切换下方 Demo 的对应模块。
原型中的识别、推荐和营养数据为本地模拟,用于验证产品流程与交互,不代表已接入生产级 AI 服务。
AI / Voice / Nutrition 均为本地原型模拟,不代表 Production AI Service。匹配度与健康评分是演示数据,不是模型准确率或用户研究结果。
SCENARIO / 29 SECONDS
打开冰箱 → 识别现有食材 → 根据理由选菜 → 跟随步骤与计时 → 记录一餐。视频让这条连续路径回到真实生活的语境。
13 / IMPLEMENTATION
以 AI Full-Stack Designer 的视角,从产品行为定义,走到任务拆解、协同编码与浏览器检查。用可核验的文件和可操作的状态,连接设计判断与最终交付。
Product Logic
UX Flow
UI System
Task Breakdown
Prompt Definition
Codex Implementation
Iteration / Debug
HTML / CSS / JS
React
Responsive / Interaction
Browser / Mobile
State / Interaction
Compare / Fix
Web Prototype
Existing Android Test Build
Portfolio Case Study
DESIGN → CODE
AI 不直接替代设计过程。产品目标、交互边界和验收条件先被写清,Codex 负责把约束转成代码,再通过真实浏览器逐项比较与修正。
“不要使用整张参考图作为页面。”
“文字必须是真 DOM。”
“移动端必须真实重排。”
“现有 Demo 不允许被破坏。”
TECHNICAL EVIDENCE
区分“文件存在”“交互通过验证”和“生产能力已上线”,让证据保持准确。
以下是项目内实际路径的精简索引,分别属于产品项目与作品集。
私厨管家项目 / PRODUCT.md 私厨管家项目 / AI私厨管家.html.html 私厨管家项目 / ai私厨管家 / src / App.jsx 私厨管家项目 / ai私厨管家 / src / main.jsx 私厨管家项目 / ai私厨管家 / 修改文件 / package.json 私厨管家项目 / 私厨管家-Android测试版-20260817.apk 作品集 / 项目 / APP详情页 / app详情页.html 作品集 / 项目 / APP详情页 / AI_Private_Chef_Case_assets / case-study-phase-three.js查看文件大小与 SHA-256 核验记录 ↗
14 / VALIDATION
DESIGN QA / SELF VALIDATION / PROTOTYPE VALIDATION
这里记录的是设计与原型的自检,不是外部用户研究。没有使用未经验证的用户数量、提升百分比、满意度或商业 KPI。
以下 Before / After 为已发生的实现差异摘要,不是历史界面截图。依据来自原页面代码与前两阶段重构记录。
01 / INFORMATION HIERARCHY
After · 真实 DOM 与内容驱动高度,让信息在不同宽度重新组织。
.positioning-reference
.evidence-reference
.architecture-reference图片显示时,原有标题、表格与架构内容被隐藏。
02 / AI CORRECTION
After · 确认、增删、修改和重新识别都有可操作反馈。
<em>替换</em>这里描述的是原 Case Study 状态示例,不代表产品历史版本完全没有纠错能力。
03 / COOKING CONTROL
After · 单步任务、暂停、继续与本地计时形成连续控制。
<b>03:00</b>产品记录中已有当前步骤与计时设计;本次比较的是 Case Study 如何证明交互,而非声称新发明了这些功能。
RESPONSIVE QA
通过内容重排适配屏幕,而不是把固定设计稿等比例缩小。移动端无需 Hover 或 Sticky 即可阅读全部内容。
15 / REFLECTION
WHAT WORKED
AI 没有被做成一个独立聊天入口,而是进入识别、决策、执行与反馈。每一步围绕用户此刻的任务,提供下一步可采取的行动。
这是本项目形成的产品设计判断;实际使用效果仍需要真实用户与真实模型验证。
WHAT I LEARNED
AI 产品最重要的并不是让 AI 看起来有多聪明,而是让用户知道它正在做什么、为什么这样判断,以及判断错了以后怎么办。
WHAT’S NEXT
Local Prototype Simulation · 本地流程示意,非在线 AI 服务。