AI零代码开发实战1：从0到1写出并上架一个完整App（预告篇）

AI零代码开发实战2：从0到1写出并上架一个完整App（PRD&开发架构篇）

觉得心里没底还是想储备一些代码相关知识的朋友，看这两个就可以了，我理解编程是完全基于几个有效理念（循环，复用，解耦）拓展的语言，而且因为有效理念太有效了因此打的补丁不是特别多，反而比英文本身有序（。理解了基本概念后学其他编程语言就是多学几个概念词：

1. 基础入门：CS50 - 程序就是工厂

https://www.bilibili.com/video/BV1Ls6BYkEGk

2. 概念理解：C++ - cherno，天才

https://www.bilibili.com/video/BV1uy4y167h2

但其实后面VibeCoding你不会自己真的去看代码的，直接测试结果就可以了

界面如下，[1]是对话框，[2]是代码界面且可以直接看到生成的效果，Build功能真的是伟大，把功能想好就能直接看到实现，对比对着一堆代码界面改看终端不断报错的开发体验来说好太多了，是真的会让人写功能写上瘾...

[3]是保存，一般会自动保存，处理重大更新后可以手动确认一下 

[4]是下载，等我们在这个界面把所有代码都调试差不多了需要从这里下载到本地再去vscode打开，或者也可以直接用[5]上传到Github，vscode再从Github上下载到本地就可以，非常建议用Github的方法，因为可以实现版本管理，出问题了你可以找到上一个还没被修改的版本回滚

1. 前言提示

⚠️可能由于谷歌内置了prompt的原因，[2] Build 不一定会遵循 [1] Playground 设计好的技术栈。

prompt：

好的，现在我们前后端分开来开发，首先，结合我们前面讨论的内容，前端后端中间需要相互对接的关键逻辑有哪些？前端怎么写mock数据？前端分离出来的开发指南是什么？请进行详细的前端开发指南撰写，帮助前端那边可以在和后端保持同步的同时，深入快速地理解我们的应用愿景和开发目标

2. 开始 Prompt (Build阶段)

如果是重前端的应用，就可以直接进入开发了，Prompt分阶段如下：

2.1 导入PRD

把上一篇的 2.4 生成最终的开发方案和PRD 和 2.5 输出启动开发的内容 丢给 Build。

2.2 要求AI持续开发

现在，请返回完整的，全部展开的代码文件根据当前状态更新开发内容的状态

2.3 持续迭代

中间AI可能自己决定细分阶段生成了或者留很多todo和假设，所以得时不时得提醒一下。

prompt:

你做得很好，作为全权负责此app的资深开发，请基于你对app的了解和信仰，遵循你已经定好的开发节奏继续开发，你是要求很高的经验丰富的独立开发，请遵循最佳开发实践，写出优雅，维护性高的代码

prompt:

好的，你做得很好，不过我注意到，在前面的开发中，有部分todo或者简化逻辑没有得到完善，作为完全了解这个app的资深独立开发，请继续规划我们接下来的开发计划

prompt:

好的，请按照计划修改代码并重启应用查看效果

prompt:

你做得很好，请应用开发

2.4 进行当前已有功能的优化

prompt:

好的，作为高标准，严要求，对项目全权负责的资深独立开发，请你审查目前我们创建的所有的最新的代码文件，进行如下思考

1. 我们是期望用户如何使用我们的app的？现在的功能有哪些，是否满足了用户使用app的需求？

2. 用户使用我们app的操作是否合理顺畅？

3. 当用户使用我们的app时，app内部的数据流的流通是否顺畅？不同代码文件中的各种导入是否正常？

4. 组件是否满足了数据流的需求？

5. 我们需要满足web，ios，华为鸿蒙的上架使用需求，这个代码是否还需要补充什么内容？

2.5 进行新的功能开发补充

大概这么聊的，也很随意。这个时候你和AI的交互已经足够多了，你们会对于某个页面或者某个组件有固定的称呼，这个时候明确修改内容，使用结构化的prompt效果会更好，类似这种：

prompt:

你做得很好，现在我们进入个人页的优化

开发目标： collected memorys直接放在个人页会导致这一页变得很长，请只在个人页面放单词本的入口，这样用户可以点击跳转到单独的单词本页面，单词本页面需要支持根据不同语言分类

请围绕这个目标出发，再次进行补充优化开发，开发之前，请先思考：

1. 你想加什么内容，为什么要加这个内容

2. 你想加的内容，和已有的内容的联系是什么，从代码层面和UI布局层面跳转动效都要考虑到

3. 你要加的内容，如何开发才能不影响已有的内容，从代码层面和UI布局层面跳转动效都要考虑到

2.6 反复迭代

反复使用 2.4 和 2.5 进行迭代并体验使用，直到你满意。

prompt:

好的，现在请回顾我们的开发目标，包括用户旅程（用户会如何使用我们的app），app顺畅的数据流，各组件之间的依赖关系，全部整理清楚然后逐行阅读我们当前的所有代码，作为资深的开发工程师，你觉得还有哪里我们没有考虑到的？

2.7 阶段开发总结（非常重要）

开发到一个里程碑你觉得差不多了就要在当前对话页面做好总结并保存，新开一个页面AI不一定能够总结对，所以开发的时候要注意上下文管理不要一次性耗尽当前对话框的最大对话程度。

prompt:

你做得很好，现在，请作为完全了解这个app的资深开发，请根据我们最新的代码内容，输出细致的代码架构，这个架构要全部展开，列出所有关键文档以及文档的主要目标，你输出的内容应该严格按照下面这个格式：

目录结构与模块拆分 (Directory Structure)

/src  /app                  # Next.js App Router (Pages & Layouts)   /(auth)             # Route Group: Login, Register

prompt:

你做得很好，现在，请作为完全了解这个app的资深开发，请根据我们最新的代码内容，输出细致的用户旅程数据流，请务必详细，不遗漏任何一个细节和边界情况

2.8 真实数据流

强调APP要使用真实数据流，避免上线之后很多坑没发现。

prompt:

你做得很好，现在，请作为完全了解这个app的资深开发，请根据我们最新的代码内容，移除掉所有的mock逻辑，补充原本mock之前需要连接起来的数据流和组件设置，让这个应用真正地跑起来，如果有部分内容需要我进行操作的，请详细告知

2.9 UI/UX 的最终确定设计

请注意，这一步一定要等到你觉得功能已经完全符合期待了再来处理，否则返工会非常耗费精力。

2.9.1 风格确定

我们回到 [1] Playground 新开一个对话。这里的设计风格确定有很多种方法，这里我只分享我自己实践了的一种。找一张你喜欢的图片，喜欢配色，喜欢设计风格你觉得适配你的APP Vibe就可以，然后去 [1] 里新开一个对话，导入这张图片，然后输入：

prompt:

请参考这几张图，详细描述这张图片或者UI界面给你的感受

prompt:

请以这个格式整理输出你刚刚感受到的UI/UX风格，方便我们的同事理解并开发

xxx输入下方的格式

这个格式同时也是AI输出的示例，确定AI可以正确理解且你也喜欢这种风格的话，以后也可以复用

2. 布局：Z 轴分层撑出“空气感”

• 底层 (Background)： 暖调画布，不抢戏。不要用纯白！用 Warm Rice (#FDFBF7) 打底，让眼睛放松。暗黑模式用 Midnight Blue (#0F172A)。

• 中层 (Focus Deck)： 聚光灯卡片。屏幕中央永远只有一张主卡片。后面的卡片只露出 10px 的边缘，配合高斯模糊，营造景深。

• 顶层 (Interaction)： 液态入口。底部不是 Tab Bar，是一个悬浮的 Liquid Button (液态球)。它不是贴在底部的，是漂浮在内容之上的。

3. 颜色：低饱和“多巴胺配方”

• Action (紫)：#8B5CF6 (电光紫 - 主按钮)

• Reward (绿)：#10B981 (蜜瓜绿 - 完成任务)

• Urgent (橙)：#FB923C (珊瑚橙 - 替代红色，看着像维他命 C)

• 文字色：#334155 (Slate-700)，不要用纯黑。

4. 圆角：大弧度撑出“Q 弹感”

• 卡片圆角： rounded-3xl (24px)。

• 主按钮： rounded-full。

5. 阴影：Claymorphism (软泥拟态)

• 双层阴影，一层深色 AO，一层白色高光。

6. 图标与动效：Toy-First (玩具优先)

• 拒绝线性图标，使用 Filled 填充图标或 3D Emoji。

• 动效：按下 scale: 0.95，完成必须有 Confetti 炸开。

2.9.2 应用设计

复制上一步 2.9.1 给出的回复，回到 [2] Build 粘贴到这些 prompt 后面。

prompt:

你是一位资深的UI/UX设计师，并且有丰富的前端经验，你对于现代化的设计情有独钟，你设计的UI/UX都顺滑的用户体验，流畅过渡，遵循令人享受的视觉美学现在你要对这个app进行全面的前端设计优化，优化风格如下：(此处粘贴风格文档)

prompt:

现在我们进入个人页的优化，请对 个人页 的页面进行一次全面的优化，调整令人舒适的间距，统一颜色相关风格，请作为资深设计进行舒适的优化，契合我们app的风格

2.10 进行边界case的提示处理

prompt:

你是一位资深的开发工程师，非常擅长vite改web/ios/andr的这种易于迁移管理的应用，并且有丰富的独立开发经验，你在并发量极多，日活上五十万的大型科技工作工作了10年，对于各种边界case，日志管理都有非常丰富的经验

现在你要对这个app进行全面的后端技术优化，现在请你结合自己丰富的开发经验，列出所有边界case的情况，结合我们的这个app，进行全面的，完整的各种边界case应用编程，包括但不限于注册阶段，使用阶段，服务失败阶段以及其他然后请优雅完整地实现你对各种边界case的应对代码开发请注意，开发不能导致任何前端ui/ux和用户使用逻辑的改变损害或者断层

2.11 进行日志系统的开发

这一步非常重要，直接决定了后续我们开发真的可以跑起来的完整app的能力，后续的Debug和功能新增修改也强依赖2.11日志系统和 2.17开发总结。

prompt:

你做得很好，现在请作为了解整个app的资深开发，细致全面地设计整体的日志体系，日志设计要详细精确，遵循剃刀原理和最佳实践，全面覆盖app里的各种组件反应间隙和传递逻辑，确保整体项目的可监控能力请注意，开发不能导致任何前端ui/ux和用户使用逻辑的改变损害或者断层

2.12 隐私政策弹窗

后续APP上架需要我们的APP有隐私政策弹窗，所有平台都需要，具体的链接和内容可以后面改，结构要提前开发好，这个同样可以直接复制给所有app用

请作为资深开发，正式进行精确的开发

文案模板：欢迎使用[App名称]请您在开始使用前，仔细阅读并同意 《用户协议》 和 《隐私政策》。我们将严格保护您的个人信息安全，您的数据仅存储于本地。[不同意并退出] [同意并继续]

交互要求：

• 《用户协议》和《隐私政策》这几个字必须是蓝色可点击的。

• 点击后，跳转去打开你刚才生成的那个腾讯文档链接。

• 点击“不同意”，必须退出 App。

• 点击“同意”，弹窗消失，进入 App 首页，且以后不再弹出。

App 内的常驻入口：位置：通常放在 “我的” > “设置” 或者 “关于我们” 页面。

• 一行写：隐私政策 (可点击跳转链接)

• 一行写：用户权益说明 (可点击跳转链接)

2.13 全球语言本土化适配

（如果你要开发全球上架APP可选）

prompt:

你做得非常好，现在我们的app是面向很多国家和地区的，请完善不同语言版本下的app语言本地化，并根据用户的系统来自动进行语言版本的适配，请围绕这个运营目标出发，再次进行补充优化开发语言分别为：xxxx

2.14 设计增长飞轮和APP盈利途径

prompt:

你作为资深独立开发，非常关注APP的盈亏平衡和可持续运营，之前花费很大精力学习和实践了数据分析师，财务分析师和用户增长黑客的技能，你对于数值平衡和 增长飞轮方面非常敏感，现在你希望给这个app开发付费模块

请注意，付费模块需要能够在ios应用市场，web平台，华为鸿蒙进行付费开发，中国和中国之外的地区都需要兼顾，请从这个目标出发思考技术栈

这一步给出答案之后去Chatgpt再问一遍，自己再算一遍ROI，返回给[2]让其进行审查。

具体怎么算ROI不赘述了就是成本支出和收益平衡的那些逻辑。

这里我提一下一般的APP盈利方面的几个tips (主要是IOS经验，具体平台操作下篇再讲)：

APP怎么赚钱：

1. APP付费： 分为下载付费和应用内付费（订阅和可消耗积分付费）。

2. 广告激励付费： 国外可以接入google Admob，国内有广点通。

APP怎么收钱：

1. 订阅付费： 在IOS可以直接接入苹果的支付能力，苹果抽成30%（申请small business project可降到15%）。安卓我还没了解过。

2. 可消耗积分付费： 可以接入 revenuecat，对于个人开发者免费额度已经足够。

3. web端：我还没跑通，不过了解下来 国外用stripe，港卡开或者花点钱注册美国公司会给一个stripe账号，前者有被风控的风险，建议后者；国内个人开发者可以用支付宝的小微商家当面付，如果你有公司或者个体经营证可以直接接入企业版支付宝微信。

2.15 进行登录逻辑的梳理

prompt:

现在我们梳理一下注册登录的流程，用户的注册登录可以怎么继续优化丰富，用户怎么设置密码，怎么修改密码，用户登录的时候是否可以切换密码登录和验证码登录以及别的登录逻辑，这些是否需要调用苹果的逻辑，请全面理解用户行为，app顺畅的数据流，各组件之间的依赖关系，全部整理清楚。然后逐行阅读我们当前的所有代码，作为资深的开发工程师，你觉得还有哪里我们没有考虑到的？

prompt:

你做得很棒，思考的很全面，现在再次请回顾我们的账户管理开发目标，包括用户行为，app顺畅的数据流，各组件之间的依赖关系，全部整理清楚。然后逐行阅读我们当前的所有代码，作为资深的开发工程师，你觉得还有哪里我们没有考虑到的？

2.16 进行总体APP的优化 & 预设上架

这一步要反复对话，要确定你前面的所有内容真的都已经完全处理好了符合你的期望了。

prompt:

你是有十年独立开发经验的开发，现在再次请回顾我们的应用开发目标，包括用户行为，app顺畅的数据流，各组件之间的依赖关系，全部整理清楚然后逐行阅读我们当前的所有代码，作为资深的开发工程师，你觉得还有哪里我们没有考虑到的？

再次确认mock逻辑已经移除：

prompt:

你做得很好，现在，请作为完全了解这个app的资深开发，请根据我们最新的代码内容，移除掉所有的mock逻辑，补充原本mock之前需要连接起来的数据流和组件设置，让这个应用真正地跑起来，如果有部分内容需要我进行操作的，请详细告知

引导AI进行全面的思考并给出 supabase 的数据库SQL语句，edge function设计，并和我们最开始的数据schema设计进行对比确认没问题：

prompt:

好的，你做得很好，现在我们需要能够让app立刻可以跑起来，请问我们需要怎么做？

提前预设一个上架到ios的情景，让AI继续把相关的开发补充完整：

prompt:

好的，现在我们正式进入ios app应用上架的流程，首先，我们需要做什么本地的准备？先下载到vscode吗？代码方面环境变量列表需要哪些，退出app的时候是不是要调用苹果那边的能力里完全退出app，根据系统调整黑暗模式是不是也需要调用苹果那边的能力，其他方面需要处理和注册的内容是什么，supabase要怎么处理，如何设置Supabase Edge Functions 转发 AI 请求让前端不进行暴露apikey，登录方面怎么处理，付费方面我们要怎么对接，邀请码方面要怎么对接，广告激励需要如何正确对接，阅读激励需要如何展示和对接

2.17 最终的阶段性总结（非常重要，请保存更新为新的指导文档）

prompt:

你做得很好，现在，请作为完全了解这个app的资深开发，请根据我们最新的代码内容，输出细致的代码架构，这个架构要全部展开，列出所有关键文档以及文档的主要目标，你输出的内容应该严格按照下面这个格式

目录结构与模块拆分 (Directory Structure)

code

Text

/src

  /app                  

# Next.js App Router (Pages & Layouts)

   /(auth)             

prompt:

你做得很好，现在，请作为完全了解这个app的资深开发，请根据我们最新的代码内容，输出细致的用户旅程数据流，请务必详细，不遗漏任何一个细节和边界情况

3. 其他使用 Tips：

• 关于上下文长度管理：

在[1] Playground里，界面上就会显示当前对话窗口的Token数量，虽然官方文档支持100w上下文token，但实际上到50w左右就会直接报错限制对话了，到20w左右AI的对话质量就会开始下滑。

所以开发阶段的划分非常重要，如果实在是划分不了更细的里程碑导致快到临界点了，可以把前面不重要的内容删除，主要有这几类可以删：

1. AI的思考过程

2. 你的对话

3. 反复修改的内容，只需要留下最终确定的代码版本

这么改可以续命一段时间，但只能作为备用。

在[2] Build里没有显示当前对话窗口Token的计数，所以只要稍微感觉到AI的修改质量不高了，就得立刻让其总结当前任务结构和任务完成情况。

还有程序员大佬会直接维护一个 .md 文档让AI每次修改都去阅读和写入更新，这是一种工程化的方法，但是我没有实践过，这个思路供参考。

• 觉得AI状态下滑最快的方法是保存好关键上下文信息重开一个窗口。

  这种重复的使用体验其实也说明这里产品化可以做点东西，当前的记忆机制剪切还不够激进...反正我使用下来把总结好的代码结构给AI，prompt提示先思考哪些代码相关再阅读，AI的判断基本不会出现太大失误，那是不是说明有些特定场景下直接挤压上下文总结记忆或者根本不计入无关记忆，就可以无限续杯（。

• 再次强调一下这些prompt只是能够让我实践的时候无负担地快速跑通，优化空间很大，复用的话可以优化一下得到一些质量提升，优化思路见上篇

第四章我们会回到 [1] Playground 让我们的APP成为一个真正可用的企业级APP，并进行模拟机和实机测试让APP在手机里跑起来。

这一步和下一步是一个很折磨人的过程，需要大量的边界测试和反复修改，好消息是，我能完成那你肯定也能完成。

本阶段的对话主要在[2]Build里没法保存，而且内容迭代了非常多次，有价值的Prompt就是正文里这些了， 优化思路见上篇，如果有实践的朋友优化效果很好的话也希望可以分享出来

感兴趣的朋友可以点击关注合集，持续更新中。

一些题外话：刚刚看了Skills的内容，发现其实现在MCP,工作流,Skills都是在把人的重复场景消灭（比如重申AI人设，重申代码结构上下文，重申目标），并且最小化人的决策场景，让生成一个APP的流程无限趋近于一键部署。

对于这个目标个人尊重认可，这其实也是程序员的一贯思维，重复的东西需要全面消灭。但是对于之前没有代码经验的人，建议还是搞清楚自己的创作风格甚至是个人特质来选择工具，你也许并不需要一个最新的技术来完成你的想法，而是要用最适合你的。

比如你是一个控制狂，我建议你甚至可以直接用对话框chatbot，自己看完所有AI的想法，自己亲手在vscode里把代码结构一个文件一个文件地创建好。

如果你是黏菌型的人，擅长直接堆量找到近似最佳路径，你也不在乎代码是否优雅，“代码和人有一个能跑就行”，用户的投诉你有信心可以通过人的沟通来搞定，那么当然也可以学习最新最快最省力的产品，7*24去产出你的产品矩阵，快速吃完末日前最终的这波狂欢红利。

等这波红利被抹平之后，我们即将迎来一个每个人都在（被迫）探索边界的时代。