AI编程小程序：两大技巧避开三天弯路

每逢月底报销就令人头疼。发票、付款截图、PDF 及聊天文件散落在各处，整理工作颇为繁琐。

打算开发一款发票整理小程序，此前曾尝试过但未推进。近日重新翻出旧案，决定将其完成。

第一步，梳理需求。

并未直接让 AI 编写代码。而是先重新梳理报销流程需求，明确第一版包含哪些功能、排除哪些。让其输出 PRD 文档。

第二步，寻找 UI 参考。

前往 UI 素材参考网站，挑选心仪的风格，截图保存。

此处推荐【花瓣网】，直接在上面找到喜欢的 UI，截图发送给 AI 即可。

第三步，让 AI 制作前端原型。

将 UI 参考截图与需求文档一并交给 Gemini，令其依据需求及参考风格生前端原型页面。

初版效果不佳，存在部分不合理之处。继续让 Gemini 进行修改，经过几轮往返，逐步调整至理想状态。

第四步，梳理项目架构。

利用 Codex 协助我将项目定位、MVP 边界、页面结构、数据结构及开发计划进行全面梳理。

知识点 1：找到心仪的 UI 参考，让 Gemini 协助生成。

直接向 AI 描述“我要简洁风格”，其产出结果往往不尽如人意。但若提供一张参考截图，令其参照该风格生成，效果则显著提升。

具体操作提示词：

知识点 2：开发产品前，可先与 AI 沟通需求，让其生成 PRD 文档。

许多人拿到 AI 便直接开始写代码。但我此次学聪明了，先与 AI 厘清需求，令其协助生成 PRD 文档。

PRD 文档能将产品定位、功能边界、页面结构、数据结构梳理透彻。后续开发时，AI 方能明确目标，避免偏离方向。

遵循这套流程，开发效率将大幅提升。

目前项目仍在开发中。原型页面已基本调整完毕，接下来将逐个实现功能。

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

后续便是 UI 的 HTML 完成后，如何让 Codex 将其整合进整个小程序，以及后端的实现问题。

1.先梳理需求，再让 AI 生成。切勿直接让 AI 堆砌功能。

2.向 AI 提供参考截图，比抽象描述更为有效。

3.迭代修改，比一次性生成完美结果更为关键。

4.利用 AI 梳理项目，使开发工作更有条理。

利用 AI 开发小程序，其实并非难事。关键在于先想清楚目标，再让 AI 协助执行。

后续我会持续更新开发进度。若你对 vibe coding 开发小程序感兴趣，不妨关注一下，我将记录全过程。

你是否曾想过开发何种小程序？或者在开发过程中遇到过哪些难题？欢迎在评论区与我交流。

好了，今日暂且聊到这里 👋 若你觉得有所收获，请帮我在右下角点亮「在看」吧！👀 举手之劳，却对我意义重大。若有问题想探讨、有想法想碰撞，直接扫码添加我微信 💬 期待与你交流。关注我 🚀 让我们共同驾驭 AI。