如何在 Mulerun 平台上发布与变现你基于 Vibe Coding 的网页产品？

让AI帮你轻松做网页，真的不是梦！

这一年，AI的功能真是飞速发展，特别是像Vibe Coding这样的方式，几乎只要你会说话，就能搞定一个可用的网站。

不过，事情并没有那么简单：能做出网站并不代表有人愿意使用，更别提能从中盈利了。现在的难点在于，如何让用户发现这个网页，如何实现收费，怎样减少与支付系统对接的麻烦。

你可能感兴趣：哇，阿里AI编程工具Qoder刚刚开放订阅！耐用度提升33.33%，单任务的token消耗大大降低，太给力了！

我最近尝试的一个方法是：

用Vibe Coding制作网页 → 把它放到一个叫Mulerun（骡子快跑）的平台上 → 利用该平台的流量和支付能力来实现盈利。

这不是我空口说白话。之前我在Mulerun上用n8n做过几款AI Agent，平台给了我积分，还能换点美金；上个月我花了三个小时做的n8n工作流，就赚了50美金。

如何在 Mulerun 平台上发布与变现你基于 Vibe Coding 的网页产品？

最近，Mulerun开始支持用iframe嵌入网页，我就把自己做的网页放上去了。这样我就不用自己处理支付，也不需要自己拉用户，平台那边有用户看到就能直接使用。

为了让你更明白，接下来我先把这几个名词解释清楚，知道它们各自的作用，然后再讲如何从零开始搭建、对接和上架。

Mulerun是什么？

可以把它想象成一个集市，专门为AI小产品而设。

你可以在上面发布自己的AI Agent、工作流或网页，让其他用户使用。它有两个重要的优势：

1. 有流量入口：你的网页可不是孤零零地在网络上漂浮，Mulerun有自己的产品列表和发现页，帮你提供基本的曝光。
2. 有计费系统：它自带积分和计费系统，你的产品上架后，可以直接通过它的支付系统处理，不用自己去对接Stripe、微信等一大堆麻烦。

最开始，它主要是让大家发布n8n工作流，最近才开始支持嵌入网页，这正好与Vibe Coding相结合。

n8n是什么？

这是一个非常流行的可视化自动化工具。

你可以在一张画布上，通过拖拽把“获取用户输入 → 调用模型 → 存储结果 → 发给用户”这条流程拼起来，不需要写代码。

它灵活多变，可以接入AI并实现功能，因此Mulerun起初就支持它：大家可以把自己制作的n8n工作流发布上去，其他人也能直接使用，还能获得收益。

如果你之前在Mulerun上用过n8n发布产品，那么现在发布网页你会觉得特别简单，因为思路是一样的：制作产品 → 上架平台 → 使用平台的计费系统。

iframe又是什么？

别被这个名字吓到，其实它只是HTML中的一个标签，功能很简单：在一个网页中嵌入另一个网页。

Mulerun现在支持用iframe方式将你的网页放进去，整个流程变成了：

1. 你用Vibe Coding制作了一个网页；
2. 将这个网页的地址告诉Mulerun；
3. Mulerun在它的页面中嵌入你的网页；
4. 用户看到的是Mulerun的产品，但实际运行的是你的页面；
5. 收费依然由Mulerun处理。

这就是它的厉害之处：你只需要负责制作“能运行的网页”，其他的运营、流量、计费都由平台来搞定。

这篇文章想要实现什么？

接下来我会把这个过程拆分成三部分：

1. 用AI / Vibe Coding制作网页（这一部分解决“我有个产品”）。
2. 如何利用它的计费系统上架（这一部分解决“别让用户白白使用”）。
3. 如何将这个网页对接到Mulerun（这一部分解决“让平台看到你的产品”）。

整体结构

这次示例用到的工具：

开发环境 / Vibe Coding编辑器：Qoder
前端部署：Cloudflare Pages
后端逻辑 / 鉴权 / 调用Mulerun API：Cloudflare Workers
代码托管：Git + GitHub
大模型与计费平台：Mulerun

示例项目的代码已经开源：

https://github.com/Cing-self/mulerunproject.git

你可以直接Fork或者Clone下来跟着操作。

网页开发步骤

网页开发主要分为几个步骤：寻找需求 → 实现MVP → 完善功能 → 部署上线 → 后续运维。

在开始之前，我们先来搭建需要的环境。

一、环境搭建

1. 注册Cloudflare：https://www.Cloudflare.com/zh-cn/

你也可以用GitHub或Google账号登录。

2. Qoder下载地址：Qoder – The Agentic Coding Platform

下载完成Qoder后，使用GitHub或Google账号登录，然后打开一个空白文件夹。

3. 配置MCP：

在Qoder页面中，点击右上角头像 -> Qoder设置 -> MCP服务 -> 添加。

将以下信息进行配置：

{
  "mcpServers": {
    "mulerun-docs": {
      "url": "https://mulerun.com/docs/mcp"
    },
    "Cloudflare": {
      "command": "npx",
      "args": [
        "@Cloudflare/mcp-server-Cloudflare@0.2.0",
        "run"
      ],
      "env": {
        "Cloudflare_API_TOKEN": "你的Cloudflare API令牌",
        "Cloudflare_ACCOUNT_ID": "你的Cloudflare 账户ID"
      }
    }
  }
}

MCP配置中需要涉及Cloudflare_API_TOKEN和CLOUDFLARE_ACCOUNT_ID：

Cloudflare_ACCOUNT_ID：你在Cloudflare注册后，会在个人账号页面看到accountId，直接从浏览器URL中获取。

Cloudflare_API_TOKEN：在Cloudflare左侧菜单中，选择管理账号 -> 账户的API令牌，创建令牌时选择“编辑Cloudflare Workers”模板。

最后需要确保拥有如下权限：（Cloudflare Pages的编辑权限需要手动添加）

点击下一步后，就能获得令牌。

4. 准备Mulerun的API Key和Agent Key。

登录Mulerun平台（https://mulerun.com/），进入创作者后台（https://mulerun.com/creator，若进不去需申请成为创作者）。

在左侧菜单API KEYS中创建一个KEY，即为API KEY，用于调用Mulerun平台提供的各类大模型API。

不同的Agent会有不同的Agent key，初期开发可以先新建一个Agent，不提交。

5. 配置Qoder规则。

轻松上手 Qoder：从设置到上线的一站式指南

在 Qoder 页面，首先点击右上角的头像，接着选择 Qoder 设置，然后找到规则选项，添加一个新的规则。别忘了，这个规则可以从 GitHub 项目的 .qoder/rules/ 路径下获取哦。

记得把规则类型改成“始终生效”哦：

接下来，把两个文件放到项目中，命名为 PROJECT_INITIALIZATION_GUIDE.md 和 DEVOPS_GUIDE.md，记得这两个文件也要放到 GitHub 项目的根目录下。

这几个文件主要是用来维护项目的初始化、开发规范和一些通用要求。有了它们，基本上 80% 的开发工作你都可以高枕无忧了。虽然目前可能还不是特别完善，不能一次性跑通，但后续肯定会继续改进的。

二、跑通 MVP

点击 Qoder 左侧的 Quest 模式，然后在输入框中添加上下文文件 PROJECT_INITIALIZATION_GUIDE.md 和 Rules。

接下来，你可以输入自己的需求，比如：“我想要一个根据提示词生成图盘的网页。”

然后 Qoder 会开始进行设计，如果你对设计方案不满意，随时可以让它修改，直到你觉得满意为止。这一步很关键，直接关系到后面的开发质量，所以最好在这个环节就把方案理顺。

如果没有问题的话，就可以点击右上角的开始任务按钮了。

之后，Qoder 会根据你刚才配置的规则，自动进行项目初始化，先把需要的工具和环境配置好。

接下来就是开发阶段，AI 会先开发前端代码，接着再进行后端代码的开发。开发完成后，它会进行本地开发环境的测试。在这个过程中，AI 可能会询问你一些操作权限，直接点击允许就行。这一步，AI 会在你本地启动服务，你就可以在自己的电脑上进行测试了。

等所有流程都执行完后，AI 会进行任务总结，告诉你这次实现了什么。

在项目的 worker 文件里，会有一个 dev.vars 的配置文件。你需要把从 mulerun 获取到的 AGENT_KEY 和 API_KEY 复制粘贴到这个文件中替换掉。然后告诉 Qoder，你已经配置好了环境变量，让它重启服务。底部的 CREATOR_MULTIPLIER 配置是用来定价的，比如你想要定成成本价的 5 倍，就填 5.0。

这时，你只需在浏览器中打开 localhost:3000 的地址进行访问。在真实场景中，第一次尝试可能会遇到一些错误。

比如这次我就遇到了页面空白的情况。这时只需右键点击谷歌浏览器页面，选择检查，底部会弹出一个控制台，切换到 console 页签，页面空白通常是前端出错了。

果然，在 console 中我看到一个报错的信息，将这个报错记录复制后发送给 Qoder，它会逐步帮助你排查问题。

在这个过程中，你可能会遇到不同的错误，常见的有：

1. 页面直接提示的错误信息。
2. console 中的错误信息。
3. network 请求的报错。

我大概修复了 4 次，终于让整个页面正常启动，效果大概是这样的：

一开始，当我们点击生成图像时，正常情况下会报错，比如提示签名验证失败。因为这个项目最终要嵌入到 mulerun 上，所以需要对所有请求接口进行鉴权。通常在本地是无法使用的，需要先发布到 mulerun 上。如果你想在本地测试时不进行签名验证，可以告诉 AI。

整个项目的过程需要自己逐步跑通，目前还不能一次性顺利完成，或者直接根据 GitHub 提供的 demo 项目进行修改。

三、部署上线

现在，我们要进行项目的线上部署，前端会部署到 Cloudflare 的 Pages，后端则部署到 Cloudflare 的 worker。

你只需告诉 Qoder 要部署到线上，它就会自动帮你完成上线。过程中可能需要打开 Cloudflare 进行账户登录。

部署完成后，打开 Cloudflare，查看 AI 的 workers 和 Pages 页面，你会看到刚刚启动的两个服务。点击进入第二个，提供域名信息。

在这个页面中，你可以看到线上网页的地址，直接点击就能访问了。

进入线上环境，测试生成图像功能时，可能会遇到 405 报错。这是因为后端域名配置错误，只需把这个报错反馈给 Qoder，它会帮你解决。直到生成图像时，接口返回的提示是签名验证失败。

四、上传到 Mulerun

首先，创建一个新的 Agent，选择 IFRAME 导入方式，把项目的 URL 地址分别填入 START URL 和 SHARE URL。

START URL 是 Mulerun 平台点击 Run 时嵌入的地址，也是用户体验的起始页面。
SHARE URL 是会话结束后用户跳转的地址，其他人查看会话回放时也会看到这个 URL。
Max Age：会话存活的最长时间，最大是 120 分钟，可以根据任务时长和用户期望停留的时间设置。

接下来，填写相关信息，这里 showcase 图至少需要上传两种。

个人密钥信息这部分可以不配置，直接点击下一步。

在 Submit and Monetize 环节，计费设置可以不填，在正式提交前，先点击 TEST FIRST 进行测试。

比如我在生成图像后，结果没有显示出来，也没有下载按钮。

解决问题的好帮手

这时候，我就请 AI 来帮忙，结果它迅速找到了问题所在。

修复完成后，现在图像生成正常，右上角还能看到我们这次用掉的积分。

五、后续维护

接入 iframe 只是个开始，想要长久挣到钱，关键在于：

1.你能否快速发现错误

在 Worker 的可观察性中打开日志；
出错时，利用日志和 Qoder 来找出问题。

2.你会否关注用户体验

有错误不仅要修复，还得想法复现并自己测试一下；
看看是否需要添加一些提示、加载状态和重试机制。

持续集成的小技巧

为了更方便地进行持续集成，可以把 Qoder 和 GitHub 连接起来：

让 Qoder 进行项目的 Git 管理；
每次修改后，让它帮你推送到远程仓库；
再通过 Cloudflare 部署，形成一条完整的迭代链路。

我的一些经验分享

iFrame 使用的注意事项

1. API_KEY 和 Agent_KEY 泄露：如果你从前端直接调用 Mulerun 平台的 API，那你的 API_KEY 和 Agent_KEY 就会暴露在请求中，容易被抓取。这也是我为什么要加一个 worker 的原因。
2. 鉴权机制：前端只是用来展示，所有关于模型调用和计费的逻辑都要放在后端 worker 上。你需要弄清楚哪些请求是可以正常处理的。本文演示的方式是，只有通过 mulerun 嵌入的方式才能成功调用 worker 的 API，否则会出现验证签名失败的提示。
3. 计费说明：计费是关键的一环，本文是按照倍数定价，你可以在环境变量中自行设置。根据你的需求调整计费方式，只需告诉 AI 你想要的计费模式即可。

常用工具推荐

1. 如何快速做原型产品？

推荐使用 Google AI Studio 的 Builder 功能：这里面集成了 Gemini 2.5 Pro、NanoBanana 等模型，每天都有免费的使用额度。特别适合先验证想法、把代码上传到 GitHub，然后再下载到本地进行深度开发。

2. 哪里能找到好看的图片？

Pinterest：我几乎每天都在用，无论是找灵感还是参考图。
Pixabay、Pexels：这些平台提供高质量的免版权素材，非常适合用来配合你自己的工具效果图。

总结

这条 Vibe Coding → Cloudflare → iframe → Mulerun 的链路，简单来说就是：你只需专心做好网页，流量和计费交给平台。

如果你已经有一个能正常运行的网页，那就不要再停留在本地预览了：

把它部署到 Cloudflare，接上 Worker 进行鉴权，然后用 iframe 连接到 Mulerun——

即使不追求一炮而红，先确认“真的有人用，真的能收费”，这思路就和单纯“玩玩代码”完全不同了。

后续怎么升级架构、开发更多产品，都是后续的事。

先把第一个 iframe 工具挂上去，让它为你开始工作。

写到这里就先告一段落啦🌙

如果这篇内容对你有帮助，记得给我留个脚印：

点赞✨ | 收藏📌 | 转发📮 | 留言💬

你每一次的支持，都是我继续分享的动力⚡️

想第一时间收到更新，可以点个关注🔔

这里会持续分享关于 AI、工具和思考的内容，陪你一起探索更多新的可能 🚀

来源：知乎

原文标题：基于 Vibe Coding 的网页产品，在 Mulerun 平台上的发布与变现路径

原文链接：https://zhuanlan.zhihu.com/p/1972430185065353856

声明：

文章来自网络收集后经过ai改写发布，如不小心侵犯了您的权益，请联系本站删除，给您带来困扰，深表歉意！