用AI编程做微信小程序，我靠Google AI Studio解决UI设计难题

我最近在研究用AI编程做微信小程序，为了更有氛围感，我加了生财有术的航海实战营，光是我所在的微信群里就有400多个人，平时也很热闹。

AI编程方面我有一点基础，所以我大部分时候都是自己闷头做，偶尔遇到一些不熟悉的问题就到群里问问。

尤其是那些从没接触过的流程，比如小程序的类目选择、备案，还有后续的代码上传审核等，自己一个人研究的话是很不划算的。

等我空下来的时候，我也会刷一刷群，看看大家都在聊什么，也看看别人的案例。

然后我就发现一个问题，有很多朋友在小程序的UI界面设计这块严重受挫，甚至可以说是被AI折磨的够呛。

因为很多朋友在做一个新的小程序的时候，所采用的方法通常是直接截屏竞品的界面，然后发给AI，让AI照着截图去模仿。

但其实这种方式通常很难做出比较好的UI界面，因为我做过很多年设计师，加上我对AI编程也有一点熟悉，所以我知道这里面的核心原因：

1、大模型本身的能力不足。尤其是国产模型，你让他照着一张截图就能给你完全还原出界面，可能性不大。

2、竞品的设计水平本身就一般。市面上大多数产品界面，其实都是60分的设计师做的60分的产品，再加上现在有很多产品是由AI来设计的，拿60分的界面去模仿是不可能做出80分的设计的。

3、审美水平限制。大模型有审美能力，人也有审美能力，但是两者的审美水平的上限决定了界面设计的水平。

所以想要做出80分或者更高水平的UI界面，必须要能够解决这几个核心问题。

其实解法很简单，就是找到最适合的工具来把UI界面的设计水平的上限拉高。

这个工具就是Google旗下的AI Studio：https://aistudio.google.com/。

它不仅是目前为止审美水平最高的AI工具，而且是免费的（只是每天有额度限制）。

最近我做的两个小程序，就是用它来生成HTML原型，然后再让Codex按照原型去制定设计规范，然后开发出来的。

整个流程大概就是这样：

1、先和AI聊清楚你的需求；

2、再让AI Studio根据你的需求做出HTML的原型；

3、最后让AI编程工具根据原型制定设计规范，然后开发。

为了方便大家理解，我直接做一个简单的模拟案例，把流程介绍一下，你肯定就懂了。

还是拿小程序作为案例，因为最近我看到群里老是有人说有个叫做“植物小帮手”的小程序流量很好，但是我打开来一看，UI界面很简陋，某些部分可以说60分都达不到（截图如下），我们就以它为例子去试试。

打开AI Studio，模型选择Gemini-3.1-Pro-Preview，然后在聊天框里把三张“植物小帮手”的截图传上去，然后跟他说：

我给你的几张截图是一个叫做“植物小帮手”的微信小程序，听说它流量很好，我也想模仿它做一个。

你先帮我用HTML做一个微信小程序的原型，界面要专业美观、清晰易用，内容先参考截图的，但是设计上一定要超越它，它的设计不够好。

然后它就开始生成一个HTML的文件，需要花一点时间，等他生成好了，就点击下载按钮下载到电脑上，可以通过浏览器直接看效果。

第一版它给出的效果如下：

我一看跟参考图变化不大，而且只有一个页面，很不满意，就跟它说：

我对这个结果很不满意，这只是模仿了“植物小帮手”的布局，然后做了细节优化而已，相当于从50分改到了60分。

我要的是非常非常专业的界面设计，极其高的审美水平，要让用户眼前一亮的感觉。

还有另外两个我没有截图的页面，你也得给我补全。

记得，一定要发挥你高超的审美水平，不要拿60分的平庸设计来糊弄我。

于是它又生成了第二版，效果图如下：