miniprogram-builder skill：把「做个小程序」拆成六步——问清需求、搭空壳、造假数据、一次一页、真机自检、扫码预览
📄 两个 markdown · 零依赖 · 免费
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 文件夹整个放进 skills 目录即可。若在微信/抖音里点不开，点右上角「···」用系统浏览器打开本页再下。
| 项目 | 说明 |
|---|---|
| 输入 | 一句话需求即可，例如「做个咖啡店扫码点单的小程序」；有品牌色、图片、参考截图可一并给它 |
| 适用类型 | 纯前端能跑通的小程序：商品展示 / 点单、工具类（记账、待办、打卡）、信息查询、活动报名、内部表单 |
| 产出 | 一个完整的原生小程序项目目录：app.json / app.wxss / 各页面四件套 / utils/mock.js 假数据 |
| 过程产出 | 第一步的需求单（页面清单 + 数据结构 + 这一版不做什么）、每页的真机自检结果 |
| 兼容 | Codex / Claude Code / Cursor 等支持 Agent Skills 的工具；产物用微信开发者工具打开 |
| 边界 | 默认不做登录、在线支付、后台管理——这三项都需要企业主体和后端，会在需求单里明确列出 |
| 环境 | 建议配置 |
|---|---|
| 操作系统 | Windows / macOS 均可（微信开发者工具两个平台都有） |
| AI 编程工具 | Codex、Claude Code、Cursor 任选其一，支持读取 skills 目录即可 |
| 必装软件 | 微信开发者工具（官方免费），用于编译、预览、真机扫码 |
| AppID | 可选。没有就在导入项目时点「测试号」，本地预览和真机调试都不受影响，只影响正式发布 |
| 额外依赖 | 无。不需要 Node、npm、构建工具，也不需要服务器和域名 |
| 前端基础 | 不需要。全程你只做三件事：回答问题、点编译、说哪里不对 |
从上面折叠块里下载压缩包，解压得到 miniprogram-builder 文件夹，
整个放进你所用工具的 skills 目录即可。目录位置按工具不同：
| 工具 | 放到哪 |
|---|---|
| Codex | ~/.codex/skills/miniprogram-builder/ |
| Claude Code | ~/.claude/skills/miniprogram-builder/ |
| Cursor | 项目内 .cursor/skills/miniprogram-builder/（也可放用户级 skills 目录） |
在输入框打一个 @，从弹出的技能列表里选 miniprogram-builder，然后一句话说需求：
@miniprogram-builder 帮我做个咖啡店扫码点单的小程序
它不会直接开写，而是先反问你一个问题，并且附上它的猜测，例如：
我猜你要的是「堂食扫码点单」，不是外卖配送——对吗？
如果要配送，还得做地址簿和运费规则，工期会长不少。
一共只问四件事，问完就停：谁用/什么场景、核心那条路径、要不要登录支付、有没有品牌色和图片。
它会输出一页需求单，三部分：页面清单、数据结构、这一版不做什么。这一步一定要认真看。 需求单花你两分钟，返工要花两小时。
| 页面 | 用户在这页干什么 | 跳到哪 |
|---|---|---|
| 首页 | 看分类、浏览商品 | 点卡片进详情 |
| 详情 | 选规格、加购物车 | 加完去购物车 |
| 购物车 | 改数量、看总价 | 提交下单 |
| 订单 | 看已下单状态 | — |
有不对的地方，直接说「详情页不用选规格」这种大白话就行，它会改需求单再确认一次。
确认后它先建目录、只给每个页面放一行标题，然后让你编译一次。 这一步的意义是：页面注册和 tabBar 的错误必须现在暴露，等五个页面都写完再一起报错，排查成本翻倍。
project/
├── app.js 全局逻辑
├── app.json 页面注册 + tabBar（最容易出错的文件）
├── app.wxss 主色、圆角、间距，全局只定义一次
├── pages/
│ ├── index/ 每页四件套：.wxml .wxss .js .json
│ ├── detail/
│ ├── cart/
│ └── order/
├── images/ tabBar 图标等本地图片
└── utils/mock.js 假数据
所有数据放 utils/mock.js 一个文件导出，页面只从这里取数，先不接任何后端。
接后端要域名、要备案、要 HTTPS、还要配服务器域名白名单；做 Demo、给老板看，纯前端假数据完全够。
等界面定稿了，把 mock.js 换成 wx.request 是十分钟的事，页面代码一行不用改。
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 };
顺序是：先做你第一眼看到的那页，再顺着核心路径往下。每页写完你都点一次编译看效果。 每个页面的四件套分工固定：
| 文件 | 写什么 | 最常见的错 |
|---|---|---|
.wxml | 结构，列表用 wx:for | 漏 wx:key，列表更新错乱 |
.wxss | 样式，尺寸一律 rpx（750rpx = 屏宽） | 用了 px，大屏手机上显小 |
.js | 数据和事件，改数据走 setData | 直接改 this.data，界面不动 |
.json | 这一页的标题、是否下拉刷新 | 忘了建，标题栏是默认的 |
这张清单上的每一条，都是模拟器上看不出、真机上才出问题的：
| 检查项 | 不过关的表现 |
|---|---|
页面都写进 app.json 了 | 跳转白屏，报 page not found |
| 文件名大小写和引用一致 | 模拟器正常，真机白屏（真机区分大小写） |
| tabBar 两张图标都在本地 | tabBar 整个不显示 |
| 图片都是项目内本地图 | 外链域名没进白名单，真机上图全裂 |
| 尺寸全部用 rpx | 大屏手机上元素缩成一团 |
| 列表底部留 120rpx 以上 | 最后一条被 tabBar 盖住 |
| setData 只 set 变化的字段 | 列表长了以后明显卡顿 |
| 空状态有兜底文案 | 购物车空时一片空白，用户以为崩了 |
照着点就行：
| 环节 | 直接让 AI 写 | 装了这个 skill |
|---|---|---|
| 开工前 | 你说一句它就开写 | 先反问四个问题，出一页需求单等你点头 |
| 技术选型 | 经常顺手上 uni-app / Taro / npm | 锁死原生小程序，零依赖零构建 |
| 写代码节奏 | 一口气生成七八个文件 | 先空壳编译，再一次一页，每页停下来看 |
| 数据 | 有时直接写 wx.request 接口，跑不通 | 统一走 mock.js 假数据，界面先跑通 |
| 真机问题 | 大小写、tabBar 图标、rpx 全靠你自己踩 | 每页过八条自检清单，坑提前拦掉 |
| 交付 | 「代码给你了」 | 手把手教到扫码打开，并讲清这版的边界 |
能。整个过程你只做三件事：回答它的问题、点编译、告诉它哪里不对。代码它写，报错它查。 唯一需要你装的软件是微信开发者工具。
不需要。导入项目时点「测试号」，本地预览和手机真机调试都正常。AppID 只在你要正式发布上线时才需要， 那一步要注册主体（个人或企业）并提交审核。
对熟手是更方便，对新手是劝退。它们要装 Node、装 CLI、跑构建，环境问题能耗掉一整晚， 而你还没看见界面。这个 skill 的目标是让你半小时内在手机上看见东西，所以默认锁原生。 你明确要求上框架时它会照做，但会先告诉你多出来的环境成本。
结构上可以，但要先补三件事：注册小程序主体并拿到 AppID、把假数据换成真实后端接口（需要备案域名和 HTTPS）、 按微信的类目要求提交审核。skill 在交付时会主动把这几条边界讲清楚。
这两个是最高频的坑，reference.md 里有对照表。真机白屏九成是文件名大小写和代码引用不一致
（模拟器不区分、真机区分）；tabBar 不显示通常是少了 iconPath 或 selectedIconPath，
两张图都必须有、且是项目内的本地图片。
不是。小程序里直接改 this.data.xxx 不会触发渲染，必须走 this.setData({...})。
另外列表长了以后不要每次 set 整个数组，只 set 变化的字段，否则会明显卡顿。
直接说大白话即可，比如「详情页不用选规格了」。skill 的规矩是回到第一步改需求单， 确认后再动代码，而不是在代码里悄悄改结构——后者是返工的主要来源。
skill 本身是纯 markdown，三家都能读，流程完全一致。差别只在各自模型的代码质量和上下文长度上。 装的位置不同，见上面「如何使用」第 1 步的表格。
skill 里明确写了「不要用没查证的 API，拿不准就换成能确定的写法或明说要查文档」。 但这属于约束不是保证——遇到不确定的接口，建议顺手在微信开放文档里核对一下。
可以。这是两个纯文本的提示词文件，随便用、随便改、随便分享，做出来的小程序归你。