本教程假定需求方向已经明确。先把第一版收口成最小完整闭环,再为 AI 配好开发、截图和测试工具。
大多数失败,发生在 AI 写第一行代码之前。
最常见的做法是:把需求发给 AI,然后说“直接帮我做完”。AI 会替你补上所有没说清楚的事情,看起来很快,实际把问题留到了最后。
需求 → AI 直接写 → 能打开 → 交付
- 需求里有矛盾,AI 默默选择一种解释
- 没有确定风格,每个页面像不同产品
- 图片是占位符,业务内容写死在代码里
- 登录、返回、缓存、支付只走了理想路径
- 看到页面能打开,就误以为开发完成
先理解、再选择、后实现、拿证据
- 先把第一版收口成最小完整业务闭环
- 用追问和复述确认人机理解一致
- 再为 AI 配好运行、截图和测试能力
- 先选风格、定规范,再完成代表页面
- 最后用自动化、云端和真机共同验收
第一步:把明确需求收口成第一版 MVP。
本教程假定你已经有相对明确的产品需求,不展开市场调研和完整 PRD 方法。开发前只做一次边界确认:第一版解决哪个核心任务,哪些能力必须存在,哪些内容明确暂不实现。
提炼最小完整闭环
从用户进入小程序开始,到完成核心任务结束,只保留这条路径必需的页面、数据和业务能力。
让 AI 一次性 Grill Me
只追问会改变 MVP 范围和核心流程的问题;每个问题同时给出推荐答案。
让 AI 用要点复述
用几条简短结论确认核心功能、明确不做的功能和关键假设,不生成另一份冗长需求文档。
我要做一个会员小程序,让用户浏览活动和成员;需要时登录,购买会员后可以报名专属活动。
我建议 MVP 先完成“公开浏览 → 按需登录 → 购买会员 → 获得权益 → 报名活动”这条闭环。复杂社交、私信和等级体系先不实现。
- 登录只在报名、购买和修改资料时触发
- 支付结果以服务端订单终态为准
- 后台先覆盖活动、订单和退款处理
[把已经讨论好的需求文档放在这里] 这次只实现第一版 MVP。请先不要写代码,也不要主动扩展大量功能。 请先完成以下工作: 1. 提炼目标用户、核心任务和最小完整业务闭环; 2. 列出第一版必须实现的功能,以及明确暂不实现的功能; 3. 一次性列出最多 8 个会改变 MVP 范围、核心流程或关键技术方案的问题; 4. 每个问题都给出你推荐的解决方案和理由; 5. 用不超过 8 条要点复述核心需求、MVP 边界和关键假设; 6. 给出下一步实现顺序,以及需要人类配合完成的最少事项。 未经确认,不要开始批量生成页面。
请暂停执行,用不超过 8 条要点复述我们已经确认的内容。 重点说明:核心用户任务、第一版必须实现的功能、明确不做的功能、关键业务或技术假设、下一步实现顺序,以及仍需我配合的事项。 不要展开所有页面和异常细节,也不要生成另一份完整需求文档。如果你发现关键矛盾,请单独列出并给出推荐。
第二步:根据技术栈,为 AI 配好趁手的开发工具。
MVP 边界明确以后,先让 AI 检查真实工程:它能不能启动项目、操作微信开发者工具、查看报错、截图、测试数据库,并验证登录和支付结果?这套自我验证能力就是 Harness。
识别真实技术栈
检查源码、配置和构建产物,不只相信需求文档。
搜索官方 MCP / Skill
根据真实技术栈,寻找官方工具和当前最佳实践。
连接开发与云端
工程、DevTools、数据库、云函数、存储和日志。
实际跑一次
只有真正启动、截图、读日志以后,才算能力可用。
以会员小程序为例
| 需要处理的部分 | 实际技术 | AI 应该能完成什么 | 需要人配合什么 |
|---|---|---|---|
| 小程序页面 | 原生 WXML + TypeScript、weapp-vite | 构建、导航、截图、读取 Console | 最终体验判断 |
| 样式与组件 | Tailwind 4、weapp-tailwindcss、TDesign | 检查源码与编译产物是否真正生效 | 选择视觉方向 |
| 后端 | CloudBase SQL、云函数、对象存储 | 建表、部署、上传图片、读取日志 | 首次授权 |
| 微信能力 | 微信登录、手机号、支付、退款 | 发起流程、查询服务端终态 | 扫码、授权、真实付款 |
先不要写页面。你现在能不能自己把这个小程序跑起来、截图、查看 Console,并自动测试所有页面?
我会先检查真实技术栈并做能力体检。构建、截图、Console 和云端回读可以自动完成;首次 CloudBase 登录、手机号授权和真实付款需要你配合。完成后我会继续查询服务端结果。
[在这里补充项目路径、确认后的 MVP 和现有技术信息] 在开始写业务代码前,请先为这个项目搭建能够自我验证的 Harness 环境。 请先检查真实项目结构和配置,识别前端框架、构建工具、样式系统、组件库、后端、数据库、存储、登录、支付、测试和发布方式。不要只相信需求文档或依赖名称。 然后联网搜索这些技术当前官方提供或官方推荐的 MCP、Skill、CLI、自动化 SDK 和最佳实践。优先官方来源;使用第三方工具时说明原因和风险。 请实际验证你能否自主完成:启动与构建、控制微信开发者工具、导航页面、截图、读取 Console、自动化交互测试、操作数据库/云函数/存储/日志、验证登录/支付/退款终态。 最后告诉我: 1. 你已经具备哪些自动化能力; 2. 哪些仍然是卡点; 3. 我需要一次性配合哪些动作; 4. 后续每次开发会怎样自动测试和验收。 不要把“理论上支持”写成“已经可用”,请实际验证后再下结论。
第三步:先大范围寻找“这个产品应该是什么气质”。
同一个会员小程序,可以做成温暖社区、效率工具、高级俱乐部、城市生活或年轻社交。这个阶段应该尽量多看差异明显的方向,而不是只换几个颜色。

A 是东方杂志会员感,B 是现代活力活动社区,C 是柔和人文社区。每套都包含同样的核心页面,所以能直接比较整体感受,而不是被功能差异干扰。

用首页、认识成员、活动、会员通行证和“我的”五个页面共同确认基调。
[确认后的需求、目标用户、品牌关键词和不喜欢的风格] 现在先进行大范围视觉探索,不开发代码。 请使用 ImageGen 生成 5–8 套差异足够明显的微信小程序视觉方向。每套方案用一张横向总览图,同时包含相同的 5 个核心页面,保证我们比较的是整体风格,而不是不同功能。 方案之间不能只是换颜色,需要在视觉气质、信息密度、图片语言、字体和品牌感受上有明显差异。每套方案说明适合目标用户的原因、可能的可用性风险和最值得保留的元素。 根据我的反馈继续扩大、合并或排除方向,直到我们缩小到一个明确的视觉基调。
第四步:风格确定后,再比较同一风格下的不同排布。
相同的颜色和视觉语言,也可以有完全不同的使用体验:首页是先展示活动、先展示会员权益,还是先展示成员?登录和付费应该在哪个时机出现?

这时不再重新换风格,而是围绕成员、活动、会员权益、资料和管理入口,比较信息优先级、入口位置和完整流程。
决定产品看起来像什么
比较完全不同的品牌气质和视觉方向。
决定页面怎样组织和交互
在同一风格里比较首页任务、信息优先级和用户流程。
[已经选定的视觉方向图、要保留的元素和产品功能] 整体视觉风格已经确认。请不要重新设计另一套风格,而是在同一设计语言内,为核心流程生成 3–5 种信息架构和交互排布方案。 重点比较:首页第一任务、游客与登录用户看到什么、登录/手机号/资料补全/付费分别在哪个时机触发、TabBar 与返回如何组织,以及加载、空数据、失败、支付中和完成状态。 请继续用 ImageGen 输出方案总览图,同时用文字检查交互逻辑是否符合正常微信小程序使用习惯。不要机械复刻图片中不合理的布局。最后给出你的推荐方案和理由。
第五步:把原型图变成规则,而不是直接照图写代码。
图片能告诉 AI 大概长什么样,却不能完整表达返回逻辑、登录状态、数据来源和错误处理。正式实现前,要先生成设计系统、完整页面清单和验收标准。

页面规格描述每个页面的任务和状态;设计系统约束颜色、字号、间距和组件;最终验收记录实际截图、问题和结论。
这一步应该留下四份可以继续使用的产物

页面较多时,可以先把约 20 个关键页面全部生成出来,检查视觉和流程是否统一。
统一“长什么样”
颜色、字体、间距、圆角、图片比例、组件和反馈。
统一“怎样使用”
入口、目标、数据、用户状态、动作、返回和异常分支。
统一“怎样算完成”
功能、视觉、Console、云端结果和真机证据。
[确认后的视觉原型、UX 方案、需求共识和技术栈] 在写正式页面前,请先完成: 1. 完整路由和页面清单; 2. 每个页面的未登录、已登录、加载、空、失败、完成和权限状态; 3. 颜色、字体、字号、间距、圆角、边框、阴影、图片比例和动效规范; 4. 公共组件、业务组件和页面组件的边界; 5. 每个页面的数据来源、接口、缓存和刷新策略; 6. 功能、视觉、性能和真机验收标准。 图片素材使用 ImageGen 生成,压缩后上传到后端并由数据库引用;不要使用占位符,也不要把假活动、假会员和假订单硬编码进页面。 最终目标是完整可运行的 App,不是静态页面还原。原型不合理时按正常设计原则修正,不要求 100% 像素复刻。代码必须可复用、可维护、UI 统一。 如果页面较多,请再生成约 20 个关键页面的视觉总览,供我确认整体一致性。
第六步:先让一个代表页面真正可用。
不要一上来批量生成几十个页面。先选择一个同时包含导航、真实数据、图片、登录状态和关键操作的页面,让它暴露设计系统和工程结构的问题。

首页和“我的”最适合先校准,因为它们容易暴露图片加载、缓存、授权时机、导航和组件复用问题。
请先只实现我们选定的代表页面和它所需的最小完整业务流程,不要批量生成剩余页面。 要求:使用确认后的设计系统和页面规格;接入真实数据库和云存储;图片由 ImageGen 生成并压缩后上传;完成加载、缓存、空、失败、未登录和已登录状态;遵循微信小程序正常导航和授权逻辑;不机械复刻原型中不合理的布局。 实现后请自动完成构建、Console 检查、不同状态截图和数据回读,并给出: 1. 实际页面截图; 2. 原型与实现差异及原因; 3. 功能和数据证据; 4. 发现的问题; 5. 应该更新到设计系统和组件规范的经验。 等这个页面通过验收后,再实现剩余 MVP 页面。
第七步:先总结代表页面的经验,再扩展核心任务。
通过验收的页面不只是一个结果,它还是后续页面的样板。把间距、组件、缓存、加载、错误和导航规则写回规范,才能避免下一页重新犯错。
把成功经验写成规则
更新设计系统、组件规范、数据访问层、AGENTS.md、Skill 或自动检查。
按核心用户任务推进
每次同时完成页面、真实数据、云端逻辑、错误状态和测试,不把它们分开拖到最后。
会员案例可以这样分成六条完整任务
代表性页面已经通过验收。请先暂停开发,总结本轮成功经验和失败教训,并更新设计系统、页面规格、公共组件、图片与数据流程、加载与缓存策略、登录与支付逻辑,以及相关 AGENTS.md、Skill 或自动检查脚本。 完成这些规范更新后,再按照核心用户任务实现剩余 MVP 页面。每个任务都必须同时完成 UI、真实数据、云端逻辑、错误状态、自动测试和截图验收。 不要复制旧页面中的临时补丁。发现原型不合理时,按正常设计原则修正并记录原因。
第八步:页面能打开,只能证明它能打开。
真正完成还需要证明:没有隐藏报错、返回正常、图片不会反复加载、云端数据一致、支付和退款最终收敛,真机授权也符合微信习惯。
自动化已经检查全部路由和关键状态,Console 没有 warning/error。现在只需要你连续完成三项:授权手机号、支付 ¥0.10、确认退款到账。之后我会自动查询订单和退款终态,不只相信客户端提示。
我只完成必须由微信用户执行的动作,剩余排查和收敛由 AI 继续处理。
请对整个小程序执行分层验收,不要只运行单元测试。 完成源码和类型检查、真实构建、微信开发者工具逐页导航与截图、Console warning/error 检查、页面溢出与闪烁检查、返回和缓存检查,以及数据库、云函数、对象存储和后台管理验证。 登录、支付、退款和权益发放必须同时检查客户端状态与服务端终态。最后生成验收报告,明确区分“已经验证”“证据不足”“必须由人类真机确认”。 把需要我配合的动作整理成一份最短、可以连续完成的清单。我每完成一个动作,你就继续自动查询并收敛业务状态。
第九步:把这次成功,变成下一个项目的起点。
只有真实复现并通过验收的经验,才值得写入模板。下一次再做小程序时,AI 会从已经验证过的登录、支付、缓存、图片、组件和验收流程开始,而不是从零猜测。
记录为什么这样做
业务边界、设计原则、CloudBase 与微信能力限制。
告诉 AI 下次怎样做
目录、组件、加载、支付、验收和禁止事项。
让错误不能再次出现
构建、Console、路由、视觉和云端状态检查。
如果要现场介绍,可以按这个顺序讲。
大约 8 分钟,重点让第一次接触 AI 开发的人理解:为什么不能直接写,以及每一步怎样降低风险。
先展示旧流程和新流程:直接写为什么会得到混乱 UI、假数据和未经验证的支付。
说明教程从明确需求开始:先收口 MVP,让 AI 主动追问,再复述共同理解。
解释 Harness:根据技术栈,为 AI 配好启动、截图、读报错和操作云端的能力。
展示两轮视觉搜索:先决定气质,再决定同一气质下的交互排布。
放大会员页面总览,解释为什么原型要先变成设计系统和页面规格。
解释为什么先完成一个页面,并把经验写回规范。
展示核心功能如何按用户任务推进,而不是先写全部 UI。
以验收收尾:AI 自动截图、读 Console、查云端;人只完成真机门禁。