Vibing Coding 之次享通小程序：一周、10 亿 token，从零做出一个三端会员卡小程序
副题：不写一行代码，我是怎么让 AI 把 UI 设计、原型、前后端、云函数全干完的
开篇：先抛结论
过去一周，我用 AI 完成了一个可上线营业的多租户次卡会员小程序 ------用户端 + 商户端 + 管理端，45 个页面、13 个云函数、24 个数据库集合，全程几乎没有手写过一行代码。
累计消耗 10 亿 token （对，你没看错），产出的不是一份"Demo"，而是一套带契约文档、带自检脚本、带真机回归清单的工程。
这篇文章不吹「AI 万能」，也不讲玄学。我会把从零到上线的完整流程拆开讲清楚：
- UI 设计是怎么让 AI 做的
- 原型是怎么变成"可执行契约"的
- 每一轮编码怎么给 AI 下指令、怎么验收
- 踩了哪些坑、哪些坑是致命的
全程教程口吻，看完你也能复刻。
一、先纠正一个误区：Vibing Coding 不是"让 AI 写代码"
很多人理解的氛围编程是这样的：
"帮我写一个商城小程序" → AI 生成一堆代码 → 跑不起来 → 放弃
我这次的做法完全不同。AI 不是coder，AI 是"全栈工程团队"：
| 角色 | 人做什么 | AI 做什么 |
|---|---|---|
| 产品经理 | 定需求、定规则 | 把需求写成契约文档 |
| UI 设计师 | 定风格、定规范 | 出可点击原型（1:1 视觉） |
| 架构师 | 定技术栈、定边界 | 拆页面、拆接口、拆集合 |
| 开发 | 把关质量 | 写代码、写云函数 |
| 测试 | 定验收标准 | 写自检脚本、跑回归 |
| 运维 | 部署、监控 | 写部署清单、排错 |
人负责"决策"和"验收"，AI 负责"实现"。 这是能不能做成一个完整项目的关键。
二、第 1 步：UI 设计------让 AI 先出"可点击原型"，别直接写代码
这是最多人做错的一步。不要一上来就让 AI 写页面代码。
正确顺序：
2.1 先定设计规范（Design Token）
我会先让 AI 产出一份设计令牌，例如：
css
/* 品牌色 */
--brand-900: #0E3B38;
--brand-700: #14524E;
--brand-050: #EFF6F4;
/* 字号（750rpx 设计稿） */
--fs-display: 72rpx; /* 卡面次数 */
--fs-h1: 48rpx;
--fs-body: 28rpx;
--fs-caption: 24rpx;
--fs-micro: 22rpx;
/* 间距 / 圆角 / 阴影 */
--sp-1: 8rpx; ... --sp-8: 64rpx;
--r-card: 24rpx;
--shadow-1: 0 4rpx 16rpx rgba(23,33,43,.04);为什么重要？ 有了 Token，后面所有页面才能保证"同一套视觉语言"。没有 Token，AI 每个页面都会自己发挥，最后就是"拼贴风"。
2.2 让 AI 出可点击原型（HTML）
然后让 AI 用 HTML + CSS 出一个375×812 的可点击原型，覆盖全部页面。
我的提示词大概是这样的：
css
你是一名资深小程序 UI 设计师。请为「次享通·会员卡」小程序出一套可点击原型（HTML，375×812 视口）：
1. 先读 dev-docs/02-design-system.md，严格遵守里面的 Token 与组件规范；
2. 页面结构按 dev-docs/03-pages-*.md 的清单来，一个页面一个 HTML；
3. 只做视觉与交互，不写真实业务逻辑（数据用 mock）；
4. 三端都要：用户端（首页/卡包/核销码/记录/我的）、商户端（工作台/会员/台账/员工）、管理端（审核/商户/看板/配置）；
5. 输出后我会逐页对照验收。关键点：让 AI 先读设计规范，再动手。 否则它会用 Bootstrap 风格给你画一个"网页"。
2.3 1:1 还原：把原型当验收标准
原型出来后，后面每一步都以原型为准。AI 写的页面我会逐项对照：
- 间距对不对
- 字号对不对
- 颜色对不对
- 按钮位置对不对
发现不一致就打回重做。 这一步花的 token 最多，但省掉的是后面无数次返工。
三、第 2 步：原型 → 契约文档（最关键的一步）
这一步是我认为最值得分享的。
很多人卡住的地方在于：原型是"死的"，AI 写代码时不知道"这个按钮点了要干什么""这个接口返回什么字段"。
我的做法是：先写契约文档，再让 AI 写代码。
3.1 契约文档长什么样
以次享通为例，我让 AI 产出了 8 份契约：
bash
dev-docs/
├── README.md # 项目总览、版本
├── 01-engineering.md # 工程结构、分包、云开发、定时触发器
├── 02-design-system.md # 设计规范（Token、组件 API）
├── 03-pages-user.md # 用户端逐页契约
├── 03-pages-merchant-admin.md # 商户端 + 管理端逐页契约
├── 04-data-api.md # 数据模型、云函数接口、状态机、权限
├── 05-acceptance.md # 错误码、文案、验收标准
├── 06-privacy-policy.md # 隐私政策（合规必需）
└── 07-prompts.md # 分轮开发的提示词注意：AI 写代码时，第一件事就是读这些文档，而不是凭感觉。
3.2 契约要写多细？
以「核销」为例，契约里必须写清楚：
shell
## 核销（consume）
### 接口
- preview：店主/店员，校验动态码并签发一次性 confirmToken（60s）
- confirm：条件更新扣次（remainCount >= times，不为负）
- revoke：仅店主，24h 内撤销，回补次数
- manual：手工补录（无码，按 cardId）
### 状态机
pending → generating → done → expired
↘ failed
### 错误码
CODE_EXPIRED / CODE_USED / DUPLICATE_SCAN / NO_REMAIN_COUNT / CARD_NOT_BELONG ...
### 关键规则
- 核销码 60s 轮换
- 扣次必须条件更新（并发安全）
- 每次核销写审计日志AI 只要严格按契约实现，接口字段就不会乱，前后端就不会对不上。
四、第 3 步：分轮编码------每轮给 AI 一份"任务书"
不要一次让 AI 写完所有功能。分轮推进，每轮有明确任务、验收 Gate、禁止项。
4.1 一轮的标准结构
markdown
# 第 N 轮：XXX 功能
## 必读
- dev-docs/0X-xxx.md
- dev-docs/05-acceptance.md
## 任务
1. ...
2. ...
## 验收 Gate
- [ ] 页面与原型 1:1
- [ ] 错误态 / 空态 / 加载态齐全
- [ ] 权限正确
- [ ] 跑自检脚本全绿
## 禁止
- 不新增未在契约里的接口
- 不改字段名
- 不跳过埋点每轮结束必须跑自检脚本（我让 AI 写了这些）：
bash
node scripts/check-bindings.js # 事件绑定 ↔ 处理函数
node scripts/check-undefined-refs.js # 未定义引用
node scripts/check-requires.js # require 可解析
node scripts/check-compliance.js # 禁词/emoji/字体
node scripts/check-errorcodes.js # 错误码双端一致
node scripts/check-project.js # 结构/页面数/体积4.2 AI 踩坑TOP榜（都是我真实踩过的）
| 坑 | 现象 | 解法 |
|---|---|---|
| 批量改坏文件 | 脚本替换把 wxml 尾部吃掉 | 每次改完立刻跑结构检查 |
| 云函数部署包带子目录 | 平台运行时崩溃（145 错误） | 公共层打包成单文件 lib.js |
| WXML 表达式限制 | 模板里写复杂逻辑报错 | 全部在 JS 里预计算 |
| 直连数据库 | 客户端 cloud.database() |
统一走云函数 |
| 合规红线 | 未登录就写库 | 显式授权登录 + 游客零写入 |
| 越权 | 前端传 tenantId | 服务端只信 OPENID |
这些坑，AI 第一次基本都会踩。 我的做法是：每踩一个，就写进契约的"禁止项"和自检脚本，下一轮就不会再犯。
五、核心功能分析（三端）
5.1 用户端（C 端）
📷 **用户端 **
说明：未登录/已登录双态、会员卡横滑、附近商户列表、底部 TabBar 说明：卡面次数大数字、状态徽标（正常/待生效/已过期）、核销码入口、最近记录 说明：60s 倒计时圆环、动态码、刷新按钮、"请勿截图转发"提示 用户卡包核心功能展示
核心功能拆解：
| 功能 | 关键设计 |
|---|---|
| 会员卡 | 一店多卡（同商户可持不同卡类型）、状态机（normal/pending/frozen/expired/invalidated） |
| 核销码 | 60s 轮换、断网清码、真机兼容（纯 WXML 渲染，不依赖 canvas） |
| 卡详情 | 记录富化（金额/操作人）、凭证缩略图、状态提示 |
| 注册 | 多卡类型选择、姓名手机号落库、注册成功自动跳卡包 |
| 消息 | 站内消息（订阅消息未启用时的兜底） |
5.2 商户端（B 端）
📷 商户端
说明：深色头卡（店名/岗位/类目）、今日概览、待办、快捷宫格、最近动态、悬浮扫码 会员 / 台账** 说明：会员筛选（全部/待生效/次数不足/即将到期）、行卡剩余次数、台账三段筛选 + 汇总 📷 商户端 · 数据备份 / 数据导入 说明：手动备份面板（范围/加密/发送到邮箱）、历史记录（状态+时间筛选）、导入校验 + 差异预览
核心功能拆解：
| 功能 | 关键设计 |
|---|---|
| 扫码核销 | 动态码 → 一次性令牌（60s）→ 独立确认页（次数默认 1 可改）→ 自动返回 |
| 待生效确认 | pending 卡 → 商户确认（次数/金额/付款凭证）→ 生效 |
| 台账 | 三段筛选（日期/卡类型/操作人）+ 汇总同口径 + CSV 导出 |
| 数据备份 | 手动/定时、ZIP + XLSX、AES-256 加密（6 位数字密码）、邮件推送、导入幂等 |
| 员工管理 | 角色（店主/店员/财务）、权限点、批量操作、入职绑定 |
5.3 管理端（平台）
📷 **管理端 **
说明：三格统计、风险提示、申请卡左色条、资质材料、历史时间线 说明：商户列表 + 导出、KPI 卡、近 30 日核销折线、异常指标、Top5 说明：日志筛选 + 详情（前后值/请求ID）、配置只读/可写分级
核心功能拆解：
| 功能 | 关键设计 |
|---|---|
| 入驻审核 | 风险评估（同址商户计数）、历史操作人实名、通过/驳回留痕 |
| 商户治理 | 禁用/清退/恢复、统计（总数/正常/待审）、CSV 导出 |
| 平台看板 | 商户/会员/卡/核销多维度、异常指标（零核销、频繁驳回） |
| 审计日志 | 全量写操作留痕（前后值、操作人、请求ID）、不可删除 |
| 权限 | 超级管理员/运营/审计员三级，配置读写分离 |
六、这一周我到底是怎么用 AI 的
6.1 token 花在哪儿了？
| 阶段 | 占比 | 说明 |
|---|---|---|
| 设计规范 + 原型 | ~15% | 反复对齐视觉，最费 token 也最值 |
| 契约文档 | ~10% | 接口/字段/状态机/错误码 |
| 编码实现 | ~45% | 分轮推进，每轮带 Gate |
| 排错修复 | ~20% | 真机问题、兼容性、并发 |
| 自测回归 | ~10% | 自检脚本、真机清单 |
6.2 让 AI 效率翻倍的几个习惯
① 先写契约，再写代码 AI 不是"想到哪写到哪"，而是"照契约施工"。契约越细，返工越少。
② 分轮推进，每轮可验收 一轮只做 1~2 个页面 + 1 个云函数，做完立刻验收，不要攒着。
③ 让 AI 自己写自检脚本 这是我最推荐的做法。AI 写完功能后，顺手让它写检查脚本，下一轮它会自己跑。
④ 把踩坑写进"禁止项" 每踩一个坑，就写进契约的禁止项，并加一条自检规则。坑只踩一次。
⑤ 真机验证不可省 AI 写的代码在模拟器上往往没问题，真机才会暴露（canvas、WXSS 兼容性、权限、网络）。
七、数据复盘
| 指标 | 数值 |
|---|---|
| 开发周期 | 7 天 |
| token 消耗 | ~10 亿 |
| 页面数 | 45（用户 14 / 商户 22 / 管理 9） |
| 云函数 | 13 个 |
| 数据库集合 | 24 个 |
| 代码行数 | 数万行（含契约文档） |
| 自检脚本 | 6 个 |
| 真机回归清单 | 86 项 |
一句话总结：AI 负责"实现"，人负责"决策"和"验收"。
八、你可以怎么复刻
如果你也想用 AI 做一个完整项目，我建议按这个顺序：
- 先想清楚做什么（不要一上来就写代码）
- 让 AI 出设计规范 + 原型
- 让 AI 写契约文档（接口、字段、状态机、错误码）
- 分轮编码，每轮带验收 Gate
- 让 AI 写自检脚本，每轮必跑
- 真机验证，把踩坑写进禁止项
留言区聊聊： 你用 AI 做过最复杂的东西是什么？踩过哪些坑？点赞最高的 3 条，送【标准流程SKILLS】一份。
次享通小程序目前已在本地跑通，三端全部可用；文中的用户端 / 商户端 / 管理端截图见上方占位区，欢迎截图分享你的复刻成果。
如果这篇文章对你有用，点个「在看」+ 转发给需要的朋友，是我继续更新的最大动力。