零基础 Vibe Coding 迷你课 (三): 从一本书到一个真实上线的 App

如果你听说过 AI 编程，但又不知道该从何入手，那这篇内容可能会帮到你。

在本期课程中，我将带你手把手，在不写一行代码的情况下，将詹姆斯·克利尔的畅销书《原子习惯》中的核心方法论，变成一个你可以在手机和电脑上真实使用的 Web App。

我们将分五步走，从构想开始，历经计划、设计、实现，直到最终的部署上线，带你快速、完整地体验一次使用 AI 开发软件的全流程。

这是我们“零基础 Vibe Coding 迷你课”的第三期。学习本课程，将帮助你把 Vibe Coding 的能力，从创造简单的单页面工具，提升到构建更复杂的、真实世界级别的应用程序。

第一阶段：构想 (Ideation) - 找到你的 App 创意

一个好的 App，始于一个清晰的构想。在开始任何技术工作之前，你需要先回答几个关键问题：

你的 App 是为谁做的？(目标用户)
它要解决这些用户的什么具体问题？(核心痛点)
它都包含哪些核心功能？(解决方案)

想明白了这些，你才能做出一个真正有用、受人欢迎的 App。

为了帮助你更好地完成这个思考过程，我为你准备了一份强大的提示词。你只需将它复制给 AI，AI 就会化身为你的“产品教练”，通过一系列引导性提问，帮助你把脑海中模糊的想法，梳理成一份清晰的产品总结。

📎 下载附件：EP3 - AI Prompt Coach

第二阶段：计划 (Planning) - 将想法变成可执行的蓝图

有了清晰的构想，下一步就是把它变成一个具体的、AI 可以理解并执行的开发计划。

这里，我们将继续使用在第二期课程中介绍的方法，与 AI 进行多轮深入的问答，最终生成一份可以直接交付给 AI 编程工具使用的详细计划。

工具与模型选择

在这个阶段，我建议使用 Google AI Studio，并选择 Gemini 2.5 Pro 模型。同时，将模型的“思考预算”开到最大，这样可以充分利用 Gemini 模型强大的深度思考和长文本处理能力，生成一份高质量的开发计划。

与 AI 对话，明确需求

我们将“AI 产品教练”提示词粘贴到 AI Studio 中，AI 便会开始向我们提问。

我向它解释了我的核心想法：要根据《原子习惯》这本书里介绍的原理和方法，做一个帮助用户更容易养成好习惯的 App。

为了让 AI 更深入地理解需求，我向它介绍了《原子习惯》的几个核心概念，并说明了希望如何在 App 中实现它们：

从身份认同开始： 用户创建新习惯的第一步，不是设定目标（如“减肥10斤”），而是定义一个新的身份（如“成为一个健康的人”）。因为我们的每一次行为，都是对我们身份的一次投票。
设计清晰的提示 (Cue)： App 需要支持用户通过“习惯叠加”（在一个旧习惯后触发新习惯，如“冲完咖啡后冥想一分钟”）或“执行意图”（明确时间地点）来为新习惯设置启动器。
捆绑诱惑 (Temptation Bundling)： App 需要允许用户将一个“需要做”的习惯（如“去健身”）和一个“想要做”的习惯（如“听播客”）进行配对，从而增加执行的动力。

我将这些核心需求，甚至整本书的 PDF 文件都提供给了 Gemini。经过深入的思考和分析，Gemini 最终为我们输出了一份非常详尽、结构清晰的开发计划。

第三阶段：设计 (Design) - 让想法可视化

有了开发计划这份“文字蓝图”，接下来我们就要把它变成看得见的“视觉蓝图”——也就是应用的界面设计。

这一步，我们同样可以借助 AI 的力量。目前市面上有很多优秀的 AI 设计工具，如 Figma Make，Lovart, 你甚至可以直接使用Nano Banana。本次演示，我将使用 Google 的 Stitch。Stitch 的优势在于它能很好地理解又长又具体的提示词，并且目前可以免费使用。

从开发计划到设计提示词

我们首先回到刚才与 Gemini 的对话中，让它基于已经生成的开发计划，为 App 的每一个界面（主页、创建页、详情页）分别撰写一份用于 AI 设计工具的详细描述性提示词。

生成并迭代设计稿

我们将 Gemini 生成的这三份设计提示词，分别复制给 Stitch。

Stitch 生成的初版设计稿大体上已经很不错了，但细节上往往还存在一些瑕疵。我们可以通过与它继续对话来进行修改。只需点击设计稿上的铅笔图标，Stitch 就会将设计图发送到聊天界面，然后你就可以用自然语言描述你希望它进行的修改。

经过几轮微调，这是我最终完成的设计稿：

空状态主页： 用户第一次进入 App 时看到的欢迎页面。
习惯创建页： 用户定义身份、设置习惯规则的页面。
习惯列表主页： 展示所有已创建习惯，并可以每日打卡的页面。
习惯详情与追踪页： 查看单个习惯的详细信息和打卡历史记录。

设计满意之后，我们就可以将每个页面的代码（Stitch 支持直接导出 HTML）保存到电脑的文件里，存放在一个名为 mocks 的文件夹中，之后提供给 AI 编程工具作为视觉参考。同时，我们也将 Gemini 生成的整体开发计划，保存到一个名为 plan.md 的文件里。

第四阶段：实现 (Implementation) - 指挥 AI 编写代码

经过前面的充分准备，我们终于可以进入最激动人心的编程实现阶段了。如果你能坚持到这里，你已经非常棒了，奖励自己喝杯饮料，因为下面我们要开始更复杂的步骤了。

设置编程环境

如果你是第一次接触编程，在环境设置阶段大概率会遇到一些问题。我鼓励你不要害怕，尝试着自己解决。利用我们在第一课中创建的“AI 编程助手”，多问多试。记住，“get your hands dirty”，问题有多难，解决完了就会有多爽。

本次演示，我将使用 VS Code 作为集成开发环境 (IDE)，并配合 Codex和GPT-5 进行 AI 编程。

安装 VS Code: 首先到 VS Code 官网下载并安装程序。
安装 Codex 插件: 打开 VS Code，在插件市场中搜索“Codex”，并安装由 OpenAI 官方发布的插件。
布局界面: 我习惯将界面分为几块：左侧是文件浏览器，中间是代码编辑器，右侧是 Codex (AI 工具)，下方是命令行终端。

为 AI 设定长期规则

在开始编码前，我们先创建一个名为 AGENTS.md 的文件。Codex 在执行每一步指令之前，都会参考这个文件中的内容，相当于给它设定了“长期记忆”或“通用指令”。

这里我们保持简单，主要告诉 AI 以下几点：

严格按照 plan.md 文件中的计划，一步一步来实现。
参考 mocks 文件夹中的设计稿来实现 UI。
每一步完成后，都要运行测试命令，确保没有问题后再继续。

开始编码与迭代

现在，我们只需要告诉 AI：“开始”。

AI 在执行过程中难免会犯一些错误，你需要仔细观察，并向它详细描述问题是什么，然后让它修改。在下一期课程中，我们也会详细讨论当 AI 出错时，该如何有效地帮助 AI 纠错。

AI 实现全部功能后，它会运行一个 npm run dev 命令，这会启动一个本地的开发服务器。你可以在命令行中看到一个本地网址（通常是 localhost:3000），在浏览器中打开它，就可以测试你的 App 了。

经过测试，App 的各项功能都已按计划实现。

💻 项目源码：rokabytedev/atomic

你可以在这里下载项目源代码

第五阶段：部署 (Deployment) - 让世界看到你的作品

现在，我们对这个 App 已经比较满意了。接下来，进入最后一个阶段：部署。也就是把你在电脑上写的这些代码，上传到云服务器上，这样你就可以把你的 App 分享给别人使用了。

部署服务的提供商非常多，对于我们这种纯前端的静态应用，我们这里演示一下如何使用 Vercel 进行免费部署。

上传代码到 GitHub:
- 部署前，我们需要先将代码上传到代码托管平台 GitHub。这里需要用到版本控制工具 Git。
- 在 VS Code 中，将本地代码初始化为一个 Git 仓库，并发布到你在 GitHub 上创建的新账号中。
连接 Vercel 进行部署:
- 到 Vercel 官网注册用户，并关联你的 GitHub 账号。
- 在 Vercel 的仪表盘中，选择我们刚刚上传到 GitHub 的代码仓库。
- 点击“Deploy”(部署)。

稍微等待一会儿，Vercel 就会自动完成所有工作。部署成功后，它会给你一个专属的域名。现在，你就可以把这个链接分享给你的朋友，他们也能使用你亲手创造的 App 了！

课程总结与课后作业

到这里，我们这期课程的内容就差不多了。如果你有耐心看到这里并跟着学下来，那你真的非常了不起。恭喜你，完成了从一个想法到真实上线发布的全套流程！

今日作业：
找到一本你喜欢的书，或者一个你欣赏的方法论，用今天学到的全流程方法，把它变成一个可以自己使用的 App。

如果你需要一些灵感，可以试一-试米哈里的《心流》，或者彼得·阿蒂亚的《Outlive》。

下一期，就是我们“零基础迷你课”的最后一期了。我们将探讨当 AI 出问题时，如何帮助 AI 进行 Debug，以及其他一些 AI 编程的实用小技巧。

我们下期再见。