为什么你让 AI 写的小程序，总是写着写着就烂尾？
一开始还挺顺，功能一多就开始失控：目录乱成一团，同一个按钮长出好几种样子，想把主色换个颜色，它改半天还改不干净。最后乱到你自己都不想再碰，只能推倒重来。
不是 AI 笨，是你在让它动手写之前，跳过了关键的一步。
上一集我们把小程序的前端框架定下来了——直接上 uni-app。可框架一选完，绝大多数人接下来就直接让 AI 写页面、堆功能。
但在写页面之前，本该先给项目立好规矩、搭出一套骨架。这一步，多数人根本不知道要做——于是上来就写，写着写着就成了开头那副样子。
vibe coding 既然叫 vibe coding，本身就是最大化地用自然语言编程——你不碰代码，唯一的抓手就是”怎么对 AI 说”。所以下面每一步，我都直接把该说的原话给你。
而且这套顺序我自己已经跑通、搭成了一套即开即用的启动架构，可见：《用uni-app开发小程序的快速启动架构》。
第一步，可能就和你想的不一样。
一、第一步：先定设计风格，别急着搭架构
退一步说，就算你知道要先立规矩，第一反应多半也是让 AI 先把项目架子搭起来。
错了。第一步，是先定整体的设计风格。
设计风格不是某个页面好不好看，而是整个产品统一的视觉感觉——走简洁商务，还是科技深色，还是内容社区那种信息流。
风格没定就开搭，AI 每个页面自由发挥，最后就是东一块西一块，像好几个人拼的。
这里特别提一个很多人小瞧的东西：主色调。
别小看选一个主色。你只要把主色定好，AI 就能顺着它，自动把按钮、标签、选中状态、边框这些的整套配色推出来，省掉你大半的设计功夫。
所以定风格这一步，重点先把主色调敲定，剩下的让 AI 围绕它铺开。
你自己说不清想要什么风格也没关系，找几个你觉得好看的产品当参考就行。
这里有个小提醒：小程序大多没法像网页那样甩个链接给 AI。所以喜欢的小程序，你直接截图发它；也可以去找几个设计得不错的手机端网页、H5，这些有链接，直接发给 AI 参考同样管用。
然后你就这么对它说：
“我要做一个 XX 类的小程序，这是我喜欢的几个产品（小程序就截图发它，网页或 H5 就发链接）。你先分析它们的视觉风格，再给我推荐一套适合我这个项目的整体设计风格；重点先帮我定一个主色调，然后围绕它推导出按钮、标签、选中态这些的整套配色，再定字号、圆角、间距的调性。先别写任何页面。”
最后那句”先别写任何页面”很关键——先把风格方向定死，再谈别的。
二、第二步：配着风格，锁定一个 UI 组件库
风格定了，接着定界面元素怎么统一，也就是 UI 组件库。
按钮、输入框、弹窗、表格、日历这些，别让 AI 一个个手搓，成熟组件库都给你备好了。
特别提醒一句：你要是不懂 UI 设计、又觉得前端很难，那就更别想着不用组件库、让 AI 从零裸做。挑一个成熟组件库，界面的下限直接就被它兜住了，这是你少踩坑、少返工最省事的一条路。
但选组件库有个新手必踩的坑，装之前务必避开：uni-app 分 Vue2 和 Vue3 两个版本，组件库也跟着分成两派。版本对不上，装进去就是一堆报错。
所以定两件事：新项目直接让 AI 用较新的 Vue3 版本；组件库也挑明确支持 Vue3、还在持续更新的——比如官方的 uni-ui，或者 uview-plus，别让它塞一个只支持老版本的停更库进来。
选定之后还要守住：只锁定一个，别混用好几个；改风格走它自己的总开关，别逐个组件硬改。
你就这么对它说：
“我这个项目用 uni-app 的 Vue3 版本。只用一个成熟的 UI 组件库，挑一个明确支持 Vue3、还在持续维护的，比如 uni-ui 或 uview-plus，选定就不许再混第二个；它的主题风格要和前面定的设计风格对齐，以后改风格统一走它的主题配置，不准逐个组件去覆盖样式。”
三、第三步：搭项目架构，把目录和复用规则定死
风格和组件库都有了，这才轮到搭项目架构。
先说个很多人不知道的：项目骨架别让 AI 从零徒手搭，拿官方现成的脚手架拉一个标准骨架当地基。
但这里有个坑得先分清楚——uni-app 官方有两种建项目的方式。一种是它的官方 IDE，叫 HBuilderX：图形界面，新建项目、选模板都得你自己手动点，AI 没法钻进去替你操作。另一种是命令行脚手架，官方给了一条现成命令，一跑就生成一个官方标准的基础工程——入口、配置、基础目录都按官方规范摆好，直接就能跑。
这俩你不用纠结走哪条：现在的 AI 编程工具都能自己跑终端命令，直接让 AI 用官方命令行脚手架拉骨架就行，它自己敲命令、自己建好，你连 HBuilderX 都不用打开。你唯一要盯的，是别让它绕开官方脚手架、自己现编一套乱七八糟的目录。
有了地基，再给它定两条规矩。
一是守目录：页面、组件、接口、工具函数，每类文件放哪定死，列清楚给你看，之后新文件必须归位。
二是组件复用：同一个东西反复出现，就封装成一个，不许到处复制粘贴。
你就这么对它说：
“请你用 uni-app 官方的命令行脚手架、Vue3/Vite 版，直接在终端跑命令拉一个标准项目骨架。建好后，在这个基础上把目录结构列清楚给我看，页面、组件、接口、工具函数每类文件放哪定死，之后新文件必须归位；同一类界面只要出现超过两次，就封装成一个可复用组件，不准复制粘贴重复写。”
那句”出现超过两次就封装”，是防止 AI 把相似代码抄得满项目都是的关键。
四、第四步：把设计风格，落成统一的设计 token
到这一步，才是把前面定的风格，变成 AI 写页面时真正照着取的数值。
这套集中管理的设计变量——颜色、字号、间距、圆角、阴影——专业上叫设计 token。
不这么干，AI 就今天写 16、明天写 18，颜色到处硬写；你想把主色从蓝换成绿，又得一页页去抠。
但这里有个关键，很多人会踩：你前面锁定的那个 UI 组件库，多半自己就带一套主题变量、一套统一定制主题的机制。
定 token 千万别让 AI 再另起炉灶搞一套跟它对着干的。不然组件库的按钮用它那套色、你手写的页面用你这套色，两套各走各的，迟早对不上——你改主色还是改不干净，本质上也违背了组件库的设计。
正确做法，是让这套 token 跟组件库的主题变量对齐、打通，让组件库的组件和你自己的页面，颜色字号都从同一个源头取。
你就这么对它说：
“把配色、字号、间距、圆角、阴影，统一定义成一套设计 token，集中放一处；如果我选的 UI 组件库自带主题变量，就跟它的主题体系对齐、打通，别再搞一套重复的；所有页面样式都必须从这里取，不准在页面里硬写具体数值。以后我要改主色或风格，只改这一处就全局生效。”
五、四步定完：落成两份文档索引进宪法，再盯住执行
前面这四步，你都不用懂代码，照着顺序说就行。
但只在聊天里说一遍没用，上下文一长 AI 就忘。所以要落成文档。
注意，不是一股脑塞进一个文件，而是拆成两份：
一份《设计规范》，装第一、二、四步的成果——设计风格、UI 组件库和它的主题、设计 token。
一份《开发规则》，装第三步的成果——框架规范、目录结构、组件复用规则。
然后，把这两份文档索引进 agent 宪法，也就是那份 AI 每次动手都要看的 AGENTS.md。
为什么不全塞进宪法？因为宪法要精简、只管纪律；设计和开发规则又多又会变，塞进去只会越来越臃肿。拆成专门文档、宪法只索引指路，AI 每次照着走，你以后改规则也只动那一份。
你就这么对它说：
“把前面定的设计风格、UI 组件库和主题、设计 token，整理成一份《设计规范》文档；把框架规范、目录结构、组件复用规则，整理成一份《开发规则》文档。然后在 AGENTS.md 里索引这两份文档，并加一条硬规则：每次开发前必须先读这两份、严格遵守。建好后先跟我确认，再只搭一个能跑起来的基础骨架，别急着把功能全做完。”
它讲的哪句你没听懂，就让它拆开用大白话重讲，别稀里糊涂点头。
还有一条，别做甩手掌柜：这两份文档立完不是就放那了。往后每让 AI 做完一块功能，都加一句”对照《设计规范》和《开发规则》自查一遍，有没有乱放目录、有没有绕开组件库主题、有没有在页面里硬写数值，跑偏了就改回来，再报给我”。规矩立了还得有人盯着执行，它才不会立完就忘。
六、还有个高频翻车点：截图模仿，别让 AI 一比一照抄
尤其你没有前端经验，真正做页面时，多半会去截几张别人做得好看的页面来模仿。这没问题，但千万别把图一甩、说”照着做一个”。
因为你这么一说，AI 会把”还原这张图”当成最高优先级——图里什么颜色、什么字号，它就照搬什么。你前面辛辛苦苦定的主色调、token、组件库主题，全被它晾一边，规矩瞬间白立。
正确的说法是：让它去学图里的布局、结构，还有背后的设计思路和精髓；但落到具体样式，优先套你项目已经定好的规范。现有 token 实在满足不了这张图的效果，才适当补，非必要不加。你就这么对它说：
“这张图，你参考它的布局、结构，以及背后的设计思路和精髓；但具体的颜色、字号、圆角、间距，优先用我项目里已经定好的设计 token 和主色调。如果现有 token 确实满足不了，可以适当新增，但非必要别加，新增的也要跟现有风格保持统一。”
七、最后
选框架决定你用什么；而这套顺序——先定风格、再选组件库、再搭架构、最后统一 token——决定 AI 往后是长在同一套规则上，还是各写各的。
就像装修：先定风格和图纸，再进场施工，最后所有开关走一条总线路。哪一步抢跑，后面都得砸墙返工。
