马上开饭 - CookNow
马上开饭是一个创新的智能烹饪助手平台，利用先进的 AI 技术帮助用户根据现有食材快速生成美味菜谱。通过豆包 AI 的深度学习能力，马上开饭不仅能够智能匹配食材组合，还能根据用户的口味偏好、烹饪难度和时间限制，生成个性化的菜谱方案，让每一次烹饪都充满创意和惊喜。
项目仓库|项目地址
- 使用 AI Studio 生成初版前端界面
- 通过 Claude Code + Cursor 进行后端开发
- 集成豆包 AI 智能菜谱生成
- 实现 CI/CD 自动化部署流程
- 打磨前端界面，优化用户体验
- 设计食材分类和筛选方案
- 优化菜谱展示和交互动画
功能描述：
- 支持快速添加食材，自动分类
- 保存常用食材组合
- 实时显示食材数量和状态
页面效果：
功能描述：
- 豆包 AI 根据食材智能生成菜谱
- 自动匹配菜系、口味和难度
- 生成详细的烹饪步骤和营养信息
页面效果：
功能描述：
- 按时间和难度筛选
- 自定义生成菜谱数量
页面效果：
功能描述：
- 完整的食材清单和用量
- 详细的烹饪步骤说明
- 营养成分分析
- 缺失食材提示和替代建议
页面效果：
功能描述：
- 一键收藏喜欢的菜谱
- 自动生成购物清单
- 清单分类管理
- 勾选已购买项目
页面效果：
使用目的： 项目初期的需求分析和功能设计
关键 Prompt：
我想开发一个智能菜谱生成应用，帮助用户根据现有食材生成菜谱。
请帮我：
1. 整理核心功能需求
2. 设计数据模型
3. 提供技术栈建议
4. 头脑风暴创新功能点
要求：
- 结合烹饪理论
- 利用 AI 技术
- 注重用户体验
- 考虑实用性
输出成果：
- 完整的功能需求文档
- 数据结构设计
- 技术选型建议（Next.js + AI）
- 创新功能点（智能匹配、营养分析等）
使用目的： 根据需求快速生成初版前端代码
关键 Prompt：
请帮我创建一个智能菜谱生成应用的前端界面，要求：
技术栈：
- React + TypeScript
- Tailwind CSS
- 春节主题（红金配色）
页面结构：
1. 顶部品牌栏（马上开饭标题 + Logo）
2. 食材输入区（标签式展示）
3. 筛选器（菜系、口味、时间、难度）
4. 菜谱卡片列表（网格布局）
5. 底部导航栏（首页、清单、收藏）
设计风格：
- 温暖、喜庆的视觉效果
- 流畅的动画过渡
- 卡片式设计
输出成果：
- 完整的 React 组件代码
- Tailwind CSS 样式配置
- 响应式布局实现
- 基础交互逻辑
使用目的： 完整的后端 API 开发和前端功能优化
主要工作：
3.1 API 路由开发
实现 Next.js API 路由：
- POST /api/recipes/generate - 生成菜谱
- POST /api/init-db - 初始化数据库
3.2 AI 集成
集成豆包 AI：
- 设计 Prompt 模板
- 处理 AI 响应
- 解析 JSON 格式菜谱
- 错误处理和重试机制
3.3 前端功能优化
优化用户体验：
- 添加加载动画
- 优化食材输入交互
- 实现收藏和购物清单
- 修复 Vercel 部署问题
输出成果：
- 完整的 API 路由实现
- AI 服务集成代码
- 前端交互优化
- CI/CD 配置
- 完整的技术文档
使用目的： 优化 AI 菜谱生成的 Prompt
关键 Prompt：
请帮我优化一个菜谱生成的 Prompt，要求：
输入：食材列表、用户偏好（菜系、口味、时间、难度）
输出：JSON 格式的菜谱数组
要求：
1. 菜名要有创意，适合春节团圆饭
2. 步骤要详细清晰
3. 标注缺失食材和替代方案
4. 包含营养信息
5. 严格返回 JSON 格式
输出成果：
const prompt = `
你是一位专业的中餐厨师，专门为马年团圆饭设计菜谱。
用户有以下食材: ${ingredientList}
请根据这些食材生成${count}个创意菜谱。
用户偏好: ${filterContext}
主题: "马上开饭" (立即烹饪)。
请以JSON格式返回...
`使用目的： 快速编写重复代码和智能重构
主要功能：
- 使用 Tab 补全 React 组件结构
- 自动生成 TypeScript 类型定义
- 智能导入依赖包
- 提取重复逻辑为函数
- 实时类型检查和错误修复
输出成果：
- 提升开发效率 3-5 倍
- 减少手动输入错误
- 保持代码质量一致性
- Next.js 15 + React 19 + TypeScript
- Tailwind CSS + Lucide Icons
- Next.js API Routes + Node.js
- 豆包 AI (Doubao)
- Vercel + GitHub Actions
- Git + npm
✅ AI 智能菜谱生成 ✅ 实时食材匹配 ✅ 完整的 CI/CD 流程
✅ 流畅的交互动画 ✅ 直观的食材管理 ✅ 多维度筛选功能 ✅ 收藏和购物清单
✅ 智能食材组合 ✅ 个性化菜谱推荐 ✅ 营养分析 ✅ 缺失食材替代建议
npm install创建 .env.local 文件：
DOUBAO_API_KEY=your_api_key_herenpm run dev打开浏览器访问: http://localhost:3000
- 在 Vercel 后台添加环境变量
DOUBAO_API_KEY - 连接 GitHub 仓库
- Vercel 会自动检测 Next.js 项目并部署
- 每次 push 到 main 分支会自动触发部署
马上开饭 - 智能烹饪，美味即刻呈现 🍳✨