夜雨聆风
如何通过和 AI 对话,一周肝出一款 App (一)
谁说不懂代码就不能做 App？
十年前自学 Swift 失败后，我本以为和“开发者”三个字基本无缘了。但就在前段时间，我和另一位朋友，仅靠着跟 AI 的对话，竟然把一款完成度极高的 iOS 应用—“神马妙句”直接肝上了 App Store。没有一行代码是我们手写的，但我们却拥有了对每一个像素的掌控感。
很多人问：零基础的人，到底是怎么指挥 AI 跑完立项、PRD、UI 设计到打包上架全流程的？
这不仅是一份项目实战纪实，更是一份属于普通人的“开发自由”宣言。如果你也曾有过想做 App 的冲动却被代码门槛劝退，那么这篇从 0 到 1 的“硬核拆解”，或许能让你看到另一种可能。
先给我们的 App 推广一波，**“神马妙句”**。大家扫码可以下载
它的功能其实很纯粹：通过选定场景和关键词，让 AI 生成对应的回答内容。解决大家在春节期间面对亲戚朋友不知道该如何回复的痛点。
而且在很多拜年场景下，枯燥的文字往往表达不出完整的祝福。所以我们的精华功能是，能把生成的拜年话转化成一张效果精美的图片，图文并茂，表达出的心意自然更重一些。
来自 AI 生成的拜年图
没错，这个项目最特殊的地方在于：“神马妙句”不仅是生成 AI 内容的工具，它本身也是通过 AI 生成的。
因为内容比较多，我们计划分成两部分来介绍。今天这篇是第一部分《如何利用 AI 进行选题、产品方案设计、UI 设计，以及前端部分代码的开发》。关于后端服务、如何利用 AI 进行“导演式”的文案和图片生成，我们会放在下一章。
打通“文案 -> UI -> 代码”的闭环：
年初研究 Gemini 的时候，我无意中发现了两个非常厉害的功能，这直接构成了我们动手的前提：
-
文案到代码的闭环：我发现给 Gemini 一个功能，可以直接要求它按照 HTML+CSS 的方式，生成一个带交互的动态网站 Demo。这太惊艳了，虽然只是 Demo，但甚至能做出页面跳转和输入框的效果，基本实现了从想法到原型的秒速跨越。
-
HTML 到 UI 的闭环：这个 HTML 还可以直接导入 Figma，生成一套现成的 UI 框架
看到这里我们就坐不住了：产品 Demo、UI 框架、前端代码全都有了戏，那我们是不是也可以做一个完整的产品出来？
一段话就直接生成的 Demo
从反复对话中找灵感：
说干就干。我们想找一个简单的、但能尽可能覆盖更多基础技术练手的项目。刚好赶上春节，大家都有拜年和社交的需求，于是通过和 AI 反复对话、碰撞，我们确定了：做一个“通过固定场景让 AI生成文字，再通过文字让 AI 生成图片”的模式。
加上春节的限定场景，这简直是一个完美的练手项目。名字也是 AI 取的，叫“神马妙句”（因为正好是马年），我们觉得这个名字兼具了趣味和调性，非常抽象，非常不错。
确定了名字和功能，接下来就是产品经理的老本行——写 PRD。理论上说，这种小项目搞个脑图就够了，但为了验证整个流程的闭环，我还是让 AI 按照 PRD 格式输出了一份完整的文档。结果挺意外的，AI 写的 PRD 竟然比我们这些偶尔想“偷懒”的人写得好多了：视觉要求、功能逻辑、甚至内置文案全部干进去了（当然，文案部分我们最后还是人工把关修改了一波）。
AI 写的 PRD
Tip：这里分享一个小技巧，大家在用 AI 处理复杂任务时，记得先给它立人设。就像你们看到的这篇文章，其实最后也是交给了一个“复盘撰稿人”角色的 AI 进行了润色，毕竟我的文笔没那么好。
UI 还是用的最“土”的办法：
UI 其实是这个过程中最难标准化的环节。我试过国内外很多 AI 设计 UI 的工具，发现都有通病：要付费，且免费部分，在尝试之后，效果达都不到预期。 可能是因为我对 UI 的表达不够准确。
最后我用了最“土”的办法：既然 PRD 里已经写好了视觉风格，我就直接把 PRD 丢给 Gemini，让它用 HTML+CSS 写了一个 Demo。我直接沿用了这个 Demo 的 UI 布局方案。
原始 UI—Gemini 写的 HTML 转化的 UI 效果
不过说实话，刚出来的 UI 效果并不理想，风格不统一，icon 很多也是系统自带的。在上线前，我们又利用 Gemini 进行了一轮系统化的视觉风格和 icon 统一，这部分细节会在第二章重点分享。
边学边做，从 Demo 到成品：
有了产品和 UI，剩下的代码反而是最简单的。因为代码逻辑性强、规则明确，AI 处理起来结果非常稳定。这次我选择“边学边做”。（其实我刚毕业那会儿 Swift 刚出来，我自学过一点，但还没达到独立完成项目能力）
我要求 AI “一个文件、一段代码、一个函数”地指导我。边输出边解释，每句都要标注含义（虽然这个要求它对话两次就忘了）。好在我能看懂一些基础，影响不大。因为我提前把整份 PRD 喂给了它，它能俯瞰整个项目，把功能拆解成小模块给我讲解。最后，竟然真的跑通了一个可以直接 run 起来的项目代码。
但是，跑起来的代码和能交付的成品之间，还隔着一条巨大的鸿沟。Xcode 的预览功能虽然好用，但每个页面都需要微调。起初我又是截图给 Gemini，又是贴代码文件，告诉它我要改哪里。他给回我新代码，我再粘贴进去。但这里有个巨大的 Bug：Gemini（尤其是免费版）的上下文额度少得可怜，它记不住我的全部项目代码，改着改着就乱了。
后来我变懒了，换成了 Trae（字节的一个 AI IDE）。Trae 最大的优势是免费且中文界面友好。它可以完整读取整个项目的全部代码，了解上下文。我只需要在里面和它对话，它就能根据全局逻辑进行修改，轻松了太多。（据开发朋友说，目前最好用的还是cursor，不过就是太贵了）
用 Trae 进行的对话式改代码
没有一帆风顺的自动化
有人会问，为什么不一上来就直接用 Trae 全自动化完成？因为我是第一次上手，很多基础知识必须通过和 Gemini 的反复对话来找回。下一个项目，我觉得可以直接通过 AI 对话来完成。
当然，过程中也遇到了不少“巨坑”。比如遇到报错时，Gemini 和 Trae 反复修改都对不上，陷入了逻辑死循环，最后只能两边对照，我自己在中间手动“缝补”。就这样修修补补，整个项目才算真正完工。至于最后的打包和上架，基本是固定流程，就不赘述了。
结语
回头看，整个项目从立项、PRD 到 UI、代码，基本都是 AI 写的，甚至有些灵感都是 AI 给出的，我们更像是一个提供对话、把控审美的“导演”。
以上就是“神马妙句”第一阶段的过程。下一期，我们会重点分享如何统一视觉风格、后端服务的搭建，以及那套“导演式”的内容生成交互是如何实现的。
敬请期待……
