零代码做出两款 AI 应用：从接口调试到域名上线的完整实战

2026 年 1 月 15 日晚，WaytoAGI「Vibe Coding 实战训练营」第三课开讲。Enter.pro 团队的 AI 产品经理龙龙老师，用一整场实操演示，带学员从零搭建了「AI 新年贺卡生成器」和「AI 运势测算」两个应用，并完整展示了如何低成本调用大模型接口、如何把智能体接入网页、如何排查报错、如何绑定自己的域名。这场分享适合零基础的非技术人员、想快速验证 MVP 的产品经理，以及所有想用 AI 工具把想法变成产品的人。

三个降本技巧：别让 Token 烧在琐事上

▶ 10:06 · 看这一节

课程一开始，龙龙老师先分享了三个控制 AI 使用成本的技巧。他提到，很多学员的 credits 消耗过快，往往是因为使用方法不对。

第一个技巧：根据任务难度选择不同模型。 最贵的模型比其它模型贵 3 到 5 倍，用它处理简单任务性价比太低。龙龙老师举例：「我简单地去调整边框什么的，我可能就用 sonnet，它 7.8，我 1,000 次，我能改 100 次。」规划复杂任务时可以用更强的模型，执行阶段则换成性价比更高的模型。

第二个技巧：简单文本操作直接改代码，不消耗 credits。 在 Enter 平台中，点击模型选择按钮，进入「Go to code」查看代码，直接修改文字后保存，完全不需要和模型对话。「对于简单文本的操作，我们就用这种方式去做。」

第三个技巧：借助外部工具生成草图，降低指令成本。 龙龙老师提到，他做 PPT 时会先用 Gemini 生成一个简单的页面草图，觉得不错就截图，再让 Enter 复制这个样式。「我们用一些其他的三方的软件来让整个成本变得更低。」

两类 AI 服务：直接调模型与智能体

▶ 18:11 · 看这一节

在动手之前，龙龙老师先厘清了一个核心概念：非业务数据（如图片、AI 返回的文本）不存放在自己的数据库里，而是通过接口 API 接入系统。他介绍了两种不同复杂度的 AI 服务：

• 直接调模型：一次性请求，模型返回一段文字或图片，适合生成贺词这类简单任务。
• 智能体服务：带上下文、支持多轮对话，适合算命这类需要记住用户前面说了什么、还要做复杂推算的场景。

关于模型选择，龙龙老师给了三条经验：「没有必要自己去做模型」「如果能够花钱买到一些稳定的服务，那就花钱」「管它什么模型，你先接进来，接完了我们看效果，我们再去换」。单一模型可以直接找厂商（如 DeepSeek），多模型场景则需要聚合平台，国内可选字节、阿里云百炼，海外有 AWS 等。本次课程选用阿里云百炼，因为它同时提供模型服务和智能体服务，一个平台就能讲完整个流程。

实操：验证接口、搭建智能体、接入系统

▶ 22:30 · 看这一节

第一步：验证大模型接口

在百炼平台获取 API 密钥后，进入模型广场选择模型，复制 API 示例中的链接，在终端用 cURL 命令测试。龙龙老师演示了视频生成模型的调用——第一次请求返回一个 task ID 和 pending 状态，第二次请求带上这个 ID 就能查询生成进度。「在我们很多的业务系统的搭建过程中，我们一定会用到第三方平台的，那么在第三方平台能够接入到我们自己的系统里面时，我们就要提前地去验证它能不能跑得通。」

第二步：搭建智能体

在百炼的「应用开发」中创建应用，填入 Prompt 和变量（如性别、出生年月日、城市），即可构建一个算命智能体。龙龙老师特别强调，算命场景需要多轮对话能力，这是直接调模型做不到的。智能体发布后，同样通过 API 方式接入，复制 HTTP 请求在终端验证能否跑通。

第三步：通过 Supabase 安全接入

密钥不能放在前端，必须保存在服务器端。龙龙老师演示了如何通过 Enter 连接 Supabase，将密钥存入 Edge Functions 的 secrets 中。「密钥很重要，我必须要把它放在服务器里面。」整个请求链路是：用户在前端页面发起请求 → 打到 Supabase 的函数 → Supabase 再转发到阿里云百炼 → 百炼处理完原路返回。

数据处理流程图

排查报错：把错误原因完整告诉模型

▶ 45:52 · 看这一节

实操过程中，生成图片的接口报错了。龙龙老师借此演示了正确的排查方法：打开浏览器开发者工具，切到 Network 面板，找到 Fetch/XHR 请求，查看返回值和错误原因。「我点击生成图片时报错了，错误原因是这个。以及还不够，如果你能做得更好，你要把这个 URL 贴过来，告诉我们的模型，这样他就有更多上下文了。」

他提醒学员，不要只截图给 AI 看，「要不然大家疯狂地去截图，可能模型也不知道是什么情况，那你就会很耗 TOKEN。」把错误原因、URL 等关键信息完整告诉模型，排查效率更高，Token 消耗也更少。

产品化：品牌调性、登录、数据埋点与域名

▶ 58:59 · 看这一节

MVP 跑通之后，龙龙老师展示了如何把产品做得更完整：

1. 统一品牌调性：用 Gemini 规划页面布局、写 Prompt，用 Framer 生成首页图片，反复调整 UI。
2. 添加登录注册：账号信息和认证信息是产品的标配。
3. 接入数据埋点：接入 GA、PostHog 等统计平台，追踪用户行为。
4. 绑定自己的域名：在阿里云购买域名（如 host.xyz），在 Enter 中添加域名，再到阿里云配置 CNAME 解析记录。配置完成后需要等待 10～15 分钟生效。

龙龙老师强调，绑定域名是在为品牌付费：「你如果真的想要去付费，你要绑定你的域名，因为我们在为自己的品牌付费，为自己的品牌调性付费，这个钱是应该值得花的。」

域名设置与DNS配置界面

课程总结：Web Coding 的本质是服务编排

▶ 1:11:29 · 看这一节

回顾三节课的内容，龙龙老师总结了学员应该掌握的能力：在不写代码的情况下搭建网页，理解网页的运行、部署和监控；把数据存到云端，记录用户数据；接入第三方统计平台；通过 Supabase 接入大模型和智能体接口。

更重要的是，这套方法可以扩展到任何第三方服务：「我们是不是可以接支付宝？那支付宝怎么接？那就是这么接，就一样的，我们在支付宝里面申请个 key，把 key 给到 enter。」他鼓励学员把第三方服务当作拼图，拼出自己的系统。

关于「AI coding 只能做简单系统」的说法，龙龙老师不以为然：「什么叫复杂系统？难道是我并发足够大，我有非常多的组件，导致我的业务逻辑很麻烦吗？我觉得全世界 90% 的系统都很简单。」他举了第一堂课分享的 emoji 案例——月流量几百万，系统本身非常简单。

马年贺岁网站系统架构流程图

作业与后续课程预告

▶ 1:15:14 · 看这一节

本次作业有两个方向：一是在产品中接入 AI 能力，可以尝试复刻一个自己喜欢的工具，学会接大模型、查看环境变量和函数、调整 Prompt；二是在原有项目中接入第三方平台（如天气、表单通知），构建工作流，实现商业化价值。

云舒老师随后预告了后续三节课的内容：像程序员一样用 AI 写代码，包括 AI 编程基础、从 0 开发产品、PRD 撰写、与 AI 协作以及部署。她推荐新手先用 Trae 国内版，有一定经验且爱折腾的学员可以选择 Cursor 加 Claude Code。她特别强调：「AI 编程最核心的就是你要花 100 个小时去把那个手感摸出来，你不打时间进去，你没有办法做一个好的产品。」

现场问答

▶ 1:31:06 · 看这一节

Q：Trae 海外版用得习惯，需要换成 Cursor 吗？ A：用得习惯可以不换。如果编程用得多，最终还是会用 Claude Code 和 Codex，这两个更方便。熟练度不高时，用 Enter 实现需求更省事。

Q：AI 编程有网页版吗？ A：没有，所有 AI 编程工具都需要下载安装。

Q：网页能转成小程序吗？ A：不行。APP、网页、PC 端程序、插件、小程序都需要独立开发。

Q：不懂代码能学会吗？ A：能学会使用 AI coding 低代码工具，但学不深。需要掌握变量、常量、循环、逻辑等基础知识。先学会 AI First 思维，不懂就问 AI，再不懂就问人。

Q：工具会不断进化，现在学的东西会过时吗？ A：工具一定会进化，但用工具与 AI 协作的经验和理解是最宝贵的。工具会变，思维方式不会变。

要点回顾

• 降本三技巧：按任务难度选模型、简单文本直接改代码、用外部工具生成草图降低指令成本。
• 两类 AI 服务：直接调模型（一次性）和智能体（多轮对话），按场景选择。
• 安全接入：密钥必须存放在服务器端（如 Supabase 的 secrets），不能暴露在前端。
• 排查报错：打开 Network 面板，把错误原因和 URL 完整告诉模型，而不是只截图。
• 产品化四件事：统一品牌调性、添加登录注册、接入数据埋点、绑定自己的域名。
• Web Coding 的本质：不是写代码，而是把数据、算力、业务逻辑通过 API 编排成完整的用户体验。