零代码一个晚上用AI制作iOS APP的全流程

Vibe Coding的概念已经火了一段时间，因为之前在学校课程里尝试过用生成式人工智能做了一个聊天机器人，过程很顺利，做完很有成就感，所以觉得自己其实可以尝试一下用人工智能（AI）手搓一个APP。

第一件事是浏览了一下小红书和YouTube的教程，发现大部分的教程要么是做的东西根本不是一个完整的APP，要么流程解释得不够清楚，对初学者来说还是比较困难，所以最终选择关掉所有浏览器和教程，边想边行动。

我做整个事情的初衷简单来说就是：

1、体验一下各种AI产品以及所谓的“Vibe Coding”；

2、感受一下iOS App的开发链条，包括写PRD（产品需求文档）、画UI（User Interface 用户界面）、理解前中后端具体指什么等等。（还有一个原因就是我从本科毕业开始就不断有人说我适合做产品经理PM，但本身没有非常直接的经验，所以想要主动制作一个产品试一下，刚好自己也有灵感在）；

3、想挑战一下在不擅长的领域把想法落地的难度。

先说结论：

• 整个过程可以发现原型设计阶段，产品层面只需要做一件事，确定一份可执行的“产品需求文档”；技术层面需要几个能力：（1）会使用AI；（2）会部署环境和版本管理；（3）有足够的耐心debug。

• Prototyping熟能生巧，但深入某一项的能力还得慢慢积累，边做边学的模式很好玩，很适合我，推荐所有三分钟热度，但想法多、执行能力强的人尝试。

• 人真的需要一些有即时反馈的事情去找到生活新的趣味，像是钩针、像是写作、像是Vibe Coding。

整个过程原型设计可以简单分成以下几个阶段：

第一、电脑环境设置：下载并设置好软件硬件。

第二、前期筹备：通过跟生成式人工智能沟通，确定“产品需求文档”。（也可以简化掉该步骤）

第三、利用Cursor和xcode制作APP：根据“产品需求文档”开始工作，哪里不会问哪里就好。

第四、画UI：根据上个步骤做出来的原型对应功能进行调整。（可简化）

看起来很简单的三个步骤就可以制作一个非常基本的APP了，但过程其实会各有各的困难。

接下来深入一下我搭建一个基本的iOS APP的过程吧。

第一、电脑环境设置：

一台Macbook电脑；在AppStore下载好xcode；官网下载Cursor和Git；设置好自己的GitHub（如果后续想要分享、展示或合作，可以设置一下GitHub。）

这部分的话我就下载了xcode，余下的各个工具在其它的项目里有使用过。个人感觉环境配置会是新手一大难关，但请相信，迈过这个坎真的成功一大半！

第二、前期筹备：

这个阶段就是要和Gen AI沟通，帮助自己把对APP的构想呈现在纸面上，以便后续让AI通过这部分的文档去写相关的代码。这里我主要用的是ChatGPT4o和Claude Sonnet 4。

这部分是我花费时间最久的部分，比后面制作原型的时间还要久。因为我是有一个小的想法想要落地的，但是非常不成熟，所以就想在和生成式AI对话的过程中去完善整个想法，并且产出一份PRD，用在第三阶段。

我先是打开了三个北美主流的AI产品：ChatGPT, Claude和Gemini开展对话。其中ChatGPT是付费产品，Claude和Gemini是初次使用。

开了三个界面同时对话，去对比内容

最后使用下来，由于ChatGPT存储了很多过往的对话记录，基本上能马上理解我的需求，缺点是总是会想要提前做一些我还没有要求做的工作，打乱我的思路。Gemini和ChatGPT类似，会做一些我还没有要求做的工作。整个过程里，我最满意的是Claude，会简明扼要地回答我的问题，在不清楚我的需求时，会通过clarifying questions先确定好需求，再做后面的工作。

同时，为了保证对话的连续性，碎片的问题（比如说PRD的标准格式是什么？Figma是什么？）我会在另一个ChatGPT对话窗口进行。有了几个轮次的对话之后，我就舍弃Gemini，只使用Claude + ChatGPT去制作APP了——Claude跟进主流程，ChatGPT解决所有过程中产生的碎片化疑问。这里我放一些对话记录：

我发给三个生成式AI产品的第一个Prompt：

算是需求检验的阶段，想知道iOS自带的APP和自动化设置+Widget是否可以实现我的需求，最后聊完确定可以制作一个APP填补一些功能无法实现的空白

基于上面的那段Prompt，三个Gen AI产品给我的回复如下

下图是我当时针对三个Gen AI反馈记录的使用感受

值得注意的是，这些AI都是会带来一些“噪音”的。比如在我问关于制作APP的流程时，AI会跟我说很多其实没有必要在MVP搭建阶段去做的事情，比如说UI的处理，画原型等等。因为我清楚我想要的做事流程和有哪些问题，所以我通常会直奔问题和目标，尽量不要在那些“噪音”中浪费时间。我觉得这些噪音也是会造成很多人执行层面卡住的很大原因。

第二阶段前期筹备的目标是生成一份满意的“产品需求文档”。通过很多轮次的对话Claude基本上理解了我对于这个APP的所有构想，接着为我生成了一份基本的PRD文档。我会人工浏览文档，一边进行一些调整或者细化，完成之后这个阶段也就基本结束。

三个Gen AI给我的产品需求第一版文档

第三、APP搭建：

在上一个阶段，我们有了一份人工校对后的“产品需求文档”，根据这个文档，Claude给了我后续可以跟进的步骤，以及每个步骤的操作要点，不理解的地方我就会去问ChatGPT：

• Step 1: Project Setup：这部分在xcode里设置好。不打算发布产品的话不需要开通开发者账户！不充钱也是可以在电脑上看到APP搭建出来的模型的！

• Step 2: Set Up Development Environment with Cursor：这部分在Cursor里设置好。没有使用过Cursor的可以随便找一个5-10分钟的教程大概看一下。Cursor我也没有花钱，免费的功能够用了。Git是用于版本管理的，也是在这个步骤进行设置。

• Step 3: Core Data Setup：这部分在xcode里设置，是APP会设置的数据类型和数据管理。xcode的设置界面功能不全，可以结合Cursor的Core Data页面的代码对着看一下。代码逻辑蛮好理解的，可以通过AI学习下认法。不想理解的话，直接让Cursor帮助调整。

• Step 4: Main App UI：先把“产品需求文档”丢进Claude，生成一个Cursor的Prompt，因为Claude有所有APP的聊天记录，所以Claude生成的Prompt会清楚很多。（相当于让两个AI自己交流😂）

• Step 5: Widget Development：和步骤4同理，因为Widget Development是我想做的APP里一个比较重要的功能，所以我会有这个步骤，如果你想做的APP不需要这个功能的话应该就没有这个步骤。

步骤4和5开始之后，会进入一个debugging的循环里，大概的流程就是把报错提示发给AI，然后根据推荐的行动流程去操作就好。

看起来很复杂的报错信息

一个有基本功能的APP就做好啦

第四、额外步骤——画UI：

因为发现AI给我的东西都是最基础的美工和设置，有一些功能跟脑子里想的不太一样，所以决定徒手画一下UI。

先尝试了Figma（一个画UI的网站），但一下子掌握Figma的功能太费时间了，于是尝试了AI画UI，用的是Unizard，生成了3个页面就说要付费了，于是止步。打开Excalidraw（一个超级好用的白板工具），直接画草图。

Unizard根据我的指示生成的界面，

生成后我手动进行了调整

Excalidraw画的草图，这个版本是淘汰后的Widget UI

接下来就是通过图转Prompt转代码了，流程和第三阶段的步骤4、5类似。

最后的最后，简单说一下做了个什么样的APP:

因为有一些猫咪照顾之类的细碎小事都是不用固定时间但又隔几天就要去做的事情，比如吃罐头/刷牙/洁牙零食等等，都是我觉得不需要固定时间点，但我又不希望自己忙碌的时候完全忘了这件事。死板地根据规划去生活经常会觉得很累，但完全不规划地生活又心有戚戚，这种规划了但没有完全规划的方式就很适合自己，基于这个出发点，开始制作了这么一个APP。

总结来看，APP主要实现三个功能：

（1）屏幕上可以直接打勾标记完成

（2）屏幕上可以直接看到上一次打卡时间

（3）App内可以通过Calendar看到往期记录和频率。

一个实现了基本功能、调整了简单UI的APP

后面细想，发现自己生活很多其它场景也符合，比如说兴趣提醒，像是打网球、跳舞、飞盘都是近期比较常玩的运动项目，但我又不希望把它们当作一件非做不可的事情排列在提醒事项里面，又想心血来潮的时候看看“玩的频率”和“上次玩的时间”，这个App呢就可以很好地满足这个需求。

文章来自于微信公众号“peiiia”，作者是“二十二是作者”。