AI AGENT APPLICATION DEVELOPMENT

AI 大前端
全栈架构师训练营

AI Agent 应用开发方向

从前端进阶，到 AI 全栈

不推倒重来，以已有前端经验为起点，把工程、框架与产品开发能力，升级为 AI Agent 时代的全栈交付能力。

AGENT FULL STACK

UI / UX SERVER DATA AI ENGINE

写给 3 年以上前端工程师

前端的下一步，
不是丢掉前端。

你已经积累了界面、交互、工程化与复杂业务经验。下一阶段，是把这些能力继续向服务端、AI Engine、架构与产品决策延伸。

01

产品界面经验

理解用户、交互与复杂应用，是把 Agent 做成可用产品的天然起点。

02

工程架构经验

组件化、状态、构建、性能与质量体系，可以直接迁移到 AI 应用工程。

03

全栈进阶空间

补齐服务端、数据、部署与 AI 能力，形成完整产品交付闭环。

01前端工程师已有起点

02全栈开发服务与数据

03Agent 产品智能与工程

04架构与 FDE 能力面向真实问题

项目实战全景 · PROJECT SPRINT

从前端到业务智能体，
一条完整的进阶破局链路。

围绕前端工程、全栈开发、Agent 开发、团队提效与业务智能体，形成连续的学习、进阶与冲刺方向。

01前端工程工程与框架

02全栈开发服务与数据

03Agent 开发智能与编排

04团队提效AI-Native 研发

05业务智能体场景与产品

01

组件库 AI 研发体系

组件元数据、Component MCP、语义检索与 Codex 代码生成。

02

监控 AI 化修复 Loop

根因诊断、修复建议与回归验证，形成智能运维闭环。

03

智能协同文档

实时协同、文档 Agent、RAG 与 Document MCP。

04

知识库 RAG 平台

文档解析、混合检索、重排、引用溯源与评估。

05

类 Codex · TUI

Agent Runtime、终端交互、仓库上下文与工具链。

06

类 Codex · Desktop

本地 Daemon、MCP / Skill 与多智能体工作台。

07

类 Codex · Web / H5

账号鉴权、SSE 流式交互、多模态消息与部署。

08

类 Codex · Mobile

React Native、远程任务、双向信令与插件化。

09

AI 应用引擎

工作流编排、LangGraph、RAG、MCP 与插件体系。

10

视频智能剪辑

自动分镜、TTS、剪辑智能体与 FFmpeg 多端处理。

11

AI 设计与应用生成

T2UI、D2C、Codex 与设计资产 MCP。

12

亿级协同智能表格

协同计算、公式引擎与 AI 表格分析。

规划中

13

Text2SQL BI

语义层、SQL 生成、安全校验与动态看板。

规划中

类 Codex 通用智能体平台多端应用

一套通用智能体平台，
面向四类多端应用。

共享 Agent Runtime、会话与记忆、工具系统、MCP / Skill、多智能体协作与安全边界。

01

$agent runplanning...

TUI 终端应用

Agent Runtime 运行时核心机制
CLI / TUI、会话与流式任务渲染
Repository Context 与核心工具链

02

Agent WorkspaceMac / Windows

Mac / Windows App

Electron 与 Local Daemon
本地 MCP、Skills 与记忆化同步
多智能体流程 GUI 与浏览器自动化

03

Web Agentstreaming...

Web / H5

统一账号鉴权与 Token 管理
Chatbot 与 SSE 流式渲染
多模态消息、ASR 与 DevOps 部署

04

Ask AgentiOS / Android

iOS / Android App

React Native 双端工程架构
Chatbot、多模态消息与 ASR
双向信令、远程任务与插件化

SHARED AGENT RUNTIME

模型接入 · 会话与记忆 · Context Engineering · Tool · MCP / Skill · Multi-Agent · Sandbox · Harness / Loop

项目实战体系

不是孤立案例，
而是一套从工程底座到产品交付的实战体系。

项目主题围绕 AI 研发基础设施、知识与协作、通用智能体、多模态与生成式产品四条主线展开。

01 · ENGINEERING

AI 研发与工程基础设施

组件库 AI 研发体系

监控 AI 化根因分析与修复 Loop 平台

02 · KNOWLEDGE

知识、内容与协作产品

智能协同编辑器类飞书文档

知识库 RAG 平台

03 · GENERAL AGENT

类 Codex 通用智能体多端应用

TUI · Mac / Windows · Web / H5

iOS / Android App

04 · GENERATIVE APP

工作流、多模态与生成式应用

AI 应用引擎 · 视频智能剪辑

Figma AI 设计与应用生成引擎

需求与方案评审项目架构设计核心引擎研发全栈服务与数据AI 能力集成验证、部署与发布

规划中

亿级协同智能表格 · Text2SQL BI 数据分析与可视化平台

本期课程全景图AI Agent 应用开发方向 · 点击查看高清图

类 Codex 通用智能体平台 · 项目详解

一个平台内核，四端产品形态，
完整研发执行闭环。

01SPEC需求定义

02PLAN任务拆解

03TASK执行追踪

04TOOL工程操作

05VERIFY校验反思

06LOOP迭代闭环

CONTEXT

代码理解与上下文

代码仓库扫描、索引与工作区初始化
Repository Context 结构化上下文提取
Memory 与 Context Engineering

TOOLS & SAFETY

工具系统与安全执行

File / Search / Patch / Shell / Git 工具链
Sandbox 权限管控与运行环境隔离
MCP、Skills 与本地能力接入

MULTI-AGENT

多智能体协作

角色分工、任务分发与协同调度
Git Worktree 多特性并行开发
执行流程 GUI 与状态、会话同步

DELIVERY

产品化与工程交付

登录鉴权、项目与会话管理
TUI、桌面、Web / H5、移动端构建
跨平台打包、分发与持续部署

项目家族

企业级类 Codex、Claude Code 通用智能体多端平台架构设计与实现：TUI 终端应用、Mac / Windows App、Web / H5、iOS / Android App。

项目实战矩阵

从产品形态、AI 核心能力，
到工程与交付。

每个项目从不同产品场景切入，共同覆盖 Agent 应用落地需要的关键工程能力。

项目方向AI 核心能力工程与交付

组件库 AI 研发Component MCP · 语义检索 · Codex 生成Monorepo · 文档 · 发布 · CI/CD

监控 AI 化 LoopMonitoring MCP · 根因诊断 · 修复回归SDK · Kafka · Clickhouse · Docker

智能协同文档文档 Agent · RAG · Document MCPYjs · NestJS · PostgreSQL · Tauri2

知识库 RAG混合检索 · Rerank · Query Rewrite · Evaluation权限 · 可观测 · React / NestJS 部署

类 Codex 多端平台Runtime · Tool · MCP / Skill · Multi-AgentTUI · Desktop · Web / H5 · Mobile

AI 应用引擎LangGraph · RAG · MCP · 工作流执行器微内核 · 插件 · Docker · CI/CD

视频智能剪辑自动分镜 · TTS · 剪辑智能体Electron · SQLite · FFmpeg · 多端分发

AI 设计与应用生成T2UI · D2C · Codex · HarnessFigma · JSON Schema · MCP Server · Desktop

“企业级项目”指采用企业常用技术栈及开发流程的教学模拟项目，不等同于商业生产环境使用的项目。

AI 项目详解 · 工程与知识产品

让 AI 能力进入组件、监控、
协作与知识系统。

DESIGN SYSTEM

企业级类 Mantine 组件库 AI 研发体系

Monorepo、工程化、组件库文档与发布
组件库 MCP 与 AI 设计系统
组件元数据、Component MCP Server、组件语义检索
Codex 组件选择与代码生成

React 18MCPCodex

OBSERVABILITY

监控 AI 化根因分析与修复 Loop 平台

埋点 SDK、数据上报、Kafka 与 Clickhouse
错误聚类、日志、Trace 与 Source Map 联合分析
Monitoring MCP 与 AI 根因诊断
自动生成修复建议与回归测试

React 19Vue 3NestJS

COLLABORATION

企业级智能协同编辑器类飞书文档

编辑器核心架构、插件化物料与实时协同
NestJS、PostgreSQL、Redis 与协同服务
知识、写作与协作 Agent，文档问答与 RAG
Document MCP 与 Skill、Tauri2 桌面构建

React 19YjsTiptap

KNOWLEDGE

企业级知识库 RAG 平台

文档解析、Chunk、Embedding 与增量索引
知识库权限、混合检索、Rerank 与 Query Rewrite
引用溯源与 RAG Evaluation
全链路可观测与部署

React 19LangChain.jsNestJS

AI 项目详解 · 工作流、多模态与生成

把 Agent 做成可编排、
可交互、可交付的完整应用。

WORKFLOW

企业级类扣子、Dify AI 应用引擎

LangChain.js、LangGraph.js、RAG 与 MCP
AI 工作流编辑器与执行器
插件化、微内核、日志与异常管理
Docker、Caddy 与 CI/CD 部署

Next.jsLangGraph.jsMCP

MULTIMODAL

企业级视频智能剪辑工具

Vibe Coding、Spec、Skills 与 MCP
自动分镜、LangGraph.js 剪辑智能体与 TTS
Electron、SQLite 与 FFmpeg 音视频处理
Windows、MacOS 多端构建打包分发

ElectronFFmpegLangChain.js

D2C / A2UI

企业级 Figma AI 设计与应用生成引擎

T2UI、D2C 与 Figma 设计资产导入
JSON Schema、Codex、Claude Code 与 Harness
设计资产 MCP 与 MCP Server
Windows、MacOS 多端应用构建分发

React 19LangGraph.jsNestJS

ROADMAP · 规划中

协同表格与 Text2SQL BI

Canvas Table、公式计算、协同服务与 AI 表格分析
语义层、Schema Linking 与 Text2SQL 生成
SQL 校验、权限、安全与多轮分析 Agent
BI Dashboard 动态生成与 Evaluation

规划中不计入确定交付

核心差异

不止开发 Agent，
更要把 Agent 做成完整产品。

04

Agent Intelligence

RAG · LangGraph · MCP · Multi-Agent · Harness / Loop

智能层

03

Server & Data

Node.js · NestJS · PostgreSQL · Redis · Docker

服务层

02

Product Engineering

需求 · 架构 · 测试 · 可观测 · 构建发布

产品层

01

Interface & Multi-platform

React · Vue · Web / H5 · Desktop · iOS / Android

应用层

主要职业标签 AI Agent 应用全栈工程师

课程能力可覆盖、匹配 Forward Deployed Engineer 的部分核心岗位职责，但不以 FDE 取代主要职业标签。

双体系交付

既有大前端底座，
也有本期 Agent 主线。

本期全新升级

LIVE + REC

AI Agent 应用开发体系

以直播推进新内容、项目拆解与技术迭代，配套录播完成复习与回看。

AI-Native 研发流程
TypeScript Agent 工程
Python AI 生态补齐
完整产品与多端交付

往期完整体系

RECORDED

大前端全栈进阶底座

往期内容已经转为完整录播，承接框架原理、工程架构、服务端与多端能力。

JavaScript / TypeScript 原理
React / Vue 源码与生态
工程化、性能与架构
Node.js、数据与多端开发

4—6个月学习周期

2—4次直播 / 周

2—3小时 / 次

直播＋录播新旧体系衔接

具体直播安排以实际开课通知为准。

本期新增 · 迭代 · 全新升级

不是增加几节 AI 课，
而是重组一条 Agent 产品主线。

NEW SYSTEM

全新独立成体系

AI-Native 软件研发变革与团队提效
TypeScript AI 大模型应用开发工程进阶
Python AI 大模型应用开发基础生态补齐
知识库 RAG 与通用智能体多端平台

DEEPEN

体系化深化升级

TypeScript / Node.js / NestJS 全栈底座
AI Agent、RAG 与 LangGraph.js
大前端多端开发
AI 项目简历与面试辅导

FOUNDATION

大前端底座延续

React 框架生态进阶与原理深入剖析
Vue 框架生态进阶与原理深入剖析

AI ITERATION

往期项目 AI 化迭代

组件库 AI 研发体系
监控 AI 根因分析与修复 Loop
智能协同编辑器
AI 应用引擎、智能剪辑与 D2C

ROADMAP · 规划中

亿级协同智能表格 · Text2SQL BI 数据分析与可视化平台

AI-Native 软件研发变革与团队提效

从“让 AI 写代码”，
到建立可验证的研发流程。

01PRD需求与边界

02SPEC技术规范

03ARCH架构设计

04TASK任务计划

05VERIFY自动验证

agent-workflow.ts

01Context Engineering控制上下文与输出边界

02AGENTS / Rules沉淀研发规范

03Skill + MCP封装并扩展能力

04Subagent拆分任务与权责

05Harness / Loop发现、执行、验证、记录、决策

06worktree多特性并行开发

AI 辅助全角色产品研发

CEO

商业研判与模式调研

CPO

用户与需求分析

CTO

全语言技术生态学习与架构

QA

测试用例、验证、打包与发布

TypeScript AI 大模型应用开发

从 Agent 基础，
走向可控、可扩展、可观测。

TYPESCRIPT AGENT
ENGINE 主栈贯穿

01

Agent Pattern

ReAct · Plan-and-Solve · Self-Reflection

02

RAG

Embedding · Retrieval · Agentic-RAG

03

LangGraph.js

State · Node · Edge · HITL · Supervisor

04

MCP / Skill / CLI

Client · Server · Transport · Tool discovery

05

Harness / Loop

护栏 · 流程 · 校验 · 安全边界 · 可观测

06

Multi-modal

VLM · OCR · ASR · TTS · FFmpeg

LangChain.jsLangGraph.jsZodDeepagentsMulti-Agent

TypeScript 主栈 · Python 生态补齐

前端经验继续向后延伸，
打通服务、数据与 AI Engine。

CLIENTReact 19Vue 3Next / NuxtMulti-platform

共享协议 · Zod · JSON Schema · SDK

SERVICENode.jsNestJSRESTWebSocket / SSE

Monorepo · 类型安全 · 工程约束

DATAPostgreSQLRedisQueueDocker

PYPython AI 生态补齐

Python 工程基础 · Pydantic · Pytest · FastAPI

本地模型 · PEFT / LoRA / QLoRA · Evaluation · 部署

FastAPI AI Engine 与 TypeScript 产品层协作

往期大前端全栈进阶 · 完整录播

AI 主线之下，
仍然有一套完整的大前端架构底座。

第1部分　开班典礼与学习导引第2部分　前端核心原理知识进阶第3部分　ECMAScript、Typescript 与编译原理详解第4部分　React 核心知识进阶与源码剖析第5部分　Vue 核心知识进阶与源码剖析第6部分　前端工程化设计第7部分　AI大前端全栈架构之性能专项优化第8部分　AI大前端全栈架构之微内核、微前端与服务端渲染第9部分　设计思想之设计模式、数据结构与算法第10部分　AI大前端全栈架构之服务端开发进阶第11部分　AI大前端全栈架构之多端开发进阶第12部分　AI 团队提效与 AI Agent 开发进阶第13部分　音视频基础与 FFmpeg 开发进阶第14部分　冲击中大厂——简历修改与面试辅导

点击查看往期课程高清全景图

LEARN · BUILD · DELIVER

从前端进阶，
成为 AI Agent 应用全栈工程师。

AI 大前端全栈架构师训练营AI Agent 应用开发方向

01专项督学持续跟进学习节奏

027×12 小时助教答疑覆盖日常学习问题

03简历与面试辅导聚焦 AI 项目表达

04长期职业规划结合能力与发展方向

核心价值不止开发 Agent，更要把 Agent 做成完整产品。

课程师资 · 官网讲师团

合一

前大厂前端高级技术专家

9 年前端开发经验 · 大前端、云表格 / 云文档与前端 + AI

溪风

某大厂前端高级技术专家

10 年前端领域经验 · 架构优化、自动化工程与商业智能

铭钥

某大厂前端技术专家

7 年前端开发经验 · 前端框架、图形学与数据可视化

行明

前阿里巴巴高级技术专家

现任某创业公司 CTO · 10 年+ AI 与软件融合架构经验

云涛

某大厂 AI 技术架构师

知名 AI 科技公司首席架构师 · 大模型架构与商业应用

晓璇

某大厂 AI 技术专家

大模型行业应用落地 · AI 与企业系统融合

AI 大前端全栈架构师训练营

前端的下一步，不是丢掉前端。

产品界面经验

工程架构经验

全栈进阶空间

从前端到业务智能体，一条完整的进阶破局链路。

组件库 AI 研发体系

监控 AI 化修复 Loop

智能协同文档

知识库 RAG 平台

类 Codex · TUI

类 Codex · Desktop

类 Codex · Web / H5

类 Codex · Mobile

AI 应用引擎

视频智能剪辑

AI 设计与应用生成

亿级协同智能表格

Text2SQL BI

一套通用智能体平台，面向四类多端应用。

TUI 终端应用

Mac / Windows App

Web / H5

iOS / Android App

不是孤立案例，而是一套从工程底座到产品交付的实战体系。

AI 研发与工程基础设施

知识、内容与协作产品

类 Codex 通用智能体多端应用

工作流、多模态与生成式应用

一个平台内核，四端产品形态，完整研发执行闭环。

代码理解与上下文

工具系统与安全执行

多智能体协作

产品化与工程交付

从产品形态、AI 核心能力，到工程与交付。

让 AI 能力进入组件、监控、协作与知识系统。

企业级类 Mantine 组件库 AI 研发体系

监控 AI 化根因分析与修复 Loop 平台

企业级智能协同编辑器类飞书文档

企业级知识库 RAG 平台

把 Agent 做成可编排、可交互、可交付的完整应用。

企业级类扣子、Dify AI 应用引擎

企业级视频智能剪辑工具

企业级 Figma AI 设计与应用生成引擎

协同表格与 Text2SQL BI

不止开发 Agent，更要把 Agent 做成完整产品。

Agent Intelligence

Server & Data

Product Engineering

Interface & Multi-platform

既有大前端底座，也有本期 Agent 主线。

AI Agent 应用开发体系

大前端全栈进阶底座

不是增加几节 AI 课，而是重组一条 Agent 产品主线。

全新独立成体系

体系化深化升级

大前端底座延续

往期项目 AI 化迭代

从“让 AI 写代码”，到建立可验证的研发流程。

AI 辅助全角色产品研发

从 Agent 基础，走向可控、可扩展、可观测。

Agent Pattern

RAG

LangGraph.js

MCP / Skill / CLI

Harness / Loop

Multi-modal

前端经验继续向后延伸，打通服务、数据与 AI Engine。

AI 主线之下，仍然有一套完整的大前端架构底座。

从前端进阶，成为 AI Agent 应用全栈工程师。

合一

溪风

铭钥

行明

云涛

晓璇

AI 大前端
全栈架构师训练营

前端的下一步，
不是丢掉前端。

从前端到业务智能体，
一条完整的进阶破局链路。

一套通用智能体平台，
面向四类多端应用。

不是孤立案例，
而是一套从工程底座到产品交付的实战体系。

一个平台内核，四端产品形态，
完整研发执行闭环。

从产品形态、AI 核心能力，
到工程与交付。

让 AI 能力进入组件、监控、
协作与知识系统。

把 Agent 做成可编排、
可交互、可交付的完整应用。

不止开发 Agent，
更要把 Agent 做成完整产品。

既有大前端底座，
也有本期 Agent 主线。

不是增加几节 AI 课，
而是重组一条 Agent 产品主线。

从“让 AI 写代码”，
到建立可验证的研发流程。

从 Agent 基础，
走向可控、可扩展、可观测。

前端经验继续向后延伸，
打通服务、数据与 AI Engine。

AI 主线之下，
仍然有一套完整的大前端架构底座。

从前端进阶，
成为 AI Agent 应用全栈工程师。