LongCut logo

一个 prompt 跑完 5 页面 + Stripe + 上线 | Atoms 实测 | 回到Axton

By 回到Axton

Summary

Topics Covered

  • 一个 prompt 跑完五个完整页面
  • 一个按钮搞定部署上线全流程
  • 一个prompt跑出能收钱的产品

Full Transcript

我搭了一个 AI 分析师,叫做可析 它每天自动追踪 9 个频道的大佬访谈 每周产出一份 CEO 备忘录级别的行业简报 但是这些报告一直躺在我的本地文件里 只有我自己能看到 今天我就用 Atoms 把它变成了一个公开可访问的 还能收费的线上产品 而且整个过程从想法到上线收款

全程是一站式完成的 Atoms 的前身叫做 MGX 全称是 MetaGPT X 这个团队最初做的就是开源项目 MetaGPT 你在 GitHub 上可能看到过这个名字 MGX 改名叫 Atoms 也是最近的事 定位也做了升级 它现在叫自己 Vibe Business 不只是帮你写代码

而是来帮你搭建一个完整的可以运营的产品 今天我就来实测一下 看看它到底做到了多少 你好欢迎回到 Axton 感谢 Atoms 对本期视频的赞助 好我们来打开 Atoms 的官网 atoms.dev 在页面底部我们可以把语言切换成中文 Atoms 的定位很明确 它把你的想法变成一个可以商业化运营的应用

它可以直接连接像 Stripe 这类支付网关 创建好之后就可以直接开始运营 创造收入了 那用你的账号登录之后 左边是侧边栏 右边就是工作区 中间这个对话框呢 就是你的主要操作界面 直接在这里面输入你的想法 就可以创建一个新的项目 或者呢 点击左上角的新项目按钮也是一样

在对话框右上角 我们可以选择模型 Atoms 支持很多模型 Claude 系列 GPT Gemini DeepSeek 通义千问 都有 那我选 Claude 的 Sonnet 4.6 因为它性价比适中 搭网站是够用的 然后我们点击对话框左下角的加号 可以看到更多的选项 首先是团队模式 开启之后呢 就会有 7 个 AI Agent 的协作来帮你搭建

有项目协调 Mike 产品经理 Emma 架构师 Bob 工程师 Alex 数据分析师 David 研究员 Iris 还有 SEO 专员 Sarah 每个 Agent 各司其职 这就是 Atoms 说的 Vibe Business Team 这里还有两个重要的功能 深度研究模式 让研究员 Iris 先做大量调研再动手

适合需要进行市场验证的项目 后面我会进行演示 竞赛模式 可以让多个 AI 团队 来同时跑同一个需求 你最后可以挑最好的那一个 注意啊 这个模式会消耗更多的资源 毕竟是多个团队并行干活嘛 但是能拿到多种方案来供你挑选 官方在特定的评测场景下测过 Race Mode

竞赛模式相比单次生成 在质量和效率上都有明显的提升 具体的数据 Atoms 的 blog 里面呢 也有详细的说明 好 在正式创建项目之前有一个非常重要的设置需要先打开 我们来进入到设置里边 找到全局控制 这里有一个 Atoms Cloud 的开关把它打开 Atoms Cloud 就是它的后端服务 提供数据库啊

用户认证 Stripe 支付 集成 自定义域名等等 这一整套的后端能力 Atoms 的思路就是把这套后端能力啊 和它的多 Agent 的团队呢 打包在一起 让你用一个 prompt 就能把前端后端支付和发布全部搞定 我们来看看实际的效果到底怎么样 好 设置完成了 回到我们的对话框

现在我们把提前写好的需求描述粘贴进去 五个页面 首页 简报详情 人物索引 Agent 系统介绍 还有付费订阅页 深色主题 卡片的布局 要支持 Markdown 的渲染 然后我们在附件里面呢 上传我们的三个数据文件 briefings.json 呢

briefings.json 呢 是三篇简报的内容 people.json 呢

people.json 呢 是八位 AI 领袖的资料 agents.json 呢

agents.json 呢 是 12 个 Agent 团队的信息 这些都是我的 AI 分析师可析 实际产出的数据 好了 上传完成 点击发送 让 AI 团队开始干活 我们可以看到 Agent 团队已经在分工了 Mike 负责协调整个项目 把任务呢 分配给 Alex Alex 就开始写代码 构建页面呀 数据加载

路由逻辑 全自动的完成 这就是多 Agent 协作的威力 你来描述需求 团队呢 自己拆解 分工和执行 好 AI 团队的工作完成了 我们来看一下效果 直接在浏览器当中 打开预览 这样呢 可以看得更清楚一些 OK 出来了 五个页面 全齐了 首页有 Hero 区域 统计栏

最新的简报卡片 历史简报列表 底部还有订阅引导 简报详情页 这是我们的核心内容之一 完整的渲染了 Markdown 的内容 共鸣分歧断言 都有视觉的区分 侧边栏呢 自动的提取 提到了人物和涉及的概念 点击人名 可以跳转到人物的页面 人物索引

这边有八位 AI 领袖的卡片 显示出现的期数 他们的立场的摘要 核心的概念标签 系统页呢 展示了我的 12 人 Agent 团队的工作流程 自动监控 知识库 AI 分析 产出简报 可析呢 作为核心分析师 被高亮的显示出来 接下来是订阅页 免费版和高级版 99 元每月

功能对比清晰 还自动的生成了常见的问题 而整个的过程呢 我只写了一段需求描述 上传了三个 json 文件 那看到这里你可能会想 这页面设计也没什么大不了的 现在随便一个 AI 大模型 你给它同样的 prompt 它都能做出差不多的效果 你说的没错 后面我会用 Claude Code 给它一模一样的 prompt 来做一次对比

看看差距到底在哪 但是在那之前呢 我们先把这个项目的支付和发布搞定 因为真正的区别 恰恰就在这些页面之外的事情上 接下来我们就要让这个网站 真正能收钱 进入设置 找到集成面板 这里我们可以看到 Atoms 支持的所有的集成 Stripe Supabase GitHub Google Analytics 等等

我们点击 Stripe 的连接按钮 Atoms 用的是 Stripe Connect 这是 Stripe 官方的标准的接入方式 它会跳转到 Stripe 的授权页面 选择你的 Stripe 账户 点击连接 几秒钟就关联好了 回到 Atoms 这边就可以看到 Stripe 已经显示在已集成里面了 Stripe 连接好之后 我们回到项目的聊天框 直接告诉 AI

Stripe 已经连接了 请创建一个订阅产品 可析简报高级版 99 元每月 并确保订阅页的付款按钮 能够正常调用 Stripe 中间经过了几轮的配置调试 Stripe 的密钥需要设置到环境变量里 整个过程 AI 团队和我一起排查 一起修复 最终我们点击订阅高级版 点击立即订阅 OK

直接就跳转到了 Stripe 的付款页面 域名是 stripe.com 价格 99 元 从需求描述到可以收款 Atoms Cloud 把整个的链路都打通了 好支付搞定了 最后一步发布上线 我们点击右上角的发布按钮 这里可以看到项目名称 发布版本 数据库迁移选项 不用你自己买服务器 不用配域名

也不用搞 CI/CD 的部署的流程 一个按钮直接就可以上线了 我们来点击发布 部署中 好部署成功了 我们拿到了一个公网的链接 我们用隐身浏览器打开这个链接 确保不会受到任何缓存的影响 OK 公网链接正常上线了 这个链接任何人拿到都能打开 所有页面都可以公开访问

只有订阅付费的时候 才需要你登录 到这一步 Atoms 已经把从 idea 到上线收款 这条主线全部帮你跑通了 而且它还在往后延伸 在团队模式下 除了前面提到的 SEO 专员 Sarah 最近还新增了一个广告专员 叫 Adrian 这两个 Agent 都是专门针对 Atoms

搭出来的网站 一个来帮你做 SEO 优化 一个来帮你做广告投放 整个链路就是搭建上线 获客全在一个平台里完成 好 我们的第一个项目搞定了 从想法到上线收款 一站式完成 但 Atoms 不只是搭网站 它还有一个我很喜欢的功能 就是 Deep Research 很多人上来就写代码

其实第一步是应该验证你的想法 Atoms 的研究员 Iris 就可以帮你来做这件事情 好 我们回到 Atoms 点击对话框里的加号 把深度研究模式打开 然后输入我们的调研话题 比如 2026 年 AI Agent 创业赛道的机会和风险 然后点击发送 Iris 会去搜索大量的网站 交叉分析多个信息源

生成一份结构化的专业报告 每个观点都标注了来源 可以点击溯源 这就说明它不是 AI 编造出来的内容 都是有据可查的 好 报告出来了 市场分析机会 风险竞争格局 结构清晰 你可以把它导出为 PDF 也可以直接让 Atoms 把它变成一个可以分享的网页 一键发布 拿到链接

就能分享给团队或者投资人 这就是 Atoms 说的 Strategy Before Code 先调研再动手 不是上来就写代码 而是要先搞清楚方向对不对 OK 刚才我们提到了 Atoms 还有一个竞赛模式 我们来实际试一下 竞赛模式的意思就是同一个需求 我们让多个 AI 团队同时来做 做完之后你挑最好的那一个

我正好有一个需求 我有一个开源项目的展示页 想要重新设计一下 我们就用这个来进行测试 OK 我们新建一个项目 这次我们不开 Atoms Cloud 因为这是一个纯展示的页面 它不需要后端 在对话框里的加号里面 开启竞赛模式 然后粘贴我的需求 设计一个开源项目展示页 五个项目 深色主题

Navy 和 Gold 的配色 需求写的比较详细 包括具体的项目数据 配色色值和布局要求 点击发送 让多个 AI 团队同时开工 可以看到多个方案在同时生成 每个方案的设计思路 布局方式 视觉风格都不太一样 这就是竞赛模式的价值 它不是来赌 AI 一次就做对 做好

而是让我们可以同时的看到多种可能性 然后你来挑选 OK 几个方案都出来了 我们逐个来看一下效果 这个呢 布局不错 但是配色不太对 这个配色到位了 但卡片设计很一般 OK 那这个方案最符合我们的要求了 Navy 的背景啊 Gold 的强调色 项目卡片排列比较清楚 Stars 和 Forks 的展示呢

也很直观 OK 我们就可以选这个 那选完之后 其他的方案就会被丢弃了 你只需要保留最好的那一个 好 前面说过 我们要做一个对比 现在第一个项目 已经从搭建到支付到发布 全部都搞定了 我们来验证一下 同样的事情 我们用 Claude Code 来做会怎么样 我在一个测试目录里面 放了同样的三个 JSON 数据文件

还有一份和给 Atoms 一模一样的 prompt 包括用户认证 Stripe 支付 数据库 要求全部都一样 我们就用完全公平的方式来对比 好 我们在这个目录里面启动 Claude Code 把 prompt 呢 粘贴给它 让它开始工作 这个 prompt 跟前面是一样的 搭建一个 AI 行业的简报阅读器 包括首页 详情页 人物索引

系统页 订阅页 基础要求 需要用户认证 需要 Stripe 支付 数据库 Markdown 渲染 SEO 等等 我们可以看到 Claude Code 也开始在写代码了 来构建整个的项目 好 做完了 我们看一下它的总结 可析简报构建完成 22 个路由全部 OK 首页 简报详情页 人物索引页 系统页

订阅页 用户认证 Stripe 支付集成 数据库 SEO 深色主题 响应式 全都有 看起来很完美 不过它也提示了 你需要在 .env 文件里面

你需要在 .env 文件里面 填入你的 Stripe Key 然后才能启动 如果要部署到 Vercel 还需要把数据库 换成 Postgres 在 Vercel 的环境变量当中 填入 Stripe Key 和认证密钥 好 我们现在本地把它跑起来 看看效果 启动开发服务器 在浏览器中打开 也很漂亮 我们把两个版本 放在一起对比一下

左边是 Claude Code 做出来的 右边是 Atoms 发布在公网上的 首页可以说差不太多 我们点进最新的简报看一下 详情页 内容可以正常的渲染 侧边栏也有 本期人物核心概念 以及订阅按钮 人物页基本上都一样 系统页也是一样的 当然 Atoms 那边 状态显示的更准确一些 但是这些都是小问题

可以说 在页面的效果上 两边几乎是没有什么 区别的 好 那我们就来测试一下 它的核心功能 订阅付费 在 Claude Code 这边 我们先注册一个账户 登录成功 然后我们点击订阅 点击升级 它是没有反应的 我们可以看一下 它的终端的信息 Stripe 的 API Key 无效 我们再来看看 这个 .env 文件

这个 .env 文件 它实际上跟 .env.example 的格式是一样的

.env.example 的格式是一样的

你需要自己去创建 和管理这些密钥 Stripe 的 Secret Key Publishable Key Webhook 的 Secret Key 数据库连接 用户认证的密钥 这些全部都要你自己去搞定 而且这还只是在本地跑通 你要真正上线 你还得把数据库换成 Postgres 在 Vercel 上进行配置环境变量 然后去部署

所以这就是纯代码的工具 和平台类工具 它的本质的区别 Claude Code 写出来的代码 完全没有问题 页面效果也很好看 但它给你的是一个半成品 你还需要自己去配置密钥 去搭数据库 去处理部署 才能让它真正的跑起来 而像 Atoms 这类平台 它就把后端支付 部署这些页面之外的事情 都帮你处理了 它是多 Agent 团队协作

加上竞赛模式的多方案的竞争 这就是我觉得它和纯代码工具 最本质的差异化 好 我们来总结一下 今天我们做的事情 我用 Atoms 搭建了一个 AI 内参订阅网站 五个完整的页面 用户认证 Stripe 支付 一键发布到公网 又用 Deep Research 做了一份行业分析报告 整个过程 核心操作就是写 prompt 和点几下鼠标

那来说一下我的真实感受吧 像 Atoms 这类平台 它最大的价值 就是快速的 MVP 最小化产品的验证 你不用再去套 SaaS 模板 你不用再去手动的 集成用户认证和支付系统 一个 prompt 就能跑出一个完整的 能收钱的产品来 这适合那些有想法 想快速验证 能不能跑起来 但不想自己折腾后端 和部署的人

如果你正好有这个需求 可以去试一下 Atoms 链接在简介里边

Loading...

Loading video analysis...