这期视频我会手把手带你用AI做出你的第一个APP,全程假设你没有任何编程和AI的基础。我们从如何写需求提示词开始,到确定界面的结构和设计、产品需求文档、开发计划、第一版APP验收、Git代码存档、二次开发、界面美化。那做好的APP也会开源分享给大家,我也会演示如何获取这个项目的源代码,并且继续用AI定制开发。视频跟到最后,你会收获一个为自己的工作和生活专门定制的专属APP,以及更重要的用AI进行软件开发的能力。好不说废话,我们现在开始。
我们现在正式从零开始,首先在电脑上新建一个空白的文件夹。那这里呢我用桌面进行演示,大家找自己熟悉的文件夹即可,啊把它命名为比方说木子的APP。后面我们让AI开发的APP的源代码,就会放在我们这个文件夹里面。现在我们需要一个智能体,这里我想说,我们这个教程适用于所有智能体和所有模型,所以大家完全不必纠结。
不论你用的是豆包、Trae、Kimi、通义,还是Cursor、Claude code、Codex都可以,我们讲的所有内容都会适用。你现在已经在用了,就不要换了。如果你从来没有用过智能体,我建议你选一个国产的智能体,就可以开始这次的教程了。当你选定智能体之后啊,你就会来到这样一个对话界面。
你会发现几乎所有的智能体长的都是一个样子的对吧,就是跟AI对话来做项目,就是这么简单。我们给要求,AI开发结束。那这里呢,我们在智能体里打开我们刚才新建的那个文件夹,啊添加文件夹名称叫做木子的APP。给他第一个提示词,提示词是这样的,我先给他,然后我给大家解释一下具体要做什么。
这个提示词有这样几个部分,首先一句话告诉他我们想要做什么。我想要做一个只供自己使用的专属的工作和生活的APP。然后我们告诉它里面要包含什么样的功能,它包含这些不同的模块。然后呢每个模块有符合自身场景的基础功能,而不只换个皮对吧。比方说它要包含啊我今天的计划,我各种各样的工作,包括自媒体开发和咨询我。
我的生活包括健身饮食游戏娱乐以及一些设置和数据。然后我们告诉他功能方面,我希望他所有的数据都要保存,不能我重启电脑之后,他就会消失对吧。然后我们告诉他我们不要做什么,啊目前先不要做登录联网、部署和手机端这些工作。那后面我们可以加,这个不用着急,第一版我们先实现主要的功能。
然后我告诉他,你先不要开始写代码,你先看看自己啊,是不真正的理解我给你的需求。如果没有,你问我问题,一次问一个,直到你完全理解。如果你完全理解了,就复述我的需求。这样保证出来的效果是我们想要的,因为有的时候如果给的信息不全,AI会按自己的想法去做,但是可能出来的结果跟我们自己脑子里想象的不一样。
而一开始就要求我们一大段把所有的需求都说清楚也不现实,于是我们就可以用这种对话的方式,慢慢的把需求搞清楚敲定。好第一个问题他问我们,数据存储在浏览器当中,还是保存在电脑上。浏览器的话,问题是如果我们清空浏览数据,它就会没对吧。还是保存在电脑上,独立文件,这样的话,我们永远都会保留我们的数据。我们当然选第二个。
好的他就问了一个问题之后,他就开始复述我们的需求了。那这里呢,刚才问的问个问题,保证我们重启电脑、关闭浏览器刷新页面,数据依然还在,可以备份。那这个就添加到了新的要求。我们往下拉,其实每一个模块都相当于给它细化了。比如自媒体这个页面可能就包含了我们的选题和灵感,以及整个的流程、发布的日期等等。
开发工作呢,就记录不同的开发项目,记录需求和bug。那咨询工作就是记录一些客户的情况、沟通的历史。同时计划、饮食、游戏娱乐都纷纷根据不同的类型来做专门的页面。我们可以看一下满不满足我们的要求,不满足我们就继续问他问题让他改。同时呢他也说了第一版我们暂时不做这些功能,那后面可以添加。
好,现在我们确认他给我们的需求清单。下面呢,我们进入页面结构和交互设计。这时候依然不会写代码,而是让他把想要的页面结构和设计都给我们弄出来。我们敲定之后他才开始。那在这里啊,如果你的智能体啊,并没有主动的提出来,我们需求确定之后,先给你做一下页面的设计。那这时候你可以强制要求他说,我们先看一下页面的结构设计是怎么样的。
等一会之后呢,AI就把整个页面的设计方案给了我们。我们来看一下整体的页面架构,其实就是比较经典的软件设计方案啊。左边是我们所有的模块,那点击之后进入相应的页面。然后每个页面的内容在中间和右边进行展示,这个是ok的。随后呢他把每一个页面他想怎么设计都给我们说了一下,我们这里也可以简单过一下,看他设计的方案好不好。
ok了之后呢,现在我们确保AI理解了我们想要开发什么样的APP,以及我们也通过了AI给我们的界面设计方案。现在我们把所有的信息要求AI整理成一个产品需求文档,也就是所谓的PRD文档。提示词是这样的:请把刚才已经确定的内容啊,整理成一个PRD文档,作为后续开发的依据。要保留目标和使用场景,刚才我们确定的整个页面的设计和结构,每一个模块的功能和用途,啊各个模块之间的关系。
以及我们刚才要求的啊,本地数据恢复和备份的要求,以及啊第一版可以暂时不做的功能。最后是验收的标准。那我们为什么需要这样一个PRD文档呢因为啊,随着跟AI对话的聊天长度越来越长,有很多信息可能会被遗漏。同时呢如果我们开一个新的对话,或者我们换了模型,或者我们换了智能体呢,这些刚才去所有需求的信息就丢失了。
PRD文档相当于是这样一个APP的施工说明图。不论我们以后对话越来越长,或者我们加了一个新的对话,或者是我们换了模型,或者是我们换了智能体等等那种情况发生,只要有这个引导在,那么整个AI的工作就不会跑偏。因为AI总可以以这个文档为依据,继续进行开发。那我们等一会之后啊,AI就把我们的产品需求文档PRD文档给我们做出来了。
我们一起看一下,其实它本身就是我们刚才讨论的一个总结。它定义了产品的目标,比方说这里说哈,本产品是一套只供用户本人使用的私有化的这样一个工作生活管理工具,把每天的工作生活各个方面放在一个本地的APP当中。然后呢它开始定义我们主要的使用场景啊、边界啊等等。第二点就是我们刚才定义的整个页面的结构,左侧导航栏,上侧的工具栏。
然后下面就开始说,导航栏有什么信息啊,然后每一页应该包含什么样的内容,各个模块各功能的用途等等。那大家可以简单的过一下,是不是跟咱之前讨论的一样。后面呢他也着重强调了我们的要求,就是本地文件必须放在本地,不能因为我们重启电脑或者是清空浏览器缓存就丢失了,我们之前的所有的记录和数据对吧。
那这里他也是要求了一下,并且也说了每天可以自动备份,以防数据的丢失。啊往下拉,它就开始规定了第一版必须要完成的功能,以及我们可以暂时不做的功能。哎比方说用户的登录注册、多用户的权限,这个就先不用做了对吧,因为毕竟这个APP是给我们自己用的,第一版不用这么复杂,自己用着舒服为主。
啊往下呢,第九个就是它定义了验收的标准,就是到什么为止才能算是我们把第一版做出来了做好了。这里对运行访问呢、数据的持久化、首页的和模块的一些联动、数据之间的连通、啊等等、啊各个这模块阶段能力啊,都做了详细的规定。只有满足这些要求才能算是做完。那这是我们的PRD文档,刚才说了有了它,我们以后就不会走偏开发的方向了。
好,现在我们定义了需求,了解了我们自己到底想要什么,并且把它沉淀到了这个PRD文档里面。下一步我们就可以开始开发了。开发之前呢,我们先让它帮我们根据我们的PRD产品需求文档列出一个开发计划。提示词非常简单,就是一句话:根据当前的PRD文档,列出一份详细可以执行的开发计划。
等一会啊,AI就把开发计划给我们了。如果你没有技术背景,你会发现你完全看不懂他给你的东西。这时候千万不要慌,因为这个开发计划不是给你看的,不是给人看的。刚才那个PRD文档产品需求文档,是给我们看的,我们要认真看有没有问题。因为这里啊,我们是产品经理,我们定义了我们想要怎么样的产品,所以PRD文档要认真看。
但是后面这个开发计划,是根据我们的需求文档给开发人员看的。其实开发人员在这里那是AI,所以你没有技术背景也完全没有关系。这里我们让AI列出来详细的开发计划,好让AI以后执行了之后有据可循,根据开发计划来详细的一步一步进行执行。这里还有一个要点,就是我们看这个开发文档,有很多朋友喜欢用特别好的模型、特别昂贵的模型来设计这个开发文档。
然后后面呢,用比较性价比高、相对便宜的模型进行开发。这样的话,在节约成本的基础上,最大程度保证开发的效果。那这也是一种思路这里呢,我们演示就用一个模型走到底了。下面我们进行开发,用的提示词是这样的,非常的简单:请根据开发计划开始开发,按照计划顺序啊,一步一步连续完成。
每完成一个阶段都要添加并且运行有效的测试。如果测试失败,就先定位再修复,然后才进入下一个阶段。然后我们告诉它持续执行,直到计划全部完成。中间不允许通过删除测试、跳过测试、降低标准让测试通过。就是你不能给我作弊。全部完成之后呢,哎运行所有的测试,保证一切都没有问题。
总结来说,我们这个提示词就告诉他三点:第一你现在可以开始开发了;第二点每次开发完一步,你都要加入对应的测试验收效果;第三点就是在完成之前不要停下来。现在我们耐心等待他完成我们的第一版APP。等一会之后呢,AI就帮我们完成了第一版APP的开发。这里他说他完成了全部的开发计划,那九个阶段都实现,并且通过了他家的测试,各个功能都做成了。
而且呢他帮我们啊创建了启动我们这个应用的文件,以及停止这个应用的文件。这里给大家说一下,你的模型可能在这里啊,直接给你个网站的URL也就是网址,没有这两个文件,这个也是可以的,你可以直接点击网址就能进入,看看APP第一版做的怎么样了。那这里呢,它给我们创建了这样一个启动文件,我们就可以使用它。
那这个启动文件其实就在我们这个项目的文件夹里对吧,它就叫做启动木子工作台。我们双击,就能打开这个脚本文件,这就是我们第一版的APP。现在呢作为使用者,我们就过一遍,看它所有的功能有没有按照我的要求进行完成,有哪些可以改进的地方,我们进行二次开发。首先我们点击一下页面,就可以发现啊,整个的页面它不够好看,没有什么设计感对吧。
我自己用,我希望它能够更好看一些,更有设计感一些。那这是我们第一个要记住的问题,这里呢我们记一下。然后我们看一下功能,这里呢我们现在在首页总览,它是对所有模块整个信息的一个提要。可以看到这里我们有个按钮添加今日事项,我们添加我们第一个事项,点击之后,我们会发现哎,我们到了今日计划这个页面。
本质上就是把我们的计划放到我们首页总览里面,让我们一眼能看到。我们现在添加第一个计划,写完计划之后,我们点击保存。今日计划这个页面里啊,我们能看到我们的计划就放在了这里。我们点击回到总览,哎可以发现计划确实也在这里了,而且呢进度上已经安排了,只是我们还没有开始,也没有完成。
好我们看啊,首页总览里面还有各个模块的摘要,但目前因为没有数据,所以看不出来呢。现在我们去各个模块里面去看一下,首先是自媒体。可以看到呢,从左到右是灵感策划、制作发布和已发布,这样一个循序渐进的过程呢,这个非常好。我加一个第一个记录,点击保存,看到我们第一个视频啊,就在灵感这里。
下面我的要求是可以进行拖拽,把它快进到不同位置呢,这里我们拖拽一下试试,看到确实也没有任何的问题。这里啊明显有一个可以改进的地方,就是我们已经发布的视频啊,本质上可以统计它的数据,播放量、点赞、收藏等等等等。那这里呢,就缺乏这样一个展示我们数据的这样一个图表,我希望后续能加上呢,这里我们就记一下。
现在回到首页的总览往下拉,可以看到我们其中的一个视频就被放到了这里。那这里想呈现的信息呢,根据大家的喜好也可以进行定制,这样在首页就能看到尽量多有效的信息了。那这里呢,我们就继续自媒体说完之后呢,我们下面看一下开发工作。这里我们新建我们的第一个项目,这里我们新建一个项目,就是我们自己做的这个专有的APP,进行保存。
可以看到这里就有我们当前的项目。我们呢可以给这个项目添加里程碑,就是什么时候要做到什么程度,我们的计划是怎样的。那这里呢就能看到我们下一个计划,就是在周三之前完成我们的第一版。再往下看到这里呢,我们可以把功能啊、需求啊、bug技术问题都放在这里。可是这里有一个明显的bug,就是我们无法添加功能和bug,没有任何添加的按钮。
那这里我们把这个bug记录下来,后面二次开发把这个bug给改上。以此类推啊,我们去每一个模块都走一下流程,看看有没有什么bug,同时呢有没有下一次我们要加的功能。比如咨询工作这里,我就发现哎,添加的客户没法删除,只能添加,这个要记录。比方说健身计划饮食计划,我希望它以日历的形式呈现,每天的健身计划和饮食计划,不是以这种形式呈现的。
这些都要记下来。同时呢,我还发现并没有一个地方能让我们手动的保存所有的数据,只有自动保存功能。所以这些都需要记下来,都记下来之后,我们就有了这样一个下一次需要继续进行开发的清单,让AI来改进解决这些问题。在让AI啊根据我们的清单进行二次开发之前,我们先做一件非常重要的事情,那就是保存当前的版本。
因为接下来啊,无论是修复问题调整功能,还是进行视觉升级,都有可能出现一种情况,就是AI改完之后,我发现还不如现在这个版本呢。或者为了修改一个问题啊,把当前正常的功能给破坏了。所以在继续修改之前,我们先给当前项目建立一个可以随时返回的存档点。那怎么保存版本呢,很简单我们用Git。
大家先不要害怕觉得麻烦,现在有了AI智能体,我们所有的Git操作都让AI完成就行。我们只需要理解它最基础的原理,以及知道什么时候应该保存版本即可。原理啊真的很简单很简单,现在我用最简单的语言说一下。每当我们开发一个新的功能,或者改一个bug,我们都会要求AI commit,也就是提交一下当前的修改。这会存档我们当前的源代码。
那么一旦下一次我们开发的过程中出了一些问题,我们就可以随时回到当前的这个commit,就是当前的这个提交,在继续。我们下一次又做了一个新的功能,或者是我们又修了一个新的bug,我们还可以继续的进行commit,把新的功能或者修的bug的代码啊,再次存档到新的提交当中。以此类推,我们一个人开发大概记住这些就差不多了,是不是很简单。
那在使用Git之前,我们首先要确认我们电脑里有没有装Git。当然这个活让AI来干,这里的提示词也非常简单,那么我直接问他哎,检查当前电脑是否已经安装了Git。如果没有安装,根据当前的系统使用安全正规的方式进行安装。这里呢它告诉我们,我们已经安装了Git在我们电脑里,所以我们无需再次安装了。
那这里呢,有些朋友啊,其实没有安装Git。这时候变成智能体呢,有的可以直接完成安装,有的呢可能问你要权限、输入密码,这时候就需要配合一下安装好了之后。接下来我们要初始化Git仓库,怎么理解呢,这个仓库你可以认为啊,从现在开始,git会记录这个项目代码变化。那仓库建立好之后,每次项目达到一个比方说你值得保留的状态,就可以让AI执行一次提交commit,存档我们现在的代码。
那如何初始化git仓库呢,也很简单,也就是一句话:请在当前项目中初始化本地git仓库。好初始化之后啊,现在我们就可以进行第一次存档了,做第一次commit提交。我们呀告诉AI,让它创建第一次git提交。好的等一会AI就完成了第一次提交,提交的信息就是我们增加了这个功能。
啊所谓的功能就是我们完成木子工作台的第一版。下面我们存档了当前代码之后,就可以根据我们之前列出的清单进行第二次开发,把我们遇到的问题都修掉,把我们想要的功能都补全。这6个问题里面啊,第一个问题属于可视化啊、美观的问题,而其他的5个问题啊,都是功能上的问题或者是改进。我们呢先从功能的改进开始,复制这5个问题。
提示词也非常的简单,就让他每次啊只解决一个问题,每完成一个问题添加对应的测试,然后呢都通过之后创建一次git提交,存档一次代码。完成之后呢就让我来验收。智能体完成所有的开发之后啊,我们去验收一下所有的问题有没有被解决。为了方便测试呢,我加入了一些数据。首先是自媒体哎,我们看到这里有发布后的数据统计,也非常的漂亮,符合要求。
有阅读量、平均互动率等等。向下可以看到我们整个可以拖动的模板也保留了。
开发工作这里,我们呢可以添加新的bug和技术问题,哎这个问题也修复了。咨询工作这里啊,我们可以试图去删除一个客户,哎可以看到。那健身计划、饮食计划可以看到,都用日历的形式来展现,也符合我的要求。游戏娱乐呢,这里还有漂亮的卡片。如果我们想要手动保存,现在还有一个按钮能够保存我们当前所有的数据,点击就保存了。所有的问题都被修复了,非常的好。
好,现在功能上的问题都解决了,功能上已经就绪了。下面我们解决界面太难看的问题。这里有很多不同的方法和skills,一个常见的做法就是你找到你喜欢的那个APP的设计风格,然后呢要么截图,要么呢跟AI对话,让它给你这个设计风格的提示词,然后给到你的编程智能体,让智能体把这个设计风格沿用到你自己的APP上。
比方说我个人特别喜欢macOS这个天气APP,我觉得这个毛玻璃的效果特别高级。所以呢我呢,就跟AI进行对话,我让它啊给我提示词,让我自己的应用也能有一个macOS天气类似的设计风格。那这里大家不必纠结啊,跟任何一个AI开启对话问就好。提示词是这样的,前面这些所有的对话都是跟AI对话得来的,他告诉我哎怎么能还原这种风格,只是我最后加了这样一句:这些开发仅仅是外观的改变,不要影响任何的功能。
这样我们之前开发解决的功能就不会受到影响。这是界面美化以后的效果,大家可以看到它确实遵从了我的要求,把我们的APP变成了苹果天气的那种毛玻璃风格。我不能说100%复刻啊,但是其实做的效果相当的不错对吧,而且保留了所有的功能。我们一起来看一下首页,然后呢每一个左边栏都有这种微互动的效果,哎所有的功能也都保留了。
我们看拖动它也做出了这种哎玻璃的半透明效果,非常的好。卡片也都重新根据新的风格进行设计了。其实啊我知道大家有很多不喜欢这种毛玻璃风格的别着急,我还给大家准备了另外两种风格。我们先看看首先啊就是同样一个风格,我们可以有深色模式和浅色模式来供我们选择。
除此之外呢,另外的两种风格分别是Notion的这种笔记风。我们先看一下,这个就比较简洁了,但是大部分人会觉得比较舒服,比较容易接受一些。尤其是你用惯了笔记软件之后啊,这就显得非常的自然。可以看到整个界面,非常的舒服和漂亮了。
同样的,它也有深色的风格可以选择了,大家根据自己的喜好来选就可以。我觉得深色的好像更好看一些。好,第三种风格,如果你想追求个性,第三种风格是这样,一个新粗野主义的风格。同样的,它有深色模式和浅色模式可以选择。
相对来说,它的色块会比较大一些,更有个性。同样呢交互的动画也非常的突出了,可以看一下啊,这个界面是非常的漂亮,卡片也重新做了。同样它也有深色的风格可以选择,大家根据自己的喜好来就可以。
为了方便大家都能有自己的专属APP,我把这个项目也开源了。大家呢可以把我的源代码直接拿过来进行改造或者直接使用。因为啊比方说如果你不健身,你可以把它变成打球啊、听音乐啊等等自己想要的这样一些模块。现在我们演示一下怎么拿到这些源代码,然后怎么一步一步改造成你自己想要的专属APP。
自己来到GitHub,我呢刚刚做了GitHub零基础系统教程。那这里我还是假定大家并没有看那个教程,而且没有GitHub和编程的基础了。这里呢可以简单的认为,所有的开源项目都会被放在GitHub上,自己可以去GitHub上下载任何的开源项目和资源,为自己所用而进行二次开发。
自己看到左上角,左边是我GitHub的名称,啊右边是这个项目的名称,也就是作者和项目名。这两个信息就可以在GitHub里面搜索并且找到这个项目,然后在这里啊进行搜索。这里大家不要忘记这个横杠,自己就能找到对应的项目点进去,就来到了项目的仓库。
那如果会用Git呢,就用Git直接拉取代码。不会用的话,最简单方式就是在右边这个Code点击,然后Download ZIP下载压缩包。这样的话就会下载整个所有的源代码。自己下载完压缩包之后啊,双击解压,然后这个项目文件夹自己去智能体里面打开这个文件夹,就跟咱们一开始打开空的文件夹一样。
首先需要先运行一下这个项目,这里提示词很简单,就是安装所需要的依赖,然后帮我运行这个项目。等一会之后啊,依赖就安装完了,现在就可以自己去运行这个APP了。项目文件夹里啊,可以看到有启动木子工作台.command,这是给macOS用户用的,双击就可以启动。
同样呢.bat,哎这个是给Windows用户用的。这里呢我们双击其中一个,可以看到我们之前做的APP啊就展现出来了。假设现在啊,你还想添加一个读书这样一个模块,现在呢我这里面并没有。那这时候我们就可以告诉AI,让AI来帮我们进行添加。
提示词很简单,就是帮我添加这样一个阅读模块,能够添加读过的书啊、进程的统计以及笔记等功能。等一会AI就把我们的阅读模块加上了。我们一起看一下,哎上面是阅读的统计数据,下面是不同的书,然后我们还可以写笔记来记录下阅读的感受。
然后这边呢还有进一步的统计,以及所有的阅读笔记都在这里,非常的好。按照我们的要求添加了。那大家呢可以按照同样的方法,你想改什么就告诉AI要改什么,去掉一些模块,增加一些模块,修改一些模块。总之按照你的工作,按照你的生活,按照你的习惯来定制这个APP就可以。
视频跟到这里啊,不论你选择是一步一步自己跟着做,还是拿着开源项目进行改,你都有了自己专属的APP。我也鼓励大家多用AI进行编程来做出软件,满足自己日常工作和生活的需求,来提高效率。要是视频看到这里你还没有关注我,是不是有些过分了?我是木子,我们下期再见。