先和大家打个招呼吧
大家好呀！我是有米的"铲屎官"——一个每天中午都要花15分钟纠结吃什么的打工人。某天盯着外卖App划到手指麻木的时候，脑子里突然蹦出来一个画面：要是有一只小仓鼠，歪着头问我"大人今天想吃什么"，然后帮我转个转盘，最后还记住我下次想吃啥……那该多好啊。
于是就有了「有米的小馆」。
我跟TRAE说：“我要一只戴眼镜的仓鼠侍者，它会做转盘，会记口味，会在我踩雷的时候掏手帕擦汗。” 它居然真的帮我做出来了。从角色设计到转盘逻辑，从表情切换到音效合成，全程TRAE Work一手包办。说实话，有好几个瞬间我觉得"原来这么简单"——比如我说"让仓鼠在转动转盘的时候表情变紧张"，TRAE直接就给加了eyes和mouth的状态切换，比我想象中流畅太多。
一、Demo 简介
是什么： 「有米的小馆」是一款生活决策辅助 × 模拟养成 × 治愈陪伴的Web应用。打开浏览器即玩，无需下载安装。
面向谁：
- 每天纠结"今天吃什么"的都市打工人
- 需要轻度陪伴感的独居数字原住民
- 喜欢模拟养成但不想投入重度时间的轻度游戏用户
- 对AI角色形态好奇的普通用户
主要功能：
功能一：口味偏好学习
首次进入时，有米会像一个认真的小侍者一样，问你几个问题——辣度偏好、汤类喜好、有没有忌口。这些答案会被它用歪歪扭扭的粉笔字"记在小黑板上"，后续每次推荐都会参考。
功能二：权重转盘
输入你想吃的选项，有米会根据你的口味偏好、天气、历史反馈，把选项变成大小不一的转盘扇区。不是均等随机的——你爱吃的会大一点，最近吃多了的会小一点。点"加一批"可以追加更多选项（最多12个），"换一换"可以全部替换，还能自己输入。
功能三：反馈养成
转盘出结果后，你可以告诉有米"好吃"或"踩雷"。好吃的时候它比你还高兴，围裙口袋飞出金色小星星；踩雷的时候它耳朵垂下来，掏出小手帕擦汗，然后认真追问原因，记在小本子上。连续互动后，有米会越来越懂你。
功能四：记忆系统
有米会记住你不吃的东西、下雨天偏爱的热汤、连续吃辣后该换口味了的规律。它用"小本本"记录每次反馈，随着使用越来越久，推荐会越来越准。
二、Demo 创作思路
灵感来源：
某天中午，我又在用外卖App划了15分钟还决定不了吃什么。划到最后随便点了一个，吃完总觉得差点意思——不是因为不好吃，而是因为"没有人帮我想"。市面上的"吃什么"工具都是高效、准确、冷冰冰的随机数生成器。它们帮你做完决定就走了，下次见面时已经忘了你是谁。
我想要的不是一个更快的决策工具，而是"有人在替我想"的感觉。
想解决的问题：
"今天吃什么"看似是个小问题，但它是每天都会发生的、真实存在的微型焦虑。用户需要的不是更精准的推荐算法，而是一个有温度的、会记住你的、像朋友一样存在的决策伙伴。
为什么做这个方向：
我判断AI在日常生活中的最佳形态，不是推送通知、不是数据图表，而是一个有性格、有记忆、有情感反馈的角色。一只仓鼠侍者比一个推荐列表更能缓解"选择困难症"的本质痛点——不是缺信息，是缺陪伴。
产品的情感曲线设计为三层：
- 第一层"有用"：转盘确实帮我做了决定，扇区分析有道理
- 第二层"懂我"：它记得我不吃芹菜，下雨天自动推热汤
- 第三层"等我回家"：深夜打开看到它趴在吧台上睡着了，吧台上散落着练习画转盘的废稿
从"这个转盘挺有用"到"它在等我回家"——这就是「有米的小馆」想创造的情感价值。
三、Demo 体验地址
在线体验链接： https://youni-demo.surge.sh
直接浏览器打开即可体验，无需安装任何东西。建议用手机或窄屏浏览器查看效果更佳（设计为375px移动端适配）。
四、TRAE 实践过程
开发流程
整个Demo完全使用TRAE Work开发完成，以下是关键步骤：
第一步：角色设计与形象生成
跟TRAE描述了有米的形象——奶白色小仓鼠、圆框眼镜、白色围裙。通过反复沟通调整，最终生成了24种表情姿态（站立、思考、紧张、开心、犯困、眨眼等），全部抠图为透明背景PNG。
第二步：核心交互架构搭建
用TRAE Work搭建了5个场景阶段的完整流程：
- Stage 1：蛋壳孵化开场动画
- Stage 2：口味偏好问答设置
- Stage 3：权重转盘主界面
- Stage 4：结果反馈与评价
- Stage 5：记忆小本本查看
第三步：转盘权重算法实现
跟TRAE详细描述了权重计算逻辑——综合口味偏好匹配度、天气因素、选项顺序、历史反馈记录来计算每个选项的扇区占比。TRAE帮我把这个复杂逻辑浓缩成了简洁的Canvas绘制代码。
第四步：仓鼠表情联动
为有米设计了基于转盘状态的动态表情切换：转盘转动时表情变紧张期待，结果为高权重菜品时眼睛变开心，低权重时表情变思考。还加了定时眨眼让角色更生动。
第五步：音效与部署优化
用Web Audio API合成了转盘咔嗒声、星星飞出音效、按钮点击声，全部代码生成无需外部音频文件。最后把24张角色图和2张背景图全部内嵌为WebP格式的base64，实现真正的零外部依赖单文件部署。
开发关键步骤截图
截图1：开场蛋壳孵化
首次打开Demo时的开场动画——有米的蛋壳在温暖的灯光中轻轻摇晃，点击后裂开，有米登场自我介绍。
（见下方截图1）
截图2：口味偏好设置
有米会用侍者的口吻问你辣度、汤类、忌口等偏好，你的回答会被它"记在小黑板上"，影响后续推荐权重。
（见下方截图2）
截图3：权重转盘主界面
有米画好转盘等你来转。扇区大小不均等——你爱吃的更大，最近吃多了的更小。仓鼠表情会随转盘状态变化。
（见下方截图3）
Session ID
以下3个Session ID对应Demo开发的关键任务对话：
6a45f65e94fca4f66274421a—— 核心场景架构搭建与转盘权重算法实现6a4a58b0e47b79678590791e—— 仓鼠角色表情联动与动画优化6a4a58afe47b79678590791c—— 音效合成与零依赖部署优化
踩坑经历
- 透明背景变黑底： 部署时把PNG转成JPEG内嵌，结果透明通道丢失，仓鼠变成了黑底方块。最终改用WebP格式，既保留透明又控制体积（24张图从15MB压到258KB）。
- Canvas状态栈错乱： 转盘旋转计算中ctx.save()和ctx.restore()没配对，导致角度计算全部偏移。TRAE帮忙排查后统一了状态栈管理。
- 对话框遮挡： 对话框定位在仓鼠角色右上方，但部分场景会遮挡其他UI元素。反复调整了position才找到不遮挡的最佳位置。
五、报名帖链接
报名帖已在大赛报名专区发布，目前等待审核通过中。
感谢评审大大看到这里！有米在它的店里等你来玩~ 转个转盘，看看今晚吃什么吧