一、前端 AI 核心基础能力
1. 前端对接大模型全栈能力(必学)
学习内容:
- 主流大模型 API 对接(OpenAI / 通义千问 / 文心一言 / 豆包 API):接口调用、鉴权、流式输出、上下文对话、函数调用 Function Calling
- 前端 AI 对话页面完整实现:聊天界面、消息渲染、打字机效果、上下文记忆、多轮对话
- 前端模型代理网关:解决跨域、API 密钥安全、请求限流、日志监控
- 落地产出:自己写一个前端 AI 对话助手完整项目,包含流式输出 + 多轮对话 + 函数调用
2. 端侧 AI 前端技术
学习内容:
- TensorFlow.js、WebGPU、WebNN 前端模型推理原理
- 模型轻量化、前端本地部署小模型、端侧 AI 运行
- 前端 AI 能力封装 SDK、通用 AI 能力库建设
3. MCP & Agent Skills 前端落地
学习内容:
- MCP 协议(Model Context Protocol)原理、前端 MCP 客户端接入
- Agent Skills 技能机制、前端 Agent 编排、工具调用能力封装
- 前端 AI Agent 应用架构:思考→工具调用→执行→返回结果全流程
- 落地产出:基于 MCP 协议实现一个前端 AI Agentdemo,完成自定义 Skills 技能开发
二、AI + 前端全场景能力深度提升
1. 前端 AI 技术体系 & AI Coding 能力建设
学习内容:
- 前端 AI 技术规范制定:代码生成规范、AI 评审规范、模型接入规范、安全规范
- AI Coding 全流程落地:IDE 插件(VS Code)、AI 代码生成、AI 代码评审、AI 代码重构、AIbug 修复集成到现有开发流程
- 前端 AI 技术架构设计:分层架构、能力中台化、可复用 AI 能力模块
- 落地产出:输出一份《前端 AI 技术规范文档》+ 团队 AI Coding 接入流程方案
2. AI 前端开发工具链搭建
学习内容:
- AI 项目脚手架、AI 组件生成工具、AI 调试工具、AI 自动化测试工具
- AI 应用从开发→调试→测试→打包→部署完整 CI/CD 工具链
- MCP/Skills 在前端工程化里的集成落地方案
- 落地产出:搭建一套自己的AI 前端开发工具链脚手架
3. AI 赋能前端研发全流程
学习内容:
- AI 辅助编码落地实践、智能代码生成最佳实践
- AI 自动化测试:用 AI 生成测试用例、自动化 E2E 测试、单元测试
- AI 性能优化:AI 分析页面性能、自动优化打包体积、自动优化加载速度
- 落地产出:在自己项目里落地 AI 代码生成 + AI 自动化测试 + AI 性能优化完整实践
4. 卡片引擎 / 低代码 + AI 业务应用
学习内容:
- 卡片引擎原理、低代码平台架构、可视化编排
- AI + 卡片引擎:智能卡片生成、AI 业务流程编排、智能业务办理页面
- 卡片式智能交互、AI 可视化编排平台开发
- 落地产出:开发一个AI 低代码卡片引擎 demo,实现 AI 自动生成业务卡片、智能业务流程办理
5. 前沿技术跟踪 & 技术沉淀能力(对应职责 6)
学习内容:
- 每周跟踪前端 AI 行业趋势、大厂最佳实践(字节 / 阿里 / 腾讯前端 AI 技术博客)
- 技术调研文档输出、技术分享、团队技术演进方案沉淀
三 、重点优先级标注
🔥 最高优先级:前端大模型接入 + 流式输出 + MCP/Agent Skills + Vue3 工程化
⭐ 次高优先级:AI Coding 能力建设、卡片引擎低代码 AI 改造
📌 补充优先级:端侧 AI (TensorFlow.js)、前沿技术研究、技术规范体系