前言
一直想用 Cursor 做点什么，却苦于没有灵感。
笔记应用？记账工具？倒数日？这些同质化严重的应用早已泛滥成灾，做了也不过是为互联网增加一份数字垃圾。
直到某个深夜，灵光一闪，欸，不如做个电子木鱼？
翻遍微信小程序，搜索排名靠前的几款电子木鱼应用，发现它们如出一辙：相似的界面设计，平庸的视觉审美，还有那些无处不在的广告。
既然如此，何不自己动手，做一个更优雅的版本？
设计稿篇
都说 Claude 3.7 Sonnet 的 UI 审美相当在线。作为 Cursor 的深度用户，在这个模型上线的第一天，我就已经领教过它的强大。
（小声哔哔：Claude4 已经发布了文章还没写完发布，这该死的拖延症）
随手在网上找了段关于 Cursor 生成设计稿的提示词，稍作修改后粘贴到对话框，"啪"的一声，很快啊。
text
你是一位全栈开发工程师，同时精通产品规划和UI设计。
我现在想要开发一个 "电子木鱼" 微信小程序，需要输出一套完整的APP原型图，请按照下面的要求执行:
- 模拟真实用户使用 "电子木鱼" 小程序的真实场景和需求
- 结合用户需求，以产品经理的视角去规划APP的功能、页面和交互
- 结合产品规划，以设计师的视角去输出完整的高保真UI/UX
- 以上全部页面都在同一个html文件中平铺展示，一行最多显示3个原型页面，且将每个原型页面用类手机边框包裹
- 页面引入tailwindcss来完成样式编写，图片使用unsplash，小图标使用fontawesome
这是第一版生成的设计稿，于我而言，水准已经超出预期了。
唯一的缺点是木鱼皮肤素材过于小众，Unsplash 无法提供合适的图片资源。
不过，令人惊喜的是，AI 不仅完成了基础功能设计，还贴心地加入了数据统计、成就系统、自动敲击等高级功能。
此刻，产品经理、UI 设计师、程序员的内心：天塌了！？？
有了设计稿，开发工作便可正式启动。
在实际开发中，我选择了从 0 到 1 的渐进式开发方式。因此对原有提示词进行了优化，增加了功能范围限定（专注于敲木鱼、换肤、换声音、换文案、自动敲击等核心功能）。
前端代码实现
UI/UX 设计的输出是一个包含所有原型的 index.html 文件。确定前端技术栈后，便可以开始将设计原型转换为可执行的代码。
通过文件关联功能选择 UI/UX 的 HTML 文件，再使用 Agent 功能，告知技术栈信息和开发需求，并提供参考文件。
AI 开始马不停蹄地编码......
后端架构
后端方面，我有一个现成的 Express 服务，正在运行我开源的 EsChatPro 项目------这是一个开箱即用且极易上手的类 ChatGPT/DeepSeek 商业应用，支持接入任何 OpenAI 兼容的大语言模型。
项目地址：github.com/isnl/EsChat...
既然后端服务已经就绪，我只需要专注于 API 接口的开发。数据表结构设计交给 AI 来完成，最终整理成以下提示词：
markdown
## 前置说明
我有前端微信小程序：电子木鱼，需要当前项目为其提供 api 接口
请阅读这个项目源代码，完成需求开发
## 微信小程序登录
在 routes/mp 文件夹中，做微信的登录鉴权
appid 为 wxexxxxxxxxxxxxx2
appsecret 为 8exxxxxxxxxxxxxxxxe9
jwt 鉴权逻辑可参考 src/routes/wechat.ts 文件中公众号登录方案的实现
## 数据表创建
在 src/schema 中创建相关的数据库表
- mp_users 小程序用户相关
字段：openid、name、avatar、role（默认为 0）
- mp_unlocks 资源解锁相关
id: string;
openid: string;
resource_type: string;
resource_key: string;
unlock_time: string;
expire_time: string;
cost: number;
exchange_time: string;
- mp_skins 木鱼皮肤
key: string
name: string
description: string
imageUrl: string
- mp_audio 木鱼音色
key: string
name: string
description: string
audioUrl: string
- mp_text 木鱼文案
key: string,
name: string
content: string
description: string为什么不选择小程序云开发？
诚然，小程序云开发在微信鉴权方面的体验确实无可比拟，但每月 20 元的费用对于个人开发者来说并不便宜------这可是两顿外卖的钱。
既然服务器现成，后端服务现成，API 接口又能通过 AI 快速生成，何必多此一举？
正所谓：骑自行车去酒吧，该省省该花花。
调试与优化
调试阶段需要人工介入，仔细检查功能完整性、交互细节、用户体验是否符合预期，排查潜在的 Bug 和性能问题。
上线展示
上手体验
木鱼时刻.png
(为防广告被删文章，就不放二维码啦，大家自行搜索体验即可)
总结
这次开发经历让我深刻体会到 AI 辅助编程的强大威力。从设计稿生成到代码实现，从前端到后端，AI 几乎承担了 90% 的工作量。
作为开发者，我们的角色正在从"代码编写者"转变为"需求定义者"和"质量把控者"。在这个 AI 时代，学会与 AI 协作，比单纯提升编程技能更加重要。
一个周末的时间，一个完整的微信小程序就此诞生。这不仅是技术的胜利，更是创意与效率的完美结合。