实战:AI搞钱第一步开发一个可上线的小程序

目录10
  1. 先看成品:零基础 AI 开发的小程序
  2. 需要准备
  3. 跟着做
  4. 一段话开场先做起来
  5. 第一版一定丑,先别管
  6. 说具体的要求和问题,不说模棱两可的话
  7. 对 AI 一次只说一件事
  8. 出问题时一定要描述清楚
  9. 验证:AI 说改好了,一定要自己去测试确认
  10. 常见坑
零基础 AI 开发从零做出来 · 第 1 期

不会写代码的人,怎么用 AI 把想法做成能上线/赚钱的小程序/APP/网站 —— 「零基础 AI 开发」系列就是带你怎么开发/赚钱。第一步:先把它做出来。

先从一个最普通的小程序起步 —— 习惯打卡小程序(微信里打开)。下面是我实际走的一遍开发过程:全程不写代码,不和 AI 讨论技术,只跟 AI 说大白话。

先看成品:零基础 AI 开发的小程序

习惯打卡首页

习惯打卡首页

记录页日历

记录页日历

统计页数据

统计页数据

编辑习惯弹窗

编辑习惯弹窗

点击任意一张看完整长图

整个小程序用腾讯的 WorkBuddy 开发并落地,数据存在 WorkBuddy 提供的云服务上。全程不需要技术背景,所有代码都是 AI 写的。

点下面的卡片,在微信里打开体验:

打开习惯打卡小程序 微信内打开,或点这里看公众号原文

需要准备

  • 一个会动手的 AI。跟你在网页上聊的那个不一样:它不光回答,还直接把小程序做出来。本文中用的是 Windows 版的 WorkBuddy,别的大同小异。

  • 一个能看见成品的地方。WorkBuddy自带预览窗口,做完当场给你看;想在手机上试,扫它给的二维码就行。真要微调再装微信开发者工具,在这里暂时不用。

你手上要是别的 AI 工具,留言告我一声,我把这套步骤照着你的工具再走一遍。

跟着做

整个过程就四件事:说清你要什么、先拿到一版、一轮轮指出不对、拿到手机上再修。能用文字说清的就直接说;说不清的,把截图贴给它。

一段话开场先做起来

在开始之前不用有压力——正因为不会,才让 AI 帮我们做想要的东西。

开场不需要复杂:说清你想要什么、大概有哪些功能就够了。初期不要求一步到位,也不可能一步到位。

因为 AI 的模型有很庞大的知识储备,我们绝大部分需求在现实里都有现成的例子,所以它基本能按你的描述先做出个大概的东西。

第一句我写的是:「我想要一个习惯打卡小程,你有什么建议吗?」它没有追问,直接把第一版做了出来。这种 AI 不听话的情况很正常:我本意是先讨论、确定一些细节,再让它动手。不过直接做的话也不是不行,我就没管它,让它继续做了。

你可以照着这个句式说:「我想要一个记录每天喝水的应用,能加习惯、每天打勾、能看到这个月完成了几次。」

你做的不是打卡应用也没关系——留言说你要做什么,我按你的场景给一份验证清单。

第一版一定丑,先别管

虽然 AI 有庞大的知识储备,但它终归是在我们的指示下干活。你没指到的地方,它多半想不到——比如新建按钮的样式出了问题,在我没指出来之前,它一直没意识到。在微信里打开体验

新建按钮被拉成了椭圆

新建按钮被拉成了椭圆

先别急着改。先看它能不能走通:能不能建、能不能存、点了有没有反应。美不美是下一步的事。

把每个按钮点一遍,别先看样式——你得先摸到它,才知道哪里不对。

说具体的要求和问题,不说模棱两可的话

我跟 AI 说:「这个界面我觉得很潦草,把小程序优化的高级一点,有一些按钮输入框的样式是错误的你检查检查」。

它的回复(有删节)

它的回复(有删节)

一句形容词,加一个模糊的指向。AI 也能做一些优化,但我没具体说哪儿要改,所以它回了四件事:按钮上多余的灰边、输入框高度不受控、点打卡会连带弹出编辑框、统计页有几处颜色没生效——后两件我没提,是它自己查出来的。

正确的做法是:说出具体位置,或者贴图给它,再简单描述一句。

  • 「这个太难看了」

  • 「没选中的看不清」

  • 「导航没有图标」

白图标放在浅灰底上

白图标放在浅灰底上

三条都是同一件事:我说清哪里不对,它才知道往哪改。第三条尤其典型——图标画得比标准尺寸大,某些环境干脆不显示;我不截图,它就一直以为「配置都在」。

形容词加截图,AI 能改;只有形容词,AI 只能猜。

给 AI 提意见时,先截图,再说哪里不对。

对 AI 一次只说一件事

一句话里别塞两个要求。我跟AI说「这样很不好看,还要上下滚动」,它先把「不好看」解决了——图标排成两行,不用左右拖;「还要上下滚动」它没顾上。

我又说「还是有上下滚动」,这次它只办这一件,把弹窗压到一屏放得下。

所以一次解决一个问题的话,AI一般改得很准;一次说两件,它常常会漏事情不做。

出问题时一定要描述清楚

有一回整个小程序点不了了。我先发「现在整个小程序点不了了」,它去动最上面的导航栏,方向错了。

后面我又说:「所有页面都点不了,只有 tab 可以点击。」tab 就是底部那排切换按钮。

补了这句之后,它的回复(有删节)

补了这句之后,它的回复(有删节)

第二句里有它要的东西:哪些能点、哪些不能点。它照这句找到了原因,修好了。

遇到问题别猜原因,照这个顺序填:我在哪一页、点了什么、出现什么、我以为会怎样。说不清的,把截图一起发给它。

验证:AI 说改好了,一定要自己去测试确认

AI 每次改完都说「校验通过」,但我打开又是另一回事:新建完保存,列表里没有它;日历视图整页卡在「正在加载」。

第一个问题,是它给弹窗加动画时,把保存后的刷新弄丢了;第二个问题,是它删一行旧文案时,把挨着的一行也删了。两处它自己都没发现。

它说的「校验通过」,意思是代码没报错,不是页面真的能用。所以每次它说完成,我都自己点一遍:

  1. 1

    建一个习惯,看它有没有立刻出现在列表里

  2. 2

    打个卡,看顶上进度数字变不变

  3. 3

    进「记录」页,看今天那格是不是实心

  4. 4

    点前几天的格子,在当日详情里补上

  5. 5

    在记录页切到「统计」,看总次数比刚才多 1 次

反正卡在哪一步,就把现象写清楚发给它。你正在做的不是我这个小程序,就照差不多的顺序,按照你的实际情况进行测试。

常见坑

  1. 1

    预览不等于真机使用就正常。 预览窗口里操作顺得挑不出毛病的动画,到手机上可能乱跳;间距、图标、能点到的范围也一样。改完任何东西一定要实际测试一遍。

  2. 2

    截图截整屏,圈出位置。 只截一个角,它会改错地方;把整屏发过去,顺手圈一下出问题的那个按钮,能省很多来回拉扯时间。

AI 不会替你判断对错,它只会替你动手。你不需要会写代码,只需要会看着截图说「这里不对」,剩下的交给它。

TIP

下一篇:让小程序过审上线

注册、认证、备案、提交审核,再到真正发布——把「能跑」变成「能上线」。

再往后:数据存在哪,换台手机还在不在。

NOTE

你在做自己的东西时卡在哪一步?或者想让它替你做点什么?留言告诉我——重复最多的问题,我写进后面的文章里。

Big 栈

零基础 AI 开发 · 从零做出来 · 第 1 期

系列第一篇,下一篇:让小程序过审上线

本文首发于微信公众号「Big 栈」 · 原文

全部内容

评论

5 1 投票
文章评分
guest
0 评论
0
希望看到您的想法,请您发表评论x