AI开发小程序

发表于 更新于
用AI做个小程序吧~

前言

这是一个用AI开发小程序的全过程的记录，小程序的界面样式、95%的前端代码、95%的后端代码（剩下的5%是我手动修改了一些些，但约等于全都是用AI实现了😂）都是由AI生成的，不得不说 AI 发展的实在太快了。

早些时候关注我的小伙伴可能还记得之前尝试做过一个 AI 测运势的小程序，当时是用 Midjourney 生成了一些小程序上用到的配图，用 ChatGPT 生成了一些文案，界面设计、小程序前端、后端都是自己写的。

不过这个小程序很快被封掉了，理由是个人小程序不能接入大模型，并且小程序不能和占卜测算相关（吐槽一下tx灵活的审核机制，这么多占卜测算小程序都没被封..）

前不久看到一些用 AI 生成视觉稿的教程，想实践一下，于是想起了这个尘封已久的小程序，把它改成了一个星座运势的工具，这样就和占卜没关系了。

需求描述

既然是一个星座运势小程序，那首页至少需要可以展示十二星座、每个星座的运势文案。另外为了让它的功能显得稍微多点，可以再加一个 tab，做一个【答案之书】页面。

需求看起来很简单（一句话需求，深得产品经理真传），然后就可以开始准备开发了 —— 首先是要做一个视觉稿，接下来开发小程序的前端和后端，最后是部署上线。

视觉稿

虽然之前切过不少图，但还是不擅长视觉设计，之前做一些小项目基本上都是简单画一个草图，然后直接开始写代码。

但现在，可以通过大模型直接生成视觉稿了，甚至可以根据视觉稿直接生成前端页面。实测下来，Claude3.7，Gemini 2.5 Pro 生成视觉稿的效果都不错。

可以使用 Github Copilot、字节的 Trae 来使用 Claude3.7 和 Gemini 2.5 Pro；也可以直接在谷歌AI studio官网上直接使用 Gemini 2.5 Pro。

为了生成视觉稿，我们只需要套用下面的提示词模板，然后把任务描述清楚就好了，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#角色
你是一位资深交互设计师，擅长使用HTML/CSS/SVG等技术完成UI/UX设计。你的设计风格优雅舒适，能够吸引用户使用，动线设计合理，具有细腻的微交互。你可以自由使用渐变、毛玻璃等任何你觉得能达到最佳视觉效果的设计。

#技术规格
1、单个页面尺寸为 375x812px，带有描边，模拟手机边框
2. 每个功能点都需要有单独页面的设计稿，并列出详细的交互方案
3. 多个页面的设计稿，横向排列；如果空间不足，则可以横向滚动，除此之外不显示任何非移动端元素；
4、图标使用 Lucide Static CDN 方式引入，示例如下：

```html
<!DOCTYPE html>
<body>
  <i data-lucide="volume-2" class="my-class"></i>
  <i data-lucide="x"></i>
  <i data-lucide="menu"></i>

  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
  </script>
</body>
\```
5、图片: 使用开源图片网站unsplash链接的形式引入
6、样式必须引入 tailwindcss CDN 来完成
7、不要显示状态栏以及时间、信号等信息
8、不要显示非移动端元素，如滚动条
9. 不需要考虑实际功能实现，只需要从设计和交互的角度考虑
10. 你需要先把整个设计稿的框架搭出，接下来向其中填充具体设计的页面
11. 每次输出2个页面，等我审阅后再继续输出接下来的2个页面

#任务
{任务描述}

模拟产品经理输出详细功能设计、信息架构设计，结合角色和技术规格输出一套UI设计方案。
生成一个UI.html文件，放入所有页面，横向排列。

#优秀案例
以下是一个优秀的设计案例，你可以参考这个案例的设计风格，但不要照搬，要根据自己的风格、要求和技术规格进行设计。
尤其是类，你的每个页面的类名都使用 phone-frame。

{视觉稿示例}

把里面的 {任务描述} 和 {视觉稿示例} 替换掉。比如我们想生成一个名字叫 “MusicFree” 的音乐播放器的视觉稿，任务描述 可以这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
这是一个插件化的【音乐播放器】软件，将要使用React Native进行开发，主要考虑安卓端。
软件没有登录功能，本身是一个音乐播放器的空壳，通过安装不同的插件实现播放不同源的音乐。

软件有以下页面：
- 主页，功能如下：
  - 顶部是侧边栏入口和搜索框；
  - 推荐歌单、榜单、最近播放、本地音乐四个页面的入口
  - 展示我创建的所有歌单
  - 展示我收藏的所有歌单
  - 底部是音乐播放栏，展示当前正在播放的音乐和状态

- 正在播放的音乐详情页，功能如下：
  - 歌曲名称
  - 歌曲专辑
  - 歌曲来源
  - 歌曲作者
  - 歌曲专辑封面
  - 播放状态
  - 切换上一首/下一首等功能按钮
  - 歌词（以及相关的调整功能）

- 搜索页
  - 点击主页的搜索按钮会跳转到一个单独的搜索页，顶部是一个输入框，底部是最近搜索的关键字；
  - 搜索结果页：
    搜索结果类型有：歌曲、专辑、歌单、作者；
    每个类别下，按插件列出搜索结果，应该是一个级联的tabview

任务描述的核心思路就是描述清楚想要的功能，给 AI 一个大概的方向。 {视觉稿示例} 部分可以贴一个其他的 html 格式的视觉稿的代码示例给 AI 做参考。

播放器的视觉稿效果大概如下：

视觉稿

回到主题，用类似的方式去生成一个星座小程序的视觉稿，视觉效果如下：

视觉稿

看上去还是有模有样的，比我自己做的视觉稿好看多了~

前端

因为生成的视觉稿是 HTML 形式的，所以转换成前端代码可以说是非常方便了。

小程序用的是 Taro + React 开发的，按照官方文档初始化一个空的 Taro 项目，剩下的就可以交给 AI 了。

用 Copilot Chat 的 Claude 3.7 Thinking 模型的话，只需要把要做的任务详细描述清楚，AI 就会自己开始生成代码了。这里我感觉没有什么固定的模板，把最终效果描述清楚，然后把上一步生成的html视觉稿贴进去就够了：

1
2
3
4
5
6
7
这是一个星座运势小程序，使用Taro+react实现。css使用scss，基本样式单位为rpx。你无法使用tailwindcss，所以请重新规划样式，确保和视觉稿完全一致。
请你帮我还原视觉稿，我将会给你html格式的视觉稿，你需要帮我还原出第一个页面、第二个页面，它们分别是加载中、出错了界面。

要求：视觉稿需要绝对还原，不需要考虑底部的导航栏。视觉稿是375x812px的，1rem=16px。每个页面单独封装成一个组件。第一个页面中，进度条会逐渐向右走，在两秒内走到尽头。所有svg、图片使用Image标签，src留白。不要额外新创建styles文件夹。

视觉稿如下：
...

Copilot

按下回车之后，等待生成代码就好了（有种当老板的感觉）。生成代码之后就可以在微信开发者工具里面预览效果，如果有不合适的地方告诉 AI 哪里不合适，它就会自己更新代码。

简单切图的话，AI 还原度还是很高的，代码生成完之后基本上只需要做一些简单的修补就可以了，比完全从头开发工作量小多了。

后端

前端页面开发完成后，还需要后端来提供服务，具体来说还需要一个查询星座信息的接口。

考虑到我的服务器内存比较小，所以这次就不写 nodejs 了，让 AI 帮我用 go 语言写。

同样，写一系列要求，比如：

  • 我要用 go 语言写一个服务端，用于星座运势小程序，其中有以下接口，xxx （需求描述）
  • 请你帮我初始化项目结构，确保符合企业级后端应用的最佳实践 （任务）
  • 要求使用 gin 框架，使用 wire 进行依赖注入，使用 MVC 架构 （细节限制防止跑偏）

这次我使用了 trae（cursor太贵了开不起会员），直接在 builder 模式下输入任务要求，然后按回车就好了。

builder 模式类似 cursor 的 “agent” 模式，会自动生成代码，执行一些指令，自动修复一些执行过程中遇到的报错。

但其实使用 trae 的过程中会遇到一些奇奇怪怪的问题，比如提示遇到错误，或者提示需要排队，很影响体验，但好在最后生成了个能运行的程序。

这里就不赘述细节啦，几乎没有手动写代码~

部署

现在要发布一个小程序也挺麻烦，先备案，然后要再给微信交 30 块钱保护费，完事之后才可以上线。

前后总共花了快一个月，才把这个尘封已久的小程序放出来。成品如下~

小程序

用 AI 做软件的成本越来越低了，找时间可以尝试用 AI 写个简单的小游戏试试~