用 Cursor + Zion 搭建可收费的 AI 应用 MVP：从一句 Prompt 到上线部署全流程

2025 年 9 月 11 日，WaytoAGI 社区「晚八点共学」邀请到讲师覃貌（Tim），分享了一套面向 AI 编程新手的商业应用快速搭建方案：用 Cursor 生成前端，用 Zion 承担后端服务，用 Zebra 完成国内可访问的部署，最终让应用具备用户登录、AI Agent 调用、支付宝支付等完整商业能力。如果你正卡在「应用做出来了但不知道怎么收费、怎么上线」这一步，这篇文章值得读完。

为什么需要这套方案

▶ 5:27 · 看这一节

覃貌在各类 Web Coding 社群和论坛里观察到，新手开发者普遍面临一个共同瓶颈：前端用 AI 工具生成页面很爽，但一旦涉及服务端、数据库对接，难度就远超预期——调试困难、越改越错，上线部署更是无从下手。

「前端的控制是让他很爽的一件事情，他可以在分分钟之内做出一个本地的应用，一个不带数据库交互的应用。但当他走到了服务端，他会发现这个难度和他预想的存在很大的差距。」

这套方案的思路是：前端继续用 AI Coding 工具（如 Cursor）通过自然语言生成，后端则交给 Zion 这款全栈无代码开发工具做可视化搭建。覃貌强调，Zion 本身也能独立完成前后端完整项目，但今晚的方案里，它被定位为「服务端」来使用。

整个方案涉及三个工具：

• Cursor：AI 编程工具，负责生成前端代码。项目需在空白文件夹中创建，新对话中放入 Prompt，优先使用 Claude Sonnet 4 模型。
• Zion：全栈无代码开发平台，承担后端服务，包括数据库、行为流、AI Agent、权限管理等。
• Zebra：全球可访问的云部署平台，解决国内备案问题。部署出的应用在国内有备案资质，前期测试可直接使用，未来可绑定自己的域名。

一句 Prompt 生成带支付能力的完整应用

▶ 10:48 · 看这一节

直播现场，覃貌带着大家用一句 Prompt 现场生成一个名为「AI 烹饪专家」的 Demo 应用。这个应用麻雀虽小五脏俱全：用户登录注册、OSS 图片存储、AI Agent 调用、支付宝支付，全部包含在内。

操作步骤非常直接：

1. 在群聊文档的落地页中找到「AI 烹饪点评专家」Demo，点击复制 Prompt。
2. 在桌面或常用文件夹创建一个空白文件夹（覃貌的命名为 v to v g i）。
3. 打开 Cursor，新建一个 Chat，将 Prompt 粘贴进去发送。
4. 模型选择上，覃貌建议优先使用 Claude Sonnet 4，虽然 Auto 模式也经过了几百次测试。

覃貌现场拆解了这段 Prompt 的结构，帮助大家理解它为什么能驱动 Cursor 完成如此复杂的任务：

• AI Agent 配置：描述 Agent 的输入（图片）和输出内容。
• 创建订单行为流（create order actionflow）：用于创建支付订单，包含 ID、名称、金额等字段。
• 查询订单状态行为流（query order）：用于查询支付后的订单状态。
• 项目要求：要求 Cursor 创建 React 项目，使用详细模式下载 NPM 包，遵守 TS 编码标准。
• 与 Zion 平台对接细节：包括后端协议、AI Agent 调用方式、订单创建、支付宝订单拉起等。

这段 Prompt 是覃貌团队调试了几百遍的成果。他提到，如果使用 Trae 等工具时 Prompt 上下文有限制，可以分段粘贴——比如在支付步骤之前先复制给 Trae，然后补一句「有关支付宝和 OSS 存储的逻辑我稍后再发给你」。

生成过程中，有同学遇到每次操作都要点击 accept 的问题。覃貌建议在 Cursor 设置里把「ask every time」改为「run everything」。但他也提醒：「你一开始在学习这个事情的时候，每次你自己看一下再去接受，我觉得会更好，这样有助于你知道他到底每一步在干些什么。」如果操作中断，他建议直接把文件夹删空、新建聊天重新开始，因为「从 0 到 1 构建出来比他中断了再继续搞的正确率会高很多」。

从 Demo 到自己的应用：改 Agent、生成专属 Prompt

▶ 35:32 · 看这一节

走完第一个 Demo 流程后，覃貌带着大家进入第二个环节：创建属于自己的应用。核心操作只有两步：在 Zion 平台修改 Agent 配置，然后生成属于自己的 Prompt。

第一步：在 Zion 平台注册并创建项目

通过落地页的注册入口，输入手机号和验证码完成 Zion 平台登录。进入个人中心后，点击「新建项目」，切换到「网页模板」标签，选择「Cursor 的 AI 商业应用 MVP」模板，为项目命名。覃貌提醒，带有支付能力的项目需要付费选择专业版，但有三天免费试用时长，今晚可以「0 元购」。

第二步：修改 Agent 场景

进入项目后，点击左上角的 AI 选项，可以看到默认的「AI 烹饪专家」。覃貌以自己为例，把它改成了「AI 减肥吐槽大师」——输入还是食物图片，但输出从菜品点评变成了减肥吐槽建议。修改完成后，点击右上角「同步变更」让项目更新。

第三步：生成专属 Prompt

回到落地页的「生成你的 Cursor Prompt」功能区，先在 Zion 项目中复制 AI Agent 信息（点击 Agent 右上角三个点），粘贴到生成工具中，点击生成，即可得到属于自己项目的 Prompt。

拿到 Prompt 后，在 Cursor 中新建空白文件夹、新建 Chat，粘贴发送，等待生成即可。覃貌提醒，生成的 Prompt 顶部会变成你自己配置的 Agent 描述。

Zion 后端配置：数据库、行为流与权限管理

▶ 51:11 · 看这一节

在等待 Cursor 生成第二波项目的过程中，覃貌详细讲解了 Zion 平台的后端配置逻辑，这是理解整套方案的关键。

数据库：点击左上角「数据库」选项，可以查看项目的表和字段信息，包括用户注册数据、支付订单等。覃貌现场看到不少同学已经拉起支付，「有的同学已经给了我一分钱了」。

行为流：切换到「行为流」，第一个看到的是「支付宝支付或退款」。覃貌解释，这是配置支付回调的接收和处理的地方——用户付款后，支付宝会通知你的系统，你需要在这里定义收到钱之后做什么。模板中的配置是：用户支付成功后，订单状态变更为已支付，同时更新用户使用 AI 的权限（给钱就是 true，没给就是 false）。另外三个行为流分别是创建订单、查询订单状态、更新用户信息。

权限管理：覃貌特别强调这是 Web Coding 新手最容易忽略的问题。「你的系统上线之后，就是一个完全暴露你的各种数据库信息的状态。所以权限管理非常重要，尤其是在你做了有一定声量的时候，有心之人盯上你的时候，那个时候再去做权限管理，很有可能你就有一定的损失了。」

在 Zion 的「设置 → 权限管理」中，可以定义游客、已登录用户等角色，也可以按业务需求添加更多角色（如教务处主任、校长、班主任）。模板项目的权限设置是：游客完全禁止使用 AI 功能；已登录用户使用 AI 需付费，支付成功后才开通权限；同时禁止任何人直接篡改用户的 AI 使用权限。

部署上线：Zebra 五分钟搞定国内可访问

▶ 1:09:39 · 看这一节

项目在本地跑通后，覃貌介绍了第三位「嘉宾」——Zebra 部署平台。他解释了为什么不用 Netlify 或 Vercel：「那些都是海外的，你在国内是没有备案的」，发链接给朋友会打不开。Zebra 解决了这个问题，部署出的应用在国内有备案资质。

部署流程非常简单：

1. 进入 Zebra 官网，第一个选项就是 CURSOR，点击「立即部署」，使用 GitHub 账号登录。
2. 新用户点击「创建项目」，选择「从 CURSOR 部署」。
3. 自动跳转到 Cursor，弹出窗口，点击「打开」进入 Zebra 的部署智能体页面。
4. 告诉智能体「新建一个项目」，输入项目名称，选择地区，点击创建。

覃貌强调，整个流程不需要额外配置，「Zebra 三个事情就把它做完了」。部署平均等待周期约 4 分钟，期间提前访问域名可能出现 502 错误，属正常现象。

直播中覃貌遇到了一个线上问题：本地可以跑通，但线上访问异常。他推测是改动过程中出了问题，表示直播结束后会修复并重新上传。这也引出了他的一个建议：学会基本的 Git 版本管理。「你在本地去建一个 Git 的仓库，然后在你每一次觉得这个版本差不多了，去提交一次版本，有助于你吃后悔药。」不会用 Git 可以直接问 Cursor，「他讲的会比我更专业」。

项目拓展与样式优化

▶ 1:21:56 · 看这一节

用 Rules 和 MCP 拓展功能

覃貌以「新增 bug 反馈入口」为例，演示了如何通过 Cursor Rules 和 Zion 的 MCP 服务拓展项目功能。在 Cursor 中点击添加 Rules，放入帮助文档提供的两个规则文件：一个用于与项目数据库交互，一个用于 Zion 的 MCP 配置。然后在 Cursor 的 MCP 设置中粘贴配置内容，开启后可以看到名为 Zion 的 MCP 服务，提供登录、获取项目、获取项目数据库结构、搜索项目等方法。

实际操作中，Cursor 会读取规则，通过 MCP 连接 Zion，检查是否已有 bug 反馈表，然后给出建表建议。用户可以在 Zion 平台按提示创建表、关联用户 ID。覃貌现场演示了完整流程，提交反馈后刷新页面数据仍在，并在 Zion 数据库中确认了这条记录真实存在。

样式优化：两个 UI 组件库

覃貌推荐了两个免费可用的 React UI 组件库网站：react bits.dev 和 21st.dev。「这两个网站提供了 React 的 UI 组件库，我们这个项目刚好就是通过 React 框架来做的。而且最主要的，这两个网站你是可以免费去复制你想要的 UI 效果的。」

使用方法：在网站上选择心仪的效果，复制代码（选择 TS 和 CSS），粘贴到 Cursor 中让 AI 应用到项目里。覃貌提醒，使用过程中可能出现样式与预期不符的情况，需要按步骤层层递进配置。他特别建议：「项目后端流程跑通后再进行样式优化，可避免影响业务逻辑。」因为「你的流程是通的，你的用户在线上也是可以正常使用的，那锦上添花的事情留着业务逻辑跑通、最小化闭环跑通，我们再去做精雕细琢。」

现场问答

▶ 1:55:48 · 看这一节

Q：Cursor 每次操作都要点 accept，很麻烦怎么办？ 在 Cursor 设置里把「ask every time」改为「run everything」。但新手阶段建议还是每次看一下再接受，有助于理解 AI 在做什么。

Q：Prompt 太长，Trae 粘贴不进去怎么办？ 可以分段粘贴。比如在支付步骤之前先复制给 Trae，然后补一句「有关支付宝和 OSS 存储的逻辑我稍后再发给你」。

Q：没有支付宝商户号怎么办？ 可以共用覃貌的 Demo 项目先体验完整流程。如果不想用支付功能，直接告诉 Cursor「去掉支付功能」即可。

Q：Cursor 和 Zion 是怎么连接的？ Zion 作为后端，你需要把整套后端业务逻辑和规则告诉 Cursor，这就是 Prompt 里写的内容。Cursor 知道要做一个前端页面，也知道怎么去接 Zion 的后端。

Q：UI 样式是随机的吗？怎么控制？ 1.0 阶段确实是随机的，但大概率不会很糟糕。想控制 UI 效果，可以用 react bits.dev 或 21st.dev 选择心仪的样式，复制 Prompt 给 Cursor。

Q：不用 Cursor，用 Coder 或 Trae 可以吗？ 可以。覃貌表示 Coder 用起来不错，超出预期。这套方案的核心思路适用于各种 AI Coding 工具。

Q：完全 0 代码基础怎么学？ 「完全不会代码的人很难去做出来一个项目，或者说几乎不可能。所以你至少要去学会看懂一个项目的文件结构是什么样。」可以去 B 站搜索或问 DeepSeek，不懂的直接问 AI 工具。

要点回顾

• 方案核心：Cursor 生成前端 + Zion 承担后端 + Zebra 完成国内可访问部署，解决 AI 编程新手在服务端和上线环节的痛点。
• 一句 Prompt 生成完整应用：在落地页复制 Prompt，粘贴到 Cursor 空白文件夹的新 Chat 中，即可生成带登录、支付、AI Agent 调用的应用。
• 创建自己的应用：在 Zion 平台用「Cursor 的 AI 商业应用 MVP」模板创建项目，修改 Agent 场景后同步变更，再到落地页生成专属 Prompt。
• Zion 后端配置：数据库管理用户和订单数据；行为流处理支付回调、创建订单、查询订单状态；权限管理控制 AI 功能的使用权限。
• Zebra 部署：从 Cursor 部署，输入项目名称即可，约 4 分钟完成，国内可直接访问。
• 项目拓展：通过 Cursor Rules + Zion MCP 服务，可以用自然语言让 AI 帮你新增数据库表和功能。
• 样式优化：react bits.dev 和 21st.dev 提供免费 React UI 组件库，复制代码给 Cursor 即可应用。
• 学习建议：学会看懂代码文件结构，掌握基本 Git 版本管理，在项目每个阶段完成后提交版本。