当我用vibe coding给好朋友做了一份电子生日贺卡……

最近，vibe coding（氛围编程） 非常流行。这是一种区别于传统编程的开发方式。得益于大语言模型的能力，我们可以仅通过自然语言描述需求，AI 工具就能帮助我们生成代码，完成网页或者应用的开发。我之前就有过用 AI 开发的经验，这次也想用这种方式给好朋友做一张电子生日贺卡，既能锻炼自己，也能给对方提供满满的情绪价值。

下面我会分享整个开发流程和页面展示。

一开始，我先在脑海中构思了一下整个页面的交互流程，然后写了第一版比较粗糙的提示词发给 Gemini。

第一版提示词：

我的想法是这样，先是一张可以三维 3D 立体旋转的蓝色古典风贺卡，贺卡上盖着金黄色火漆印。当用鼠标点击或者向上滑动火漆印时，蓝色贺卡打开，并且化作蓝粉色蝴蝶消散，留下一张纸条和荧光笔。纸条上写的祝福必须用荧光笔才能查看。当用荧光笔读取到最后一个字时，纸条也慢慢隐去，这时全部字体放大并显现。

一开始的效果并不好，于是我又和 AI 讨论了方案的可行性、如何优化等等，最终调整出了第二版提示词和较为详细的开发指南。

第二版：

你是一个高级前端开发工程师和交互设计师。请直接按以下方案实现一个可运行的网页生日贺卡项目，不要给我多个方向，不要做对比，只输出最优实现。
【项目目标】
做一张送给“xxx”的古典风生日电子贺卡网页。它必须精致、流畅、有仪式感，适合手机和电脑打开，重点不是炫技，而是让人感觉这是一张专门做的祝福贺卡。
【技术栈要求】
Vite
TypeScript
GSAP
Canvas 2D
CSS 3D Transform
【禁止方向】
不要使用重型 Three.js 全场景作为第一版核心方案
不要堆大量粒子
不要做花哨廉价婚礼特效风
不要做复杂“最后一个字识别”逻辑
【固定视觉方案】
主色：深蓝
辅色：金色
纸张：暖白羊皮纸
气质：古典、优雅、温柔、克制的梦幻感
【固定流程】
初始画面是一张深蓝古典贺卡悬浮在中央，正面写“xxx 亲启”，中央有一个金色火漆印。
用户点击火漆印后，火漆印裂开并脱离，贺卡左右缓缓展开。
贺卡展开时，边缘逸散出少量蓝粉蝴蝶和金粉，整体效果是“化开”，不是爆炸。
贺卡淡出后，中央出现一张羊皮纸。
用户通过“荧光笔光斑”在纸面移动，逐渐显现隐藏文字。
当显影面积达到 80% 时，自动进入终章。
羊皮纸慢慢透明消失，最终祝福文字放大居中显示，并带有轻微漂浮和微光感。
【固定文案】
封面文案：
xxx 亲启
纸条显影文案：
xxx：
生日快乐
天天开心
—— xxx
xxxx.xx.xx
终章文案：
生日快乐
愿你岁岁平安，天天开心
底部小字：
xxx · xxxx.xx.xx
【实现要求】
用 CSS 3D 做贺卡空间感和翻开动作
用 GSAP 串联整段动画时间轴
用 Canvas 遮罩擦除实现显影
用轻量方式实现少量蝴蝶与金粉粒子
页面必须兼容移动端
默认静音，并提供音效开关
代码结构清晰，组件划分明确
输出可直接运行的项目骨架与核心实现代码
【审美要求】
少即是多
动画克制、细腻、统一
强调质感和节奏，不靠堆技术名词
最终效果必须像一张高完成度、专门定制的网页礼物

在拿到这份较为详细的开发文档后，Gemini 跑出了一个还不错的版本，但还是有一些小细节和 bug 需要调整。我下载源码到本地后，又使用 Claude Code，对整个前端项目进行代码审查和修复，同时使用 Playwright 进行自动化测试，解决了火漆印位置不对、贺卡内容重复出现的问题，优化后完成了最终版本。

这里还有一个问题：这个电子贺卡如何让对方流畅打开，而不需要下载等复杂流程？因为它本质上是一个静态页面的纯前端项目，网上有许多一键部署的托管平台。我最后也选择了一个，把网址直接发给朋友，这样对方就可以在手机上直接访问。

这是部署的平台网址：https://www.upma.cn