當我用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