- 课程目录
- 课程介绍
-
在线阅读：开篇词｜前端在大模型时代的变革与机遇
既然前端工程师是最不墨守成规的一群人，那我们有什么理由对蓬勃发展的 AI 大模型技术如畏蛇蝎呢？
-
直播回放：如何成为AI时代的合格前端？
AI将改变前端开发的底层范式和程序员的核心技能逻辑。前端行业会存在但会发生变化，开发者需适应新的开发方式，比如“面向AI编程”。这次直播，我们邀请月影老师分享他对“如何成为AI时代的合格前端”的观点与实践。
-
01｜如何在前端调用文本大模型API
这一节课，我们先来了解如何通过调用API的方式来使用最基础的文本大模型。
-
02｜如何使用流式传输减少等待时间
接下来呢，我们来了解一下对于初级前端工程师来说稍微复杂一点的内容，那就是通过流式（streaming）的传输方式来使用大模型API。
-
03｜如何在前端调用图像大模型API
在这一节课里，我们主要来探讨一些我自己实践用过的、表现不错的图像大模型产品。
-
04｜如何在前端调用语音合成和视觉模型
在这节课里，我们就来体验一下火山引擎和月之暗面的服务，通过具体实践了解如何使用语音合成和视觉模型。
-
05｜如何用Coze快速构建AI应用智能体
今天这节课，我们就来聊聊智能体的基本概念，看看智能体对于AI应用意味着什么，掌握什么时候需要构建智能体，以及如何快速构建AI应用智能体。
-
加餐1｜如何用AI来为自己做专业的占星咨询
今天我们来讨论一个有趣的话题，如何让AI化身专业占星师，给自己一些职业发展建议。
-
06｜智能体应用实战：拍照记单词
这节课，我们就来通过一个实战的小应用“拍照记单词”，来具体实践一下如何基于大模型API开发Web应用。
-
07｜提示词工程（一）：三个技巧让大模型超常发挥
在这一节课里，我将为你系统地梳理一下书写提示词的常用技巧，帮助你更好地掌控大模型的能力。
-
08｜提示词工程（二）：如何使用元提示（Meta-Prompt）和动态提示词
今天这一节课，我们将讨论两个更高级的优化方法，它们是元提示（Meta-Prompt）和动态提示词。
-
09｜用户体验：如何解决流式传输与JSON结构化的矛盾
这节课，我们聚焦两个问题，如何在客户端和服务端动态解析JSON和实时处理数据流。
-
10｜深入细节：如何实现动态JSON解析
今天我们会深入学习一下JSONParser的实现原理，让你知其所以然，让你的程序设计基础更加扎实。
-
11｜工作流框架：Ling的设计思想与整体架构
这一节课里，我先来介绍一下这个框架的设计思想与整体架构。
-
12｜深度剖析（一）：Ling框架的底层实现
接下来两节课，我们就来深入Ling的实现细节，看看Ling框架里几个模块的具体设计，以及它们是如何协同工作的。
-
13｜深度剖析（二）：Ling框架的底层实现
这一节课我们继续讲解Ling框架非常核心的另外两个模块——Bot和Tube。
-
14｜项目实战：使用Ling框架重构拍照记单词
这节课，我们会用Ling框架将第6节课实现的拍照记单词应用重构一遍。
-
加餐2｜如何用Coze实现一个完整的图片合成AI应用
最近有很多产品和前端同学向我提问，想要学习如何快速搭建一个完整的AI应用，所以我也把这个内容写个加餐，帮助你快速上手。
-
加餐3｜如何使用Coze工作流封装API
无论你是独立开发者，还是业余时间想要做点有趣的AI产品，都可以试试借助类似Coze的平台能力来实现低成本快速交付。
-
15｜实战项目概览：AI版“十万个为什么”
这章开始，我们来学习一个AI实际项目——波波熊学伴。 掌握了这一章的内容，相信你会对与 AI 应用产品的开发更加得心应手。
-
16｜如何实现好奇心问题改写和RAG
接下来，我们会聚焦波波熊学伴解决孩子好奇心问题的技术点，学习这些技术的具体实现方法。
-
17｜如何实现波波熊学伴核心工作流（一）
这节课，我们要继续深入，完成波波熊学伴产品整体的核心工作流。
-
18｜如何实现波波熊学伴核心工作流（二）
大纲的撰写最核心的是生成大纲的工作流节点和封面图的生成，码虽然看起来不少，但理解起来并不复杂。
-
19｜如何实现波波熊学伴核心工作流（三）
接下来我们继续深入，讨论如何实现内容的拆解以及文章的生成。
-
20｜如何实现插图和听书功能
我们希望波波熊学伴不只是文字，而且能够有一些图片和语音，甚至在将来，还能够在页面上多一些互动。
-
21｜如何实现语音输入
豆包、Kimi等很多AI应用都是可以输入语音转文字，甚至支持支持语音对话聊天的，而对于像波波熊学伴这样的儿童产品来说，语音输入格外重要，因为这是低龄孩子的主要输入方式。
-
加餐4｜如何用Coze实现听歌学古诗
在这一篇里，我们通过一个具体的实战例子，来了解如何运用音乐模型，实现听歌学古诗。
-
22｜项目概览：AI前端面试官
从这一节课开始，我们进入了一个新的单元，以一个典型的复杂流程多轮对话对话产品——AI前端面试官威力，通过拆解和实现它的主题流程，带你通过实战学习并领会如何开发这一类型的AI应用产品。
-
23｜多轮对话（一）：时间线与记忆
这节课，我们具体了解了时间线（Timeline）和记忆（Memory）的概念定义和数据结构，它们是后续实现核心工作流的重要对象。
-
24｜多轮对话（二）：API 读写分离设计
在这一节课里，我们将学习一个重要的 API 设计范式——读写分离设计。
-
25｜多轮对话（三）：人设、上下文和记忆
这节课呢，我们需要进一步实现面试官的人设（Role）和上下文（Context）。这是非常重要的一个环节，因为只有AI理解了人设和上下文信息，它才能按照我们的期望扮演好指定角色，完成工作。
-
26｜交互细节功能的丰富和功能优化
这一节课，我们来看看异步更新记忆的前端优化，以及添加语音输入功能，这些改进能够进一步优化面试体验。
-
27｜如何创建AI智能体管理笔记和收集信息（一）
这节课，我们先从将 AI 用于知识的获取和收集讲起，通过一个智能收藏助手的例子来看看 AI 能够如何帮助我们成长。
-
28｜如何创建AI智能体管理笔记和收集信息（二）
这即可我们继续实现智能收藏助手的其他功能，包括英文转写中文、整理智能笔记、笔记AI分析……
-
29｜如何用BunnyCDN结合Coze智能体管理静态资源
在AI时代，为了更好地解决保存资源文件到网上的需求，我们可以借助智能体帮我们完成内容的上传。
-
加餐5｜使用Coze自身的文件上传来存储和处理数据
Coze不仅提供了平台能力，它的插件还可以实现丰富的应用功能，你完全可以将它当作serverless服务来使用，基于插件和配套的 Cloud IDE 开发各种功能的API，然后再通过封装工作流实现调用。
-
30｜AI Coding：不可阻挡的“前端工业革命”
这一节课，我们要讨论另外一个话题，也是前端工程师，或者说几乎所有的程序员目前都关注和关心的一个话题——AI 辅助编程。
-
31｜Vibe Coding：使用Trae Builder开发实战项目（一）
我希望大家可以跟着我的思路，让我们一起来一场 Vibe Coding 之旅。
-
32｜Vibe Coding：使用Trae Builder开发实战项目（二）
这一节课，我们将在 AI 创建代码的基础上，具体深入到业务中，去迭代开发，从而实现我们想要的具体功能。
-
33｜如何私有化部署和应用本地大模型
很多公司出于数据安全合规方面的考量，都需要私有化部署大模型，这就需要我们具备模型部署能力，能自己在服务器上部署开源或者特定的大模型。
-
34｜如何私有化部署AI工作流平台
如果我要用大模型实现比较复杂的 AI 工作流，有没有配套的可以私有化部署的方案呢？
-
35｜如何让大模型使用工具完成工作？
不只是 Coze、Dify 这样的平台，我们自己同样可以为大模型指定工具。这节课我们就通过实战例子，来看如何给通过 Ollama 部署的千问模型配置和使用工具。
-
36｜如何使用MCP开发智能体工具
MCP 的目标是提供一个通用的协议，使得 LLM 可以动态地发现和调用外部工具，从而增强其功能和使用范围，今天我们就通过实战体会一下它的作用。
-
37｜如何构建并使用RAG技术（一）
这节课，我们主要介绍了 RAG 技术的原理和作用，以及实现 RAG 的几种可选方案。
-
38｜如何构建并使用RAG技术（二）
接下来我们将通过实战，把文档内容通过 SimpleRAG 写入到向量数据库，然后通过大模型进行对话
-
39｜Transformers.js：JavaScript的AI运行环境
这节课，我们通过一些实战例子来了解 Transformers.js 的常见用法。
-
结束语｜展望未来：后 AI 时代的前端开发将会是什么样？
对于各位前端从业者来说，我们在 AI 时代是有优势的，因为……
-
结课测试｜来赴一场满分之约！
为了帮你检验自己的学习成果，我特意准备了一套结课测试题，快来挑战吧！
课程介绍
限时福利 你将获得 手把手带你实现复杂 AI 项目 30 + 实例演练，打通前端 AI 开发全链路 多模态 & 多轮对话智能体案例深度拆解 面向前端的 AI 提效与发展指南 讲师介绍 月影（吴亮），前奇虎 360...限时福利
你将获得
- 手把手带你实现复杂 AI 项目
- 30 + 实例演练，打通前端 AI 开发全链路
- 多模态 & 多轮对话智能体案例深度拆解
- 面向前端的 AI 提效与发展指南
讲师介绍
月影（吴亮），前奇虎 360 奇舞团团长，拥有 20 年开发经验的资深前端专家，熟悉 JavaScript 相关的开发工作，著有《JavaScript 王者归来》。月影非常热爱写代码，一直在做一线项目开发，并坚持技术输出。近两年在大模型产品开发方面积累了比较丰富的实践经验。
课程介绍
AI 大模型的崛起，正掀起一场前所未有的生产力革命浪潮。如今，智能体作为 AI 应用的典型形态，已成为业界瞩目的焦点。如果把大模型比作坚实的地基，那么智能体便是矗立其上的巍峨大厦，它们的结合正在重塑整个应用开发的格局。
这场变革正逐步颠覆传统开发范式，重新定义应用产品的边界，对开发者而言，既是机遇也是挑战。为了助力大家在 AI 时代脱颖而出，我们有幸邀请到资深专家月影老师倾囊相授。他将基于自己近年来 AI 智能体开发的实战经验，带你一步步构建技术雷达，掌握 AI 开发的精髓，全方位提升 Agent 产品的设计、开发与调优能力，重塑个人能力栈。
如何在 AI 的浪潮中乘风破浪？这门课程为你精心设计了七大单元。
- 第一单元：深入剖析大模型在应用开发中的基础要点，包括各类大模型的 API 调用技巧、AI 智能体的构建方法。还会通过一个实战案例，让你快速掌握前端工程师迈向 AI 应用开发的关键一步。
- 第二单元：迈向进阶之路，聚焦于如何通过巧妙的提示词技巧、结构化数据处理，显著提升生成内容的品质。同时，借助动态 JSON 解析和 Ling 框架，攻克应用交互中的性能瓶颈，为用户带来更好的体验。
- 第三、四单元：开启实战挑战模式，带你攻克两个复杂且极具代表性的智能体项目。波波熊学伴项目，聚焦于高质量内容生成的复杂工作流编排难题；AI 面试官项目，直面多轮对话实现的复杂挑战。通过这两个项目，你将掌握绝大多数 AI 应用产品的核心开发技巧。
- 第五、六单元：分别聚焦于个人工具与企业级 AI 应用。一方面，教你整合各类 AI 工具，打造专属的个人效率提升利器；另一方面，深入探讨企业智能化转型技术与方案，掌握这一领域知识会在 AI 时代带来巨大竞争力。
- 第七单元：前瞻未来，带你探索 AI 相关 Web 标准、端侧 AI 技术，以及跨界跨语言的新技术趋势，让你站在行业前沿，洞察未来发展方向，提前布局。
课程代码仓库：https://github.com/akira-cn/frontend-dev-large-model-era
课程目录
适合人群
- 传统Web前端开发（建议有一定JS/TS基础）转向新的AI产品研发岗位。
- 独立开发者开发AI应用类产品。
- 为企业转型AI开发和落地解决方案。