一个治愈系网页应用的诞生记——我是如何用一句提示词让Gemini帮我造出一个"情绪粉碎机"的

前言：那天我坏情绪爆棚

你有没有过这样的时候？明明知道"不开心"解决不了问题，就是控制不住地心烦意乱。我就是这样。某个无聊的下午，我突然想到一个疯狂的想法：与其被坏情绪困扰，不如用网页把它们"物理消灭"掉！

于是就有了这个项目：《坏情绪粉碎机》 —— 一个看似无厘头，实则充满创意的小工具。而这一切，都源于我对 Google Gemini 3 Pro 模型的一场"野心勃勃"的测试。

---

项目设定：极简的治愈美学

设计理念（提示词）

"设计一个主题为『坏情绪粉碎机』的交互式网页。整体采用扁平插画风格，运用极简线条、柔和温暖的配色，并加入可爱角色与趣味元素，营造轻松、治愈的视觉体验。界面中心放置一张可输入坏情绪的便签纸；页面下方呈现多种'处理坏情绪'的工具，用户输入坏情绪后可选择任意一种处理方式。点击工具后播放对应的治愈系动画，动画结束后自动回到初始界面。"

于是在3分钟内得到了

---

让cluade评价了下这个项目

视觉设计

• 🎨 配色方案：柔和的粉色、蓝色、紫色和黄色 —— 就像心情变好时的那种感觉
• ✏️ 线条风格：极简但不冷冰冰，每一条线都想传达温暖
• 😊 吉祥物：一个萌萌的"治愈团子"，会根据应用的三个状态改变表情

💡 核心功能：四种"消灭"坏情绪的方式

1. 🚀 发射太空 —— 一次性解决问题

把坏情绪折成纸条，装进火箭，唰地一下发射到外太空！

动画效果：纸条逐渐变小、透明，最终消失在星辰大海中。配上火焰音效和烟雾粒子，那一刻你真的会觉得"烦恼再也见不到了"。
代码亮点：

animate={{ y: -1200, scale: 0.2, opacity: 0 }}
transition={{ duration: 3, ease: [0.2, 0, 0.2, 1], delay: 0.5 }}

2. ✂️ 强力粉碎 —— 碎掉它！

呃...这个选项的名字已经说明一切了。想象有一台超级碎纸机，把你的坏心情吸进去。

动画效果：纸条被吸入机器，伴随着齿轮转动的声音，然后纷纷扬扬地变成碎片。

我在实现这个效果时，用了大量的粒子动画。在 Framer Motion 中实现这种"破碎"的感觉需要一些创意——我用随机的旋转、缩放和透明度变化来模拟碎片效果。

3. 💨 吹成泡泡 —— 温柔地放手

把坏情绪变成五彩缤纷的肥皂泡，轻轻地飘走了。这是四个选项中最"温柔"的一个。

动画效果：便签纸变成一个会闪闪发光的泡泡，然后缓缓上升、扩大、消失。伴随着柔和的"波普"音效。

这个效果最考验细节 —— 泡泡的大小变化、透明度渐变、光影效果都要配合得天衣无缝。

4. 🌀 丢进黑洞 —— 终极解决方案

对，就是字面意思。坏情绪被吸入一个旋转的黑洞，永远消失在异次元。这个选项最"暴力"，但也最解气。

动画效果：纸条被一股看不见的力量吸向中心，在旋转的漩涡中越来越小，最终消失无踪。伴随着诡异的"滋啦"音效。

---

🤖 Gemini AI 的"治愈系"对话

这个项目最有趣的部分，就是每一次"消灭"坏情绪后，都会有一句来自 Gemini AI 的温暖话语。

它是怎么工作的？

1. 用户输入坏情绪，选择一种消灭方式
2. 动画播放的同时，我们将坏情绪的内容和选择的工具信息发送给 Gemini
3. Gemini 生成一句贴切、温暖、治愈的话语（30字以内）
4. 动画结束后，这句话配合着一个"治愈团子"的开心表情一起呈现

示例对话

用户坏情绪："老板今天又骂我了，我觉得自己很垃圾"
选择工具：发射太空
Gemini 的回应："你的价值不由别人定义，远方在等你闪闪发光。"

用户坏情绪："和朋友吵架了，心累"
选择工具：吹成泡泡
Gemini 的回应："误解就像乌云，迟早会散开，阳光会再次照亮。"

这正是为什么我选择 Gemini 2.5-flash 模型 —— 它在理解上下文、生成创意文本方面表现得非常棒。而且速度快（flash模型），这对实时交互体验很重要。

小彩蛋：如果没有网络连接或API出问题，应用会使用本地的5句备用安慰话语，确保用户体验不会中断。代码要有容错意识！

---

🎬 动画是灵魂

这个应用能否打动人，80%取决于动画效果。Gemini使用 Framer Motion 实现了四种完全不同的视觉表达：

动画特效清单

效果	技术方案	难度
纸张下坠	transform + easing	⭐
粒子系统	多层motion.div + 随机延迟	⭐⭐
旋转特效	rotate + repeat	⭐⭐
模糊淡出	opacity + blur filter	⭐
震颤效果	animate Y轴 + Infinity repeat	⭐

最复杂的是黑洞效果 —— 它需要多个元素同时运动，且运动轨迹要形成一种"被吸入"的感觉。我用了圆形路径动画 + 缩放 + 透明度渐变的组合。

// 简化版黑洞效果代码逻辑
animate={{
  x: [0, Math.cos(angle) * radius],
  y: [0, Math.sin(angle) * radius],
  scale: [1, 0.1],
  opacity: [1, 0]
}}
transition={{ duration: 3, ease: "easeInExpo" }}

---

🎵 声音反馈系统

一个常常被忽视的细节 —— 音效。

项目中集成了一个 soundEngine 模块，为不同的工具提供了不同的声音反馈：

• 🚀 火箭升空音
• ✂️ 碎纸机运转音
• 💨 泡泡破裂音
• 🌀 神秘的黑洞"滋啦"音

这些音效让整个体验从"看动画"升级到了"多感官沉浸"。心理学上，声音反馈确实能增强用户的代入感和满足感。

---

💾 一个细节：历史记录

用户在这个应用中的每一次"情绪释放"都被记录在 localStorage 中。

为什么要做这个功能？因为有时候，回看自己克服过的坏情绪，本身就是一种治愈。这就像一个"战绩榜"——你消灭了多少烦恼？它们又是如何通过AI的话语化解的？

---

📊 Gemini 3 Pro 测评结论

优点 ✅

1. 理解能力超强：我那句"极简线条、柔和温暖配色"的描述，Gemini 完全get到了我想要的视觉风格
2. 创意生成：生成的治愈系对话真的很走心，不是生硬的鸡汤
3. 速度快：flash模型的响应时间在200ms内，用户完全感受不到延迟
4. 成本低：相比其他API，Gemini的定价对个人项目很友好
5. 多模态：虽然这个项目没用到，但Gemini支持图像理解让它更万能

缺点/可改进 ❌

1. 偶尔会"过度治愈"：有时候生成的话语太长或太哲学，需要后处理
2. 需要设定好prompt：好的效果离不开精心设计的提示词
3. 没有中文微调模型：如果有专门针对中文情感交互的模型就更完美了

---

🚀 如果你也想体验

在线版本

👉 坏情绪粉碎机 - 在线体验

本地运行

# 克隆项目
git clone https://github.com/QingJ01/Bad-Mood-Crusher.git
cd mood

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 打开浏览器访问
http://localhost:5173

重要：配置 Gemini API

项目需要你自己的 Gemini API Key。在项目根目录创建 .env 文件：

API_KEY=your_gemini_api_key_here

在 Google AI Studio 免费获取。

---

🎓 开发过程的启示

1. 提示词工程真的重要

这个项目的起点是一句"完整的想象"。如果我只是说"做个情绪应用"，Gemini可能给不出这么具体的建议。好的提示词应该包括：

• ✏️ 风格描述（扁平、极简、治愈）
• 🎯 功能描述（输入、选择、动画）
• 💡 用户体验流（一个完整的交互循环）

2. AI生成的代码需要人工打磨

Gemini 可以快速生成骨架代码，但细节优化、性能调优、错误处理这些还是要靠人工。我用了大约60%的时间来调整Gemini生成的代码，让它真正"好用"。

3. 小项目也值得认真做

这看起来是个小工具，但从设计、开发、测试到部署，每一个环节都有讲究。正式因为"小"，所以更要追求完美。

---

最后的话

做这个项目的时候，我真的在思考一个问题：AI能帮我们创意的极限在哪里？

答案是：AI可以帮我们快速实现想象，但不能替代想象本身。

我的想象力给了这个项目"坏情绪粉碎机"的灵魂，而 Gemini 帮我把这个灵魂变成了代码和动画。这种"人-AI 协作"的开发模式，我觉得就是未来。

下一次你感到不开心时，不妨来试试这个应用。把你的烦恼写下来，然后看着它在一段流畅的动画中消失，再读一句来自 AI 的温暖话语。

也许，治愈就是这么简单。

---

项目信息

• 🔗 GitHub: https://github.com/QingJ01/Bad-Mood-Crusher/
• 🌐 在线体验: http://byebug.cn/Bad-Mood-Crusher/
• 🤖 AI Model: Google Gemini 3 Pro
• ⚡ Build Tool: Vite 6.2
• 🎨 Animation: Framer Motion 12.23

---