随机吃
作者刘瑜类型Prompt
作品介绍
「随机吃」— AI 驱动的美食决策助手 核心价值：解决"今天吃什么"这一高频日常决策痛点，用开盲盒让吃啥从纠结变期待。 适用场景：上班族午餐选择困难、冰箱剩菜不知道做什么、朋友聚餐拿不定主意、减脂/养生人群需搭配推荐。 亮点功能： 盲盒随机：礼盒摇晃开盒动画，支持菜系×口味×场景×热量四维筛选 食材智能匹配：点选现有食材自动匹配菜谱，标注缺失项 个性化推荐：口味偏好+饮食禁忌记忆，越用越懂你 纯 Prompt 生成：零代码部署到 EdgeOne Makers
Prompt 内容
所有作品均通过 EdgeOne Makers Skill 生成并部署，具备CDN加速、安全防护能力，可按需接入后端服务。获取 Prompt 或 Skill后，在WorkBuddy中按指引操作（含 EdgeOne Makers Skill 安装步骤等），即可生成并上线你的同款网站。
请帮我开发一个名为「随机吃」的 H5 移动端网页应用，解决"今天吃什么"的选择困难症。
【产品定位】
一款有趣的美食决策工具，通过盲盒随机、智能匹配、个性化推荐三种方式帮助用户快速决定吃什么。
【设计风格】
- 暖米橙色系：背景 #FFF8F0，主色 #E8622A，副文字 #A09080
- 圆润卡片风格，圆角 16px，柔和阴影
- 移动端优先，最大宽度 480px 居中适配
- 动效丰富：盲盒摇晃开盒动画、粒子浮动背景、卡片弹入动画
【三大核心功能模块】
1️⃣ 随机吃（首页/盲盒模式）
- 礼盒造型的盲盒，点击后摇晃→开盒动画→弹出随机菜品
- 展示菜品图片、名称、描述、标签（菜系/口味/场景/热量）
- 三种操作按钮：自己做（跳转菜谱）、点外卖（复制菜名引导）、出去吃（打开地图）
- 多维筛选功能：菜系(8种)、口味(6种)、场景(5种)、热量范围、排除食材
- 热门推荐横向滚动列表
2️⃣ 随便做（食材匹配模式）
- 5大食材分类展示（肉类/蔬菜/海鲜/主食/调料），支持搜索
- 用户点选已有食材后，智能匹配可做的菜谱
- 匹配结果显示匹配度、缺少的食材（可直接购买）
- 支持一键随机填充食材
3️⃣ 我的（个性化设置）
- 口味偏好设置（16种口味标签多选）
- 饮食禁忌设置（过敏原/不吃的食材）
- 养生目标选择（减脂/增肌/养生/无特定目标）
- 设置会影响随机吃的推荐权重
【数据要求】
- 内置 109 种食物数据库，每种包含名称、描述、菜系、口味标签、场景标签、热量、图片
- 内置 109 份完整菜谱，含食材清单和分步烹饪步骤
- 5 大分类 100+ 食材库
- 所有数据内置在本地 JS 文件中，无需后端
【技术要求】
- 纯前端 HTML + CSS + JS，单文件 index.html + 数据文件
- 底部 TabBar 切换三个页面（随机吃/随便做/我的）
- 使用 CSS 动画实现交互效果，无需额外框架
- 响应式设计，适配手机屏幕
- 部署到 EdgeOne Makers
【交互细节】
- 盲盒点击 → 摇晃1.5秒 → 加载动画 → 结果卡片弹入
- 筛选底部弹窗，标签式多选
- 外卖/外出操作使用系统原生能力（剪贴板/地图）
- Toast 提示反馈
Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills, then deploy to EdgeOne Makers.感谢支持
如果你觉得这些作品很酷，给我们的 Github 仓库一个 Star