试用地址: https://eee1023.github.io/my-recipes/

需要源码滴滴我获取

今天跟大家分享一个特别有意思的开发经历。我用 Gemini 3（就是 Google 最新的 AI 编程助手）从零到一开发了一个功能完整的菜单点菜网站。整个过程就像是在和一个超级靠谱的程序员朋友聊天一样，

完全不用自己敲代码，想法说出来，网站就做好了。真的是太爽了！

第一步：从想法开始

其实最开始，我已经有一个食谱展示网站了，就是那种能看各种菜谱、查看做法的网站。但突然有一天我就想，诶，如果能直接在这个网站上点菜下单不是更酷吗？就像在餐厅看菜单一样！

于是我就跟 Gemini 3 说："我的食谱网站可以实现点菜功能吗？我想在这个网站上进行点菜，你想想怎么实现。"

你猜怎么着？它马上就理解了我的想法，而且给出了超级详细的实现方案！

第二步：添加基础点菜功能

Gemini 3 的第一步就是给每道菜加上价格。它自动帮我给所有16道菜都定了合理的价格，从便宜的杂粮饭5元，到豪华的老母鸡汤128元，价格梯度很合理。

然后它做了这些事情：

🛒 购物车系统

• 在页面右下角加了一个超好看的浮动购物车按钮（一个大大的购物车图标🛒）

• 点击按钮会从右侧滑出一个购物车侧边栏

• 里面能看到我选的所有菜品、数量、价格

🍽️ 点菜按钮

• 每个菜谱卡片底部都加了"加入菜单"按钮

• 点开菜谱详情页，底部也有价格显示和加入按钮

• 购物车里可以随意调整数量（+/-按钮）

💰 实时计算

• 购物车右上角有个小红点显示菜品总数量

• 底部实时显示总价

• 点击"立即下单"就能完成订单

这一步做完，我已经能在网站上愉快地点菜了！感觉就像真的在餐厅点菜一样。

第三步：历史订单记录（这个功能绝了！）

用了一会儿之后，我又想到一个问题：下单之后记录就没了，想看看之前点过什么菜都不行。于是我又问 Gemini 3："能不能加一个历史点单记录？"

它立马就懂了，而且做得比我想象的还要好：

📋 双标签设计

购物车侧边栏变成了两个标签页：

• 当前订单：正在点的菜

• 历史记录：过往所有订单

💾 本地存储

所有订单都保存在浏览器的 localStorage 里，即使关闭浏览器重新打开，历史记录依然在！再也不用担心数据丢失了。

📦 可展开的订单卡片

每个历史订单都是一个卡片，上面显示：

• 📅 下单时间

• 🍽️ 菜品数量

• 💰 总金额

点击卡片可以展开查看详细的菜品列表，还能看到每道菜的数量和小计。

🗑️ 删除功能

• 可以单独删除某个订单

• 也可以一键清空所有历史（有确认提示，防止误操作）

下单成功后，购物车会自动切换到历史记录标签，让你立刻看到新订单。这个细节设计真的很贴心！

第四步：加点特效和音效（这才是灵魂！）

网站功能做完了，但我总觉得少了点什么。对了，就是那种点击的快感！于是我问："能不能加一些交互特效，比如点击特效、声音？"

Gemini 3 这次真的给我整了个大的：

🎵 音效系统（完全用代码生成！）

它用 Web Audio API 生成了四种不同的音效：

1. 点击音 - "哔" 的一声短促提示音

2. 加入菜单音 - 三个上升音符（la-do-mi），超有成功感

3. 下单成功音 - 欢快的旋律（do-mi-so）

4. 删除音 - 两个下降音符

关键是这些声音完全不用外部音频文件，都是实时生成的正弦波！

💫 波纹特效

点击任何按钮或菜品卡片时，从点击位置会扩散出一圈圈波纹，像水波一样。这个特效在 Material Design 里很常见，加上之后质感立刻提升！

🍽️ 飞入购物车动画

这个是我最喜欢的！点击"加入菜单"时：

1. 一个小食物图标🍽️从按钮位置飞向购物车

2. 飞行轨迹是平滑的曲线

3. 到达购物车时，购物车会抖动一下

4. 右上角的数字红点跟着更新

这个动画反馈太爽了，让人忍不住一直想点"加入菜单"！

🎆 粒子爆炸

下单成功的瞬间，屏幕中心会爆发出30个五彩缤纷的小圆点，向四周均匀散开，就像放烟花一样庆祝！

有了这些特效，整个网站活了！每次点击都有反馈，每个操作都有仪式感。

第五步：Bug 修复（完美主义者的较真）

Bug 1：购物车滚动问题

测试的时候我发现，当购物车里商品超过5个时，下面的"立即下单"按钮就看不到了，被商品列表挤出屏幕了。

我截了个图给 Gemini 3 看，它立刻就找到了问题：Flexbox 布局的滚动没配置好。

它的解决方案：

• 给商品列表区域加上 flex: 1 和 min-height: 0，让它可以滚动

• 给底部按钮区域加上 flex-shrink: 0，确保它不会被压缩

• 给所有固定区域（标题、标签、按钮）都加上 flex-shrink: 0

修复后，无论添加多少商品，列表区域都会出现滚动条，下单按钮始终固定在底部可见。完美！

Bug 2：购物车跑到左下角

更诡异的bug来了：有时候购物车按钮会突然跑到左下角去！我又截图发给 Gemini 3。

它分析后发现是 shake 动画的锅：

1. shake 动画用了 transform

2. hover 效果也用了 transform: scale(1.1)

3. 两个 transform 冲突了，导致位置计算出错

解决方案也很优雅：

• 改进动画，使用 translate(x, y) 替代 translateX(x)

• 添加 animation-fill-mode: none 确保动画结束后恢复原状

• hover 改成 :hover:not(.shake)，shake 时不触发 hover

• JavaScript 里用 animationend 事件监听器确保动画类被正确移除

修复后，购物车按钮稳如泰山，再也没跑过！

开发体验总结

整个开发过程大概花了不到1小时，但做出来的是一个功能完整、交互丰富、视觉精美的网站。如果让我自己从零写代码，估计得花一整天，还不一定能做得这么好。

我的感受

1. 沟通超级顺畅我只需要用自然语言说出需求，Gemini 3 就能理解我想要什么。不需要写技术文档，不需要画原型图，就像和朋友聊天一样。

2. 代码质量很高生成的代码结构清晰、注释详细、命名规范。而且它会同步修改 HTML、CSS、JavaScript，保持代码的一致性。

3. 细节考虑周到很多我没想到的细节，它都帮我做了。比如：

   • 下单后自动切换到历史记录标签

   • 有确认提示防止误删

   • Toast 消息提供即时反馈

   • 所有按钮都有波纹特效

4. Bug 修复神速遇到问题截个图发给它，它马上就能定位问题并给出解决方案。不用自己调试，不用到处搜索，省心省力。

技术栈

最终的网站用到了这些技术：

• 前端框架：纯原生 HTML + CSS + JavaScript（无框架依赖）

• 样式：CSS 变量、Flexbox、Grid、动画、过渡

• 存储：localStorage（持久化订单历史）

• 音频：Web Audio API（实时生成音效）

• 交互：事件监听、DOM 操作、自定义动画

代码总量：

• HTML: 约100行

• CSS: 约1000行

• JavaScript: 约1200行

给读者的建议

如果你也想试试用 AI 开发网站，这是我的一些建议：

✅ 要这样做

1. 需求说清楚用口语化的方式描述你想要什么，越具体越好。比如"我想要一个从右侧滑出的购物车"比"加个购物车"要好。

2. 及时反馈看到不满意的地方立刻说出来，AI 可以马上调整。遇到 bug 截个图发过去，比文字描述清楚一百倍。

3. 大胆提需求不要怕需求太复杂。音效、动画、特效这些听起来很难的功能，AI 都能搞定。

4. 逐步迭代先做基础功能，确认 OK 后再加新功能。一口气提太多需求可能会让实现变复杂。

❌ 要避免

1. 不要想着一步到位慢慢加功能，边开发边优化，体验更好。

2. 不要忽略测试每加一个功能就在浏览器里试试，早发现问题早解决。

3. 不要害怕改需求想到新点子随时提，AI 不会嫌你烦，反而能帮你实现更好的效果。

最后

说实话，用 Gemini 3 开发这个菜单网站的过程，让我重新认识了编程这件事。以前总觉得做网站要学一大堆技术，写一大堆代码，现在发现，只要你有想法，AI 就能帮你实现。

这种氛围编程真的很上头——我只需要思考产品该做成什么样，具体怎么实现、怎么写代码、怎么调试，全都交给 AI。开发过程就像在玩游戏闯关，每完成一个功能都有满满的成就感。

如果你也有个想做的网站或者 App，不妨试试和 AI 搭档开发。说不定你会发现，原来编程可以这么轻松愉快！

---

在线试用：https://eee1023.github.io/my-recipes/

技术栈：HTML + CSS + JavaScript（纯原生）

开发时间：< 1小时

核心功能：

• ✅ 食谱展示与筛选

• ✅ 购物车系统

• ✅ 历史订单记录

• ✅ 交互特效（波纹、飞行动画、粒子爆炸）

• ✅ 音效系统

• ✅ 本地数据持久化