如何用氛围编程搭建应用：从创意到上线

要用氛围编程搭建应用，请先为第一版写一段一页纸的描述，把它作为第一条提示词交给 AI 应用构建工具，然后通过小步快跑、逐步测试的方式扩展应用：数据、登录、核心工作流、打磨细节、安全审查，最后发布。本指南以一个例子项目贯穿始终，即为一家小型瑜伽工作室开发的课程预约应用，并给出每个阶段使用的提示词。

如果你从未以这种方式构建过东西，我们的氛围编程新手教程会从更小的起点开始。如果想了解一个不局限于氛围编程的更广泛概览，请参阅如何用 AI 搭建应用。

项目背景

设想一位瑜伽工作室的老板 Sara，她每周开设八节课。学员通过 WhatsApp 预约；她为每节课保存一份纸质名单，经常超额预约。她希望：

• 学员能够查看本周的课程表并预约名额。
• 每节课都有人数上限。
• 她能为每节课打印一份名单，在门口核对。
• 学员最晚可以在上课前两小时取消预约。

这就是第一版的全部内容。暂不包含支付、会员或应用商店上架。这些功能可以以后再加，也可能永远不加。

第一步：写一页纸的需求说明

在打开任何工具之前，先用平实的语言写下第一版的内容。花十分钟在这里，可以省下几个小时的来回修改。一个有用的结构如下：

• 谁会使用： 学员（预约和取消），Sara（管理课程、查看名单）。
• 页面： 课程表、课程详情、我的预约、管理员课程页、管理员名单页。
• 数据： 课程（名称、教练、开始时间、时长、人数上限）、预约（学员、课程、状态）、学员（姓名、邮箱、电话）。
• 规则： 不能预约已满的课程；每位学员每节课只能预约一次；上课前两小时可取消；只有 Sara 能访问管理页面。
• 不在第一版中： 支付、课程卡、候补名单、提醒。

“不在第一版中”这份清单最为关键，它能确保项目可以真正完成。如果想要更完整的需求文档，我们关于用 AI 撰写产品需求文档的指南会有更详细的说明。

第二步：选择能完成整个流程的工具

对于包含数据库、登录功能和公开网址的应用，请使用能够运行代码、附加数据库并完成发布的 AI 应用构建工具，而不是只会给你文件的聊天助手。我们的氛围编程工具对比列出了各种选择。这里我们使用 Mythex，因为它在一个地方就能完成每个步骤：聊天、实时预览、真实的数据库和文件存储，以及一键发布。

第三步：第一条提示词

把需求说明浓缩成一段话。不要一次把所有细节都粘贴进去；先给出核心内容，其余的分步骤添加。

为我的瑜伽工作室搭建一个课程预约应用。学员用姓名、邮箱和电话注册，查看本周的课程表，并预约课程中的一个名额。每节课有名称、教练、开始时间、时长和人数上限；满员的课程显示“已满”，不能预约。学员可以查看自己的预约，并可在上课前两小时取消。我是管理员：我可以添加和编辑课程，并查看每节课的预约名单。设计简洁、平静，在手机上使用效果良好。

如果你不确定工具是否理解了你的意思，可以先要求它给出计划。在 Mythex 中，计划模式会在编写代码之前列出页面和数据结构，由你确认后再开始。

第四步：让核心流程跑通

核心流程是应用存在的唯一理由：学员预约课程，Sara 能看到预约。只测试这一点：

1. 以学员身份注册，预约一节课。
2. 打开管理员视图，预约记录是否出现？
3. 再次预约同一节课，系统应当拒绝。
4. 把某节课的人数上限设为 2，用两个学员账户预约，再尝试第三个。

此时通常会出现两个问题。课程表显示的时间使用的是服务器的时区，而不是工作室所在的时区。另外，“已满”的检查只发生在页面上，因此快速双击就会产生两条预约。

将所有课程时间统一显示为工作室所在的时区 [Asia/Dubai]，不受访客设备时区设置的影响。

在创建预约时，在服务器端检查人数上限和重复预约，而不仅仅在页面中检查。如果两个请求同时争抢最后一个名额，只能有一个成功。

在添加任何其他功能之前，先修好核心流程。其他所有功能都依赖于它。

第五步：逐条添加其余规则

现在逐一处理需求说明中的规则：

学员可以在课程开始前两小时取消预约。之后隐藏取消按钮，并在服务器端拒绝取消请求，同时给出清晰的提示信息。

只有我的账户可以打开管理员页面。请确保每一项管理操作都在服务器端进行检查，而不仅仅是隐藏菜单。

每条规则添加后都要进行测试，只有确认它能正常工作后才继续下一条。如果某次修改破坏了其他功能，就回滚到最近一次正常的检查点，并换一种更清晰的说法重新提出请求，而不是在上面不断叠加修复。

第六步：打磨真实用户会注意到的细节

真实用户会留意到一些小细节。以下是 Sara 的应用可以做的一份简短清单：

• 空状态： 显示“本周暂无课程”，而不是空白页面。
• 确认信息： 预约后显示“您已预约周二 18:00 的 Vinyasa 课程”。
• 手机布局： 按钮要足够大，课程表在 375 像素宽的屏幕上也能清楚阅读。
• 剩余名额： 在每张课程卡片上显示“剩余 3 个名额”，促使学员更快预约。

在每张课程卡片上显示剩余名额，例如“12 个名额剩 3 个”。预约成功后，显示确认信息，包含课程名称、日期和时间，并提供一个跳转到“我的预约”的按钮。

第七步：像陌生人一样测试

在其他人使用之前，花半小时尽力去破坏它：

你也可以让 AI 帮你梳理边缘情况：

列出十种真实学员可能进行的、可能破坏预约或取消功能的操作，逐一测试，并修复失败的部分。告诉我你改了什么。

第八步：安全审查

这个应用会存储姓名、邮箱和电话号码，因此值得做一次简短的安全审查。主要问题包括：

• 一个学员能否看到另一个学员的预约或联系方式？
• 是否有任何密钥或密码位于在浏览器中运行的代码里？
• 注册表单是否有防机器人保护？
• 数据是否有备份？

我们关于氛围编程是否安全的页面解释了每一项检查，并提供了相应的提示词；AI 构建应用安全检查清单则是更完整的版本。

第九步：发布

当核心流程、规则和检查都通过后，就可以发布了。在 Mythex 中只需点击一次，应用就会获得一个公开网址，数据库和托管都已准备就绪。在 Pro 版中，你可以绑定自己的域名，例如 book.sarasyoga.com；请参阅如何绑定自定义域名。

在发送链接之前，请再检查一次已发布的版本。用手机预约一节课。正式环境和预览环境的表现应当一致，但仍需确认。

第十步：首批用户与下一个版本

先把链接发给五位经常来上课的学员，而不是全部学员。请他们通过链接预约下一节课，并告诉你哪些地方让他们感到困惑。然后修复他们提到的前三个问题。

在真实使用几周之后，这类应用的第二版功能清单通常会自然浮现：满员课程的候补名单、课前一晚的邮件提醒，以及可在线支付的课程卡。每项功能都按同样的方式处理：用几行字写下需求，给出提示词，测试，然后发布。关于添加支付，请参阅如何为应用添加支付。关于推广和获取用户，请参阅如何发布应用并获取首批用户。

把它变成手机应用

许多工作室希望学员的手机上能有一个图标。在 Mythex Pro 上，已发布的应用可以生成一个 Android 应用（可上传到 Google Play 的文件），也可以使用你自己的 App Store Connect 密钥，将 iPhone 应用发送到 TestFlight，无需 Mac。手机应用会打开已发布的网页应用，因此每次你发布更新，手机应用也会同步获得这些更新。

总结

搭建本身只是其中较短的一部分。让这个应用真正可用的，是需求说明中的“不在第一版中”清单、在其他一切之前先测试核心流程、对人数上限和访问权限使用服务器端规则，以及在扩大到五十人之前先让五位真实用户试用。当应用需要为其他人服务时，氛围编程就是这样进行的。

准备好尝试自己的项目了吗？写下你的一页纸需求说明，然后把第一段粘贴到 AI 应用构建工具中。如果想看更多应用类型及其背后的提示词，请阅读我们的氛围编程示例。

常见问题