AI开发小程序,两个技巧少走3天弯路

想到月底要报销就头疼。发票、付款截图、PDF、聊天文件散落各处，整理很麻烦。

打算做个发票整理的小程序，之前做过一个版本，没推进。前几天重新翻出来，决定做完它。

我是怎么用AI开发的

第一步，梳理需求。

没有直接让AI开始写代码。先重新梳理报销流程需求，明确第一版做哪些功能、不做哪些。让他出个 PRD 文档。

第二步，找UI参考。

去UI素材参考网站，找到我想要的风格，截图保存。

这里推荐【花瓣网】，直接上面找到喜欢的 UI，截图给 AI 即可。

第三步，让AI做前端原型。

把UI参考截图和需求文档一起交给Gemini，让它根据需求和参考风格做前端原型页。

第一版不行，有些地方不合理。继续让Gemini修改，来回几轮，慢慢调整到位。

第四步，梳理项目结构。

用Codex帮我把项目定位、MVP边界、页面结构、数据结构、开发计划梳理一遍。

知识点1：找到你喜欢的UI参考，让Gemini帮你生成。

直接跟AI描述「我要简洁风格」，它给出的结果往往不好。但如果你给它一张参考截图，让它照着这个风格生成，效果会好得多。

具体操作提示词：

[参考图片的ui设计风格(只参考设计风格，不参考布局)，根据PRD文档帮我设计小程序，使用html代码输出]

知识点2：做开发产品之前，可以先跟AI聊好需求，让它生成PRD文档。

很多人拿到AI直接就开始写代码。但我这次学乖了，先跟AI把需求聊清楚，让它帮我生成PRD文档。

PRD文档会把产品定位、功能边界、页面结构、数据结构都梳理清楚。后面开发的时候，AI才知道要做什么，不会跑偏。

这套流程走下来，开发效率会高很多。

目前还在开发中。原型页调整得差不多了，接下来要把功能一个个做出来。

第一版不会做太复杂。先把核心流程跑通：记录待报销事项、管理发票状态、上传附件、生成报销表。

后续就是 UI 的 HTML 做好了如何让 Codex 怎么整合进整个小程序，以及后端的实现了

1. 先梳理需求，再让AI生成。 不要直接让AI堆功能。

2. 给AI参考截图，比抽象描述更有效。

3. 迭代修改，比一次生成完美更重要。

4. 用AI梳理项目，让开发更有条理。

用AI开发小程序，其实没那么难。重点是先想清楚要做什么，再让AI帮你做。

后面我会继续更新开发进度。如果你对vibe coding开发小程序感兴趣，可以关注一下，我会把整个过程记录下来。

你有没有想过开发什么小程序。或者你在开发过程中遇到过什么问题。评论区跟我聊聊。

好了，今天先聊到这儿 👋
如果你觉得有收获，帮我在右下角点个「在看」吧！
👀 举手之劳，但对我很重要。
有问题想聊、有想法想碰撞，直接扫码加我微信 💬 期待与你交流。
关注我 🚀 我们一起把AI用起来。