我妈说‘这比剪映还好用’——我用Claude Code写了个「婚礼倒计时+请柬生成」网页,连WiFi密码都没输
五一前,表姐订婚,全家开会讨论:谁负责做电子请柬?
表姐说:“不要千篇一律的模板,要我们俩爬长城的照片+手写体名字+倒计时。”
我妈掏出手机:“上次你做的‘广场舞曲库’,阿姨们抢着扫,这个能不能也做个?”
我说:“能。但这次不发小程序,做一个‘扫码就能看’的网页——连WiFi密码都不用输。”
38分钟后,我把一个链接发进家族群。我妈扫完,说:“这比剪映还好用。”
不是因为她技术强,而是Claude Code写的代码,真的只用改3个地方。
下面带你亲手做一遍——不需要安装任何东西,只要你有Cursor和能上网的电脑。
---
🌐 第一步:生成核心倒计时引擎(5行JS搞定)
在Cursor中新建文件 countdown.js,输入以下Prompt:
> "你是一个前端工程师,只写纯JavaScript。生成一个函数 countdownTo(dateString),接收形如'2025-06-15'的婚礼日期字符串,返回对象:{days: 整数, hours: 整数, minutes: 整数, seconds: 整数}。要求:实时更新(每秒执行),不依赖moment.js等库,用Date.now()计算。"
✅ Claude Code生成的代码,我只做了1处修改:把 dateString 改成 "2025-06-15"(替换成你的真实婚期)。
---
🖼️ 第二步:生成请柬封面(纯CSS+HTML,无图片CDN)
新建文件 invite.html,输入Prompt:
> "生成单页HTML,全屏背景为渐变色(#ff9a9e → #fad0c4),居中显示:顶部大字‘我们结婚啦’,中间两张并排照片(用placeholder),下方手写体文字‘新郎:张伟 & 新娘:李婷’,底部动态倒计时数字(调用countdownTo函数)。照片区域预留img标签,src留空,class='photo-left'和'photo-right'方便后续替换。"
✅ 生成后:
![]()
的src分别换成你俩的真实照片直链(推荐用[sm.ms](https://sm.ms)免费图床,上传后复制链接); 放在合适位置;里调用 countdownTo('2025-06-15') 并更新DOM。---
📱 第三步:让手机扫一下就打开(超简部署)
别买服务器,别配域名。用Cursor内置功能:
invite.html → Preview in Browser;http://localhost:5000/invite.html 的链接;💡 关键细节:
---
💡 进阶彩蛋:加个「一键保存请柬图」功能
很多长辈想把请柬存到手机相册。只需在HTML里加一段JS:
📌 新手操作:复制以上代码,粘贴进底部即可。无需懂原理,它就是能用。
---
📸 真实反馈流水账
这根本不是什么高科技。只是把「日期计算」+「图片排版」+「本地预览」三个确定性任务,交给Claude Code一次性写出最简解法。
而真正的门槛,从来不是代码,是敢不敢把「婚礼」这种人生大事,托付给一行自己改过的JS。
> ✅ 今日可交付成果:
> - 一个专属婚礼倒计时网页(含照片+手写体+实时倒计时)
> - 一个扫码即开的分享链接
> - 一个「保存到相册」按钮
>
> 全程不碰命令行,不注册账号,不输WiFi密码。
人人都是程序员?不。
人人,都是自己人生的首席产品官。
---
延伸玩法:把countdownTo()函数稍作修改,就能做出「考研倒计时」「宝宝百日倒计时」「退休倒计时」——同一个Prompt,换个日期,就是新生意。