超越「零基础」，2天时间利用Cursor打造时间胶囊小程序

一、灵感乍现：为什么要做这款人生倒计时小程序？

灵感来源于小林哥在星球发的帖子，仅用一个小时就做好了一款小程序，自己想尝试一下能不能快速复刻一个类似的小程序。

1.1 偶遇相当棒的Prompt 偶然间刷到一个“神级”Prompt，一个只用一句话就能让claude帮你生成一套app的UI界面，生成的界面相对于完全不懂UI设计和几乎不懂前端的我来说，已经是相当够用了。来自是魔王哒~流光卡片的一篇教程太震撼了，用cursor一键搞定APPUI附提示词

1.2 “阴差阳错”，cursor给了我一个正好缺少的工具UI 本来是准备复刻一下倒计时的小程序，结果cursor给我来了一个惊喜，给我设计了一个规划未来时间计划的UI设计。操作步骤很简单，一句提示词 + 一个“药引”的HTML，由于生成的HTML代码可能超过单次上下文，如果cursor停止输出，直接无脑回复“继续”即可。药引HTML我会附在文章末尾，需要的小伙伴自取~ 为什么要使用“药引”？ “药引”其实就相当于是一个优秀案例的模板，目的就是让claude知道怎么样的设计是优秀的，进而它输出的UI也会给你带来惊喜。代码块提示词：给年轻人的人生倒计时的小程序，请模拟用户来提出需求，请自己构思好功能需求和界面（需要包含功能）然后设计 UI/UX，然后给我所有页面的 html 第一版UI就已经让我足够惊艳了，这是我自己能设计出来的UI？靠我自己几个月都画不出来... 虽然第一版很惊艳，但是我觉得色彩太暗了，于是让cursor根据第一版UI，给我调整了一个明亮版

利用设计稿开发，一定要让cursor或者claude（其他代码能力强的大模型）帮你把原始HTML 按功能页面拆分成多个，别问为什么，说多了都是泪（为此我耽误了差不多两个小时跟它掰扯）

二、前期准备与技术选型

2.1 小程序账号注册 & 备案

如果想开发小程序，一定要先去微信公众开放平台注册小程序账号并且提交备案，备案流程会走几天（我的小程序还在走流程😭😭）

小程序注册：mp.weixin.qq.com

微信开发者工具：developers.weixin.qq.com

2.2 技术选型前端：JavaScript + WXML + WXSS 后端：云开发微信云开发，测试期间免费使用，上线后按量计费；使用门槛低，不需要人工搭建后端服务以及服务器的环境等等；微信小程序体验版 & 正式版涉及到api服务调用时，只能使用域名，不能使用IP，而且域名必须要备案！！！备案时间快的话一周，慢的话一个月都属于正常！（又踩了个大坑）如果你有已经备案好的域名和服务器的话，当我没说 Orz~

三、需求梳理与界面搭建