库存不可见
用户容易忘记已经买过什么，食材过期后才被发现。
← 返回作品集
03 / iOS 应用 · 2026
DishRoller.
把“今天吃什么”从一道开放题，变成一条从现有食材出发、轻松选菜并能立即开做的路径。这个项目从 Figma 原型开始，最终被开发为一款可运行的 SwiftUI iOS 应用。
- 我的角色
- UX / UI 设计 · SwiftUI 开发
- 项目形式
- 两人团队 · iOS 应用
- 核心工具
- Figma · Xcode · AI Agent · GitHub
- 技术栈
- SwiftUI · MVVM · Gemini API · SwiftData
01 / 问题定义
食材已经在家， 做饭的路径却断了。
对独居学生和忙碌职场人来说，问题通常不是完全没有食材，而是不知道现有食材能组合成什么。库存、选菜与食谱被分散在不同工具里，每次做饭仍要从零开始决定。
Problem statement我们如何把家中已有的食材，转化成一条更短、更有趣、也真正可执行的做饭路径？
选择负担重
“吃什么”范围太大，搜索更多食谱反而增加决策压力。
灵感难落地
推荐若不考虑库存、忌口与时间，就很难直接进入烹饪。
研究如何进入设计
早期桌面研究把机会点收敛到食物浪费、选餐疲劳与外卖支出；Persona 则帮助团队把目标用户具体化为“时间有限、希望使用现有食材、需要快速得到简单方案”的年轻独居用户。
02 / 产品策略
把三个分散动作， 连成一个闭环。
我没有把 DishRoller 做成另一个大型食谱库，而是围绕一次真实做饭任务设计：先看现有食材，再缩小选择，最后生成可执行食谱；完成烹饪后再更新库存。
记录库存
建立真实可用的食材上下文
→转盘选菜
用游戏化交互降低选择压力
→生成食谱
结合时间、口味和忌口生成方案
→完成烹饪
保存记录并同步消耗库存
从上下文开始
推荐首先使用用户已有食材，而不是要求用户先想出一道菜。
逐步收窄选择
先转盘选食材，再补充口味、时间和忌口，避免一次填写过多信息。
结果必须可执行
食谱不仅给出名称，还包含用料、步骤、收藏、重新生成与完成烹饪。
03 / 从原型到真实应用
原型定义体验， AI Agent 加速实现。
低、中保真 Figma 原型先确定信息架构和关键任务流。进入开发后，我把设计拆成可验证的小任务，使用 Codex 与 Claude Code 协助编写、重构和排查 SwiftUI 代码，并由我持续判断交互是否符合原型、状态是否连贯、视觉是否达到预期。
用原型确定任务流
先把库存、选菜、食谱三条主流程跑通，明确页面之间需要共享的数据和状态。
Figma · Low / Mid-fi把需求拆给 AI Agent
每次只给出明确的界面目标、状态逻辑和验收条件，让 Agent 生成组件或修改现有工程。
Codex · Claude Code在 Xcode 中审查与整合
检查生成代码，处理页面间的数据流、异步加载和错误状态，将独立功能接入完整 App。
SwiftUI · MVVM模拟器与真机迭代
通过 Simulator 和真实 iPhone 复现问题，再按功能拆分修复并提交 GitHub，形成可回溯的迭代记录。
Test · Commit · Refine我的判断
- 定义产品目标与信息架构
- 设定视觉和交互验收标准
- 检查跨页面状态与异常路径
- 真机测试并决定每轮修改优先级
AI Agent 的作用
- 将明确任务转译为 SwiftUI 代码
- 协助拆分组件与重构 ViewModel
- 定位编译、状态和布局问题
- 加速重复实现与修复循环
AI 提高了实现速度；产品逻辑、设计取舍、代码验收与最终质量仍由我负责。
04 / 技术实现
让三条任务流共享同一套状态。
应用采用 SwiftUI 与 MVVM。共享的 AppViewModel 连接库存、选菜、食谱和收藏状态；Gemini 服务生成结构化食谱与菜品图；SwiftData 与本地存储保留食材、偏好和历史记录。
01SwiftUI 界面→
02ViewModels→
03共享应用状态→
04Gemini 服务→
05SwiftData / 本地存储
跨页面数据
使用集中状态管理，让 Storage → DishRoller → Menu 的操作保持一致。
异步 AI 反馈
补充 loading、失败、重试与 demo fallback，避免生成过程成为黑盒。
密钥与协作
将本地 API 配置排除在 Git 之外，并用小步提交检查每轮改动。
05 / 最终成果 · 从食材到一餐
01 / 03
先看家里有什么
记录已有食材、查看保质期，缺少的食材可以加入购物清单。做饭的第一步，从盘点库存开始。
02 / 03
让选菜更轻松
转动转盘获得选菜灵感，再结合口味偏好和忌口逐步缩小范围，把模糊想法变成明确的食材组合。
03 / 03
把想法变成一餐
根据选中的食材生成食谱，查看用料和烹饪步骤。喜欢的菜谱可以收藏，做过的菜也能从历史记录里找回。
06 / 迭代记录
真机暴露问题， GitHub 留下答案。
可运行只是起点。真机测试之后，我连续调整信息密度、卡片布局、转盘选择、购物清单和食谱反馈，并修复页面间的状态问题。Git 历史记录保留了这条从“能运行”到“更好用”的路径。
查看 GitHub 源码统一核心界面
重做库存与选菜区域，统一背景、字号、卡片和操作层级。
重构食谱阅读
调整食谱首页、详情卡和烹饪步骤，让生成结果更容易浏览和执行。
完成真机修复
在真实 iPhone 上检查布局与系统行为，修复模拟器中没有暴露的问题。
完善生成反馈
更新 loading 与 regenerate 的状态反馈，并完成三条主流程的最终视觉校准。
最终形成的产品闭环
库存管理、随机选菜、个性化 AI 食谱、收藏与历史记录被连接成一款可运行的 iOS 应用，并入选 UTS Tech Festival 展示。
这次项目让我验证了什么
AI Agent 最适合处理边界清晰、验收明确的实现任务。真正决定产品质量的，是能否持续把模糊问题拆小、检查结果、发现状态之间的关系，并在真机中完成最后一轮判断。
DishRoller / 2026