一、课程内容金字塔总结
📌1.实操课程介绍1.1课程目标学习制作两款AI网站：一款用于生成图片，另一款用于算命（算运势）。1.2课程内容本次课程是Vibe Coding实战训练营的第三课，属于实操课程，旨在带领学员制作两款AI网站，分别是基于大模型语言生成图片的网站和算运势的网站。在实操过程中讲解相关知识点，帮助学员理解AI网站开发的业务逻辑等内容。课程面向小白或初阶学员，后续会有进阶内容。2.AI网站开发2.1技术实操课程强调在开发过程中学会排查问题，以及如何低成本地将项目实现。例如，在选择模型时，根据不同任务选择性价比最高的模型，如简单调整边框可用sonnet，规划项目可用plan，执行任务可用sonnet等，以降低成本。
1.实操课程介绍
1.1课程目标
学习制作两款AI网站：一款用于生成图片，另一款用于算命（算运势）。
1.2课程内容
本次课程是Vibe Coding实战训练营的第三课，属于实操课程，旨在带领学员制作两款AI网站，分别是基于大模型语言生成图片的网站和算运势的网站。在实操过程中讲解相关知识点，帮助学员理解AI网站开发的业务逻辑等内容。课程面向小白或初阶学员，后续会有进阶内容。
2.AI网站开发
2.1技术实操
课程强调在开发过程中学会排查问题，以及如何低成本地将项目实现。例如，在选择模型时，根据不同任务选择性价比最高的模型，如简单调整边框可用sonnet，规划项目可用plan，执行任务可用sonnet等，以降低成本。
2.2模型服务接入
接入图片生成服务和算运势服务。图片生成和文案生成并非写死，而是调用大模型返回结果；算运势功能通过智能体实现多轮对话，需要接入智能体服务。
3.知识点讲解
3.1产品架构
理解数据、服务、形态的关联。业务自己的数据如用户身份、表单数据等存储在自身数据库，非业务数据如AI生成的图片、文本等通过服务层调用第三方平台接口获取，服务层通过接口（API）串联各部分。
3.2接口API
学习接入第三方平台服务。以阿里云百炼为例，讲解如何获取API密钥，通过接口调用模型服务和智能体服务，实现与第三方平台的数据交互。
4.课程实操
4.1项目演示
将图片生成和算运势功能整合到一个网页中，实现了写贺词、算运势、生成图片等功能。展示了如何通过对话方式让agent将第三方服务接入系统，使系统能够获取除自身业务数据库外其他平台的信息。
4.2技术细节
包括密钥管理，需将密钥保存在服务器（如Supabase）的secrets中，确保安全；通过查看网络环境（network）中的接口请求，检查接口调用是否成功；在Supabase中查看函数和密钥的使用情况等。
5.课后作业与指导
5.1作业布置一是让学员在自己的产品中接入AI能力，可选择接大模型接口或智能体服务；二是思考AI的玩法和用途；三是复刻自己喜欢的工具，在过程中学习接大模型、看环境变量和函数、调prompt等。
一是让学员在自己的产品中接入AI能力，可选择接大模型接口或智能体服务；
二是思考AI的玩法和用途；
三是复刻自己喜欢的工具，在过程中学习接大模型、看环境变量和函数、调prompt等。
5.2进阶学习
探索高级AI编程工具，如云舒老师提到的Trae、Cursor、Claude Code、Codex等，学习像程序员一样使用这些工具通过写代码实现产品。
二、老师观点、论据与事实拆解
✍️1.观点：AI技术可以使Web开发更加高效和低成本。a.论据：通过使用大模型语言和智能体服务，可以实现图片生成和算命网站的功能。b.事实：龙老师实操教学，通过调用阿里云百炼的大模型接口和智能体接口，快速搭建了整合图片生成、贺词撰写和算运势功能的网页，整个系统成本不到2000元，而传统外包或淘宝开发可能需要五六千甚至更高成本。2.观点：理解产品架构对于Web开发至关重要。a.论据：介绍了产品架构的三个要素：数据、服务、形态，并解释了它们如何通过服务串联起来。b.事实：课程中详细解释了业务数据（如用户信息）存储在自身数据库，非业务数据（如AI生成的内容）通过服务层调用第三方平台接口获取，帮助学员理解数据流转和服务整合的架构关系。3.观点：AI编程不仅仅是写代码，而是要理解如何与AI协作。a.论据：AI编程不是标准化的教程式学习，需要在大量实践中积累与AI协作的经验，根据具体需求选择合适的工具和模型。
1.观点：AI技术可以使Web开发更加高效和低成本。a.论据：通过使用大模型语言和智能体服务，可以实现图片生成和算命网站的功能。b.事实：龙老师实操教学，通过调用阿里云百炼的大模型接口和智能体接口，快速搭建了整合图片生成、贺词撰写和算运势功能的网页，整个系统成本不到2000元，而传统外包或淘宝开发可能需要五六千甚至更高成本。
a.论据：通过使用大模型语言和智能体服务，可以实现图片生成和算命网站的功能。
b.事实：龙老师实操教学，通过调用阿里云百炼的大模型接口和智能体接口，快速搭建了整合图片生成、贺词撰写和算运势功能的网页，整个系统成本不到2000元，而传统外包或淘宝开发可能需要五六千甚至更高成本。
2.观点：理解产品架构对于Web开发至关重要。a.论据：介绍了产品架构的三个要素：数据、服务、形态，并解释了它们如何通过服务串联起来。b.事实：课程中详细解释了业务数据（如用户信息）存储在自身数据库，非业务数据（如AI生成的内容）通过服务层调用第三方平台接口获取，帮助学员理解数据流转和服务整合的架构关系。
a.论据：介绍了产品架构的三个要素：数据、服务、形态，并解释了它们如何通过服务串联起来。
b.事实：课程中详细解释了业务数据（如用户信息）存储在自身数据库，非业务数据（如AI生成的内容）通过服务层调用第三方平台接口获取，帮助学员理解数据流转和服务整合的架构关系。
3.观点：AI编程不仅仅是写代码，而是要理解如何与AI协作。a.论据：AI编程不是标准化的教程式学习，需要在大量实践中积累与AI协作的经验，根据具体需求选择合适的工具和模型。
a.论据：AI编程不是标准化的教程式学习，需要在大量实践中积累与AI协作的经验，根据具体需求选择合适的工具和模型。
b.事实：云舒老师分享了自己使用Cursor、Claude Code、Codex等工具的经验，强调要通过大量上手实践，体验不同工具的特点，学会与AI协作解决开发中的问题，如遇到安装环境问题时可借助ChatGPT排查错误。
三、行动指南与建议
🔗1.学习实践AI在Web开发应用深入学习AI技术在Web开发中的具体应用，了解大模型接口、智能体服务的调用方式，掌握如何将AI能力融入Web项目，实现如图片生成、智能对话等功能。2.掌握产品架构与API接入理解产品架构的三要素（数据、服务、形态）及其关联关系，重点学习API接口的接入方法，包括获取密钥、调用接口、处理返回数据等流程，能够将第三方平台的服务整合到自己的Web项目中。3.注重实践提高协作效率积极动手实践，通过实际项目（如课程作业）锻炼自己的开发能力，在实践中学会与AI工具协作，提高开发效率。遇到问题时，先尝试借助AI工具解决，如将错误信息发给deepseek分析，再向他人请教。
1.学习实践AI在Web开发应用
深入学习AI技术在Web开发中的具体应用，了解大模型接口、智能体服务的调用方式，掌握如何将AI能力融入Web项目，实现如图片生成、智能对话等功能。
2.掌握产品架构与API接入
理解产品架构的三要素（数据、服务、形态）及其关联关系，重点学习API接口的接入方法，包括获取密钥、调用接口、处理返回数据等流程，能够将第三方平台的服务整合到自己的Web项目中。
3.注重实践提高协作效率
积极动手实践，通过实际项目（如课程作业）锻炼自己的开发能力，在实践中学会与AI工具协作，提高开发效率。遇到问题时，先尝试借助AI工具解决，如将错误信息发给deepseek分析，再向他人请教。
4.完成作业接入AI能力
按时完成课后作业，尝试在自己的产品中接入AI能力，熟悉AI模型和智能体服务的使用，积累实战经验。同时，认真阅读课程文档，了解作业细节和要求。
5.探索合适AI编程工具
根据自身情况和需求，探索合适的AI编程工具，如Trae、Cursor、Claude Code、Codex等。新手可先从简单工具（如Trae国内版）入手，熟悉后再尝试更复杂的工具，逐步提升自己的编程能力。
6.参加后续课程深入学习
关注后续课程安排，参加云舒老师关于AI编程工具使用、从0开发产品、部署等内容的课程，进一步深入学习AI编程知识和技能。
四、补充分析
🏆1.知识点：
1.知识点：
- •产品架构：产品由数据、服务、形态三要素构成，服务层串联各要素，业务数据存储在自身数据库，非业务数据通过调用第三方平台接口获取。
- •API接口：是网页与第三方平台进行数据交互的方式，通过接口地址和密钥实现对第三方服务的访问，如调用阿里云百炼的模型接口和智能体接口。
- •AI智能体服务：具备多轮对话能力，可集成MCP skills或插件，提高整体表现能力，将其API集成到网页中，可实现智能对话等复杂功能。
2.金句：
“全世界 90% 的系统都很简单。”
在复杂的技术面前，很多系统的核心需求和逻辑其实是简单的，关键在于如何高效地实现这些需求。
“AI编程最核心的就是说你首先你要去花100个小时把那个手感摸出来。”
实践在AI编程学习中的重要性，没有足够的实践就无法掌握AI编程。
“AI编程最核心的是思维方式，工具是不重要的，就是你不断用的过程中你会发现有的工具很适合你”
在AI编程中，思维方式是核心，工具只是实践中逐渐适配个人习惯的载体。
3.规律：
- •API扩展能力：通过接入不同的API接口，可扩展Web系统的功能，不仅限于AI服务，还可接入支付宝、天气服务等其他第三方服务。
- •明确架构关系：清晰理解产品架构中各要素的关系，有助于更好地进行数据整合和服务调用，构建稳定高效的Web系统。
- •实践协作AI：AI编程需要大量实践，在实践中学会与AI工具协作，根据需求选择合适的工具和模型，提高开发效率和质量。
五、作业说明：
📌（一）基础作业让产品 “活” 过来：体验 API 的魅力，在 Vibe Coding 模式下，通过简单的 Prompt 让 Agent “调用第三方” ，让产品具备智能交互能力。《我的第一个 AI Native 功能》场景选择（三选一，丰俭由人）：•场景 A（延续）：延续 EP1 或 EP2 的作业，在你的 MVP 产品里尝试接入 AI 能力。•场景 B（创新）：设想一个专门为了 AI 的应用并落地。
（一）基础作业
让产品 “活” 过来：
体验 API 的魅力，在 Vibe Coding 模式下，通过简单的 Prompt 让 Agent “调用第三方” ，让产品具备智能交互能力。
《我的第一个 AI Native 功能》场景选择（三选一，丰俭由人）：
- •场景 A（延续）：延续 EP1 或 EP2 的作业，在你的 MVP 产品里尝试接入 AI 能力。
- •场景 B（创新）：设想一个专门为了 AI 的应用并落地。
- •场景 C（复刻）：找一个你心仪很久的 AI 小工具，复刻它。
模型接入：
- •通过 Vibe Coding 接入任意一个主流大模型 API（DeepSeek、豆包、GLM、Gemini、Claude...）。
关键：
- •学会处理 API Key（环境变量配置）和 Edge Function（函数调用）。
Prompt 调优：
- •编写 System Prompt（系统提示词），规定 AI 的角色（如：“你是一个严格的财务审批员” 或 “你是一个幽默风趣的 Chris 替身”）。
✍️（二）进阶作业让产品有更多的可能性：跳出单纯的 “对话”，让产品具备 “业务执行力”。学会让你的网站去指挥其他软件干活。《自动化：让系统替我打工》需求场景（三选一）：解决一个需要跨平台协作的痛点•场景 A（工具流）：延续 EP1 或 EP2 的作业，在其中接入你需要的第三方平台服务，例如：在你的个人主页显示你所在城市的实时天气和心情指数。•场景 B（通知流）：当有新的 Credits 申请或新留言时，不仅存入数据库，同时触发飞书 / 钉钉 / Telegram 机器人，给你的手机发一条通知。
（二）进阶作业
让产品有更多的可能性：跳出单纯的 “对话”，让产品具备 “业务执行力”。
学会让你的网站去指挥其他软件干活。
《自动化：让系统替我打工》需求场景（三选一）：解决一个需要跨平台协作的痛点
- •场景 A（工具流）：延续 EP1 或 EP2 的作业，在其中接入你需要的第三方平台服务，例如：在你的个人主页显示你所在城市的实时天气和心情指数。
- •场景 B（通知流）：当有新的 Credits 申请或新留言时，不仅存入数据库，同时触发飞书 / 钉钉 / Telegram 机器人，给你的手机发一条通知。
- •场景 C（工作流）：接入 Coze / Dify 等 Agent 编排平台的 API，例如：用户输入一个主题，你的网站调用 Coze 的工作流生成一张海报，并返回图片展示在页面上。
立即报名25%
立即报名
作业提交25%
作业提交
志愿者申请25%
志愿者申请
作业投稿26%
作业投稿
是把你自己写得特别好的文章，笔记向社区投稿，优秀笔记选中后是作为优秀学员的加分项
学员须知（小白基础答疑手册）
作业提交步骤指导：☎️AI训练营 - 学员须知（持续更新）
VibeCoding主文档：第四期：Vibe Coding实战训练营
AI训练营数据中心（含证书获取、找搭子）：🌈AI训练营第1课：第1课：大势不可逆，得势者必胜第2课：第2课：从 Website 开始构建一款应用产品第3课：第3课：与时俱进做出你的第一款 AI 应用第4课：第4课：AI编程下一站，走入代码的世界第5课:第5课：和Al一起vibe coding做产品第6课：第6课：把产品交付到真实世界——上线与发布第7课:第7课：一个工具产品是怎么做出来的第8课：第8课：Demo Day：AI开发完整流程复习课-你的数字化毕业展答疑汇总：Coding答疑汇总页面优秀笔记:优秀笔记分享自习室：自习室
此功能需登录或注册后使用
填了入学申请，才能拿到结业证书
正常我们提交作业，填这个表单即可，结业证书看入学申请与作业提交表单
有多个角色的志愿者，有时间有意愿的小伙伴可去申请
⚠️@版权归WaytoAGI及课程讲师所有，未经许可不得传播售卖。如有侵权将依法追究法律责任。
@版权归WaytoAGI及课程讲师所有，未经许可不得传播售卖。如有侵权将依法追究法律责任。