Codex 做小程序 · 保姆级教程

这是什么

miniprogram-builder 是一个给 AI 编程工具用的 Agent Skill，
本体只有两个 markdown 文件：SKILL.md（六步工作流 + 三条硬规矩）和
reference.md（可直接抄的起手式模板 + 高频报错对照表）。
不装依赖、不用配置，丢进 skills 目录就能用，Codex、Claude Code、Cursor 都通用，免费。

它解决的不是「AI 不会写小程序代码」——这件事 AI 早就会了。它解决的是让不会前端的人
真的能拿到一个跑得起来的小程序。实际用下来，失败几乎都出在三个地方：
需求没问清就动手，做出来的东西和脑子里的两回事；一上来就上 uni-app / Taro / npm，
环境装了半小时还没看见界面；代码逻辑没错，但页面忘了在 app.json 注册、
tabBar 少了图标、路径大小写不一致，一编译一片红，不知道从哪查。

这个 skill 把这三件事分别按死：第一步强制先出一页需求单等你点头、
全程只用原生小程序不上任何框架、每写完一页就跑一遍真机自检清单。
核心约束只有一句话：任何一步做完，项目都必须是「能编译、能预览」的状态——
宁可少一个页面，也不留跑不起来的半成品，因为用户看不见界面就会失去信心。

📎 相关链接与下载地址（点击展开）

• ⬇ 点击下载 miniprogram-builder-skill.zip

核心亮点

它能做什么、输出什么

环境要求

如何使用

💡
最省事的路径：装 skill → 打个 @ 调用它 → 一句话说需求 → 剩下的按它问的答。
全程你不用写代码，但每一步它都会停下来让你看见东西。

@miniprogram-builder 帮我做个咖啡店扫码点单的小程序

我猜你要的是「堂食扫码点单」，不是外卖配送——对吗？
如果要配送，还得做地址簿和运费规则，工期会长不少。

project/
├── app.js            全局逻辑
├── app.json          页面注册 + tabBar（最容易出错的文件）
├── app.wxss          主色、圆角、间距，全局只定义一次
├── pages/
│   ├── index/        每页四件套：.wxml .wxss .js .json
│   ├── detail/
│   ├── cart/
│   └── order/
├── images/           tabBar 图标等本地图片
└── utils/mock.js     假数据

const GOODS = [
  { id: 1, name: "冰美式", desc: "深烘豆，加冰不加糖", price: 15, tag: "热销" },
  { id: 2, name: "生椰拿铁", desc: "椰乳打底，甜度可调", price: 19, tag: "招牌" },
  { id: 3, name: "茉莉冷萃", desc: "冷泡八小时，回甘明显", price: 18, tag: "" },
  // …造够 8-12 条，名称价格都写具体的
];

module.exports = { GOODS };

什么样的小程序适合这么做

和「直接让 AI 写」有什么差别

🧠 原理其实很朴素：AI 的代码能力不是瓶颈，流程才是。
skill 做的事就是把「先问再写、小步验证、按清单收尾」这套工程习惯，变成它每次都会执行的固定动作。

常见问题

Q: 完全不懂前端，能用吗？

能。整个过程你只做三件事：回答它的问题、点编译、告诉它哪里不对。代码它写，报错它查。
唯一需要你装的软件是微信开发者工具。

Q: 一定要有 AppID 吗？没有能不能做？

不需要。导入项目时点「测试号」，本地预览和手机真机调试都正常。AppID 只在你要正式发布上线时才需要，
那一步要注册主体（个人或企业）并提交审核。

Q: 为什么不用 uni-app 或 Taro？那些不是更方便吗？

对熟手是更方便，对新手是劝退。它们要装 Node、装 CLI、跑构建，环境问题能耗掉一整晚，
而你还没看见界面。这个 skill 的目标是让你半小时内在手机上看见东西，所以默认锁原生。
你明确要求上框架时它会照做，但会先告诉你多出来的环境成本。

Q: 做出来的小程序能上架发布吗？

结构上可以，但要先补三件事：注册小程序主体并拿到 AppID、把假数据换成真实后端接口（需要备案域名和 HTTPS）、
按微信的类目要求提交审核。skill 在交付时会主动把这几条边界讲清楚。

Q: 真机白屏、tabBar 不显示，怎么办？

这两个是最高频的坑，reference.md 里有对照表。真机白屏九成是文件名大小写和代码引用不一致
（模拟器不区分、真机区分）；tabBar 不显示通常是少了 iconPath 或 selectedIconPath，
两张图都必须有、且是项目内的本地图片。

Q: 改数据界面不动，是 bug 吗？

不是。小程序里直接改 this.data.xxx 不会触发渲染，必须走 this.setData({...})。
另外列表长了以后不要每次 set 整个数组，只 set 变化的字段，否则会明显卡顿。

Q: 中途想改需求怎么办？

直接说大白话即可，比如「详情页不用选规格了」。skill 的规矩是回到第一步改需求单，
确认后再动代码，而不是在代码里悄悄改结构——后者是返工的主要来源。

Q: Codex、Claude Code、Cursor 三个工具效果一样吗？

skill 本身是纯 markdown，三家都能读，流程完全一致。差别只在各自模型的代码质量和上下文长度上。
装的位置不同，见上面「如何使用」第 1 步的表格。

Q: 它会不会瞎编微信的 API？

skill 里明确写了「不要用没查证的 API，拿不准就换成能确定的写法或明说要查文档」。
但这属于约束不是保证——遇到不确定的接口，建议顺手在微信开放文档里核对一下。

Q: 可以商用吗？

可以。这是两个纯文本的提示词文件，随便用、随便改、随便分享，做出来的小程序归你。