起因
每年中秋节过节朋友圈里全是祝福图，翻到底全是同一张金色月亮配同一段「花好月圆人团圆」，连标点都一样。给老同学单独发的祝福，复制粘贴出去之后总觉得少了点什么——没有名字，没有署名，看一眼就知道是转发的。
今年换个做法：与其转发别人的图，不如动手做一张。名字自己填，祝福自己挑，署名落款都齐全。正好手边是 TraeCode，索性把这个想法完整落地，于是有了这个「中秋贺卡生成器」。
做了什么
一个纯前端的贺卡小工具。编辑、出图、送达三个部分各自独立，串起来是一条完整的送祝福链路。
编辑区在页面左侧。收卡人的名字、想说的话、署名三栏填写，右侧实时出预览，改一个字卡片立刻跟着变。祝福语支持下拉挑选，内置二十条中秋主题祝福，选不顺眼还能随机换一句。版式一共六种：皓月、鎏金、玉兔、桂影、灯火、云纹，有浅色也有深色，版式里埋了主题标签、诗句和农历日期这些小元素，不同模板的气质差别挺大。
「生成贺卡」负责产出图片。点击按钮，浏览器把当前卡片直接渲染成一张高清 PNG 下载到本地，分辨率是普通屏幕的两倍，发朋友圈、发群都不会糊，全程不需要打开任何设计软件。
「生成专属链接」负责送达。点击之后弹出一个二维码，对方扫码就能打开一个专属页面。页面初始是一个合上的信封，火漆印上一个「启」字；轻触信封，口盖翻开，一张贺卡从里面缓缓升起，落款和按钮渐次浮现。链接里还带一个祝福编号，每张卡片都有唯一标识。收贺卡这件事，被做成了拆一封信。
解决了什么问题
假期里的祝福大多停留在转发层面，图是现成的，话也是现成的，发出去像完成任务。这个工具把「写祝福」压缩成两分钟的小事：填名字、挑一句顺眼的话、选个版式，导出或者分享链接，一气呵成。收卡的人打开链接，先拆信再读卡，多少能感觉到这份心意是专门为自己准备的。
链接本身也是个有意思的设计。项目没有后端服务器，二维码又必须指向一个能独立打开的页面，最后把贺卡的全部内容压缩编码塞进了链接的 hash 里，对方扫码后浏览器自己解出内容还原页面。整条链路不需要数据库，也永远不会过期。
在 TraeCode 里是怎么做出来的
整个过程用 TraeCode 从零开始，大致走了这么几步。
第一步搭骨架。用 Vite 起一个 React 项目，页面分成编辑区和预览区两栏。卡片内部全部用容器查询单位 cqw 来标注尺寸，这样同一套模板在不同宽度的卡片里比例都不会跑偏。
第二步做模板。六种版式逐个调：背景渐变、字体搭配、装饰元素的位置。这一步反复了很多轮，比如皓月版的墨线圆月一开始压住了标签文字，左上角的云朵线条正好穿过「花好月圆」四个字，改了几次坐标，再让 AI 把整个页面扫一遍，才确认所有元素互不干扰。
第三步解决导出。用 html-to-image 把 DOM 转成 PNG，本地一跑就通，但后来为了移动端的布局调整隐藏了预览卡片，导出立刻变成空白图——查了半天才知道 display:none 的元素没有布局，导出必然失败。最后在视口外固定渲染了一张离屏卡片专门用于导出，桌面和移动端统一走这条路。
第四步是最费心思的专属页信封动画。口盖用 CSS 3D 做双面翻折，卡片、信封、火漆印分了五层 z-index，靠延时串成一条时间线：火漆印先碎，口盖跟着翻开，卡片升起，信封下坠淡出。写完一跑问题就来了——卡片都升出来了，信封还没消失，画面特别尴尬。后来用 Playwright 写脚本逐帧采样透明度和位移，把每一秒谁在动、动到哪全部量化出来，才把时序调顺。称呼文字被火漆印挡住，也是靠几何检测算重叠面积定位的，比肉眼盯截图准得多。
第五步压缩链接。第一版把祝福内容转 JSON 再编码，生成的链接三百多个字符，二维码密密麻麻根本扫不出来。改成紧凑分隔格式，模板换成序号，预设祝福换成字典索引，再用 lz-string 压一遍，常见场景下缩短到七十多个字符，扫码秒开。
最后是部署上线。Vercel 构建连着失败了两回，排查发现是仓库里误提交了整个 node_modules，几千个文件连着 Windows 的缓存一起推了上去，加上 npm 新版的安装脚本审批把 esbuild 的执行权限拦了。清理仓库、在 vercel.json 里补上构建前的权限修复，推送之后部署一次通过。
体验入口
线上地址：
建议先用「生成专属链接」发给自己一份，扫码拆一次信，这是整个作品里最值得体验的一段。
截图
最后
这个项目从想法到上线花了一个下午，中间大部分时间其实花在那些「差一点」的地方：文字差两像素被挡住、动画差半秒不干净、链接长了一百个字符。VibeCoding 好玩的地方大概就在这里，想法到成品的距离被工具压得非常短，剩下的时间都拿来抠细节。中秋快到了，给想念的人写张卡吧。
