01AI 微信小程序工作流 从需求到验收
返回知识库开始阅读
GOAL CODING 2.0 · 2026

为什么你让 AI 直接做小程序,结果总是不太对?

问题通常不在 AI 会不会写代码,而在于我们跳过了需求澄清、视觉选择、设计规范和真实验收。下面用一个会员小程序,讲清一套普通人也能照着走的完整流程。

不需要先会编程每一步都有对话示例以真实会员小程序贯穿
9:41● ●●
同行会
同行会会员把线上认识带到线下会员活动免费
热门活动更多 ›
城市散步与晚餐徐汇滨江 · 已报名
首页认识活动我的
9:41● ●●
认识成员
为你推荐筛选
林野产品设计师
陈序独立开发者
乔安内容创作者
周末社群负责人
首页认识活动我的
本文只用一个案例:包含微信登录、手机号、会员支付、活动、成员、订单和后台的「同行会」。
完整流程 · 9 个步骤

从一份明确需求,逐步变成能验收的小程序。

PHASE 01确认 MVP,配好开发能力

本教程假定需求方向已经明确。先把第一版收口成最小完整闭环,再为 AI 配好开发、截图和测试工具。

01确认 MVPGrill Me、复述与明确不做
02搭 HarnessMCP、Skill、截图与测试
PHASE 02确定设计方向与执行规范

先探索整体视觉,再确认页面结构和交互,最后形成设计系统、页面规格与验收标准。

03大范围找风格比较多种产品气质
04小范围找 UX比较同风格下的排布
05定设计系统页面、组件、状态与验收
PHASE 03小步实现,逐步验收

先完成一个代表性页面,验证规则后再扩展核心业务;每一步都用真实数据、截图和测试收敛。

06先做一个页面校准 UI 与工程结构
07完成核心任务按用户任务逐条交付
08分层验收自动化加真机门禁
09沉淀经验更新文档、规则与 Skill
BEFORE WE START

大多数失败,发生在 AI 写第一行代码之前。

最常见的做法是:把需求发给 AI,然后说“直接帮我做完”。AI 会替你补上所有没说清楚的事情,看起来很快,实际把问题留到了最后。

常见旧流程

需求 → AI 直接写 → 能打开 → 交付

  • 需求里有矛盾,AI 默默选择一种解释
  • 没有确定风格,每个页面像不同产品
  • 图片是占位符,业务内容写死在代码里
  • 登录、返回、缓存、支付只走了理想路径
  • 看到页面能打开,就误以为开发完成
更可靠的新流程

先理解、再选择、后实现、拿证据

  • 先把第一版收口成最小完整业务闭环
  • 用追问和复述确认人机理解一致
  • 再为 AI 配好运行、截图和测试能力
  • 先选风格、定规范,再完成代表页面
  • 最后用自动化、云端和真机共同验收
这套流程并不会让第一天写出更多代码。它的价值是减少后面反复返工,让 AI 每走一步都知道目标、边界和怎样证明自己做对了。
01 · CONFIRM THE MVP

第一步:把明确需求收口成第一版 MVP。

本教程假定你已经有相对明确的产品需求,不展开市场调研和完整 PRD 方法。开发前只做一次边界确认:第一版解决哪个核心任务,哪些能力必须存在,哪些内容明确暂不实现。

1

提炼最小完整闭环

从用户进入小程序开始,到完成核心任务结束,只保留这条路径必需的页面、数据和业务能力。

2

让 AI 一次性 Grill Me

只追问会改变 MVP 范围和核心流程的问题;每个问题同时给出推荐答案。

3

让 AI 用要点复述

用几条简短结论确认核心功能、明确不做的功能和关键假设,不生成另一份冗长需求文档。

已经明确的需求

我要做一个会员小程序,让用户浏览活动和成员;需要时登录,购买会员后可以报名专属活动。

AI
AI 先帮助收口第一版

我建议 MVP 先完成“公开浏览 → 按需登录 → 购买会员 → 获得权益 → 报名活动”这条闭环。复杂社交、私信和等级体系先不实现。

  • 登录只在报名、购买和修改资料时触发
  • 支付结果以服务端订单终态为准
  • 后台先覆盖活动、订单和退款处理
页面数量不是完成度指标。第一版只实现核心闭环所需的最少页面;不因为原型能生成几十页,就把所有想法同时加入 MVP。
确认 MVP,并让 AI 主动追问
[把已经讨论好的需求文档放在这里]

这次只实现第一版 MVP。请先不要写代码,也不要主动扩展大量功能。

请先完成以下工作:
1. 提炼目标用户、核心任务和最小完整业务闭环;
2. 列出第一版必须实现的功能,以及明确暂不实现的功能;
3. 一次性列出最多 8 个会改变 MVP 范围、核心流程或关键技术方案的问题;
4. 每个问题都给出你推荐的解决方案和理由;
5. 用不超过 8 条要点复述核心需求、MVP 边界和关键假设;
6. 给出下一步实现顺序,以及需要人类配合完成的最少事项。

未经确认,不要开始批量生成页面。
用要点确认双方理解
请暂停执行,用不超过 8 条要点复述我们已经确认的内容。

重点说明:核心用户任务、第一版必须实现的功能、明确不做的功能、关键业务或技术假设、下一步实现顺序,以及仍需我配合的事项。

不要展开所有页面和异常细节,也不要生成另一份完整需求文档。如果你发现关键矛盾,请单独列出并给出推荐。
02 · BUILD THE HARNESS

第二步:根据技术栈,为 AI 配好趁手的开发工具。

MVP 边界明确以后,先让 AI 检查真实工程:它能不能启动项目、操作微信开发者工具、查看报错、截图、测试数据库,并验证登录和支付结果?这套自我验证能力就是 Harness。

看懂

识别真实技术栈

检查源码、配置和构建产物,不只相信需求文档。

找工具

搜索官方 MCP / Skill

根据真实技术栈,寻找官方工具和当前最佳实践。

打通

连接开发与云端

工程、DevTools、数据库、云函数、存储和日志。

证明

实际跑一次

只有真正启动、截图、读日志以后,才算能力可用。

以会员小程序为例

需要处理的部分实际技术AI 应该能完成什么需要人配合什么
小程序页面原生 WXML + TypeScript、weapp-vite构建、导航、截图、读取 Console最终体验判断
样式与组件Tailwind 4、weapp-tailwindcss、TDesign检查源码与编译产物是否真正生效选择视觉方向
后端CloudBase SQL、云函数、对象存储建表、部署、上传图片、读取日志首次授权
微信能力微信登录、手机号、支付、退款发起流程、查询服务端终态扫码、授权、真实付款
你可以先这样问

先不要写页面。你现在能不能自己把这个小程序跑起来、截图、查看 Console,并自动测试所有页面?

AI
AI 应该给出清晰边界

我会先检查真实技术栈并做能力体检。构建、截图、Console 和云端回读可以自动完成;首次 CloudBase 登录、手机号授权和真实付款需要你配合。完成后我会继续查询服务端结果。

开始搭建 Harness
[在这里补充项目路径、确认后的 MVP 和现有技术信息]

在开始写业务代码前,请先为这个项目搭建能够自我验证的 Harness 环境。

请先检查真实项目结构和配置,识别前端框架、构建工具、样式系统、组件库、后端、数据库、存储、登录、支付、测试和发布方式。不要只相信需求文档或依赖名称。

然后联网搜索这些技术当前官方提供或官方推荐的 MCP、Skill、CLI、自动化 SDK 和最佳实践。优先官方来源;使用第三方工具时说明原因和风险。

请实际验证你能否自主完成:启动与构建、控制微信开发者工具、导航页面、截图、读取 Console、自动化交互测试、操作数据库/云函数/存储/日志、验证登录/支付/退款终态。

最后告诉我:
1. 你已经具备哪些自动化能力;
2. 哪些仍然是卡点;
3. 我需要一次性配合哪些动作;
4. 后续每次开发会怎样自动测试和验收。

不要把“理论上支持”写成“已经可用”,请实际验证后再下结论。
本教程默认使用原生微信小程序技术栈。只有需求明确包含多个小程序平台时,才重新评估跨端框架和对应的 Harness;这里不展开跨端选型。
03 · BROAD VISUAL SEARCH

第三步:先大范围寻找“这个产品应该是什么气质”。

同一个会员小程序,可以做成温暖社区、效率工具、高级俱乐部、城市生活或年轻社交。这个阶段应该尽量多看差异明显的方向,而不是只换几个颜色。

会员小程序三套完整视觉方向:东方杂志、现代活力和柔和人文
第一轮:先比较三种明显不同的产品气质
A 是东方杂志会员感,B 是现代活力活动社区,C 是柔和人文社区。每套都包含同样的核心页面,所以能直接比较整体感受,而不是被功能差异干扰。
这一轮只回答一个问题:用户打开小程序时,整体应该感受到什么?每套方向使用相同的 4–5 个核心页面,才容易公平比较。
会员小程序选定视觉方向的五个核心页面
会员案例最终选定的主要视觉方向
用首页、认识成员、活动、会员通行证和“我的”五个页面共同确认基调。
生成第一轮视觉方向
[确认后的需求、目标用户、品牌关键词和不喜欢的风格]

现在先进行大范围视觉探索,不开发代码。

请使用 ImageGen 生成 5–8 套差异足够明显的微信小程序视觉方向。每套方案用一张横向总览图,同时包含相同的 5 个核心页面,保证我们比较的是整体风格,而不是不同功能。

方案之间不能只是换颜色,需要在视觉气质、信息密度、图片语言、字体和品牌感受上有明显差异。每套方案说明适合目标用户的原因、可能的可用性风险和最值得保留的元素。

根据我的反馈继续扩大、合并或排除方向,直到我们缩小到一个明确的视觉基调。
04 · NARROW UX/UI SEARCH

第四步:风格确定后,再比较同一风格下的不同排布。

相同的颜色和视觉语言,也可以有完全不同的使用体验:首页是先展示活动、先展示会员权益,还是先展示成员?登录和付费应该在哪个时机出现?

选定会员视觉风格后生成的多页面交互排布探索
第二轮:在同一设计语言中继续比较页面组织方式
这时不再重新换风格,而是围绕成员、活动、会员权益、资料和管理入口,比较信息优先级、入口位置和完整流程。
上一轮:大范围搜索

决定产品看起来像什么

比较完全不同的品牌气质和视觉方向。

这一轮:小范围搜索

决定页面怎样组织和交互

在同一风格里比较首页任务、信息优先级和用户流程。

在选定风格中继续寻找最佳 UX
[已经选定的视觉方向图、要保留的元素和产品功能]

整体视觉风格已经确认。请不要重新设计另一套风格,而是在同一设计语言内,为核心流程生成 3–5 种信息架构和交互排布方案。

重点比较:首页第一任务、游客与登录用户看到什么、登录/手机号/资料补全/付费分别在哪个时机触发、TabBar 与返回如何组织,以及加载、空数据、失败、支付中和完成状态。

请继续用 ImageGen 输出方案总览图,同时用文字检查交互逻辑是否符合正常微信小程序使用习惯。不要机械复刻图片中不合理的布局。最后给出你的推荐方案和理由。
05 · DESIGN SYSTEM & PAGE SPEC

第五步:把原型图变成规则,而不是直接照图写代码。

图片能告诉 AI 大概长什么样,却不能完整表达返回逻辑、登录状态、数据来源和错误处理。正式实现前,要先生成设计系统、完整页面清单和验收标准。

视觉原型决定整体方向和页面感受
设计与页面规格颜色、间距、组件、路由、状态、数据
可以验收的代码真实业务、可维护结构和自动测试
会员小程序实际产物:页面规格、设计系统和设计验收文档
图片确认以后,真正指导开发的是这些结构化产物
页面规格描述每个页面的任务和状态;设计系统约束颜色、字号、间距和组件;最终验收记录实际截图、问题和结论。

这一步应该留下四份可以继续使用的产物

会员小程序完整关键页面视觉总览
会员案例关键页面总览
页面较多时,可以先把约 20 个关键页面全部生成出来,检查视觉和流程是否统一。
设计系统

统一“长什么样”

颜色、字体、间距、圆角、图片比例、组件和反馈。

页面规格

统一“怎样使用”

入口、目标、数据、用户状态、动作、返回和异常分支。

验收标准

统一“怎样算完成”

功能、视觉、Console、云端结果和真机证据。

生成设计系统和 MVP 页面规格
[确认后的视觉原型、UX 方案、需求共识和技术栈]

在写正式页面前,请先完成:
1. 完整路由和页面清单;
2. 每个页面的未登录、已登录、加载、空、失败、完成和权限状态;
3. 颜色、字体、字号、间距、圆角、边框、阴影、图片比例和动效规范;
4. 公共组件、业务组件和页面组件的边界;
5. 每个页面的数据来源、接口、缓存和刷新策略;
6. 功能、视觉、性能和真机验收标准。

图片素材使用 ImageGen 生成,压缩后上传到后端并由数据库引用;不要使用占位符,也不要把假活动、假会员和假订单硬编码进页面。

最终目标是完整可运行的 App,不是静态页面还原。原型不合理时按正常设计原则修正,不要求 100% 像素复刻。代码必须可复用、可维护、UI 统一。

如果页面较多,请再生成约 20 个关键页面的视觉总览,供我确认整体一致性。
06 · BUILD ONE PAGE FIRST

第六步:先让一个代表页面真正可用。

不要一上来批量生成几十个页面。先选择一个同时包含导航、真实数据、图片、登录状态和关键操作的页面,让它暴露设计系统和工程结构的问题。

页面入口导航与返回
视觉组件设计系统落地
真实数据数据库与缓存
图片素材压缩与云存储
关键动作登录或支付
验收证据截图与日志
会员小程序五个主要页面总览
会员案例的主要页面
首页和“我的”最适合先校准,因为它们容易暴露图片加载、缓存、授权时机、导航和组件复用问题。
不要机械照搬原型。图片生成模型擅长提供视觉灵感,但可能画出拥挤卡片、错误返回按钮或不合理表单。实现时必须遵循正常的小程序交互常识。
先实现一个代表页面
请先只实现我们选定的代表页面和它所需的最小完整业务流程,不要批量生成剩余页面。

要求:使用确认后的设计系统和页面规格;接入真实数据库和云存储;图片由 ImageGen 生成并压缩后上传;完成加载、缓存、空、失败、未登录和已登录状态;遵循微信小程序正常导航和授权逻辑;不机械复刻原型中不合理的布局。

实现后请自动完成构建、Console 检查、不同状态截图和数据回读,并给出:
1. 实际页面截图;
2. 原型与实现差异及原因;
3. 功能和数据证据;
4. 发现的问题;
5. 应该更新到设计系统和组件规范的经验。

等这个页面通过验收后,再实现剩余 MVP 页面。
07 · LEARN, THEN SCALE

第七步:先总结代表页面的经验,再扩展核心任务。

通过验收的页面不只是一个结果,它还是后续页面的样板。把间距、组件、缓存、加载、错误和导航规则写回规范,才能避免下一页重新犯错。

先沉淀

把成功经验写成规则

更新设计系统、组件规范、数据访问层、AGENTS.md、Skill 或自动检查。

再扩展

按核心用户任务推进

每次同时完成页面、真实数据、云端逻辑、错误状态和测试,不把它们分开拖到最后。

会员案例可以这样分成六条完整任务

公开浏览首页、成员、活动
身份资料登录、手机号、头像
会员权益方案、通行证、状态
支付售后订单、支付、退款
活动流程报名、票券、取消
运营管理用户、活动、订单
总结经验并继续完成核心任务
代表性页面已经通过验收。请先暂停开发,总结本轮成功经验和失败教训,并更新设计系统、页面规格、公共组件、图片与数据流程、加载与缓存策略、登录与支付逻辑,以及相关 AGENTS.md、Skill 或自动检查脚本。

完成这些规范更新后,再按照核心用户任务实现剩余 MVP 页面。每个任务都必须同时完成 UI、真实数据、云端逻辑、错误状态、自动测试和截图验收。

不要复制旧页面中的临时补丁。发现原型不合理时,按正常设计原则修正并记录原因。
08 · ACCEPT WITH EVIDENCE

第八步:页面能打开,只能证明它能打开。

真正完成还需要证明:没有隐藏报错、返回正常、图片不会反复加载、云端数据一致、支付和退款最终收敛,真机授权也符合微信习惯。

源码检查类型、路由、状态、敏感信息和设计规范AI 自动
构建检查真实构建、样式产物、分包和资源体积AI 自动
DevTools逐页截图、Console warning/error、溢出、返回和缓存AI 自动
云端结果数据库、函数、存储、日志、订单和退款终态AI 自动
真机门禁微信授权、手机号、真实支付、退款到账和体验人类确认
AI
好的验收反馈应该具体

自动化已经检查全部路由和关键状态,Console 没有 warning/error。现在只需要你连续完成三项:授权手机号、支付 ¥0.10、确认退款到账。之后我会自动查询订单和退款终态,不只相信客户端提示。

人的工作变得很少

我只完成必须由微信用户执行的动作,剩余排查和收敛由 AI 继续处理。

对完整小程序进行分层验收
请对整个小程序执行分层验收,不要只运行单元测试。

完成源码和类型检查、真实构建、微信开发者工具逐页导航与截图、Console warning/error 检查、页面溢出与闪烁检查、返回和缓存检查,以及数据库、云函数、对象存储和后台管理验证。

登录、支付、退款和权益发放必须同时检查客户端状态与服务端终态。最后生成验收报告,明确区分“已经验证”“证据不足”“必须由人类真机确认”。

把需要我配合的动作整理成一份最短、可以连续完成的清单。我每完成一个动作,你就继续自动查询并收敛业务状态。
09 · KEEP THE LESSONS

第九步:把这次成功,变成下一个项目的起点。

只有真实复现并通过验收的经验,才值得写入模板。下一次再做小程序时,AI 会从已经验证过的登录、支付、缓存、图片、组件和验收流程开始,而不是从零猜测。

文档

记录为什么这样做

业务边界、设计原则、CloudBase 与微信能力限制。

规则与 Skill

告诉 AI 下次怎样做

目录、组件、加载、支付、验收和禁止事项。

自动守卫

让错误不能再次出现

构建、Console、路由、视觉和云端状态检查。

最终得到的不是一堆页面。你得到的是一套可以反复复用的开发方法:人负责目标和关键判断,AI 负责执行、测试和报告证据。
SHARE IT WITH A FRIEND

如果要现场介绍,可以按这个顺序讲。

大约 8 分钟,重点让第一次接触 AI 开发的人理解:为什么不能直接写,以及每一步怎样降低风险。

先展示旧流程和新流程:直接写为什么会得到混乱 UI、假数据和未经验证的支付。

说明教程从明确需求开始:先收口 MVP,让 AI 主动追问,再复述共同理解。

解释 Harness:根据技术栈,为 AI 配好启动、截图、读报错和操作云端的能力。

展示两轮视觉搜索:先决定气质,再决定同一气质下的交互排布。

放大会员页面总览,解释为什么原型要先变成设计系统和页面规格。

解释为什么先完成一个页面,并把经验写回规范。

展示核心功能如何按用户任务推进,而不是先写全部 UI。

以验收收尾:AI 自动截图、读 Console、查云端;人只完成真机门禁。

延伸阅读