原来我每天在为这个付钱

27 阅读2分钟

背景

记录一次开发微信小程序过程,全程通过自然语言描述与 AI 工具沟通进行开发的,我的想法也很简单:做一个记录物品买入时间/买入价格等基础信息,计算物品的日均使用成本,以此来降低自己在购买大件物品的焦虑值,后悔值,犹豫值 ... 越用越值得的感觉,哈哈

先看一下最后这个小程序的成品效果图:

微信图片_20260508135632_18_31.jpg

微信图片_20260508135633_19_31.jpg

微信图片_20260508135633_20_31.jpg

设计工具

Google Stitch

注:我个人还是很喜欢谷歌的设计风格的,现阶段 Stitch 免费使用

开发工具

  1. VScode
  2. Codex

开发工具内使用的大模型基本上选择的是 GPT,使用了几个不同的版本,GPT-5.2-Codex / GPT-5.3-Codex / GPT-5.4 / GPT-5.5,5.5 前段时间推出后就基本使用 5.5 了,就是费用比较贵,差不多 Token 消耗是 GPT-5.4 的 2 倍,但确实“更加聪明”了。

VSCode 我主要用了 Codex 和 Github Copilot 这两个插件

构建后端 API

  1. 选用后端 API 框架( 不论是用 node / python / go / php 等,只需要将你想要使用的框架源码初始化就可以开始,当然这一步你也可以透过 AI 来实现,我是为了省 token,我就自己按框架官网介绍的安装方式在本地 install 了源码 )
  2. 用自然语言描述,你想要实现某某接口的 CRUD 功能,并提供详细的 API 文档即可

实现小程序

  1. Google Stitch 设计的页面可以导出 HTML,将其复制出来后存储为一个临时的 html 文件,并将其加载到 AI 工具,让其 100% 复原当前这个页面,适配微信小程序端的结构框架
  2. 再将 API 文档丢给 AI 工具,让其对接即可

题外话:Google Stitch 支持 MCP 导出,当然也可以透过 MCP 去读取项目的 UI 设计信息,可以直接省略复制 HTML 页面这一个步骤,只要保证你的 LLM 能正确识别你想要的指令。

最后

剩下的就是小程序的备案 / 认证等操作了,因为我自己一直有租用服务器,有租域名,所以微信要求的 API https 请求域名等就很好搞定了,所以 ... 你们猜猜我开发这个小程序花费了多长时间?